/* Artur4piano — czysty CSS, bez frameworka. Ciemny motyw, duże elementy. */
:root {
  --tlo: #15131a;
  --panel: #221f2a;
  --panel-2: #2c2836;
  --tekst: #f3efe8;
  --tekst-2: #a9a2b4;
  --akcent: #ffb347;
  --akcent-2: #5ad1e6;
  --ostrzezenie: #e74c3c;
  --promien: 12px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* atrybut hidden musi wygrywać z display:flex */
html, body { margin: 0; height: 100%; background: var(--tlo); color: var(--tekst);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; }
h1 { margin: 0; font-size: 2rem; }
h2 { font-size: 1.1rem; color: var(--tekst-2); margin: 1.4rem 0 .6rem; font-weight: 600; }
button, input { font: inherit; }

/* ---------- ekran lista ---------- */
#ekran-lista { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; }
.naglowek { margin-bottom: 1rem; }
.pod { color: var(--tekst-2); margin: .3rem 0 0; }
.panel { background: var(--panel); border-radius: var(--promien); padding: 16px; }
.panel h2 { margin-top: 0; }
#szukaj { width: 100%; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--panel-2);
  background: var(--tlo); color: var(--tekst); font-size: 1.1rem; }
#szukaj:focus { outline: none; border-color: var(--akcent); }
.rzad { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.podpowiedz { color: var(--tekst-2); font-size: .9rem; margin: .6rem 0 0; }

.strefa { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px;
  padding: 26px 16px; border: 2px dashed #4a4458; border-radius: var(--promien); cursor: pointer;
  color: var(--tekst-2); transition: .15s; }
.strefa:hover, .strefa.nad { border-color: var(--akcent); color: var(--tekst); background: var(--panel); }
.strefa-ikona { font-size: 1.6rem; }

.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.karta { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: var(--promien); padding: 12px 14px; }
.karta.demo { background: transparent; border: 1px solid var(--panel-2); }
.karta-tekst { flex: 1; min-width: 0; }
.karta-nazwa { font-weight: 600; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karta-info { color: var(--tekst-2); font-size: .85rem; }
.stopka { margin-top: 2rem; display: flex; gap: 10px; flex-wrap: wrap; }
.komunikat { background: #4a2a1e; border: 1px solid var(--ostrzezenie); color: #ffd6cf; padding: 10px 14px;
  border-radius: 10px; margin-bottom: 12px; }

/* ---------- przyciski ---------- */
.btn { border: none; border-radius: 10px; padding: 10px 16px; background: var(--akcent); color: #2a1a00;
  font-weight: 700; cursor: pointer; white-space: nowrap; }
.btn:hover { filter: brightness(1.08); }
.btn-cichy { background: var(--panel-2); color: var(--tekst); font-weight: 600; }
.btn-ostrzezenie { background: var(--ostrzezenie); color: #fff; }
.btn-duzy { padding: 12px 26px; font-size: 1.1rem; min-width: 130px; }
.btn-mini { padding: 6px 10px; font-size: .85rem; background: var(--panel-2); color: var(--tekst-2); font-weight: 600; }
.btn-mini.aktywny { background: var(--akcent-2); color: #002b33; }

/* ---------- ekran gram ---------- */
#ekran-gram { height: 100vh; display: flex; flex-direction: column; }
.pasek-gory { display: flex; align-items: center; gap: 14px; padding: 8px 12px; background: var(--panel); }
.tytul { flex: 1; font-weight: 700; font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda { color: var(--tekst-2); font-size: .85rem; display: flex; align-items: center; gap: 6px; }
.legenda span { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
#plansza { flex: 1; width: 100%; display: block; min-height: 200px; }
.pasek-dolu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px 12px; background: var(--panel); }
.grupa { display: flex; align-items: center; gap: 6px; }
.etykieta { color: var(--tekst-2); font-size: .85rem; display: inline-flex; align-items: center; gap: 4px; }
.czas { color: var(--tekst-2); font-variant-numeric: tabular-nums; margin-left: 6px; min-width: 90px; }
.pole-mini { width: 54px; padding: 5px 6px; border-radius: 8px; border: 1px solid var(--panel-2);
  background: var(--tlo); color: var(--tekst); text-align: center; }
#tempo { width: 140px; accent-color: var(--akcent); }
.pasek-postepu { height: 8px; background: var(--panel-2); cursor: pointer; }
#postep { height: 100%; width: 0; background: var(--akcent); transition: width .1s linear; }
.skroty { text-align: center; color: var(--tekst-2); font-size: .8rem; padding: 6px; background: var(--panel); }

@media (max-width: 700px) {
  .btn-duzy { min-width: 0; }
  .skroty { display: none; }
}