/* UK Fuel Page */
html.fuel-page{
--bg:#070d18;
--card:#0f1b2c;
--card-2:#13243a;
--text:#e8f0ff;
--muted:#9aaec8;
--line:#27405e;
--line-soft:#1a2d47;
--accent:#3d86ff;
--good:#5adc74;
}

html.fuel-page *{
box-sizing:border-box;
}

html.fuel-page body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
background:radial-gradient(circle at top right,#112a44,var(--bg) 52%);
color:var(--text);
}

html.fuel-page body.overlay-lock{
overflow:hidden;
}

html.fuel-page .wrap{
max-width:640px;
margin:0 auto;
padding:8px;
}

html.fuel-page .hidden{
display:none !important;
}

html.fuel-page .entry-overlay{
position:fixed;
inset:0;
z-index:9999;
background:rgba(5,10,18,0.92);
display:flex;
align-items:center;
justify-content:center;
padding:16px;
}

html.fuel-page .entry-overlay-content{
max-width:480px;
text-align:center;
display:grid;
gap:10px;
justify-items:center;
}

html.fuel-page .entry-overlay-message{
margin:0;
color:#d6e6ff;
font-weight:700;
line-height:1.35;
font-size:1rem;
}

html.fuel-page .entry-overlay-note{
margin:0;
color:#8fa8c9;
font-weight:700;
font-size:.9rem;
text-transform:lowercase;
}

html.fuel-page .entry-overlay-help{
margin:0;
color:#9eb8d9;
font-size:.82rem;
font-weight:600;
line-height:1.35;
max-width:440px;
}

html.fuel-page .entry-overlay-intro-help{
margin:2px 0 0;
color:#90a8c8;
font-size:.76rem;
font-weight:600;
line-height:1.35;
max-width:460px;
text-align:left;
padding-left:18px;
}

html.fuel-page .entry-overlay-intro-help li + li{
margin-top:2px;
}

html.fuel-page .entry-overlay .img-btn img{
width:min(72vw,280px);
}

html.fuel-page .topbar{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
flex-wrap:wrap;
margin-bottom:10px;
padding:2px 1px;
}

html.fuel-page .pill-group{
display:inline-flex;
gap:6px;
border:1px solid var(--line);
background:#0d1727;
border-radius:999px;
padding:4px;
}

html.fuel-page .pill{
border:1px solid transparent;
background:#1a273b;
color:#d9e6ff;
border-radius:999px;
padding:6px 10px;
font-weight:800;
font-size:.95rem;
line-height:1;
}

html.fuel-page .pill.active{
background:#2f74e7;
border-color:#5797ff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

html.fuel-page .ghost-pill{
border:1px solid var(--line);
background:#0d1727;
color:#e8f0ff;
border-radius:999px;
padding:6px 10px;
font-weight:800;
text-decoration:none;
font-size:.95rem;
}

html.fuel-page .img-btn{
border:0;
background:transparent;
padding:0;
cursor:pointer;
line-height:0;
}

html.fuel-page .img-btn img{
width:140px;
height:auto;
display:block;
}

html.fuel-page .footer-bar{
margin-top:12px;
padding:8px 0 2px;
display:flex;
justify-content:center;
}

html.fuel-page .hero{
background:var(--card);
border:1px solid var(--line);
border-radius:12px;
padding:8px;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:6px;
}

html.fuel-page .hero img{
width:min(420px,100%);
height:auto;
max-height:92px;
object-fit:contain;
object-position:left center;
border-radius:0;
display:block;
}

html.fuel-page .hero h1{
margin:0;
font-size:.98rem;
font-weight:900;
}

html.fuel-page .hero p{
margin:1px 0 0;
color:var(--muted);
font-size:.78rem;
}

html.fuel-page .grid{
display:grid;
gap:12px;
margin-top:12px;
}

html.fuel-page .avg-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

html.fuel-page .card{
background:var(--card);
border:1px solid var(--line);
border-radius:12px;
padding:0;
overflow:hidden;
}

html.fuel-page .card-spaced{
margin-top:12px;
}

html.fuel-page .card-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:8px;
border-bottom:1px solid var(--line-soft);
background:#0d1828;
}

html.fuel-page .label{
color:var(--muted);
font-size:.84rem;
}

html.fuel-page .value{
font-size:1.32rem;
font-weight:900;
margin-top:4px;
}

html.fuel-page .avg-item{
border:1px solid #2a4b73;
border-radius:14px;
background:#0c1930;
padding:10px 12px;
position:relative;
min-height:92px;
}

html.fuel-page .avg-item-title{
color:#a8bdd9;
font-size:1rem;
font-weight:600;
margin-bottom:4px;
}

html.fuel-page .avg-item-value{
display:flex;
align-items:baseline;
gap:6px;
font-size:1.65rem;
font-weight:900;
line-height:1;
}

