main {
    margin: 2rem auto;
    width: 40rem;
    height: auto;
    background-color: #0087D3;
    border: solid #03498F;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center; 
    align-items: center;
    color: #FFFFFF;
    padding-bottom: 1rem;
}
main #inloggen {
    text-align: center;
}

.health-widget {
    position: fixed;
    left: 12px;
    bottom: 3rem;
    z-index: 999;
    font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    background: rgba(0,0,0,.6);
    color: #fff;
    padding: 10px 12px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    width: 300px;
}
.health-widget .row { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.health-widget .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.ok { background:#22c55e; }        /* groen */
.dot.warn { background:#f59e0b; }      /* oranje */
.dot.err { background:#ef4444; }       /* rood */
.dot.unk { background:#9ca3af; }       /* grijs */
.health-widget .label { min-width: 64px; opacity:.9; }
.health-widget .desc { opacity:.9; text-align: end; flex: auto;}
.health-widget .title { font-weight:600; margin-bottom:6px; opacity:.95; }