/* Fuel Tracker Styles */
:root { --primary: #0c6cf2; --secondary: #f0f4ff; --text: #0b1a33; --muted: #667085; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--text); background: #f8fafc; }
.hidden { display: none !important; }
.view { display: grid; place-items: center; min-height: 100vh; }
.login-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); width: min(480px, 96vw); }
.brand-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.brand-logo { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid #e2e8f0; }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
input, select { padding: 10px; border: 1px solid #d0d7e2; border-radius: 8px; font-size: 14px; }
button { padding: 10px 14px; border-radius: 8px; border: none; cursor: pointer; }
button.primary { background: var(--primary); color: white; }
button.secondary { background: var(--secondary); color: var(--text); }
.muted { color: var(--muted); font-size: 12px; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; background: white; border-bottom: 1px solid #e2e8f0; }
.brand { display: flex; align-items: center; gap: 12px; }
.nav { display: flex; flex-wrap: wrap; gap: 6px; }
.tablink { background: transparent; border: 1px solid #e2e8f0; }
.tablink.active { background: var(--secondary); }
.userbox { display: flex; align-items: center; gap: 8px; }
.content { padding: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: linear-gradient(180deg, rgba(12,108,242,0.06), #ffffff 40%); padding: 12px; border-radius: 12px; border: 1px solid #e2e8f0; }
.legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:#444; }
.legend-swatch { width:12px; height:12px; border-radius:2px; }
.snippets { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; margin-bottom:12px; }
.snippet { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:8px 10px; min-width:160px; display:flex; flex-direction:column; gap:4px; }
.snippet-title { font-size:12px; color:#64748b; }
.snippet-value { font-weight:700; font-size:18px; color:#0f172a; }
.spark { width:100%; height:32px; }
.charts-row { display:grid; grid-template-columns: repeat(4, minmax(280px, 1fr)); gap:12px; }
@media (max-width: 1024px) { .charts-row { grid-template-columns: 1fr; } }
canvas { width: 100%; height: 280px; display:block; }
.tooltip { position: fixed; background: #111; color: #fff; padding: 6px 8px; border-radius: 6px; font-size: 12px; pointer-events: none; box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
.thumb { width:28px; height:28px; object-fit: cover; border-radius:4px; border:1px solid #e2e8f0; }