html.fuel-page .avg-tri{
font-size:1.02rem;
line-height:1;
transform:translateY(-1px);
}

html.fuel-page .avg-tri-up{
color:#ff546a;
}

html.fuel-page .avg-tri-down{
color:#2fd08b;
}

html.fuel-page .avg-tri-flat{
color:#9ab3d4;
}

html.fuel-page .avg-click-me{
position:absolute;
right:8px;
bottom:8px;
border:1px solid #355076;
background:#12243a;
color:#cfe1ff;
border-radius:999px;
font-size:.64rem;
font-weight:800;
padding:3px 7px;
line-height:1;
cursor:pointer;
}

html.fuel-page .avg-click-me.is-open{
bottom:auto;
top:8px;
}

html.fuel-page .avg-sevenday-box{
margin-top:6px;
border:1px solid #2f4c74;
border-radius:8px;
background:#0f2035;
padding:5px 7px;
max-height:84px;
overflow-y:auto;
font-size:.72rem;
line-height:1.35;
}

html.fuel-page .avg-day-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
color:#c8dbf9;
padding:2px 0;
}

html.fuel-page .entry-postcode-wrap{
width:100%;
max-width:460px;
display:grid;
gap:6px;
justify-items:center;
}

html.fuel-page .entry-postcode-row{
width:100%;
display:flex;
gap:6px;
}

html.fuel-page .entry-postcode-input{
flex:1 1 auto;
border:1px solid #3a5578;
background:#0f1f33;
color:#eaf2ff;
border-radius:999px;
padding:8px 12px;
font-size:.86rem;
font-weight:700;
outline:none;
}

html.fuel-page .entry-postcode-input:focus{
border-color:#5f88be;
box-shadow:0 0 0 2px rgba(95,136,190,0.2);
}

html.fuel-page .entry-postcode-btn{
border:1px solid #42628a;
background:#163152;
color:#d8e7ff;
border-radius:999px;
padding:8px 12px;
font-size:.82rem;
font-weight:800;
cursor:pointer;
white-space:nowrap;
}

html.fuel-page .entry-postcode-feedback{
margin:0;
color:#9eb8d9;
font-size:.76rem;
font-weight:700;
min-height:16px;
text-align:center;
}

html.fuel-page .section-title{
margin:0;
font-size:1.25rem;
font-weight:900;
}

html.fuel-page .toolbar{
display:flex;
gap:8px;
flex-wrap:wrap;
align-items:center;
margin:0;
padding:7px 8px;
border-bottom:1px solid var(--line-soft);
}

html.fuel-page button,html.fuel-page select{
border:1px solid var(--line);
background:#152840;
color:var(--text);
border-radius:999px;
padding:7px 9px;
font-weight:800;
cursor:pointer;
}

html.fuel-page button.primary{
background:#2f74e7;
border-color:#5797ff;
}

html.fuel-page .muted{
color:var(--muted);
font-size:.8rem;
}

html.fuel-page .station-list{
display:grid;
gap:8px;
max-height:none;
overflow:visible;
padding:8px;
}

html.fuel-page .fuel-columns{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}

html.fuel-page .fuel-col{
border:1px solid #2a4b73;
border-radius:10px;
background:#0d1a2d;
padding:8px;
}

html.fuel-page .fuel-col h3{
margin:0 0 6px;
font-size:.9rem;
font-weight:900;
color:#cfe1ff;
}

html.fuel-page .mini-station{
border:1px solid #284467;
border-radius:9px;
padding:7px;
margin-bottom:6px;
background:#102235;
}

