html, body { margin: 0; background: #F5F5F0; -webkit-text-size-adjust: 100%; }
.dia-layout { min-height: 100dvh; }
.dia-hero {
    background: linear-gradient(160deg, #0F172A 0%, #1E3A8A 60%, #3B82F6 100%);
    color: #fff;
    padding: calc(28px + env(safe-area-inset-top)) 20px 64px;
    text-align: center;
}
.dia-hero h1 {
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.9rem, 7vw, 2.6rem);
    line-height: 1.15;
    margin: 12px 0 8px;
}
.dia-hero p { margin: 0 auto; max-width: 30rem; opacity: .85; font-size: 1rem; line-height: 1.5; }
.dia-kartica { margin: -44px auto 24px; max-width: 560px; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); }
.dia-kartica .mud-paper { border-radius: 18px; }
.dia-barkod { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 12px; }
.dia-barkod svg { display: block; width: 100%; height: auto; }
.dia-podaci { font-size: .9rem; color: #334155; }


.dia-gumb { min-height: 52px; font-size: 1.05rem !important; border-radius: 12px !important; }
.dia-podnozje { text-align: center; color: #94A3B8; font-size: .75rem; padding: 0 16px 24px; }
.dia-panel .mud-expand-panel { border: 1px solid #E2E8F0; border-radius: 12px !important; }
.dia-st-naslov { color: #64748B; font-size: .72rem; }
.dia-st-vrijednost { font-family: "DM Mono", ui-monospace, monospace; font-size: .95rem; color: #0F172A; word-break: break-all; }
.dia-pregled { max-width: 1100px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 16px 24px; }
.dia-prijava { max-width: 420px; margin: 10vh auto 0; border-radius: 18px !important; }
.dia-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 700px) { .dia-kpi { grid-template-columns: repeat(2, 1fr); } }
.dia-kpi-k { border-left: 4px solid; padding: 10px 12px; border-radius: 8px !important; }
.dia-kpi-n { font-family: "DM Mono", ui-monospace, monospace; font-size: 1.4rem; font-weight: 600; color: #0F172A; }
.dia-kpi-l { font-size: .72rem; color: #64748B; }
.dia-tablica .mud-table-body { font-size: .75rem; }
.dia-tablica .mud-table-head th { font-size: .62rem; color: #64748B; font-weight: 600; }
.dia-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 600; }
.dia-badge.plava { background: #DBEAFE; color: #1D4ED8; }
.dia-badge.zelena { background: #D1FAE5; color: #047857; }
.dia-badge.crvena { background: #FEE2E2; color: #B91C1C; }
.dia-badge.siva { background: #F1F5F9; color: #475569; }