:root {
  --tlo: #101418;
  --tekst: #eef1f4;
  --drugi: #9aa6b2;
  --akcent: #3fa7a0;
  --blad: #ef8a7a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--tlo); color: var(--tekst); font: 18px/1.4 system-ui, sans-serif; }
[hidden] { display: none !important; }
h1 { margin: 0 0 8px; font-size: 1.6em; }
button, .przycisk, input {
  display: block; width: 100%; min-height: 56px; padding: 12px; border-radius: 10px;
  font: inherit; text-align: center; text-decoration: none;
}
button, .przycisk { border: 2px solid var(--drugi); background: none; color: var(--tekst); cursor: pointer; }
input { border: 2px solid var(--drugi); background: #1b2127; color: var(--tekst); letter-spacing: .2em; text-transform: uppercase; }
input.haslo { letter-spacing: normal; text-transform: none; }
form { display: grid; gap: 12px; }
button:focus-visible, .przycisk:focus-visible, input:focus-visible { outline: 4px solid var(--akcent); outline-offset: 2px; }
button:disabled { opacity: .4; cursor: default; }
.glowny { background: var(--akcent); border-color: var(--akcent); color: #06201e; font-weight: 600; }
.blad { color: var(--blad); min-height: 1.4em; }
.drobny { color: var(--drugi); font-size: .85em; margin: 4px 0; overflow-wrap: anywhere; }
.status { color: var(--drugi); margin: 4px 0; min-height: 1.4em; }
.liczba { font-size: 28vmin; line-height: 1; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.start main, .tv #wybor { max-width: 440px; margin: 0 auto; padding: 24px 16px; display: grid; gap: 12px; }

.telefon main { min-height: 100%; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.plus { font-size: 2.4em; min-height: 30vh; background: var(--akcent); border-color: var(--akcent); color: #06201e; font-weight: 700; touch-action: manipulation; }

.tv #stol { height: 100%; display: grid; grid-template-columns: 1fr minmax(260px, 30vw); gap: 24px; padding: 4vmin; }
.tv .licznik { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tv .liczba { font-size: 45vmin; }
.tv .status { font-size: 1.3em; }
.tv aside { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tv #qr { width: 100%; max-width: 34vmin; aspect-ratio: 1; background: #fff; border-radius: 8px; }
.kod-pokoju { font-size: 2.2em; font-weight: 700; letter-spacing: .12em; margin: 0; }
.tv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tv li { display: flex; justify-content: space-between; gap: 8px; font-size: 1.1em; }
.na_lacznosci { color: var(--akcent); }
.w_tle { color: #e0b85a; }
.brak_lacznosci { color: var(--blad); }

@media (max-width: 700px) {
  .tv #stol { grid-template-columns: 1fr; height: auto; }
}