html, body { overflow: hidden; height: 100vh; width: 100vw; background: #0a1628; }

#bg { position: fixed; inset: 0; width: 100%; height: 100%;
      object-fit: cover; object-position: center; z-index: 0; }

.navbar { background: rgba(255,255,255,0.95) !important;
          backdrop-filter: blur(12px);
          position: fixed !important;
          top: 0; left: 0; right: 0; width: 100%; }

.glass-card { background: rgba(0,0,0,0.35);
              backdrop-filter: blur(8px) saturate(150%);
              -webkit-backdrop-filter: blur(8px) saturate(150%);
              border: 1px solid rgba(255,255,255,0.20);
              border-radius: 12px;
              box-shadow: 0 8px 32px rgba(0,0,0,0.25);
              padding: 14px 18px; }
.glass-card .lbl { font-size: 0.68rem; color: rgba(255,255,255,0.7);
                   text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.glass-card .val { font-size: 1.8rem; font-weight: 800; color: #fff;
                   line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }
.glass-card .val small { font-size: 0.85rem; color: rgba(255,255,255,0.55); }
.glass-card .sub { font-size: 0.72rem; color: rgba(255,255,255,0.55); margin-top: 3px; }
.glass-card-lg .val { font-size: 3.4rem; }

.gbar { height: 4px; background: rgba(255,255,255,0.2);
        border-radius: 2px; margin-top: 6px; overflow: hidden; }
.gbar-f { height: 100%; border-radius: 2px; }

.v-secco   { color: #4ade80 !important; }
.v-allerta { color: #fbbf24 !important; }
.v-piena   { color: #f87171 !important; }
.v-nd      { color: rgba(255,255,255,0.5) !important; }

.cards-bl { position: fixed; bottom: 20px; left: 20px;
            z-index: 10; display: flex; gap: 12px; align-items: flex-end; }
.cards-tr { position: fixed; top: 64px; right: 20px;
            z-index: 10; display: flex; gap: 12px; }

@media (max-width: 768px) {
  .cards-bl { bottom: 12px; left: 12px; gap: 8px; }
  .cards-tr { top: 60px; right: 12px; gap: 8px; }
  .glass-card { padding: 10px 14px; }
  .glass-card .val { font-size: 1.4rem; }
  .glass-card-lg .val { font-size: 2.2rem; }
  .glass-card .lbl { font-size: 0.6rem; }
}
@media (max-width: 480px) {
  .cards-bl { flex-direction: column; align-items: flex-start; }
  .glass-card-lg .val { font-size: 1.8rem; }
}