body { font: 15px/1.4 system-ui, sans-serif; margin: 2rem; max-width: 900px; }
h1 { font-size: 1.4rem; }
form { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.route input { font-size: 1.1rem; padding: .3rem; width: 100%; box-sizing: border-box; }
.ctl { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.btns { display: flex; gap: .5rem; }
button { padding: .4rem 1.2rem; font-size: 1rem; }
button:disabled { opacity: .5; cursor: default; }
#status { color: #444; min-height: 1.2em; }
.hint { font-size: .8rem; color: #888; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid #eee; }
.nowrap { white-space: nowrap; }
.price { font-weight: 600; white-space: nowrap; }
.badge { padding: .05rem .4rem; border-radius: .3rem; font-size: .8rem; color: #fff; }
.badge.avgas { background: #2b6cb0; }
.badge.mogas { background: #2f855a; }
#nofuel { color: #777; }
#err li { margin: .15rem 0; }
.tag { font-size: .72rem; padding: .03rem .35rem; border-radius: .3rem; white-space: nowrap; }
.tag.cached { background: #edf2f7; color: #555; }
.tag.live { background: #e6fffa; color: #276749; }
.tag.err { background: #fff5f5; color: #c53030; }
.tag.err.retry { background: #fffaf0; color: #b7791f; }
.tag.avail { background: #ebf8ff; color: #2c5282; }
.svc { font-size: .72rem; font-weight: 600; padding: .05rem .4rem; border-radius: .3rem; }
.svc.ss { background: #2f855a; color: #fff; }   /* self serve — the focus */
.svc.fs { background: #e2e8f0; color: #4a5568; } /* full service */