html.fuel-page .mini-station.freshness-warn{
border-color:#b97a27;
box-shadow:inset 0 0 0 1px rgba(240,164,58,0.25);
background:linear-gradient(120deg,#2d2010,#1f2335 60%,#12263a);
}

html.fuel-page .mini-station.freshness-stale{
border-color:#b64545;
box-shadow:inset 0 0 0 1px rgba(239,79,79,0.28);
background:linear-gradient(120deg,#31161d,#222036 60%,#13243a);
}

html.fuel-page .mini-station-btn{
width:100%;
text-align:left;
cursor:pointer;
}

html.fuel-page .mini-station:last-child{
margin-bottom:0;
}

html.fuel-page .mini-name{
font-weight:800;
font-size:.82rem;
line-height:1.2;
}

html.fuel-page .mini-meta{
color:var(--muted);
font-size:.75rem;
margin-top:2px;
}

html.fuel-page .mini-price{
font-weight:900;
font-size:.95rem;
margin-top:4px;
}

html.fuel-page .station{
background:linear-gradient(110deg,#102235,#0e1a2b);
border:1px solid #284467;
border-radius:10px;
padding:8px;
}

html.fuel-page .station-btn{
width:100%;
text-align:left;
cursor:pointer;
}

html.fuel-page .detail-scroll-wrap{
border-top:1px solid var(--line-soft);
padding:8px;
}

html.fuel-page .detail-scroll{
max-height:34vh;
overflow:auto;
display:grid;
gap:8px;
}

html.fuel-page .detail-empty{
color:var(--muted);
font-size:.78rem;
border:1px dashed #2a4466;
border-radius:10px;
padding:8px;
background:#0d192b;
}

html.fuel-page .detail-card{
border:2px solid #38d46f;
border-radius:18px;
background:linear-gradient(120deg,#102236,#123533 55%,#0f2439);
padding:10px;
color:#e6f0ff;
}

html.fuel-page .detail-card.freshness-warn{
border-color:#f0a43a;
background:linear-gradient(120deg,#2e1f0f,#2b2b1a 55%,#1d2a39);
}

html.fuel-page .detail-card.freshness-stale{
border-color:#ef4f4f;
background:linear-gradient(120deg,#34161c,#2e1f2e 55%,#1c283a);
}

html.fuel-page .detail-top-chip{
display:inline-block;
border:2px solid #38d46f;
border-radius:999px;
padding:3px 10px;
font-size:.82rem;
font-weight:900;
color:#74f09b;
margin-bottom:8px;
letter-spacing:.2px;
}

html.fuel-page .detail-card.freshness-warn .detail-top-chip{
border-color:#f0a43a;
color:#ffd18f;
}

html.fuel-page .detail-card.freshness-stale .detail-top-chip{
border-color:#ef4f4f;
color:#ffb0b0;
}

html.fuel-page .detail-head{
display:flex;
justify-content:space-between;
align-items:baseline;
gap:8px;
}

html.fuel-page .detail-name{
font-size:1.02rem;
font-weight:900;
line-height:1.2;
}

html.fuel-page .detail-best{
font-size:.96rem;
font-weight:900;
color:#eaf4ff;
white-space:nowrap;
}

html.fuel-page .detail-best-wrap{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:2px;
}

html.fuel-page .detail-miles{
color:#a8bfd9;
font-size:.82rem;
font-weight:700;
line-height:1;
}

html.fuel-page .detail-meta{
color:#a8bfd9;
font-size:.82rem;
margin-top:4px;
}

html.fuel-page .detail-meta-label{
color:#dce9ff;
font-weight:800;
}

html.fuel-page .amenity-chip-list{
display:inline-flex;
flex-wrap:wrap;
gap:4px;
margin-left:4px;
vertical-align:middle;
}

html.fuel-page .amenity-chip{
display:inline-flex;
align-items:center;
gap:4px;
border:1px solid #355076;
border-radius:999px;
padding:2px 7px;
font-size:.74rem;
color:#d5e6ff;
background:rgba(15,29,47,0.92);
line-height:1.2;
}

html.fuel-page .amenity-icon{
min-width:18px;
height:18px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:.62rem;
font-weight:900;
letter-spacing:.2px;
color:#e6f4ff;
background:#264868;
border:1px solid rgba(124,167,211,0.45);
}

html.fuel-page .amenity-icon-toilets{
background:#3e5f8a;
}

html.fuel-page .amenity-icon-car-wash{
background:#2f6e73;
}

html.fuel-page .amenity-icon-water{
background:#2f6887;
}

html.fuel-page .amenity-icon-adblue{
background:#3f5b87;
}

html.fuel-page .amenity-icon-air{
background:#5a5f7f;
}

html.fuel-page .amenity-icon-lpg{
background:#6b5385;
}

html.fuel-page .detail-freshness-warning{
font-weight:800;
color:#ffd7d7;
}

html.fuel-page .detail-card.freshness-warn .detail-freshness-warning{
color:#ffd79c;
}

html.fuel-page .detail-card.freshness-stale .detail-freshness-warning{
color:#ffc0c0;
}

html.fuel-page .detail-row{
margin-top:8px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
flex-wrap:wrap;
}

html.fuel-page .detail-tags{
display:flex;
gap:6px;
flex-wrap:wrap;
}

html.fuel-page .detail-tag{
border:1px solid #2f4f76;
border-radius:999px;
padding:4px 9px;
font-size:.78rem;
color:#d7e5ff;
background:rgba(13,26,45,0.95);
}

html.fuel-page .detail-actions{
display:flex;
justify-content:flex-start;
margin-top:8px;
gap:8px;
flex-wrap:wrap;
}

html.fuel-page .detail-btn{
border:1px solid #38d46f;
border-radius:999px;
background:rgba(16,34,54,0.9);
color:#7ff0a4;
padding:5px 10px;
font-size:.8rem;
font-weight:800;
cursor:pointer;
}

html.fuel-page .detail-card.freshness-warn .detail-btn{
border-color:#f0a43a;
color:#ffd79f;
}

html.fuel-page .detail-card.freshness-stale .detail-btn{
border-color:#ef4f4f;
color:#ffc2c2;
}

html.fuel-page .station.top-cheapest{
border-color:#55cf6f;
box-shadow:inset 0 0 0 1px rgba(85,207,111,0.45);
}

html.fuel-page .station-head{
display:flex;
justify-content:space-between;
gap:8px;
align-items:baseline;
}

html.fuel-page .station-name{
font-weight:900;
font-size:.9rem;
letter-spacing:.1px;
}

html.fuel-page .distance{
color:var(--muted);
font-size:.82rem;
white-space:nowrap;
font-weight:800;
}

html.fuel-page .line{
margin-top:4px;
font-size:.82rem;
}

html.fuel-page .chip{
display:inline-flex;
align-items:center;
gap:6px;
border-radius:999px;
padding:3px 7px;
font-size:.82rem;
font-weight:700;
border:1px solid #355076;
margin-right:6px;
margin-bottom:4px;
background:#112238;
}

html.fuel-page .petrol{
color:#7dd6ff;
}

html.fuel-page .diesel{
color:#ffe48d;
}

html.fuel-page .ok{
color:var(--good);
}

html.fuel-page .avg-wrap{
padding:8px;
}

html.fuel-page .toolbar label{
font-size:.78rem;
}

html.fuel-page .freshness-legend{
flex-basis:100%;
margin-top:2px;
color:#9fb4cf;
font-size:.74rem;
line-height:1.35;
}

html.fuel-page .freshness-pill{
display:inline-block;
border-radius:999px;
padding:2px 7px;
margin-right:4px;
margin-bottom:2px;
font-weight:800;
border:1px solid transparent;
}

html.fuel-page .freshness-pill.green{
color:#9ef3b7;
border-color:#38d46f;
background:rgba(56,212,111,0.15);
}

html.fuel-page .freshness-pill.orange{
color:#ffd89f;
border-color:#f0a43a;
background:rgba(240,164,58,0.15);
}

html.fuel-page .freshness-pill.red{
color:#ffbdbd;
border-color:#ef4f4f;
background:rgba(239,79,79,0.15);
}

html.fuel-page #radius{
min-width:88px;
}

@media (max-width:700px){
html.fuel-page .avg-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:480px){
html.fuel-page .wrap{
padding:6px;
}

html.fuel-page .topbar{
gap:5px;
}

html.fuel-page .pill,html.fuel-page .ghost-pill,html.fuel-page button,html.fuel-page select{
font-size:.82rem;
padding:6px 8px;
}

html.fuel-page .section-title{
font-size:.92rem;
}

html.fuel-page .avg-item-title{
font-size:.9rem;
}

html.fuel-page .avg-item-value{
font-size:1.4rem;
}
}

/* Privacy Page */
html.privacy-page{
--bg:#f6f8fb;
--card:#ffffff;
--text:#1f2937;
--muted:#4b5563;
--accent:#0b67ff;
--border:#dbe3ef;
}

/* Privacy Page */
@media (prefers-color-scheme:dark){
html.privacy-page{
--bg:#0b1220;
--card:#111827;
--text:#e5e7eb;
--muted:#cbd5e1;
--accent:#60a5fa;
--border:#334155;
}
}

/* Privacy Page */
html.privacy-page *{
box-sizing:border-box;
}

/* Privacy Page */
html.privacy-page body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
background:var(--bg);
color:var(--text);
}

/* Privacy Page */
html.privacy-page .wrap{
max-width:780px;
margin:0 auto;
padding:24px 16px 40px;
}

/* Privacy Page */
html.privacy-page .card{
background:var(--card);
border:1px solid var(--border);
border-radius:14px;
padding:20px;
}

/* Privacy Page */
html.privacy-page h1,/* Privacy Page */
html.privacy-page h2{
margin:0 0 10px;
}

/* Privacy Page */
html.privacy-page h1{
font-size:1.5rem;
}

/* Privacy Page */
html.privacy-page h2{
font-size:1rem;
margin-top:16px;
}

/* Privacy Page */
html.privacy-page p,/* Privacy Page */
html.privacy-page li{
color:var(--muted);
line-height:1.5;
}

/* Privacy Page */
html.privacy-page ul{
margin:8px 0 0;
padding-left:20px;
}

/* Privacy Page */
html.privacy-page a{
color:var(--accent);
text-decoration:none;
}

/* Privacy Page */
html.privacy-page a:hover{
text-decoration:underline;
}

/* Privacy Page */
html.privacy-page .stamp{
margin-top:16px;
font-size:0.92rem;
color:var(--muted);
}

