html, body { height:100%; }
body { background: radial-gradient(1200px 600px at 70% 20%, rgba(255,255,255,0.08), transparent 60%),
                 linear-gradient(135deg, #0b2b57, #0a3a7a 45%, #0b2b57); color: #eaf2ff; }

a { color: #b9d6ff; }
a:hover { color: #ffffff; }

.navbar { backdrop-filter: blur(8px); background: rgba(10, 28, 58, 0.6) !important; border-bottom: 1px solid rgba(255,255,255,0.08); }
.card { border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.06); color: #eaf2ff; }
.card .text-muted { color: rgba(234,242,255,0.75) !important; }

.progress { height: 10px; background: rgba(255,255,255,0.14); }
.progress-bar { background: linear-gradient(90deg, #2a77ff, #52c6ff); }

.hero { padding: 2.5rem 0 1.5rem; }
.hero img { max-height: 110px; }
.badge-soft { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); color: #eaf2ff; }

.footer { opacity: .75; font-size: .9rem; padding: 2rem 0; }

/* Dashboard tiles */
.tile-badge{
  width:42px; height:42px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 700;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  color: #eaf2ff;
}