@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";html{scroll-behavior:smooth}body{font-size:16px;line-height:1.5rem}*{box-sizing:border-box;margin:0;padding:0;font-family:Montserrat,sans-serif;font-size:16px}ul{list-style-type:none}input,textarea,select{margin:10px 0;padding:5px;border:1px solid #000;border-radius:10px;background-color:#f4f4f4;text-align:center;width:100%}input:focus,textarea:focus,select:focus{outline:none}textarea{text-align:left}button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:1px solid #000;border-radius:10px;margin:10px 0;padding:7px}a{text-decoration:underline;color:#2c6fff}a:visited{color:#2c6fff}.global-pointer{cursor:pointer}.global-panel{margin:5px}.global-center,.global-fixed-container{align-items:center;text-align:center}.global-fixed-container{position:fixed;top:50%;left:50%;width:80%;transform:translate(-50%,-50%);z-index:999;padding:20px;max-width:500px;border:1px solid #000;border-radius:15px}.global-fixed-container input{width:90%}.global-green-button{background-color:#7ed957}.global-red-button{background-color:red;color:#fff}.global-blue-button{background-color:#88c7ff;color:#fff}.global-small-info{font-size:.6rem;line-height:.8rem}.color-picker{height:200px!important}.color-picker .selected-color{width:40px!important}.color-picker .hue{margin-bottom:-13px!important}.color-picker .alpha,.color-picker .type-policy,.color-picker .hex-text{visibility:hidden}@keyframes loadingAnim1{0%{transform:translate(-200%,-50%)}50%{transform:translate(100%,-50%)}to{transform:translate(-200%,-50%)}}@keyframes loadingAnim2{0%{transform:translate(100%,-50%)}50%{transform:translate(-200%,-50%)}to{transform:translate(100%,-50%)}}#loading{position:fixed;inset:0;z-index:9999;background-color:#c7c7c7a2}#loading div{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#processing1{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:50px;animation:loadingAnim1 2s linear infinite normal;color:#fff45f}@media only screen and (min-width: 600px){#processing1{font-size:80px}}#processing2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:50px;animation:loadingAnim2 2s linear infinite normal;color:#afffa8}@media only screen and (min-width: 600px){#processing2{font-size:80px}}

/* ── Tryb TV — czarne tło, mniej olśniewające kolory tekstu ── */
html, body { background: #000 !important; color: #eee8d5 !important; }
body * { background-color: transparent; }
/* Główny kontener listy kafelków */
app-root, .global-panel, [class*="container"], main, section { background: transparent !important; }
/* Inputy/przyciski (panel admin) — żeby były widoczne na ciemnym tle */
input, textarea, select { background-color: #1a1a1a !important; color: #eee8d5 !important; border-color: #444 !important; }
/* Loading overlay — przezroczyste czarne zamiast jasnoszarego */
#loading { background-color: #000000c0 !important; }

/* ── Font — Inter, świetny pod TV/24/7 ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');
* { font-family: 'Inter', system-ui, sans-serif !important; letter-spacing: -0.01em; }
/* Same liczby — większy waga + light tabular numbers (każda cyfra ta sama szerokość) */
[class*="counter"] *, .counter, b, strong { font-feature-settings: 'tnum' 1; font-weight: 800 !important; }

/* ── Większy oddech wokół zawartości kafelków ── */
[class*="counter"], .global-panel > div, app-root > div > div {
    padding: 40px !important;
    box-sizing: border-box;
}

/* ── TV-view: oddech od krawędzi + środek kafelków ── */
app-root > div > div, .global-panel > div, body > app-root [style*="background-color"] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 60px !important;
    box-sizing: border-box !important;
}
app-root p {
    text-align: center !important;
    margin: 0 !important;
}

/* ── TV-view layout: oddech od krawędzi + środek kafelków ── */
.status-list > div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 60px !important;
    box-sizing: border-box !important;
}
.status-list > div > p {
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
}
/* Pierwszy paragraf (nazwa) — u góry; drugi (liczba) — wyrównany do dołu */
.status-list > div > p:first-child { align-self: flex-start; }
.status-list > div > p:last-child  { align-self: flex-end; }

/* ── Override: wycentruj liczbę pionowo, ogranicz line-height ── */
.status-list > div {
    justify-content: center !important;
    gap: 80px;
    overflow: hidden;
}
.status-list > div > p {
    line-height: 1 !important;     /* line-height = font-size, bez extra przestrzeni */
    align-self: center !important; /* anuluj flex-start/flex-end z poprzedniego CSSa */
}