:root{--turkus:#009CB4;--magenta:#E6007E;--tlo:#0f1719;--tekst:#eef6f7;--szary:#8aa0a4}
@media (prefers-color-scheme: light){:root{--tlo:#f4f8f9;--tekst:#10202a;--szary:#5b6f74}}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--tlo);color:var(--tekst);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.srodek{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
h1{margin:0;font-size:22px;font-weight:600;letter-spacing:.3px;color:var(--szary)}
.opis,.status{margin:0;text-align:center;color:var(--szary);font-size:16px;max-width:30em}
.duzy{background:var(--turkus);color:#fff;border:0;border-radius:14px;padding:16px 22px;font-size:18px}
.kolo{width:220px;height:220px;border-radius:50%;border:0;background:var(--turkus);color:#fff;font-size:24px;
font-weight:600;box-shadow:0 10px 40px rgba(0,156,180,.35);transition:transform .15s,background .2s}
.kolo:active{transform:scale(.97)}.kolo.aktywny{background:var(--magenta);box-shadow:0 10px 40px rgba(230,0,126,.35)}
.kolo.mowi{animation:puls 1.2s ease-in-out infinite}@keyframes puls{50%{transform:scale(1.04)}}
.dziennik{width:100%;max-width:560px;max-height:32vh;overflow-y:auto;font-size:15px;line-height:1.4}
.dziennik p{margin:6px 0;padding:8px 10px;border-radius:10px;background:rgba(127,127,127,.12)}
.maly{background:none;border:0;color:var(--szary);font-size:14px;text-decoration:underline}
.pole{font-size:28px;letter-spacing:8px;text-align:center;width:220px;padding:12px;border-radius:12px;border:1px solid var(--szary);background:transparent;color:var(--tekst)}
a.link{display:inline-block;text-decoration:none;font-size:16px;padding:12px 18px}