:root{--page-max: 1120px;--text: #e5eefb;--muted: #98a8c7;--border: rgba(148, 163, 184, .18);--surface: rgba(11, 18, 32, .76);--surface-soft: rgba(16, 24, 40, .62);--accent: #4f8cff;--accent-2: #18c29c;--accent-3: #ffb84d;--shadow: 0 22px 60px rgba(2, 6, 23, .28);--light-bg: #eef2f7;--light-surface: #ffffff;--light-surface-soft: #f8fafc;--light-border: rgba(148, 163, 184, .28);--light-text: #0f172a;--light-muted: #475569}.container{max-width:var(--page-max);margin:0 auto;padding:24px 16px 48px}.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px;color:var(--muted);font-size:14px}.breadcrumbs a{color:var(--accent);text-decoration:none;font-weight:600}.hero{position:relative;overflow:hidden;padding:30px;border-radius:24px;border:1px solid var(--border);background:radial-gradient(circle at top right,rgba(79,140,255,.24),transparent 34%),radial-gradient(circle at bottom left,rgba(24,194,156,.18),transparent 30%),linear-gradient(180deg,#111827f0,#0a101ee6);box-shadow:var(--shadow)}.hero-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:8px 12px;border-radius:999px;background:#4f8cff24;border:1px solid rgba(79,140,255,.22);color:#bfd3ff;font-size:13px;font-weight:700;letter-spacing:.02em}.hero h1{margin:0 0 14px;font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.08;color:#fff}.lede{max-width:860px;margin:0;color:var(--text);line-height:1.68;font-size:1.03rem}.lede-secondary{margin-top:10px;color:#c8d8f3}.section{margin-top:28px}.section-heading{margin-bottom:14px}.section-heading.compact{margin-bottom:12px}.section-heading h2{margin:0 0 6px;font-size:clamp(1.45rem,2.4vw,1.9rem);color:#fff}.section-note{margin:0;color:var(--muted);line-height:1.55}.card,.dashboard-callout{border:1px solid var(--border);border-radius:24px;background:linear-gradient(180deg,#0f172ae6,#0c1322d6);box-shadow:var(--shadow)}.card{padding:22px}.live-prices-card{padding:24px;background:radial-gradient(circle at top right,rgba(79,140,255,.12),transparent 34%),radial-gradient(circle at bottom left,rgba(24,194,156,.12),transparent 32%),linear-gradient(180deg,#0f172ae6,#0c1322d6)}.fuel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.fuel-card{padding:18px;min-height:176px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;border:1px solid rgba(148,163,184,.2);border-radius:18px;background:linear-gradient(180deg,#162038fa,#0d1423f7);box-shadow:0 16px 36px #02061738,inset 0 1px #ffffff0a;isolation:isolate}.fuel-card:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));opacity:.95}.fuel-card:after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff08}.loading-card{display:flex;align-items:center;justify-content:center;min-height:140px;color:var(--muted);grid-column:1 / -1}.fuel-topline{font-size:.98rem;font-weight:800;color:#fff}.fuel-price{font-size:2rem;font-weight:900;line-height:1.05;color:#fff}.fuel-price span{font-size:.95rem;font-weight:700;color:#c8d8f3}.fuel-station{font-weight:700;color:#dce8fb;line-height:1.45}.fuel-meta,.updated-line,.muted{color:var(--muted);line-height:1.45}.fuel-grid-error{grid-column:1 / -1}.unavailable{background:linear-gradient(180deg,#141b2ae0,#0d131fd1)}.unavailable-text{font-size:1.25rem;color:#d8e3f8}.updated-line{margin:14px 2px 0;font-size:.95rem}.dashboard-callout{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px;background:radial-gradient(circle at top left,rgba(255,184,77,.16),transparent 28%),radial-gradient(circle at bottom right,rgba(79,140,255,.18),transparent 32%),linear-gradient(180deg,#111827f5,#0b1220eb)}.callout-kicker{margin-bottom:6px;color:#ffd28c;font-size:.9rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}.dashboard-callout h2{margin:0 0 8px;color:#fff}.dashboard-callout p{margin:0;color:var(--text);line-height:1.6;max-width:700px}.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:800;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease}.button:hover{transform:translateY(-1px)}.button.primary{color:#08111f;background:linear-gradient(135deg,#ffd166,#ffb84d);box-shadow:0 12px 26px #ffb84d33}.chips{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:10px}.chip{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;text-decoration:none;color:#dce8fb;font-weight:700;border:1px solid rgba(79,140,255,.22);background:#4f8cff1a}.chip:hover{background:#4f8cff29}.faq-item+.faq-item{margin-top:18px;padding-top:18px;border-top:1px solid rgba(148,163,184,.12)}.faq-item h3{margin:0 0 8px;color:#fff;font-size:1.08rem}.faq-item p{margin:0;color:var(--text);line-height:1.65}.odh-footer{margin-top:34px;padding:22px 20px;border-radius:20px;border:1px solid var(--border);background:linear-gradient(180deg,#0c1322e0,#0a101cd6);text-align:center;box-shadow:var(--shadow)}.odh-brand{margin-bottom:10px;font-weight:700;color:#dce8fb}.odh-footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;color:var(--muted)}.odh-footer-links a{color:var(--accent);text-decoration:none;font-weight:600}.fuel-e10:before{background:linear-gradient(90deg,#45d483,#8ce99a)}.fuel-u91:before{background:linear-gradient(90deg,#4f8cff,#7db4ff)}.fuel-u95:before{background:linear-gradient(90deg,#8b5cf6,#b794f4)}.fuel-u98:before{background:linear-gradient(90deg,#f97316,#fdba74)}.fuel-dl:before{background:linear-gradient(90deg,#14b8a6,#5eead4)}.fuel-pdl:before{background:linear-gradient(90deg,#f59e0b,#fcd34d)}.fuel-lpg:before{background:linear-gradient(90deg,#ec4899,#f9a8d4)}@media(prefers-color-scheme:light){:global(body){background:var(--light-bg)}.breadcrumbs{color:var(--light-muted)}.breadcrumbs a{color:#2563eb}.hero{border-color:var(--light-border);background:radial-gradient(circle at top right,rgba(59,130,246,.16),transparent 34%),radial-gradient(circle at bottom left,rgba(16,185,129,.14),transparent 30%),linear-gradient(180deg,#13253f,#1f3254);box-shadow:0 16px 40px #0f172a1f}.hero-badge{background:#3b82f61f;border-color:#3b82f633;color:#dbeafe}.card,.dashboard-callout,.odh-footer{border-color:var(--light-border);box-shadow:0 14px 34px #0f172a14}.card{background:linear-gradient(180deg,#fff,#f8fafc)}.live-prices-card{background:radial-gradient(circle at top right,rgba(59,130,246,.08),transparent 34%),radial-gradient(circle at bottom left,rgba(16,185,129,.08),transparent 32%),linear-gradient(180deg,#fdfefe,#f3f6fa);border:1px solid var(--light-border)}.section-heading h2,.faq-item h3,.odh-brand{color:var(--light-text)}.section-note,.updated-line,.muted,.odh-footer-links{color:var(--light-muted)}.fuel-card,.live-prices-card .fuel-card,#live-summary .fuel-card{border:1px solid rgba(148,163,184,.28);background:linear-gradient(180deg,#fff,#f8fafc);box-shadow:0 10px 24px #0f172a14,inset 0 1px #ffffffe6}.fuel-card:after,.live-prices-card .fuel-card:after,#live-summary .fuel-card:after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffffb3}.fuel-card .fuel-topline,.live-prices-card .fuel-topline,#live-summary .fuel-topline,.fuel-card .fuel-price,.live-prices-card .fuel-price,#live-summary .fuel-price{color:var(--light-text)}.fuel-card .fuel-price span,.live-prices-card .fuel-price span,#live-summary .fuel-price span{color:#475569}.fuel-card .fuel-station,.live-prices-card .fuel-station,#live-summary .fuel-station{color:#1e293b}.fuel-card .fuel-meta,.live-prices-card .fuel-meta,#live-summary .fuel-meta,.loading-card{color:var(--light-muted)}.unavailable,.live-prices-card .unavailable{background:linear-gradient(180deg,#fff,#f8fafc)}.unavailable-text{color:var(--light-text)}.dashboard-callout{background:radial-gradient(circle at top left,rgba(245,158,11,.12),transparent 28%),radial-gradient(circle at bottom right,rgba(59,130,246,.1),transparent 32%),linear-gradient(180deg,#fff,#f8fafc)}.dashboard-callout h2{color:var(--light-text)}.dashboard-callout p{color:#334155}.callout-kicker{color:#b45309}.chip{color:var(--light-text);border-color:#3b82f62e;background:#3b82f614}.chip:hover{background:#3b82f624}.faq-item p{color:#334155}.faq-item+.faq-item{border-top-color:#94a3b82e}.odh-footer{background:linear-gradient(180deg,#fff,#f8fafc)}.odh-footer-links a{color:#2563eb}}@media(max-width:980px){.fuel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-callout{flex-direction:column;align-items:flex-start}}@media(max-width:640px){.container{padding:18px 12px 36px}.hero,.card,.dashboard-callout,.fuel-card,.odh-footer{padding:16px}.fuel-grid{grid-template-columns:1fr}.fuel-card{min-height:unset}.fuel-price{font-size:1.85rem}.odh-footer-links{line-height:1.7}}