/* Publiczna strona statusu: ten sam system co ALUK Panel (panel.css), wąska kolumna jak strony statusu SaaS. */
.strona-statusu { background: var(--g25); min-height: 100dvh; display: flex; flex-direction: column; }
.status-kontener { width: min(800px, 100% - 32px); margin: 0 auto; }
.status-gora { background: var(--g0); border-bottom: 1px solid var(--g200); }
.status-gora .status-kontener { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.status-logo img { display: block; height: 22px; width: auto; }
.status-tresc { padding: 40px 0 48px; display: grid; gap: 16px; flex: 1; align-content: start; }
.status-naglowek { display: grid; gap: 4px; margin-bottom: 8px; }
.status-naglowek h1 { font-size: 24px; line-height: 32px; }
.status-stan { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 8px; border: 1px solid var(--ok-linia); background: var(--ok-bg); }
.status-stan .kropka { width: 12px; height: 12px; flex-basis: 12px; }
.status-stan div { flex: 1; min-width: 0; }
.status-stan h2 { font-size: 16px; line-height: 24px; }
.status-stan p { font-size: 13px; color: var(--g600); }
.status-stan.blad { border-color: var(--blad-linia); background: var(--blad-bg); }
.status-stan.serwis { border-color: var(--a-linia); background: var(--a-bg); }
.status-sprawdzono { font-size: 12px; color: var(--g500); white-space: nowrap; }
.strona-statusu .karta { background: var(--g0); }
.lista-statusu { list-style: none; margin: 0; padding: 0; }
.lista-statusu li { display: grid; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--g100); }
.lista-statusu li:last-child { border-bottom: 0; }
.monitor-wiersz { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.monitor-nazwa { font-weight: 500; flex: 1; min-width: 10rem; }
.monitor-u { font-size: 13px; color: var(--g600); font-variant-numeric: tabular-nums; }
.status-legenda { margin-top: -4px; justify-content: flex-end; }
.status-odswiezanie { text-align: center; }
.status-stopka { border-top: 1px solid var(--g200); background: var(--g0); font-size: 12px; color: var(--g500); }
.status-stopka .status-kontener { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 16px 0; }
.status-stopka a { color: var(--g500); }
@media (max-width: 560px) { .status-stan { flex-wrap: wrap; } .status-sprawdzono { width: 100%; padding-left: 26px; } .status-legenda { justify-content: flex-start; } }