:root{
  --bg0:#0E1218; --bg1:#121820; --bg2:#121820;
  --text:#E7EDF3; --muted:#9AA8B4; --error:#EF4444;
  --accent:#15A7C9; --accent-700:#0E8AA7;
  --card:#151C25; --glass:rgba(255,255,255,0.03); --outline:#1F2A37;
  --grid:#223041; --border:#223147;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 10% -10%, #0B3B7E11, transparent),
             radial-gradient(900px 500px at 90% -10%, #1976D211, transparent),
             linear-gradient(180deg, var(--bg1), var(--bg2));
  color:var(--text); font-family:'Inter',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.container{max-width:1200px;margin:0 auto;padding:24px}
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border);
  background:#0F151C}
.nav .brand{display:flex;align-items:center;font-weight:800;letter-spacing:.2px;color:#E7EDF3}
.nav .brand img{height:28px;width:auto;margin-right:8px;border-radius:6px;box-shadow:0 0 24px #1976D249}
.nav .container{display:flex;justify-content:space-between;align-items:center}
.nav .nav-links{display:flex;gap:12px;align-items:center}
.nav .link{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:8px;border:1px solid transparent}
.nav .link:hover{border-color:#2B3D55;background:rgba(255,255,255,0.04);color:var(--accent)}
.btn{padding:10px 16px;border-radius:999px;border:1px solid #0f2b35;background:var(--accent);color:#061015;font-weight:700;cursor:pointer;text-decoration:none}
.btn-ghost{padding:8px 14px;border-radius:999px;border:1px solid #2B3D55;color:var(--text);text-decoration:none;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,0.04)}
.card{background:linear-gradient(180deg, var(--glass), transparent), var(--card);
  padding:16px;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
  border:1px solid var(--outline);display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:6px;font-size:.95rem;color:var(--text)}
input, select{padding:12px;border-radius:10px;border:1px solid var(--border);background:#0B1220;color:var(--text)}
input:focus{outline:none;border-color:#2B6CB0;box-shadow:0 0 0 3px #1976D233}
button{padding:10px 14px;border-radius:999px;border:1px solid #2B6CB0;background:var(--primary);color:var(--primary-contrast);font-weight:700;cursor:pointer}
.muted{color:var(--muted);font-size:.92rem}
.error{background:#3b0c0c;border:1px solid #7f1d1d;color:#fecaca;padding:10px;border-radius:10px;margin-bottom:8px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
.stat{background:linear-gradient(180deg, var(--glass), transparent), var(--card);padding:16px;border-radius:14px;border:1px solid var(--outline)}
.stat .label{color:var(--muted);font-size:.9rem}
.stat .value{font-size:1.35rem;margin-top:8px;font-weight:700}

h1,h2,h3{font-family:'Poppins','Inter',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

/* Charts */
.chart-card{background:linear-gradient(180deg, var(--glass), transparent), var(--card);border:1px solid var(--outline);border-radius:14px;padding:12px}
canvas{width:100%!important; image-rendering: -webkit-optimize-contrast; image-rendering: optimizeQuality}

/* Badges & brand buttons */
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:.85rem;border:1px solid var(--outline);background:var(--glass);color:var(--text);text-decoration:none}
.badge-ok{border-color:#1f5130;background:#0f3d22;color:#b6f0c2}
.badge-action{border-color:#1a3d57;background:#0e2333;color:#9edaff}

.btn-garmin{padding:10px 16px;border-radius:999px;border:1px solid #004a75;background:#007cc3;color:white;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-garmin:hover{background:#0066a3}
.brand-garmin{color:#007cc3}