:root{--bg-primary: #0a0f1d;--bg-secondary: #111827;--bg-tertiary: #1e293b;--bg-card: rgba(17, 24, 39, .85);--bg-glass: rgba(30, 41, 59, .7);--border-color: rgba(255, 255, 255, .08);--border-accent: rgba(245, 158, 11, .3);--text-main: #f8fafc;--text-muted: #94a3b8;--text-dim: #64748b;--fuel-petrol: #f97316;--fuel-xp95: #ec4899;--fuel-diesel: #3b82f6;--fuel-cng: #10b981;--fuel-ev: #8b5cf6;--accent-amber: #f59e0b;--accent-cyan: #06b6d4;--accent-emerald: #10b981;--accent-rose: #f43f5e;--accent-indigo: #6366f1;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--shadow-md: 0 8px 24px rgba(0, 0, 0, .5);--shadow-lg: 0 16px 36px rgba(0, 0, 0, .6);--shadow-glow: 0 0 20px rgba(245, 158, 11, .25);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 18px;--radius-xl: 24px;--font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", monospace}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-main);min-height:100vh;overflow-x:hidden;background-image:radial-gradient(at 10% 10%,rgba(245,158,11,.05) 0px,transparent 50%),radial-gradient(at 90% 90%,rgba(59,130,246,.06) 0px,transparent 50%),radial-gradient(at 50% 50%,rgba(16,185,129,.03) 0px,transparent 50%);background-attachment:fixed}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0f172a99}::-webkit-scrollbar-thumb{background:#94a3b833;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#f59e0b80}.glass-card{background:var(--bg-card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:all .2s ease}.glass-card:hover{border-color:#ffffff26}.glass-panel{background:#0f172abf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-lg)}.led-meter{font-family:var(--font-mono);font-weight:700;letter-spacing:.05em;color:#fbbf24;text-shadow:0 0 10px rgba(251,191,36,.5);background:#020617;padding:6px 12px;border-radius:var(--radius-sm);border:1px solid #1e293b;display:inline-flex;align-items:center}.led-meter-cyan{color:#38bdf8;text-shadow:0 0 10px rgba(56,189,248,.5)}.led-meter-green{color:#34d399;text-shadow:0 0 10px rgba(52,211,153,.5)}.btn-primary{background:linear-gradient(135deg,#f59e0b,#d97706);color:#0f172a;font-weight:700;padding:10px 18px;border-radius:var(--radius-md);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s ease;box-shadow:0 4px 14px #f59e0b59}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #f59e0b80}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:#ffffff12;color:var(--text-main);font-weight:600;padding:9px 16px;border-radius:var(--radius-md);border:1px solid var(--border-color);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s ease}.btn-secondary:hover{background:#ffffff1f;border-color:#fff3}.btn-action-green{background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-weight:700;padding:10px 18px;border-radius:var(--radius-md);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s;box-shadow:0 4px 14px #10b98159}.btn-action-green:hover{transform:translateY(-1px);box-shadow:0 6px 18px #10b98180}.btn-danger{background:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.3);font-weight:600;padding:8px 14px;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .2s}.btn-danger:hover{background:#ef444440;border-color:#ef4444}.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:9999px;font-size:.75rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}.badge-active{background:#10b98126;color:#34d399;border:1px solid rgba(16,185,129,.3)}.badge-warning{background:#f59e0b26;color:#fbbf24;border:1px solid rgba(245,158,11,.3)}.badge-alert{background:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.3)}.badge-blue{background:#3b82f626;color:#60a5fa;border:1px solid rgba(59,130,246,.3)}@keyframes pulseGlow{0%,to{box-shadow:0 0 10px #10b98199}50%{box-shadow:0 0 25px #10b981f2}}.dispensing-glow{animation:pulseGlow 1.4s infinite;border-color:#10b981!important}.tank-visual{position:relative;width:100%;height:140px;background:#0f172a;border-radius:14px;overflow:hidden;border:2px solid rgba(255,255,255,.1)}.tank-liquid{position:absolute;bottom:0;left:0;right:0;transition:height .8s cubic-bezier(.4,0,.2,1);background-size:200% 200%}.tank-liquid-ms{background:linear-gradient(180deg,#fb923c,#ea580c);box-shadow:0 -4px 15px #f9731666}.tank-liquid-xp95{background:linear-gradient(180deg,#f472b6,#db2777);box-shadow:0 -4px 15px #ec489966}.tank-liquid-hsd{background:linear-gradient(180deg,#60a5fa,#2563eb);box-shadow:0 -4px 15px #3b82f666}.tank-liquid-cng{background:linear-gradient(180deg,#34d399,#059669);box-shadow:0 -4px 15px #10b98166}input,select,textarea{background:#0f172ad9;border:1px solid rgba(255,255,255,.12);color:var(--text-main);padding:9px 13px;border-radius:var(--radius-sm);font-family:inherit;font-size:.92rem;transition:all .2s ease;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent-amber);box-shadow:0 0 0 2px #f59e0b33}.thermal-receipt{font-family:var(--font-mono);background:#fff;color:#111827;width:320px;margin:0 auto;padding:20px 16px;box-shadow:0 10px 25px #00000080;border-radius:4px;font-size:12px;line-height:1.45;border-top:4px dashed #64748b;border-bottom:4px dashed #64748b}@media print{body *{visibility:hidden}.printable-area,.printable-area *{visibility:visible}.printable-area{position:absolute;left:0;top:0;width:100%}}@keyframes tankWave{0%{transform:translate(0) scaleY(1)}50%{transform:translate(-25%) scaleY(1.04)}to{transform:translate(0) scaleY(1)}}@keyframes pulseGlow{0%,to{opacity:.8;filter:drop-shadow(0 0 6px rgba(16,185,129,.4))}50%{opacity:1;filter:drop-shadow(0 0 14px rgba(16,185,129,.8))}}.twin-canopy-card{perspective:1000px;position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(145deg,#0f172af2,#1e293bcc);border:1px solid rgba(255,255,255,.1)}.tank-capsule{position:relative;height:140px;border-radius:14px;background:#020617d9;border:2px solid rgba(255,255,255,.14);overflow:hidden;box-shadow:inset 0 0 24px #000000e6}.tank-fluid-layer{position:absolute;bottom:0;left:0;right:0;transition:height .8s cubic-bezier(.4,0,.2,1);overflow:hidden}.tank-fluid-wave{position:absolute;top:-10px;left:0;width:200%;height:20px;background:inherit;opacity:.6;border-radius:40%;animation:tankWave 4s infinite ease-in-out}