/* SPARTIME - caly wyglad aplikacji.
 *
 * WYDZIELONE ZE `spartime.html` 2026-08-05. 1377 linii stylu w znaczniku
 * to plik, ktorego przegladarka nie moze zapamietac osobno i ktorego zaden
 * edytor nie podswietla jako CSS. Teraz jest zwyklym arkuszem: wchodzi do
 * pamieci podrecznej razem z reszta plikow i podnosi sie razem z wersja.
 */

/* Fonts are self-hosted (fonts/). They used to come from Google, but the
   app must work offline and a third-party host means "no fonts on the
   first visit without signal". Same families as the shop. */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/bebas-neue-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/bebas-neue-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500 600;font-display:swap;src:url('fonts/oswald-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500 600;font-display:swap;src:url('fonts/oswald-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Palette and type mirror the shop; the source of truth is :root in
   wp-content/themes/egotape-theme/assets/css/egotape.css. Variable names
   are kept, only values changed, so the rest of the sheet is untouched.
   Comments name the matching shop token. */
:root{
  --bg:#0B0B0B;                     /* ink-1 */
  --panel:#171717;                  /* ink-2 */
  --line:#2A2A2A;                   /* ink-4 */
  --ink:#F5F1EA;                    /* bone-1 */
  --muted:#B8AE9E;                  /* bone-3 */
  --brass:#F69500;                  /* brand orange */
  --brass-soft:rgba(246,149,0,.14);
  --fight:#D33A2C;                  /* danger */
  --rest:#4CAE6B;                   /* success */
  --accent:var(--brass);
  /* Zolty ostrzegawczy: pokrycie ponizej progu, luki w pomiarze, podejrzany
     artefakt. Osobna nazwa, bo to NIE jest blad - to informacja, ze liczbie
     obok trzeba wierzyc mniej. */
  --uwaga:#E6C850;
  --radius:8px;                     /* radius-3 */

  --font-display:"Bebas Neue","Arial Narrow",sans-serif;
  --font-heading:"Oswald","Bebas Neue","Arial Narrow",sans-serif;
  --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Reserve the scrollbar gutter. Phase names differ in length, so content
   height changes on every phase switch; without this the scrollbar came
   and went and the whole view - including the fixed language switch -
   jumped sideways. */
html{scrollbar-gutter:stable}
html,body{height:100%}
body{
  background-image:
    radial-gradient(1200px 700px at 50% -10%, rgba(246,149,0,.06), transparent 60%);
  /* NO-REPEAT, inaczej poswiata KAFELKUJE SIE w dol.
     `html,body{height:100%}` daje obszar tla wysokosci jednego ekranu, a przy
     dluzszej tresci domyslny `repeat` zaczyna nastepny kafelek dokladnie na
     granicy okna. Widac to jako ostra pozioma krawedz - wlasciciel zglaszal
     to jako "prostokat na dole, jakby tlo nie bylo dociagniete do konca".
     Zmierzone: przy oknie 740 px tlo skakalo w y=740 z 11,11,11 na 21,17,11.
     Poswiata ma byc JEDNA, u gory strony - stad no-repeat. */
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* background-color, deliberately NOT the background shorthand: the
     shorthand includes background-image, so the browser interpolated the
     whole gradient for a second and repainted the page with it on every
     phase change. The base colour animates just as smoothly without the
     expensive part. */
  background-color:var(--bg);
  transition:background-color 1s ease;
}
body[data-phase="fight"]{
  background-image:
    radial-gradient(1200px 800px at 50% 20%, rgba(211,58,44,.20), transparent 65%);
  background-color:#140B0A;
  --accent:var(--fight);
}
body[data-phase="rest"]{
  background-image:
    radial-gradient(1200px 800px at 50% 20%, rgba(76,174,107,.16), transparent 65%);
  background-color:#0A130D;
  --accent:var(--rest);
}
body[data-phase="prep"]{--accent:var(--brass)}
body[data-phase="done"]{--accent:var(--brass)}

.install-btn{
  margin-top:14px;
  background:none;color:var(--brass);
  border:1px solid var(--brass);border-radius:999px;
  font-family:var(--font-heading);font-weight:600;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 20px;cursor:pointer;
  transition:background .2s,color .2s;
}
.install-btn:hover{background:var(--brass);color:#0B0B0B}
.install-btn[hidden]{display:none}

/* `flex-shrink:0` - `body` jest kolumna flex o `min-height:100dvh`, a elementy
   flex domyslnie sie KURCZA. Gdy tresc ekranu byla wyzsza od okna, przegladarka
   sciskala sam box (tresci nie ma jak scisnac), wiec tresc wychodzila poza
   niego i wchodzila na to, co stalo nizej - na telefonie stopka lezala na
   wyborze klubu. Na desktopie tresc sie miescila i nie bylo tego widac. */
.screen{width:100%;max-width:640px;padding:28px 20px 48px;display:none;flex-direction:column;align-items:center;flex-shrink:0}
.screen.active{display:flex}

/* --- ekrany tresciowe -----------------------------------------------------
   Timer jest kolumna wysrodkowanych elementow i 640 px mu wystarcza.
   Raport, historia i sesja to co innego: maja tabele, wykresy i siatki,
   ktore musza WYPELNIAC dostepna szerokosc, a nie kurczyc sie do tresci.
   `align-items:center` z `.screen` sprawialo, ze ich wlasne `max-width`
   nigdy nie mialo jak zadzialac, a boczne marginesy ekranu dokladaly sie
   do marginesow raportu - na telefonie tekst dostawal 310 px z 390. */
#raportScreen,#historiaScreen,#sesjaScreen{
  max-width:1100px;padding:64px 0 40px;align-items:stretch;
}
/* min-width:0 - bez tego element w kolumnie fleksowej nie schodzi ponizej
   szerokosci swojej najszerszej tresci (tabeli, wykresu) i wypycha strone. */
#raportScreen > *,#historiaScreen > *,#sesjaScreen > *{width:100%;min-width:0}

/* ---------- SETUP ---------- */
/* The language switch is pinned top-right and the logo is wide and
   centred, so on narrow screens they overlap. The header starts below the
   switch until there is room beside it. */
/* Odsuniecie od gory zalatwia teraz `.screen{padding-top}` pod paskiem
   gornym - wczesniej naglowek musial sam uciekac przed przelacznikiem
   jezyka, ktory na niego nachodzil. */
header{width:100%;text-align:center;margin-bottom:30px}
.bell-mark{
  width:54px;height:54px;margin:0 auto 14px;display:block;color:var(--brass);
}
/* The brand mark is a finished SPARTIME x EGOTAPE lockup; the artwork
   already contains the app name, so the h1 has no text of its own and the
   alt attribute carries it. The panel background was keyed out so the
   image does not paint a rectangle over the header gradient. */
.brand{
  margin:0 0 18px;
  font-size:0;            /* no text lands here - kills the line box */
}
.brand img{
  display:block;margin:0 auto;
  width:min(340px,84vw);height:auto;
}
@media (min-width:560px){
  .brand img{width:440px}
}
h1{
  font-family:var(--font-display);
  font-weight:400;font-size:clamp(34px,9vw,48px);
  letter-spacing:.14em;   /* wordmark - wider than the shop's .04em headings */
}
header p{color:var(--muted);margin-top:10px;font-size:15px}
.lang-switch{
  /* `align-items:stretch` zamiast `center`: przyciski wypelniaja wysokosc
     ramki, wiec podswietlenie wybranego jezyka jest wpisane w obrys,
     a nie unosi sie w jego srodku. */
  display:flex;gap:2px;padding:3px;
  height:40px;align-items:stretch;
  border-radius:10px;
  /* Opaque black rather than --panel: the page turns reddish during a
     round and greenish during a rest, and the grey panel blended into it
     together with the coloured button. On black every phase colour stands
     out equally. */
  background:#0B0B0B;
  border:1px solid var(--accent);
  box-shadow:0 2px 10px rgba(0,0,0,.5);
  transition:border-color .6s;
  isolation:isolate;
}
.lang-btn{
  border:none;background:none;color:var(--muted);cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;
  /* Wysrodkowanie zamiast paddingu pionowego: przy `letter-spacing` odstep
     doklada sie takze PO ostatniej literze, wiec tekst z rownym paddingiem
     i tak siedzi za bardzo w lewo. Stad flex i wyrownanie odstepu. */
  display:flex;align-items:center;justify-content:center;
  padding:0 10px 0 calc(10px + .06em);border-radius:7px;
  /* Fixed width and line box: "PL" and "EN" have different glyph widths,
     and without this each state change nudged the neighbouring button. */
  min-width:44px;line-height:1;text-align:center;
  transition:background .6s,color .6s;
}
.lang-btn:hover{color:var(--ink)}
/* The selected language takes the current phase colour, like the phase
   label, the dial ring and the buttons. --accent is swapped on
   body[data-phase]. */
.lang-btn[aria-pressed="true"]{background:var(--accent);color:#0B0B0B}

.group{width:100%;margin-bottom:22px}
.group-label{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:10px;padding:0 2px;
}
.group-label h2{
  font-family:var(--font-heading);font-weight:500;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
}
.custom-toggle{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-family:inherit;font-size:13px;text-decoration:underline dotted;
  text-underline-offset:3px;padding:4px;
}
.custom-toggle:hover,.custom-toggle:focus-visible{color:var(--brass)}
.options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opt{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  font-family:var(--font-body);
  cursor:pointer;
  padding:18px 6px 14px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:transform .12s ease,border-color .2s,background .2s;
}
.opt .val{font-size:clamp(22px,6vw,30px);font-weight:700;font-variant-numeric:tabular-nums}
.opt .unit{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.opt:hover{transform:translateY(-2px);border-color:#3A3A3A}
.opt[aria-pressed="true"]{
  background:var(--brass-soft);
  border-color:var(--brass);
  box-shadow:0 0 0 1px var(--brass), 0 8px 24px -12px rgba(246,149,0,.45);
}
.opt[aria-pressed="true"] .unit{color:var(--brass)}
/* --- lista wartosci -------------------------------------------------------
   DLACZEGO LISTA, A NIE SUWAK
   Suwak jest szybki do przeciagniecia i beznadziejny do TRAFIENIA: piecset
   sekund od szescset dzieli na telefonie kilka pikseli, a rece na macie sa
   spocone. Lista daje dokladnie te wartosci, ktore maja sens, po jednym
   dotknieciu kazda - i zadnej klawiatury, na ktora nikt miedzy rundami nie
   ma czasu. Ta sama konwencja co menu presetow: jeden jezyk w calej
   aplikacji. */
.wybor-lista{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;
  margin-top:10px;padding:10px;
  background:var(--panel);border:1px solid var(--accent);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.55);
  max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.wybor{
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:9px;
  color:var(--ink);font:inherit;font-size:14px;font-weight:600;
  padding:12px 6px;cursor:pointer;text-align:center;line-height:1.15;
}
.wybor:hover,.wybor:focus-visible{border-color:var(--accent);outline:none}
.wybor-teraz{background:var(--brass-soft);border-color:var(--accent);color:var(--ink)}
.wybor small{display:block;color:var(--muted);font-size:10px;font-weight:400;margin-top:2px}

/* --- ATRYBUT `hidden` MA CHOWAC. ZAWSZE. -----------------------------------
 *
 * Przegladarka chowa `[hidden]` regula `display:none` o najnizszym
 * priorytecie, wiec KAZDA wlasna regula ustawiajaca `display` na tej samej
 * klasie ja pokonuje. Element zostaje widoczny, `element.hidden` zwraca
 * `true`, a kod przelaczajacy widocznosc wyglada na zepsuty, choc dziala.
 *
 * Nadzialem sie na to trzy razy: przy wyborze klubu, przy pustym stanie
 * profilu i przy liscie wartosci - ta ostatnia wisiala pod kazda z trzech
 * grup jako pusty pomaranczowy prostokat, a "wiecej wartosci" nie chcialo
 * sie zamykac, bo nigdy sie nie otwieralo.
 *
 * Jedna regula z `!important` zamyka cala te klase bledow. `hidden` jest
 * atrybutem o jednoznacznym znaczeniu - nie ma przypadku, w ktorym element
 * z nim ustawionym ma byc widoczny.
 */
[hidden]{display:none !important}

.progress-dots{display:flex;gap:8px;margin-top:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s}
.dot.on{background:var(--brass)}
.hint{color:var(--muted);font-size:14px;margin-top:12px;text-align:center;min-height:20px}

/* ---------- TIMER ---------- */
#timerScreen{justify-content:center;flex:1;text-align:center;position:relative}
/* The phase name and round number must be readable from across the mat,
   not at arm's length - hence a much larger scale than usual UI type. The
   upper bound keeps it from shouting on a desktop screen. */
.phase-label{
  font-family:var(--font-heading);font-weight:600;
  font-size:clamp(22px,7.5vw,42px);letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);transition:color .6s;
  margin-bottom:10px;
  /* Without this the longest label wraps to two lines on a narrow phone
     while short ones fit on one, and the view jumps on every phase
     change. */
  white-space:nowrap;
}
/* The longest label would not fit on one line on the narrowest phones at
   .3em tracking, so it is tightened there - tighter beats smaller when the
   whole point is legibility at a distance. */
@media (max-width:400px){
  .phase-label{letter-spacing:.18em}
}
.round-count{
  font-family:var(--font-heading);font-weight:600;
  color:var(--muted);font-size:clamp(16px,4.8vw,26px);
  letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:26px;min-height:1.3em;
}
.dial{position:relative;width:min(78vw,380px);aspect-ratio:1;margin-bottom:30px}
.dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.dial .track{stroke:var(--line);stroke-width:5;fill:none}
.dial .bar{
  stroke:var(--accent);stroke-width:5;fill:none;stroke-linecap:round;
  transition:stroke .6s;
}
.clock{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:700;
  font-size:clamp(56px,18vw,96px);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.clock.pulse{animation:tick .5s ease}
@keyframes tick{0%{transform:scale(1)}30%{transform:scale(1.06)}100%{transform:scale(1)}}
.rings{position:absolute;inset:0;pointer-events:none}
.ring-pulse{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--accent);
  animation:ringout 1.4s ease-out forwards;
}
@keyframes ringout{
  from{transform:scale(.92);opacity:.9}
  to{transform:scale(1.55);opacity:0}
}
/* --- mapa treningu -------------------------------------------------------
   Tarcza mowi, ile zostalo do konca FAZY. Mapa mowi, gdzie czlowiek jest
   w CALYM treningu - a na ten ekran patrzy sie dluzej niz na wszystkie
   pozostale razem. */
.mapa{
  display:flex;gap:2px;width:100%;max-width:420px;margin:18px auto 0;
  height:8px;border-radius:99px;overflow:hidden;
}
.mapa-seg{position:relative;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.mapa-seg-runda{background:rgba(255,255,255,.2)}
/* Zrobione fazy przygaszone, biezaca w kolorze fazy, przyszle blade -
   z jednego rzutu oka widac, ile treningu zostalo. */
.mapa-seg-zrobiona{background:rgba(255,255,255,.42)}
.mapa-seg i{
  position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);
  transition:width .25s linear;
}
@media (prefers-reduced-motion:reduce){.mapa-seg i{transition:none}}

/* --- presety: menu, nie rzad pigulek -------------------------------------
   Szesc ukladow w jednym rzedzie to sciana identycznych przyciskow, ktora
   na telefonie i tak sie zawija. Menu pokazuje jeden przycisk, dopoki ktos
   go nie potrzebuje - presety maja byc SKROTEM, nie glownym sposobem
   obslugi. */
.pytanie-karta{text-align:left}
.pytanie-tytul{margin:0 0 6px;font-size:18px}
.pytanie-opis{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.55}
/* Pole w oknie pytania - zastapilo systemowy `prompt()`, ktory na kazdej
   przegladarce wyglada inaczej i na zadnej jak nasza aplikacja. */
.pytanie-pole{display:block;margin:0 0 14px}
.pytanie-pole[hidden]{display:none}
.pytanie-pole span{
  display:block;margin:0 0 6px;
  color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;
}
.pytanie-pole input{
  width:100%;min-height:48px;padding:12px 14px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font:inherit;font-size:16px;   /* 16px: iOS nie przybliza pola */
}
.pytanie-pole input:focus{outline:2px solid var(--accent);outline-offset:1px}
.pytanie-pole input::placeholder{color:var(--muted);text-transform:none}
.pytanie-blad{
  margin:-8px 0 12px;font-size:12px;line-height:1.5;color:var(--fight);font-weight:600;
}
.pytanie-blad[hidden]{display:none}
.pytanie-akcje{display:flex;flex-direction:column;gap:8px}
.pytanie-akcje button[disabled]{opacity:.55;cursor:default}
.pytanie-akcje button{
  width:100%;background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--ink);font:inherit;font-size:14px;
  padding:12px;cursor:pointer;text-align:center;
}
.pytanie-akcje .glowny{background:var(--accent);color:#0B0B0B;border-color:transparent;font-weight:700}
.pytanie-akcje .usun{color:var(--fight);border-color:rgba(211,58,44,.45)}
.pytanie-akcje button:hover{border-color:var(--accent)}

/* --- jednostka treningowa ------------------------------------------------
   Gdy trening trwa, pasek swieci na zielono - z drugiego konca sali ma byc
   widac, ze bloki sa zliczane, a nie tylko ze timer chodzi. */
.jednostka{
  display:flex;align-items:center;gap:12px;width:100%;max-width:420px;
  margin:0 auto 12px;padding:11px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;text-align:left;
}
.jednostka.trwa{border-color:rgba(76,174,107,.6);background:rgba(76,174,107,.08)}
.jednostka-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.jednostka-tytul{
  font-family:var(--font-heading);font-size:14px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.jednostka-opis{color:var(--muted);font-size:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jednostka-btn{
  flex:0 0 auto;background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:9px;color:var(--ink);font:inherit;font-size:12px;font-weight:600;
  padding:9px 12px;cursor:pointer;
}
.jednostka-btn:hover{border-color:var(--accent)}
.jednostka.trwa .jednostka-btn{background:var(--rest);color:#0B0B0B;border-color:transparent}

.presety{width:100%;max-width:420px;margin:0 auto 24px;position:relative}
.presety-przycisk{
  display:flex;align-items:center;gap:12px;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);font:inherit;padding:12px 14px;cursor:pointer;text-align:left;
  transition:border-color .2s,background .2s;
}
.presety-przycisk:hover{border-color:rgba(246,149,0,.5)}
.presety-przycisk[aria-expanded="true"]{border-color:var(--accent);background:var(--brass-soft)}
.presety-przycisk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.presety-ikona{flex:0 0 auto;width:22px;height:22px;color:var(--accent)}
.presety-ikona svg{width:100%;height:100%;display:block}
.presety-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.presety-etykieta{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.09em}
.presety-wybor{
  font-family:var(--font-heading);font-size:15px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.presety-strzalka{
  flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);
  transition:transform .2s,border-color .2s;
}
.presety-przycisk[aria-expanded="true"] .presety-strzalka{
  transform:rotate(-135deg) translateY(-2px);border-color:var(--accent);
}
.presety-lista{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;
  background:var(--panel);border:1px solid var(--accent);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.6);overflow:hidden;
}
.preset{
  display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:none;border-top:1px solid rgba(255,255,255,.07);
  color:var(--ink);font:inherit;padding:11px 14px;cursor:pointer;text-align:left;
}
.preset:first-child{border-top:none}
.preset:hover,.preset:focus-visible{background:rgba(246,149,0,.12);outline:none}
/* Font naglowkowy, nie wyswietlajacy: Bebas Neue jest krojem wersalikowym
   i nie ma pewnosci, ze zawiera znak mnozenia - brakujacy glif rysuje sie
   jako pusty prostokat. */
.preset-uklad{
  flex:0 0 auto;font-family:var(--font-heading);font-size:19px;line-height:1;
  letter-spacing:.02em;min-width:64px;
}
.preset-opis{flex:1;min-width:0;color:var(--muted);font-size:11px;line-height:1.4}
.preset-czas{flex:0 0 auto;color:var(--muted);font-size:11px;font-weight:600}
.preset-ostatni{background:rgba(246,149,0,.07)}
.preset-ostatni .preset-uklad{color:var(--accent)}

.controls{display:flex;gap:12px}
.btn{
  font:inherit;font-weight:700;font-size:16px;cursor:pointer;
  border-radius:999px;padding:14px 30px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);
  transition:transform .12s,border-color .2s;
}
.btn:hover{transform:translateY(-2px);border-color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#0B0B0B;transition:background .6s,transform .12s}

/* ---------- DONE ---------- */
#doneScreen{justify-content:center;flex:1;text-align:center}
/* NAGLOWEK EKRANU KONCA - mniej dekoracji przed pierwszym dzialaniem.
   Zmierzone: dzwonek (54 px) + "KONIEC" (48) + duza liczba (110) + podpis
   + kontekst tygodnia dawaly ~340 px, czyli prawie polowe pierwszego widoku
   na ekranie wysokosci 740 px, zanim ekran zaproponowal cokolwiek do
   zrobienia.
   Dzwonek i slowo "KONIEC" mowia to samo, co duza liczba pod nimi: jest po
   treningu. Zostaja oba, bo to jest charakter tego ekranu - ale w rozmiarze
   podpisu, a nie afisza. */
#doneScreen h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(20px,5vw,26px);letter-spacing:.16em;
  color:var(--muted);margin:0 0 2px;
}
#doneScreen .bell-mark{width:30px;height:30px;margin:0 auto 6px}
/* TYLKO BEZPOSREDNIE akapity ekranu konca.
   Bez `>` regula lapala kazdy `<p>` w srodku kart i dokladala mu 34 px
   marginesu razem z wyszarzeniem. Zmierzone w przegladarce: 49 px pustego
   miejsca na dole karty "Jak bylo?" i 47 px w ramce o pliku - w obu
   przypadkach po ostatnim akapicie, ktory nie ma po co odsuwac sie od dna
   wlasnej karty. Przy okazji wracaja kolory tekstow, ktore mialy byc
   jasne, a byly przygaszone przez ta sama regule. */
#doneScreen > p{color:var(--muted);margin-bottom:34px}

:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
/* --- telefon --------------------------------------------------------------
   Raport jest gestszy od reszty aplikacji: karty, wykres, zakladki, tabele.
   Na waskim ekranie liczy sie kazdy piksel szerokosci, wiec marginesy
   wewnetrzne schodza do minimum, a to, co i tak sie nie miesci, przewija
   sie samo zamiast rozpychac strone. */
@media (max-width:520px){
  .raport{padding:14px 12px 36px}
  .raport h2{font-size:18px}
  .raport-karty{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px}
  .raport-karta{padding:10px 9px 8px;border-radius:10px}
  #raportWidok{padding:10px 8px}
  .panel-jakosci{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .karta-siatka{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .wykres-chipy{gap:5px}
  .legenda-stref{font-size:10px;gap:3px 10px}
  /* Przyciski akcji na pelna szerokosc: rzad szesciu malych celow
     dotykowych to gwarancja trafienia w zly. */
  .raport-akcje{gap:6px}
  .raport-akcje button,.raport-akcje label{flex:1 1 46%;text-align:center}
  .done-liczby{max-width:100%}
  .done-wartosc{font-size:30px}
  .account-historia-liczby{grid-template-columns:repeat(2,1fr)}
}

/* Bardzo waskie telefony (320-360 px) - ostatnia linia obrony. */
/* Ekran sesji i historii uzywa tych samych klas co raport, wiec dziedziczy
   powyzsze reguly. Tu tylko to, co jest wylacznie ich. */
@media (max-width:520px){
  .sesja-kod-pole{flex-direction:column}
  #sesjaKod{font-size:20px;letter-spacing:.25em}
  .historia-filtry{padding:8px;gap:6px}
  .filtr{flex:1 1 44%}
  .filtr select{width:100%}
  /* Wczesniej kafelek rozpadal sie na kolumne, a przyciski szly na pol
     szerokosci kazdy - jeden wpis zajmowal wtedy niemal pol ekranu.
     Zostaje wiersz; przyciski schodza pod tekst dopiero przy czterech. */
  .historia-wpis{gap:8px;padding:8px 10px;flex-wrap:wrap}
  .historia-iskra,.iskra-brak{width:58px;height:26px}
  .historia-przyciski{flex:1 1 100%;justify-content:flex-end}
  .historia-przyciski button{padding:6px 9px;font-size:11px}
  .klub-wybor{max-width:100%}
}

@media (max-width:360px){
  .raport-karty{grid-template-columns:repeat(2,1fr)}
  .done-liczby{grid-template-columns:repeat(3,1fr)}
  .done-wartosc{font-size:26px}
  .zakladka{font-size:11px;padding:7px 9px}
  .profil-znak{width:46px;height:46px;font-size:23px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* --- Konto EgoTape ---------------------------------------------------------
   Timer dziala BEZ konta i tak ma zostac. Ikona nie jest bramka - niczego
   nie blokuje. Otwiera panel, ktory mowi, co konto dodaje, i nic wiecej.

   Stoi po lewej, symetrycznie do przelacznika jezyka, zeby nie walczyc
   z nim o ten sam rog ekranu. */
/* --- przycisk konta ------------------------------------------------------
   Wylogowany: przygaszona sylwetka w cienkim pierscieniu. Zalogowany:
   inicjal na wypelnionym krazku, w tym samym stylu co naglowek profilu -
   z jednego rzutu oka widac nie tylko ZE ktos jest zalogowany, ale KTO. */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;
  /* Wygaszenie zamiast plaskiego tla: pasek konczy sie miekko, wiec nie
     tnie ekranu w poprzek linia, ktorej tam nie ma. */
  background:linear-gradient(180deg,rgba(11,11,11,.94) 0%,rgba(11,11,11,.82) 62%,transparent 100%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  pointer-events:none;                 /* pasek jest tlem - klikalne sa dzieci */
}
.topbar > *{pointer-events:auto}
/* Ekrany zaczynaja sie POD paskiem. Wczesniej pasek plywal nad trescia
   i na telefonie zaslanial naglowki. */
.screen{padding-top:74px}

.account-btn{
  /* `justify-content:center` - bez tego przy jednym dziecku (samej ikonie)
     zawartosc siedzi przy lewej krawedzi, a `min-width` dokladal wolne
     miejsce po prawej. Ikona wygladala na przesunieta w lewo. */
  display:flex;align-items:center;justify-content:center;gap:8px;
  /* `min-height`, nie `height`: przy dluzszej nazwie i wiekszym kroju
     zawartosc byla wyzsza niz przycisk i wychodzila poza obrys. */
  min-height:40px;min-width:40px;padding:0 8px;
  border-radius:10px;
  background:rgba(11,11,11,.85);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 2px 12px rgba(0,0,0,.55);
  color:var(--muted);
  cursor:pointer;
  transition:border-color .35s,color .35s,background .35s,transform .12s;
}
.account-btn:hover{border-color:var(--accent);color:var(--ink)}
.account-btn:active{transform:scale(.94)}
.account-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* `display:block` - inline SVG stoi na linii bazowej tekstu i zostawia pod
   soba miejsce na ogonki liter, przez co wyglada na przesunieta w gore. */
.account-glif{width:22px;height:22px;display:block;flex:0 0 auto}
.account-inicjal{
  display:none;
  width:26px;height:26px;border-radius:7px;flex:0 0 auto;
  align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--brass),#c26f00);color:#0B0B0B;
  font-family:var(--font-display);font-size:16px;line-height:1;padding-top:2px;
}
/* Nazwa obok inicjalu - dopiero gdy jest na nia miejsce. Na telefonie
   sam znak wystarczy, a pasek zostaje waski. */
.account-nazwa{
  display:none;font-size:12px;font-weight:600;color:var(--ink);
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (min-width:520px){
  .account-btn[data-state="in"] .account-nazwa{display:block}
  /* Z nazwa obok inicjalu przycisk potrzebuje wiecej powietrza po prawej -
     inaczej tekst konczy sie tuz przy zaokragleniu ramki. */
  .account-btn[data-state="in"]{padding:0 12px 0 8px}
}
/* Zalogowany: krazek z inicjalem SIEDZI W przycisku, zamiast zamieniac
   caly przycisk w pomaranczowa plame - pasek ma byc spokojny, a nie
   swiecic na kazdym ekranie. */
.account-btn[data-state="in"]{border-color:rgba(246,149,0,.45)}
.account-btn[data-state="in"] .account-glif{display:none}
.account-btn[data-state="in"] .account-inicjal{display:flex}
.account-btn:hover,.account-btn:focus-visible{color:var(--accent)}
.account-btn svg{width:22px;height:22px}


/* --- profil w panelu konta ---------------------------------------------
   Po zalogowaniu panel przestaje byc ulotka o tym, po co konto, a staje sie
   profilem: kto jestem i co mam. */
/* `hidden` przegrywa z `display:flex` z tej samej reguly - bez tego wiersz
   z klubami byl widoczny takze dla niezalogowanych, z pusta lista.
   W tym pliku ta sama pulapka zostala juz raz obsluzona przy .install-btn. */
.klub-wybor[hidden]{display:none}
.klub-wybor{
  display:flex;align-items:center;gap:12px;width:100%;max-width:420px;
  margin:18px auto 4px;padding:12px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  text-align:left;
}
/* Zaznaczony klub podswietla caly wiersz - z odleglosci widac, ze trening
   gdzies poleci, bez czytania nazwy. */
.klub-wybor.klub-aktywny{border-color:rgba(246,149,0,.55);background:var(--brass-soft)}
.klub-ikona{flex:0 0 auto;width:22px;height:22px;color:var(--muted);position:relative}
/* Herb wchodzi NA MIEJSCE domyslnego znaku, nie obok niego - inaczej klub
   z herbem mialby dwie ikony, a bez herbu jedna, i pasek skakalby. */
.klub-ikona.ma-herb svg{display:none}
/* Znak klubu bywa SZEROKI - typowy logotyp to tarcza plus napis obok,
   proporcje bliskie 3:2. Wtloczony w kwadrat 22 px zmniejsza sie do
   wysokosci polowy tego pola i przestaje byc czytelny. Pole z herbem
   rozszerza sie wiec na boki, a wysokosc zostaje ta sama, zeby wiersz
   nie skakal. */
/* 26 px starczy na dwa ludziki, ale nie na logo klubu: sprawdzone na
   znaku GAMBIT CHECKMAT, ktory na tej wysokosci jest czerwona plamka obok
   bialej. Przy 34 px widac tarcze i napis - i to jest granica, ponizej
   ktorej herb przestaje cokolwiek znaczyc. */
.klub-ikona.ma-herb{width:auto;max-width:76px;height:34px}
.klub-znak.ma-herb{width:auto;max-width:64px;height:28px}
/* --- Garmin (jedno konto) ------------------------------------------------ */
.garmin-btn{background:none;border:1px solid var(--line);color:var(--ink);font-size:13px}
.garmin-btn:hover{border-color:var(--accent)}
.garmin-stan{color:var(--muted);font-size:12px;margin:8px 0 0;line-height:1.5;text-align:center}
.garmin-panel{width:100%;max-width:420px}
.garmin-panel:empty{display:none}
.garmin-lista{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:10px}
.garmin-poz{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;color:var(--ink);font:inherit;font-size:12px;cursor:pointer;text-align:left;
}
.garmin-poz:hover{border-color:var(--accent)}
.garmin-poz b{font-weight:700;font-size:13px}
.garmin-poz span{color:var(--muted);flex:0 0 auto}

.klub-herb{
  /* `contain` woli puste rogi niz obciety rysunek - herby maja rozne
     proporcje, a pole jest jedno. */
  height:100%;width:auto;max-width:100%;display:block;object-fit:contain;
}
.klub-wybor.klub-aktywny .klub-ikona{color:var(--accent)}
.klub-ikona svg{width:100%;height:100%;display:block}
.klub-tresc{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.klub-tresc label{
  color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.07em;
}
/* Wlasna strzalka i wlasne tlo: systemowy <select> na Androidzie potrafi
   byc jasnoszary z czarnym tekstem, co na ciemnym ekranie wyglada jak
   wklejony obcy element. */
.klub-wybor select{
  -webkit-appearance:none;appearance:none;
  background:transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%23B8AE9E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center;
  background-size:11px;
  border:none;border-radius:0;color:var(--ink);
  font-family:var(--font-heading);font-size:15px;font-weight:600;
  padding:0 18px 0 0;width:100%;cursor:pointer;
  text-overflow:ellipsis;
}
.klub-wybor select:focus{outline:none}
.klub-wybor select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Lista rozwijana rysuje sie natywnie - opcje musza miec wlasne kolory,
   bo dziedzicza tlo systemu, nie nasze. */
.klub-wybor option{background:var(--panel);color:var(--ink)}
.klub-stan{
  flex:0 0 auto;font-size:10px;color:var(--muted);text-align:right;max-width:34%;
}
.done-klub{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  background:var(--brass-soft);border:1px solid rgba(246,149,0,.45);border-radius:var(--radius);
  padding:10px 12px;margin-bottom:14px;font-size:12px;max-width:420px;width:100%;
}
.done-klub code{font-size:17px;font-weight:800;letter-spacing:.2em}

.profil{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.profil-znak{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(145deg,var(--brass),#c26f00);color:#0B0B0B;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:26px;line-height:1;
}
.profil-kto{min-width:0}
.profil-nazwa{font-family:var(--font-heading);font-size:19px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* --- bramka konta ------------------------------------------------------- */
/* --- stan kopii ---------------------------------------------------------- */
.stan-kopii{
  font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 14px;
  padding:10px 12px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);
}
.stan-kopii-uwaga{border-color:rgba(230,200,80,.5);color:var(--uwaga)}

/* --- przekazanie miedzy urzadzeniami ------------------------------------- */
/* --- wlasne uklady -------------------------------------------------------- */
.presety-zarzad{display:flex;flex-direction:column;gap:16px}
.uklady{display:flex;flex-direction:column;gap:5px}
.uklad{
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 11px;
}
.uklad-ukryty{opacity:.45;border-style:dashed}
.uklad-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.uklad-nazwa{font-family:var(--font-heading);font-size:15px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uklad-opis{color:var(--muted);font-size:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uklad-akcje{display:flex;gap:4px;flex:0 0 auto}
.uklad-akcje button{
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:7px;
  color:var(--ink);font:inherit;font-size:11px;padding:6px 9px;cursor:pointer;min-width:34px;
}
.uklad-akcje button:disabled{opacity:.3;cursor:default}
.uklad-akcje button:hover:not(:disabled){border-color:var(--accent)}
.uklad-akcje .usun{color:var(--fight);border-color:rgba(211,58,44,.4)}

.uklad-nowy{
  display:flex;flex-direction:column;gap:9px;
  background:var(--panel);border:1px dashed var(--line);border-radius:10px;padding:14px;
}
.uklad-nowy h4{margin:0;font-size:13px}
.uklad-pola{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.uklad-pole{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
.uklad-pole select{
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);font:inherit;font-size:13px;padding:8px;text-transform:none;letter-spacing:0;
}
.uklad-nazwa-pole{
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);font:inherit;font-size:13px;padding:9px;width:100%;
}
.uklad-podglad{margin:0;color:var(--muted);font-size:11px}
.uklad-nowy .glowny{
  background:var(--accent);color:#0B0B0B;border:none;border-radius:8px;
  font:inherit;font-size:13px;font-weight:700;padding:10px;cursor:pointer;
}
.presety-stan{margin:0;color:var(--muted);font-size:11px;min-height:14px}

.przekaz{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin:0 0 14px;display:flex;flex-direction:column;gap:10px;
}
.przekaz h3{margin:0;font-size:15px}
.przekaz p{margin:0;font-size:12px;line-height:1.55;color:var(--muted)}
.przekaz-kod{
  font-family:var(--font-display);font-size:44px;letter-spacing:.22em;
  text-align:center;padding:14px 0 10px;color:var(--accent);
  background:var(--brass-soft);border:1px solid rgba(246,149,0,.4);border-radius:var(--radius);
}
.przekaz-pasek{height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.przekaz-pasek i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}
.przekaz input{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);
  color:var(--ink);font:inherit;font-size:22px;font-weight:700;letter-spacing:.28em;
  padding:12px;text-align:center;text-transform:uppercase;width:100%;
}
.przekaz-akcje{display:flex;gap:8px;flex-wrap:wrap}
.przekaz-akcje button{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);
  color:var(--ink);font:inherit;font-size:13px;padding:9px 14px;cursor:pointer;
}
.przekaz-akcje .glowny{background:var(--accent);color:#0B0B0B;border-color:transparent;font-weight:700}

.bramka{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin:8px 0;width:100%;max-width:460px;
}
.bramka strong{font-family:var(--font-heading);font-size:15px}
.bramka p{margin:0;font-size:12px;line-height:1.55;color:var(--muted)}
.bramka-uwaga{font-size:11px;opacity:.85}
.bramka-przycisk{
  margin-top:4px;background:var(--accent);color:#0B0B0B;text-decoration:none;
  border-radius:var(--radius);padding:10px 16px;font-weight:700;font-size:13px;
}
.bramka-przycisk:hover{filter:brightness(1.08)}

.profil-pas{display:flex;align-items:center;gap:7px;margin-top:5px;
  color:var(--muted);font-size:11px}
.profil-pusto{
  /* Pojemnik `#accountHistoriaLiczby` jest siatka czterokolumnowa dla kafli
     z liczbami. Pusty stan trafial do niej jako zwykly element, czyli na
     CWIARTKE szerokosci - tekst lamal sie po dwa slowa przy lewej krawedzi.
     Musi zajac caly wiersz. */
  grid-column:1 / -1;
  display:flex;flex-direction:column;gap:5px;padding:14px 12px;
  background:var(--panel);border:1px dashed var(--line);border-radius:var(--radius);
  font-size:12px;line-height:1.55;color:var(--muted);
}
.profil-pusto strong{color:var(--ink);font-size:13px}
.profil-mail{color:var(--muted);font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.account-historia-liczby{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-bottom:10px;
}
/* Bez kafli siatka nie ma czego trzymac - ramka i tlo idacce od niej
   dublowalyby ramke pustego stanu. */
.account-historia-liczby:has(.profil-pusto){background:none;border:none;gap:0}
.profil-kafel{background:var(--panel);padding:10px 4px;display:flex;flex-direction:column;
  align-items:center;gap:1px}
.profil-wartosc{font-family:var(--font-display);font-size:22px;line-height:1}
.profil-etykieta{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.05em;
  text-align:center}
.profil-stopka{grid-column:1 / -1;background:var(--panel);color:var(--muted);
  font-size:10px;margin:0;padding:7px 10px;text-align:center}

/* --- ekran konca --------------------------------------------------------
   Moment wyplaty za trening. Najpierw to, co sie wlasnie zrobilo, w liczbach
   duzych na tyle, zeby dalo sie je przeczytac zmeczonym wzrokiem z metra;
   dopiero potem przyciski. */
/* --- EKRAN KONCA -----------------------------------------------------------
 *
 * Moment wyplaty za trening, ogladany raz, przez kilka sekund, spoconymi
 * palcami i zmeczonym wzrokiem. Poprzednia wersja byla pionowym stosem
 * elementow o podobnej wadze - trzy rowne kafle liczb, potem szesc
 * podobnych przyciskow - wiec nic nie bylo wazniejsze od reszty i wszystko
 * trzeba bylo przeczytac.
 *
 * Teraz sa trzy poziomy:
 *   1. JEDNA liczba, ktora widac z metra,
 *   2. reszta liczb jako drobny wiersz pod spodem,
 *   3. dzialania - jedno glowne, reszta wyraznie ciszej.
 */
.done-hero{
  display:flex;flex-direction:column;align-items:center;gap:0;margin:2px 0 4px;
}
.done-hero-liczba{
  font-family:var(--font-display);
  /* `clamp` zamiast sztywnego rozmiaru: na malym telefonie liczba ma byc
     duza, ale nie ma prawa wypchnac reszty ekranu ponizej zgiecia. */
  font-size:clamp(76px,26vw,132px);
  line-height:.9;letter-spacing:.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.done-hero-etykieta{
  font-family:var(--font-heading);font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-top:6px;
}
/* Kontekst z historii - jedno zdanie. Pojedynczy trening niczego nie mowi,
   dopiero tydzien pokazuje, czy cos sie dzieje. */
.done-kontekst{
  color:var(--accent);font-size:12px;font-weight:600;margin:8px 0 0;
  letter-spacing:.02em;text-align:center;
}
/* Bez marginesu na dole: wszystko ponizej ma wlasny odstep od gory, wiec
   dodanie drugiego dawalo podwojna przerwe akurat pod najwazniejsza
   liczba. */
.done-podpis{color:var(--muted);font-size:13px;margin:10px 0 0;text-align:center}
/* GLOWNE DZIALANIE po bloku. Jedno, wyrazne, pelnej szerokosci - reszta
   ekranu ma byc wyraznie cichsza, zeby nie trzeba bylo wybierac. */
/* JEDEN RYTM ODSTEPOW na calym ekranie konca.
   Kazdy element mial dotad wlasny margines dobrany osobno - stad przyciski
   dotykajace tabeli z liczbami i teksty przyklejone do tego, co nad nimi.
   Odstepy sa teraz trzy: 8 px w grupie, 16 px miedzy grupami, 26 px przed
   nowa sekcja. */
.done-koniec{
  margin:24px 0 0;width:100%;max-width:420px;min-height:52px;font-size:15px;
}
/* Waga drugorzedna: obwodka zamiast wypelnienia, jak zrodla pliku.
   Pelny pomarancz zostaje dla JEDNEGO dzialania na ekranie - inaczej oko
   nie ma sie po czym prowadzic. */
.btn-drugorzedny{
  background:none;color:var(--ink);
  border:1px dashed rgba(246,149,0,.55);box-shadow:none;font-weight:600;
}
.btn-drugorzedny:hover{border-style:solid;border-color:var(--accent)}
/* Drobne dzialania: to samo, co dotad, ale wyraznie ciszej - to sa wyjscia
   z ekranu, a nie propozycje. */
/* Wyjscia z ekranu: rowne, w jednym rzedzie, wyraznie ciszej niz glowne
   dzialanie - to sa drzwi, a nie propozycje. */
/* `auto-fit` zamiast sztywnych dwoch kolumn: po usunieciu "Dolacz do
   treningu" zostal jeden przycisk, ktory przy `1fr 1fr` zajmowalby polowe
   szerokosci i wygladal jak polowa czegos, co sie nie doladowalo. */
.done-drobne{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;
  width:100%;max-width:420px;margin-top:12px;
}
.done-drobne button{
  width:100%;min-height:44px;background:none;color:var(--muted);
  border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:13px;cursor:pointer;padding:10px 8px;
}
.done-drobne button:hover{color:var(--ink);border-color:var(--accent)}
/* Rodzaj bloku - kafelki do dotkniecia, nie lista rozwijana. Robi sie to
   raz po bloku, spoconymi palcami, wiec liczy sie jedno dotkniecie
   i wielkosc celu, a nie oszczednosc miejsca. */
.rodzaj-blok{
  width:100%;max-width:420px;margin:24px 0 0;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:12px;
}
.rodzaj-pytanie{
  color:var(--ink);font-size:13px;font-weight:600;margin:0 0 10px;text-align:center;
}
.rodzaj-lista{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.rodzaj-btn{
  /* Wewnatrz karty tlo musi byc INNE niz jej wlasne, inaczej kafelek
     rozplywa sie w podkladzie. */
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:11px 15px;font:inherit;font-size:13px;cursor:pointer;
  min-height:44px;                     /* cel dotyku, nie tylko napis */
}
.rodzaj-btn:hover{border-color:var(--accent)}
.rodzaj-btn[aria-pressed="true"]{
  background:var(--brass-soft);border-color:var(--accent);font-weight:700;
}
/* Podpowiedz z poprzedniego razu - wyrozniona obwodka, ale NIE zaznaczona:
   wybor nalezy do czlowieka, a nie do pamieci aplikacji. */
.rodzaj-btn.podpowiedz{border-color:rgba(246,149,0,.5)}

/* --- JAK BYLO -------------------------------------------------------------
   Cztery pytania w jednej karcie. Uklad etykieta-obok-pola zamiast czterech
   osobnych sekcji z naglowkami: naglowki zabralyby tyle samo miejsca, co
   odpowiedzi, i zrobily z ekranu konca ankiete. */
.jakbylo{
  width:100%;max-width:420px;margin:12px 0 0;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:14px;
}
.jakbylo-naglowek{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--line);padding-bottom:10px;
}
.jakbylo-tytul{margin:0;font-size:13px;font-weight:700;letter-spacing:.02em}
/* Skrot tego, co juz wypelnione. Stoi w naglowku, bo po wypelnieniu to jest
   jedyna rzecz, ktora trzeba przeczytac, zeby wiedziec, ze jest zrobione. */
.jakbylo-skrot{
  margin:0;font-size:11px;color:var(--muted);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%;
}
.jakbylo-skrot:empty::before{content:"nieobowiązkowe";opacity:.7}
.jakbylo-wiersz{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:start}
/* DO LEWEJ, a nie po ekranie konca.
   `#doneScreen` ma `text-align:center`, wiec etykiety dziedziczyly
   srodkowanie i stawaly nad polami wyrownanymi do lewej - zetony, wpis
   notatki i skala zaczynaja sie przy lewej krawedzi. Wygladalo to na
   przypadek, bo nim bylo. Formularz ma jedna krawedz czytania. */
.jakbylo,.jakbylo-wiersz,.jakbylo-pole{text-align:left}
.jakbylo-etykieta{
  color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  padding-top:12px;                     /* w jednej linii ze srodkiem pola */
  text-align:left;
}
.jakbylo-pole{display:flex;flex-direction:column;gap:6px;min-width:0}
.jakbylo-podpis{margin:0;font-size:10px;line-height:1.45;color:var(--muted)}
.jakbylo-chipy{display:flex;flex-wrap:wrap;gap:6px}
/* Zeton: ten sam ksztalt, co rodzaj bloku, tylko mniejszy - to jest ta sama
   czynnosc (dotknij, zeby wybrac), wiec nie ma powodu, zeby wygladala
   inaczej. */
.jakbylo-chip{
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:9px 13px;font:inherit;font-size:12px;cursor:pointer;
  min-height:38px;
}
.jakbylo-chip:hover{border-color:var(--accent)}
.jakbylo-chip[aria-pressed="true"]{
  background:var(--brass-soft);border-color:var(--accent);font-weight:700;
}
/* Podpowiedz z historii - przygaszona, bo to jeszcze nie jest wybor. */
.jakbylo-chip-podpowiedz{color:var(--muted);border-style:dashed}
.jakbylo-chip-dodaj{color:var(--muted);border-style:dashed;font-weight:700}
.jakbylo-wpis{
  background:rgba(255,255,255,.06);border:1px solid var(--accent);color:var(--ink);
  border-radius:999px;padding:9px 13px;font:inherit;font-size:12px;min-height:38px;
  width:min(180px,100%);
}
.jakbylo-notatka{
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:11px 12px;font:inherit;font-size:13px;
  width:100%;min-height:42px;
}
.jakbylo-notatka:focus,.jakbylo-wpis:focus{outline:2px solid var(--accent);outline-offset:1px}
.jakbylo-notatka::placeholder{color:var(--muted)}
.jakbylo-stan{margin:0;font-size:10px;color:var(--muted);min-height:12px;text-align:right}
/* Rozwiniecie szczegolow - wyglada jak link, nie jak kolejny przycisk.
   Na tym ekranie jest juz dosc rzeczy do klikniecia. */
.jakbylo-wiecej-btn{
  background:none;border:0;padding:6px 0;margin:0;cursor:pointer;
  color:var(--accent);font:inherit;font-size:12px;font-weight:600;
  text-align:left;align-self:flex-start;min-height:34px;
}
.jakbylo-wiecej-btn:hover{text-decoration:underline}
.jakbylo-wiecej{display:flex;flex-direction:column;gap:14px}
.jakbylo-wiecej[hidden]{display:none}

/* Skala wysilku jako slupki. Kolor jest JEDEN - wysokosc niesie wielkosc,
   a barwa mowi tylko "wybrane do tego miejsca". Ramp od zielonego do
   czerwonego wygladalby efektowniej i klamalby: to jest ocena wlasna, a nie
   pomiar, i nie ma progu, przy ktorym robi sie "zle". */
.rpe-skala{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;align-items:end}
.rpe-slupek{
  background:none;border:0;padding:0;cursor:pointer;
  height:46px;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:4px;
}
/* Cyfra pod slupkiem: RPE ma sens jako LICZBA, nie jako "wyzej albo nizej".
   Bez podzialki nie da sie celowac w konkretny stopien. */
.rpe-cyfra{
  display:block;font-size:9px;line-height:1.4;color:var(--muted);
  text-align:center;font-variant-numeric:tabular-nums;
}
.rpe-slupek[data-wybrany="tak"] .rpe-cyfra{color:var(--ink);font-weight:700}
.rpe-slupek:hover .rpe-wypelnienie{background:rgba(246,149,0,.55)}
.rpe-slupek:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rpe-wypelnienie{
  display:block;width:100%;border-radius:3px;
  background:rgba(255,255,255,.10);
  transition:background .12s ease;
}
.rpe-slupek[data-wybrany="tak"] .rpe-wypelnienie{background:var(--brass)}
@media (prefers-reduced-motion: reduce){
  .rpe-wypelnienie{transition:none}
}
/* Na waskim telefonie etykieta schodzi NAD pole. Przy ukladzie obok siebie
   na skale wysilku zostawalo 242 px, czyli 21 px na slupek - w sam raz,
   zeby trafic w sasiedni. Po przeniesieniu etykiety jest ich 30, a caly
   wiersz i tak ma 46 px wysokosci. */
@media (max-width: 400px){
  .jakbylo-wiersz{grid-template-columns:1fr;gap:5px}
  .jakbylo-etykieta{padding-top:0}
  .rpe-skala{gap:2px}
}
/* Ramka z uwagami o pliku. Dwa zdania o tym samym - co plik obejmie
   i gdzie zostanie - staly luzem pod przyciskiem i czytaly sie jak dwie
   przypadkowe uwagi. Razem sa jedna informacja: skad i dokad. */
.done-info{
  width:100%;max-width:420px;margin:8px 0 0;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;display:flex;flex-direction:column;gap:8px;
}
.done-info:empty,.done-info:not(:has(> :not([hidden]))){display:none}
.done-info-wiersz{
  margin:0;font-size:12px;line-height:1.55;text-align:center;
  /* `balance` rozklada wyrazy na wiersze rowno, zamiast zostawiac jedno
     slowo w ostatniej linijce - przy dwuzdaniowej uwadze widac to od razu.
     `pretty` jako zapas dla przegladarek, ktore znaja tylko jego. */
  text-wrap:balance;
}
@supports not (text-wrap: balance) {
  .done-info-wiersz{text-wrap:pretty}
}
.done-jednostka{color:var(--rest);font-weight:600}
.done-liczby{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;width:100%;max-width:420px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin:24px 0 0;
}
.done-kafel{background:var(--panel);padding:14px 6px;display:flex;flex-direction:column;
  align-items:center;gap:2px}
.done-wartosc{font-family:var(--font-display);font-size:34px;line-height:1;letter-spacing:.02em}
.done-etykieta{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.done-akcje{
  display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;
  max-width:420px;margin-top:26px;
}
/* KOLEJNOSC EKRANU KONCA - glowne dzialanie przed formularzem.
   Zmierzone w przegladarce: przycisk "Otworz plik FIT" zaczynal sie na
   1350 px przy ekranie wysokosci 740 px, czyli po prawie dwoch ekranach
   przewijania - za karta z czterema opcjonalnymi pytaniami. Rzecz, ktora
   robi sie NAJCZESCIEJ, byla najdalej.
   `order` zamiast przenoszenia w znaczniku: `#doneScreen` jest kolumna
   flex, wiec kolejnosc wizualna da sie ustawic bez ruszania kodu, ktory
   te elementy pokazuje i ukrywa. */
   Kolejnosc podana IDENTYFIKATORAMI, nie klasami. Powtorzenie tej samej
   klasy w drugiej regule tworzy jej druga pelna definicje - a to jest
   dokladnie ten rodzaj dublowania, przez ktory przebudowa ekranu konca raz
   juz nie zadzialala (stare reguly stojace nizej w pliku wygrywaly). */
#rodzajBlok{order:1}
#hrAkcje{order:2}
#jakBylo{order:3}
#doneBramka{order:4}
#doneDrobne{order:5}
#againBtn{order:6}
.done-glowny{width:100%;text-align:center;min-height:52px;
  display:flex;align-items:center;justify-content:center}

/* DWA ZRODLA TEGO SAMEGO PLIKU w jednym rzedzie. Jako osobne przyciski
   pelnej szerokosci wygladaly na trzy rowne dzialania, a sa jednym
   dzialaniem i dwoma drogami do niego. Przy jednym dostepnym zrodle rzad
   ma jedna kolumne i przycisk zajmuje cala szerokosc. */
.zrodla-rzad{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:8px;width:100%;
}
.zrodla-rzad:not(:has(> :not([hidden]))){display:none}
.zrodlo-btn{
  min-height:44px;background:none;border:1px dashed var(--line);color:var(--muted);
  border-radius:10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:10px 8px;
}
.zrodlo-btn:hover{border-color:var(--accent);color:var(--ink);border-style:solid}
.zrodlo-btn[hidden]{display:none}
/* `.done-prywatnosc` i `.done-drobne` maja swoje reguly WYZEJ, razem z
   reszta ekranu konca. Stare stały tutaj i - jako pozniejsze - wygrywały
   z nowymi, wiec przebudowa nie robila nic. Tego rodzaju pomylki nie widac
   ani w kodzie, ani w tescie: oba zestawy sa poprawnym CSS-em. */
.done-prywatnosc{color:var(--muted)}
/* "Ustaw jeszcze raz" nie jest pierwszym krokiem po treningu - pierwszym
   jest wczytanie pliku z zegarka. Dlatego schodzi nizej i jest cichszy. */
/* "Ustaw jeszcze raz" / "Dodaj kolejny blok" - DRUGIE co do wagi dzialanie
   na tym ekranie, nie przypis.
   Stalo na dole przygaszone do 75% i wygladalo jak odnosnik, a przy otwartym
   treningu jest to droga do NASTEPNEGO BLOKU - czyli rzecz robiona kilka razy
   w ciagu jednych zajec. Pelna widocznosc, obwodka w kolorze marki, pelna
   szerokosc jak pozostale dzialania; wypelnienie zostaje dla jednego
   przycisku glownego. */
.done-znowu{
  margin-top:22px;width:100%;max-width:420px;min-height:52px;font-size:15px;
  opacity:1;background:none;color:var(--ink);
  border:1px solid var(--accent);font-weight:700;
}
.done-znowu:hover{background:var(--brass-soft)}

.account-panel{
  position:fixed;inset:0;z-index:60;
  display:none;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.72);
}
.account-panel[open]{display:flex}
.account-card{
  width:100%;max-width:380px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 20px 18px;
  text-align:center;
}
.account-card h2{margin:0 0 6px;font-size:19px;letter-spacing:.02em}
.account-card p{color:var(--muted);font-size:14px;line-height:1.45;margin:0 0 14px}
.account-card ul{
  list-style:none;margin:0 0 18px;padding:0;
  text-align:left;color:var(--muted);font-size:14px;line-height:1.6;
}
.account-card li::before{content:"+ ";color:var(--accent);font-weight:700}
/* Historia w panelu konta. Osobny blok, oddzielony linia - to sa dane
   z TEGO urzadzenia, a nie z konta, i nie moga wygladac na czesc profilu. */
.account-historia{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 0;margin:0 0 14px;text-align:left;
}
/* (reguly dla tego pojemnika sa wyzej - to sa kafle, nie akapit tekstu;
   stara wersja zostala usunieta, bo nadpisywala odstepy siatki) */
.account-historia-btn{
  width:100%;background:none;border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:10px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  text-align:center;
}
.account-historia-btn:hover{border-color:var(--accent)}
.account-demo-btn{margin-top:6px;border-style:dashed}

/* --- zakladki i wykresy analityczne (RPT-020/021/022/031) --- */
/* Siedem zakladek nie miesci sie na telefonie. Przewijanie z zatrzaskiem
   i wygaszeniem na krawedzi mowi, ze cos jest dalej - urwany w polowie
   przycisk wyglada jak blad, a nie jak zaproszenie do przesuniecia. */
.raport-zakladki{
  display:flex;gap:4px;margin:18px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
}
.raport-zakladki::-webkit-scrollbar{display:none}
.zakladka{scroll-snap-align:start}
.zakladka{
  flex:0 0 auto;background:transparent;border:1px solid rgba(255,255,255,.14);
  border-bottom:none;border-radius:8px 8px 0 0;color:var(--muted);
  font-size:12px;font-weight:700;padding:8px 12px;cursor:pointer;white-space:nowrap;
}
.zakladka-aktywna{background:rgba(255,255,255,.06);color:var(--ink);border-color:rgba(255,255,255,.22)}
#raportWidok{
  border:1px solid rgba(255,255,255,.14);border-radius:0 8px 8px 8px;
  padding:12px;background:rgba(255,255,255,.02);
}
.wykres-analityczny{display:flex;flex-direction:column;gap:10px}
/* `overflow:hidden`, nie `visible`: podpisy rysowane przy samej krawedzi
   (numer ostatniej rundy, etykieta strefy) wychodzily poza obrazek
   i rozpychaly cala strone w poziomie. Na telefonie skutkiem bylo
   przewijanie na boki calego raportu. */
.wykres-svg{width:100%;height:auto;display:block;overflow:hidden;max-width:100%}
.wykres-wybor{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);
  border-radius:8px;color:var(--ink);font:inherit;font-size:12px;padding:6px 8px;
}
.wykres-podpis-blok{color:var(--muted);font-size:11px;line-height:1.5;margin:0}
.wykres-pusty,.slupek-brak-podpis{fill:var(--muted);font-size:11px}
.wykres-pusty-blok{color:var(--muted);font-size:12px;margin:0;padding:14px 0;text-align:center}
.siatka{stroke:rgba(255,255,255,.07);stroke-width:1}
.siatka-pion{stroke:rgba(255,255,255,.05);stroke-width:1}
.os-etykieta{fill:var(--muted);font-size:10px}
.naglowek-wykresu{fill:var(--ink);font-size:11px;font-weight:700}

/* Slupki: jeden kolor dla wszystkich. Tecza po jednym kolorze na runde
   sugeruje, ze kolor cos znaczy - a nie znaczy nic. Wyroznienie ma tylko
   ta runda, o ktorej mowi podpis. */
.slupek{fill:rgba(190,55,60,.62)}
.slupek-wyroz{fill:rgba(246,149,0,.85)}
.slupek-slabe-dane{fill:rgba(190,55,60,.28);stroke:rgba(255,255,255,.3);stroke-dasharray:3 3}
.slupek-wartosc{fill:var(--ink);font-size:10px;font-weight:700}
/* Cel dotyku na pelna wysokosc kolumny. Slupek o wartosci bliskiej dolu ma
   kilka pikseli i nie da sie w niego trafic palcem - przezroczysty prostokat
   rozwiazuje to bez zmiany wygladu wykresu. */
.slupek-cel{fill:transparent;cursor:pointer}
.slupek-cel:hover{fill:rgba(255,255,255,.05)}
.slupek-cel-wybrany{fill:var(--brass-soft);stroke:var(--accent);stroke-width:1.5;rx:3}
/* Wiersz tabeli wskazany z innego widoku - ta sama barwa, co zaznaczenie
   na wykresach, zeby dalo sie je skojarzyc bez szukania. */
.wiersz-wybrany{background:var(--brass-soft);outline:1px solid var(--accent);cursor:pointer}
.raport-tabela tbody tr{cursor:pointer}
.raport-tabela tbody tr:hover{background:rgba(255,255,255,.05)}
.slupek-brak{fill:none;stroke:rgba(255,255,255,.22);stroke-dasharray:3 3}

.linia-rundy{fill:none;stroke:rgba(230,90,95,.95);stroke-width:2;stroke-linejoin:round}
.linia-srednia{fill:none;stroke:#F5F5F5;stroke-width:2.5;stroke-dasharray:6 4;opacity:.85}
.chip-srednia{font-style:italic}

.karty-rund{display:flex;flex-direction:column;gap:6px}
.karta-rundy{border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 10px}
.karta-rundy summary{cursor:pointer;font-weight:700;font-size:13px}
.karta-grupa{margin-top:10px}
.karta-grupa h4{margin:0 0 5px;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.karta-siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;
  background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden}
.karta-pozycja{background:#111;padding:6px 8px;display:flex;flex-direction:column;gap:1px}
.karta-etykieta{color:var(--muted);font-size:10px}
.karta-wartosc{font-size:13px;font-weight:700}
.karta-uwaga .karta-wartosc{color:var(--uwaga)}

.ocena{display:flex;flex-direction:column;gap:16px}
.ocena-sekcja h3{margin:0 0 4px;font-size:14px}
.ocena-opis{margin:0 0 8px;font-size:11px;line-height:1.5;color:var(--muted)}
.ocena-wybrany{margin-top:6px;font-weight:600}
.ocena-skala{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.rpe{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  border-radius:8px;color:var(--ink);font:inherit;font-size:13px;font-weight:700;
  padding:10px 0;cursor:pointer;
}
.rpe-wybrany{background:rgba(190,55,60,.85);border-color:transparent}
.ocena-runda{border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 10px;margin-bottom:6px}
.ocena-runda summary{cursor:pointer;font-weight:700;font-size:13px}
.ocena-grupa{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:8px}
.ocena-grupa-nazwa{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em;width:100%}
.ocena-notatka{
  width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  border-radius:8px;color:var(--ink);font:inherit;font-size:13px;padding:8px;resize:vertical;
}
.ocena-stan{margin:6px 0 0;font-size:11px;color:var(--muted);min-height:14px}

.definicje{display:flex;flex-direction:column;gap:6px}
.definicje-grupa{
  margin:14px 0 2px;font-size:10px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;
}
.definicje-grupa:first-of-type{margin-top:4px}
.definicja{border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 10px}
.definicja summary{cursor:pointer;font-weight:700;font-size:13px}
.definicja[open] summary{margin-bottom:6px}
.definicja-zdanie{margin:0 0 4px;font-size:13px;line-height:1.5}
.definicja-czemu{margin:0;font-size:12px;line-height:1.55;color:var(--muted)}

.linia-regeneracji{fill:none;stroke:#6aa8ff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.legenda-linii{fill:var(--muted);font-size:10px;font-weight:700}
.tabela-hrr{width:100%;font-size:12px}
/* Tabela szersza niz ekran przewija sie SAMA, nie rozpycha calej strony. */
.tabela-przewijana{
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  border-radius:var(--radius);
}
.tabela-przewijana table{min-width:420px}

.strefa-blok-1{fill:#4d7fbf}.strefa-blok-2{fill:#4d9e86}
.strefa-blok-3{fill:#b8a044}.strefa-blok-4{fill:#c47a34}
.strefa-blok-5{fill:#c04040}
.strefa-procent{fill:#0B0B0B;font-size:10px;font-weight:800}
.legenda-stref{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;color:var(--muted)}
.legenda-strefa{display:flex;align-items:center;gap:5px}
.legenda-strefa b{color:var(--ink);font-weight:700}
.kropka-strefy{width:9px;height:9px;border-radius:2px;display:inline-block}
.kropka-strefy.strefa-blok-1{background:#4d7fbf}.kropka-strefy.strefa-blok-2{background:#4d9e86}
.kropka-strefy.strefa-blok-3{background:#b8a044}.kropka-strefy.strefa-blok-4{background:#c47a34}
.kropka-strefy.strefa-blok-5{background:#c04040}

/* Panel jakosci - widoczny ZAWSZE, tuz pod kartami (kryterium RPT-031). */
.panel-jakosci{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:rgba(255,255,255,.08);border-radius:8px;overflow:hidden;margin:12px 0;
}
.jakosc-pozycja{background:#111;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.jakosc-etykieta{color:var(--muted);font-size:10px;letter-spacing:.03em;text-transform:uppercase}
.jakosc-wartosc{font-size:13px;font-weight:700}
.jakosc-uwaga .jakosc-wartosc{color:var(--uwaga)}

.raport-zmiana{
  background:rgba(90,160,255,.10);border-left:3px solid rgba(90,160,255,.7);
  border-radius:6px;padding:8px 10px;margin:0 0 10px;font-size:12px;line-height:1.5;
}
.raport-info-uwaga{color:var(--uwaga);font-weight:600}
.raport-demo{
  background:rgba(246,149,0,.12);border:1px solid var(--accent);border-radius:10px;
  padding:10px 12px;margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.02em;
}

.account-actions{display:flex;flex-direction:column;gap:8px}
.account-actions a,.account-actions button{
  display:block;width:100%;
  padding:12px 14px;border-radius:10px;
  font:inherit;font-size:14px;font-weight:700;
  cursor:pointer;text-decoration:none;
}
.account-login{background:var(--accent);color:#0B0B0B;border:none}
.account-close{background:none;color:var(--muted);border:1px solid var(--line)}
/* Ciszej niz "Zaloguj": to ta sama droga, wiec nie moga wygladac na dwie
   rowne mozliwosci do wyboru. */
/* Sekcja Polara ma wygladac jak reszta panelu konta, a nie jak wklejka.
   Przyciski w tym panelu sa PELNEJ SZEROKOSCI i tak samo wysokie - `<a>`
   trzeba do tego zrownac osobno, bo odziedziczy tekst wyrownany do lewej
   i wysokosc z tresci. Na telefonie roznica wychodzila od razu: jeden
   przycisk wezszy i z napisem przy krawedzi. */
.polar-panel{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.polar-stan{
  color:var(--muted);font-size:12px;line-height:1.5;margin:0;
  text-align:center;text-wrap:balance;
}
a.account-historia-btn{
  display:flex;align-items:center;justify-content:center;
  text-align:center;text-decoration:none;box-sizing:border-box;min-height:42px;
}
.diag-tekst{
  width:100%;margin-top:8px;background:#000;color:var(--muted);border:1px solid var(--line);
  border-radius:8px;padding:8px;font-family:ui-monospace,monospace;font-size:11px;line-height:1.4;
}
.account-rejestracja{
  background:none;border:none;color:var(--muted);font-size:12px;
  text-decoration:underline;text-underline-offset:3px;padding:2px;
}
.account-rejestracja:hover{color:var(--ink)}
.account-rejestracja[hidden]{display:none}

/* --- Raport treningu ------------------------------------------------------
   Ekran pojawia sie dopiero po wczytaniu pliku FIT. Do tego momentu
   aplikacja jest timerem i niczym wiecej. */
.raport{padding:16px 14px 40px;max-width:1040px;margin:0 auto;width:100%;min-width:0;overflow-x:clip}
/* Zadne dziecko raportu nie moze byc szersze niz kolumna. Rzeczy, ktore
   naprawde musza byc szersze (tabele), maja wlasne przewijanie. */
.raport > *{max-width:100%}
.raport h2{font-size:20px;margin:0 0 4px}
.raport-info{color:var(--muted);font-size:13px;margin:0 0 16px;line-height:1.4}
.raport-karty{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:18px}
.raport-karta{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px 12px 10px;display:flex;flex-direction:column;gap:2px;
}
.karta-etykieta{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.karta-wartosc{font-size:22px;font-weight:700;line-height:1.1}
.karta-uwaga{color:var(--accent);font-size:11px}

.wykres-box{position:relative}
.hr-wykres{width:100%;max-width:100%;height:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;touch-action:pan-y;overflow:hidden}
.hr-linia{
  fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;
  filter:url(#poswiata);
  /* Linia rysuje sie od lewej przy pierwszym pokazaniu. Efekt trwa
     sekunde i nie wraca przy kazdym przerysowaniu - ozdoba, ktora
     przeszkadza, przestaje byc ozdoba. */
  stroke-dasharray:4000;stroke-dashoffset:4000;
  animation:rysuj 1.1s cubic-bezier(.25,.9,.3,1) forwards;
}
@keyframes rysuj{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.hr-linia{animation:none;stroke-dashoffset:0}}
.hr-wypelnienie{fill:url(#gradHR);stroke:none}

/* Strefy: im wyzsza, tym cieplejszy kolor. Celowo blade - sa tlem dla
   linii, nie trescia. */
.strefa{opacity:.5}
.strefa-1{fill:rgba(90,160,255,.10)}
.strefa-2{fill:rgba(90,200,160,.10)}
.strefa-3{fill:rgba(230,200,80,.10)}
.strefa-4{fill:rgba(240,150,60,.12)}
.strefa-5{fill:rgba(240,70,70,.14)}
.strefa-etykieta{fill:var(--muted);font-size:9px;letter-spacing:.04em;opacity:.75}

.kursor-linia{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.kursor-kropka{fill:var(--accent);stroke:#0B0B0B;stroke-width:2}

.wykres-dymek{
  position:absolute;top:8px;transform:translateX(-50%);
  background:#0B0B0B;border:1px solid var(--accent);border-radius:10px;
  padding:8px 10px;font-size:12px;line-height:1.45;pointer-events:none;
  white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.6);z-index:2;
}
.wykres-sterowanie{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.wykres-sterowanie button{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:7px 11px;font:inherit;font-size:12px;cursor:pointer;
}
.wykres-sterowanie button:disabled{opacity:.4;cursor:default}
.wykres-podpis{color:var(--muted);font-size:11px;margin-left:auto}
/* Pasy w tle sa delikatne CELOWO - jednoznacznosc daje wstega u gory.
   Pierwsza wersja miala tylko te pasy i uzytkownik zglosil, ze nie widac,
   kiedy byla runda. */
/* Rundy na bordowo, przerwy na niebiesko - OBOJE przezroczyste, bo pod
   nimi jest wykres, a to on jest tresci. Kolor jest STALY, nie bierze sie
   z --accent: ten zmienia sie z faza timera, wiec ten sam raport
   ogladany w dwoch momentach mial dwa rozne kolory rund. */
/* Pas bloku - calego uruchomienia timera. Ciemniejszy i CHLODNY, zeby nie
   mylil sie z czerwienia rundy: to nie jest kolejny rodzaj wysilku, tylko
   ramka, w ktorej rundy siedza. */
/* Wyrazniej niz w pierwszej wersji: przy blokach stojacych blisko siebie
   ledwo widoczne tlo sprawialo, ze dwa uruchomienia timera czytaly sie jak
   jedno - i tak wlasnie zostalo zgloszone. */
.pas-blok{fill:rgba(255,255,255,.05)}
.pas-blok-b{fill:rgba(255,255,255,.11)}
.wstega-blok{fill:rgba(255,255,255,.20)}
.wstega-blok-podpis{
  fill:var(--ink);font-family:var(--font-heading);font-size:12px;font-weight:700;
  letter-spacing:.04em;
}
.granica-bloku{stroke:rgba(255,255,255,.55);stroke-width:1.5}
.pas-runda{fill:rgba(190,55,60,.10)}
.pas-runda-b{fill:rgba(190,55,60,.15)}
.pas-przerwa{fill:rgba(90,160,255,.13)}
.granica-rundy{stroke:rgba(255,255,255,.22);stroke-width:1}

.wstega-runda{fill:rgba(190,55,60,.55);stroke:rgba(230,90,95,.85);cursor:zoom-in}
.wstega-przerwa{fill:rgba(90,160,255,.45);stroke:rgba(120,180,255,.7)}
.wstega-numer{fill:#F5F5F5;font-size:10px;font-weight:800;pointer-events:none}
.lapacz{pointer-events:all}
.os-pionowa{stroke:rgba(255,255,255,.05);stroke-width:1}
.zaznaczenie{fill:rgba(246,149,0,.13)}
.chip-runda.chip-wybrany{background:rgba(190,55,60,.9);color:#F5F5F5;border-color:transparent}
.zaznaczenie-brzeg{stroke:var(--accent);stroke-width:1.5}

/* --- wybieralne rundy i przerwy --- */
.wykres-chipy{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:6px 13px;font:inherit;font-size:12px;font-weight:700;
  cursor:pointer;min-width:44px;transition:border-color .15s,background .15s;
}
.chip-przerwa{color:var(--muted);font-weight:600}
.chip:hover{border-color:var(--accent)}
.chip-wybrany{background:var(--accent);color:#0B0B0B;border-color:transparent}
.chip-przerwa.chip-wybrany{background:rgba(90,160,255,.85);color:#0B0B0B}

.wykres-szczegoly{
  margin-top:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;
}
.szczegoly-podpowiedz{color:var(--muted);font-size:13px}
.szczegoly-tytul{font-size:15px;font-weight:700;margin-bottom:10px}
.szczegoly-lista{
  display:grid;grid-template-columns:auto auto;gap:6px 18px;margin:0;
  font-size:13px;
}
.szczegoly-lista dt{color:var(--muted)}
.szczegoly-lista dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.szczegoly-zoom{
  margin-top:12px;background:none;border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:8px 12px;font:inherit;font-size:12px;cursor:pointer;
}

/* --- dymek --- */
.dymek-czas{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.dymek-drobne{color:var(--muted);font-size:11px}
.dymek-strefa{font-size:11px;font-weight:700}
.dymek-strefa.s1{color:#6aa8ff}.dymek-strefa.s2{color:#5ac8a0}
.dymek-strefa.s3{color:var(--uwaga)}.dymek-strefa.s4{color:#f0963c}
.dymek-strefa.s5{color:#f04646}
/* Luka ma byc WIDOCZNA, nie zamaskowana - to jest informacja o jakosci
   pomiaru, a nie usterka do ukrycia. */
.pas-luka{fill:rgba(255,80,80,.16)}
/* Rzadszy zapis - pomiar trwal, wiec linia idzie dalej. Ledwo widoczne
   tlo mowi tylko tyle, ze punktow tu nie bylo. */
.pas-cisza{fill:rgba(255,255,255,.04)}
/* Pauza to przerwa TECHNICZNA w rundzie, nie odpoczynek - w analizie
   tetna to inny stan organizmu, wiec i inny znacznik. */
.pas-pauza{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.25);stroke-dasharray:3 3}
.pas-numer{fill:var(--muted);font-size:11px;font-weight:700}
.os-etykieta{fill:var(--muted);font-size:10px}
.os-linia{stroke:rgba(255,255,255,.07);stroke-width:1}
.hr-brak{fill:var(--muted);font-size:14px}

.raport-tabela{width:100%;border-collapse:collapse;margin-top:18px;font-size:13px}
.raport-tabela th{color:var(--muted);font-weight:600;text-align:right;padding:6px 8px;font-size:11px;text-transform:uppercase}
.raport-tabela th:first-child,.raport-tabela td:first-child{text-align:left}
.raport-tabela td{padding:7px 8px;text-align:right;border-top:1px solid var(--line)}
.runda-braki{color:var(--muted)}
.runda-braki td:last-child{color:#ff6b6b}

.historia-wpis{
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;margin-bottom:6px;
}
/* Podglad przebiegu tetna - srednie kolejnych rund. Kafelek i tak mial
   te wysokosc przez dwa wiersze tekstu, wiec wykres nie zabiera miejsca,
   tylko wypelnia to, ktore stalo puste. Z listy widac wtedy KSZTALT
   treningu, a nie tylko jego date. */
.historia-iskra{flex:0 0 auto;width:76px;height:30px;display:block}
.iskra-slupek{fill:rgba(190,55,60,.75)}
.iskra-slupek-szczyt{fill:var(--accent)}
.iskra-brak{
  flex:0 0 auto;width:76px;height:30px;border-radius:6px;
  border:1px dashed rgba(255,255,255,.14);
}
.historia-glowne{flex:1 1 200px;min-width:0}
.historia-data{font-weight:700;font-size:13px}
/* Szczegoly w JEDNEJ linii z wielokropkiem zamiast zawijania na trzy
   wiersze - to one robily z kafelka pol ekranu. Calosc jest w `title`. */
.historia-szczegoly{
  color:var(--muted);font-size:11px;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.historia-ocena{color:var(--muted);font-size:10px;margin-top:1px}
.historia-przyciski{display:flex;gap:6px;flex-wrap:wrap}
.historia-przyciski{flex:0 0 auto}
.historia-przyciski button{
  background:none;border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:7px 10px;font:inherit;font-size:12px;cursor:pointer;
}
.historia-przyciski .usun{color:#ff6b6b;border-color:rgba(255,107,107,.35)}
.sesja-linia{border:none;border-top:1px solid rgba(255,255,255,.12);margin:26px 0 18px}
.klub{border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:10px 12px;margin-bottom:6px}
.klub summary{cursor:pointer;font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}
/* Znak przy nazwie ma STALY rozmiar takze wtedy, gdy herbu nie ma - inaczej
   lista klubow rozjezdza sie w pionie zaleznie od tego, kto wgral logo. */
.klub-znak{flex:0 0 auto;width:20px;height:20px;display:block}
.klub-herb-pole{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.klub-herb-btn,.klub-herb-zdejmij{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:7px 11px;font:inherit;font-size:12px;cursor:pointer;
}
.klub-herb-btn:hover,.klub-herb-zdejmij:hover{border-color:var(--accent)}
.klub-herb-stan{color:var(--muted);font-size:11px;flex:1 1 100%;line-height:1.45}
.klub-meta{color:var(--muted);font-size:11px;margin:4px 0 8px}
.klub-kod{
  display:inline-flex;align-items:center;gap:8px;background:rgba(190,55,60,.12);
  border:1px solid rgba(230,90,95,.45);border-radius:8px;padding:6px 10px;margin-bottom:8px;
}
.klub-kod code{font-size:18px;font-weight:800;letter-spacing:.2em}
.klub-podnaglowek{
  color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.07em;
  margin:6px 0 6px;
}
.klub-ludzie{margin-bottom:10px}
.klub-osoba{
  display:flex;align-items:center;gap:9px;padding:6px 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.klub-osoba:first-of-type{border-top:none}
.pas{flex:0 0 auto;width:52px;height:15px;border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.5)}
.pas-brak{
  flex:0 0 auto;width:52px;height:15px;border-radius:3px;
  border:1px dashed rgba(255,255,255,.22);
}
.klub-osoba-nazwa{font-size:13px;font-weight:600;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.klub-osoba-pas{color:var(--muted);font-size:10px;flex:0 0 auto;text-align:right}
@media (max-width:420px){
  /* Na waskim ekranie opis stopnia dubluje sam pas - zostaje sam obrazek. */
  .klub-osoba-pas{display:none}
}

.klub-trening{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:7px 0;border-top:1px solid rgba(255,255,255,.07);font-size:12px;
}
.klub-trening button{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:7px;
  color:var(--ink);font:inherit;font-size:11px;padding:5px 10px;cursor:pointer;flex:0 0 auto;
}

.sesja-kod-pole{display:flex;gap:8px;margin:12px 0}
#sesjaKod{
  flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);
  border-radius:8px;color:var(--ink);font:inherit;font-size:24px;font-weight:700;
  letter-spacing:.3em;padding:12px;text-align:center;text-transform:uppercase;
}
.sesja-kod-wynik{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:rgba(190,55,60,.12);border:1px solid rgba(230,90,95,.5);border-radius:10px;
  padding:14px;margin:10px 0;
}
.sesja-kod-wynik code{font-size:30px;font-weight:800;letter-spacing:.25em}

.historia-widoki{display:flex;gap:4px;margin-bottom:10px}
/* --- spozniony zegar czujnika ---------------------------------------------
   Pytanie, nie ostrzezenie: nie wiemy jeszcze, czy to blad zegara, czy nawyk
   zatrzymywania czujnika. Stad obwodka w kolorze uwagi, a nie bledu. */
.zegar-pytanie{
  background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--uwaga);border-radius:0 var(--radius) var(--radius) 0;
  padding:12px 14px;margin:10px 0 0;display:flex;flex-direction:column;gap:8px;
}
.zegar-pomiar{margin:0;font-size:13px;line-height:1.45;color:var(--ink)}
/* Pytanie i wyjasnienie zwijaja sie osobno: po odmowie znika samo pytanie,
   a zdanie o tym, ILE brakuje, zostaje na zawsze. Ucieta koncowka bez
   powodu wyglada jak zepsuta aplikacja, a nie jak spozniony czujnik. */
.zegar-pytanie-blok{display:flex;flex-direction:column;gap:8px}
.zegar-pytanie-blok[hidden]{display:none}
.zegar-pytanie-tresc{margin:0;font-size:14px;line-height:1.4;font-weight:600}
.zegar-akcje{display:flex;flex-wrap:wrap;gap:8px}
.zegar-akcje .btn{flex:1 1 200px;min-height:44px;font-size:14px}
.zegar-akcje button:not(.btn){
  flex:0 1 auto;min-height:44px;padding:10px 16px;
  background:none;color:var(--muted);border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:13px;cursor:pointer;
}
.zegar-akcje button:not(.btn):hover{color:var(--ink);border-color:var(--accent)}
.zegar-drobne{margin:0;font-size:11px;line-height:1.5;color:var(--muted)}

/* --- wnioski nad wykresem (uklad probny) ---------------------------------
   Zdania zamiast liczb. Nie licza niczego nowego - zbieraja to, co analiza
   juz ustalila, i mowia to po ludzku. Kazde da sie sprawdzic w zakladce
   obok, wiec raport zostaje bez zmian. */
.raport-wnioski{
  display:flex;flex-direction:column;gap:8px;
  background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 16px;margin:0 0 14px;
}
.wniosek{margin:0;font-size:14px;line-height:1.55;color:var(--ink);text-wrap:pretty}
/* Uwaga o jakosci pomiaru stoi PIERWSZA i wyglada inaczej: kwalifikuje
   wszystkie liczby ponizej, wiec nie moze czytac sie jak kolejne zdanie. */
.wniosek-uwaga{color:var(--uwaga);font-weight:600}
#raportPoWykresie{display:flex;flex-direction:column;gap:12px;margin-top:14px}
#raportPoWykresie[hidden]{display:none}
/* Pusty pojemnik po kaflach nie ma zostawiac odstepu: w ukladzie probnym
   miedzy zdaniami a wykresem nie ma niczego i nie ma czego odsuwac. */
#raportKarty:empty{display:none}

/* --- PILOT --------------------------------------------------------------- */
/* WYBOR ROLI. Dwa kafle, kazdy podpisany URZADZENIEM, na ktorym sie go
   dotyka - "na tym urzadzeniu chodzi timer" kontra "to urzadzenie ma
   sterowac". Nazwy funkcji ("pilot", "kanal") nie mowia nikomu, ktory
   przycisk jest jego; nazwa urzadzenia mowi od razu. */
.pilot-role{width:100%;max-width:420px;display:flex;flex-direction:column;gap:12px}
.pilot-role[hidden]{display:none}
.pilot-rola{
  display:flex;flex-direction:column;gap:6px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px;color:inherit;font:inherit;cursor:pointer;min-height:88px;
}
.pilot-rola:hover{border-color:var(--accent)}
.pilot-rola:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pilot-rola[disabled]{opacity:.6;cursor:default}
.pilot-rola-tytul{font-size:15px;font-weight:700;line-height:1.35}
.pilot-rola-opis{font-size:12px;line-height:1.5;color:var(--muted)}

/* Kod stoi POZA ekranami - ma byc widoczny i przy ustawianiu timera,
   i w trakcie treningu. Trener siega po pilota wtedy, kiedy akurat go
   potrzebuje. */
.pilot-kod{
  position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:40;
  width:min(420px,calc(100vw - 28px));
  background:var(--panel);border:1px solid var(--accent);border-radius:14px;
  padding:12px 14px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.pilot-kod[hidden]{display:none}
.pilot-kod-opis{margin:0 0 6px;font-size:11px;color:var(--muted);line-height:1.45}
/* Kod czyta sie z drugiego konca sali - stad rozmiar i odstepy miedzy
   znakami, a nie zwykly tekst. */
.pilot-kod-znaki{
  margin:0;font-family:var(--font-display);font-size:40px;line-height:1.05;
  letter-spacing:.22em;color:var(--brass);
}
.pilot-kod-link{margin:4px 0 0;font-size:11px;color:var(--muted);word-break:break-all}
.pilot-kod-stan{margin:8px 0 0;font-size:12px;color:var(--muted);min-height:16px}
.pilot-gotowy{color:var(--rest);font-weight:600}
.pilot-kod button{
  margin-top:10px;width:100%;min-height:40px;
  background:none;color:var(--muted);border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:12px;cursor:pointer;
}
.pilot-kod button:hover{color:var(--ink);border-color:var(--accent)}

.pilot-opis{color:var(--muted);font-size:13px;line-height:1.55;max-width:420px;margin:0 0 18px}
.pilot-parowanie{width:100%;max-width:420px;display:flex;flex-direction:column;gap:10px}
.pilot-parowanie[hidden]{display:none}
.pilot-pole span{
  display:block;margin:0 0 6px;color:var(--muted);
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;
}
.pilot-pole input{
  width:100%;min-height:54px;padding:12px 14px;text-align:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font-family:var(--font-display);
  /* 16px to dolna granica, przy ktorej iOS nie przybliza widoku przy
     wejsciu w pole; tu jest znacznie wiecej, bo to sze&#347;c znakow na
     srodku ekranu. */
  font-size:32px;letter-spacing:.18em;text-transform:uppercase;
}
.pilot-pole input:focus{outline:2px solid var(--accent);outline-offset:1px}

/* TRZY PRZYCISKI I NIC WIECEJ. Telefon jest w rece czlowieka, ktory patrzy
   na mate, a nie na ekran - kazdy dodatkowy element to jeden powod wiecej,
   zeby trafic w zly. Stad tez ich wysokosc. */
.pilot-sterowanie{width:100%;max-width:420px;display:flex;flex-direction:column;gap:12px}
.pilot-sterowanie[hidden]{display:none}
.pilot-duzy{width:100%;min-height:72px;font-size:20px}
.pilot-koniec{color:var(--fight);border-color:rgba(211,58,44,.45)}
.pilot-stan{margin:14px 0 0;font-size:13px;color:var(--muted);min-height:18px;text-align:center}

/* --- postep w czasie ----------------------------------------------------- */
.postep{display:flex;flex-direction:column;gap:22px;margin-bottom:14px}
.postep-sekcja{display:flex;flex-direction:column;gap:8px}
.postep-sekcja h3{margin:0;font-family:var(--font-heading);font-size:16px}
.postep-zdanie{
  margin:0;font-size:14px;line-height:1.45;font-weight:600;color:var(--ink);
  background:var(--brass-soft);border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;padding:9px 12px;
}
.linia-postepu{fill:none;stroke:#E65A5F;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.linia-postepu-b{stroke:#6aa8ff}
.linia-postepu-c{stroke:#b8a044}
.linia-nalozenia{fill:none;stroke:#E65A5F;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.kropka-postepu{fill:var(--panel);stroke:#E65A5F;stroke-width:2}
.linia-postepu-b ~ .kropka-postepu{stroke:#6aa8ff}
/* Trend jest WYGLADZENIEM, nie pomiarem - przerywana i przygaszona,
   zeby nie wygladala jak dane. */
.linia-trendu{stroke:rgba(255,255,255,.35);stroke-width:1.5;stroke-dasharray:5 4}

/* --- obciazenie w czasie ---------------------------------------------------
   Trzy warstwy JEDNEJ wielkosci na JEDNEJ osi: slupek to jeden dzien, linie
   to srednie dzienne z 7 i 28 dni. Dwie osie o roznych skalach pozwalaja
   narysowac dowolna teze - stad tu ich nie ma.

   Kolory przeszly walidacje kontrastu i rozroznialnosci przy zaburzeniach
   widzenia barw na tle #0B0B0B (deuteranopia, protanopia, tritanopia:
   najgorsza para dzieli 25 punktow OKLab przy progu 8). Brass o krok
   ciemniejszy niz marka, bo pelny #F69500 wypada poza pasmo jasnosci dla
   ciemnego tla. */
.slupek-ladunek{fill:rgba(184,174,158,.30)}
.linia-ladunek-7{
  fill:none;stroke:#CE7C00;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
}
.linia-ladunek-28{
  fill:none;stroke:#5B93E0;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
}
/* Legenda jest OBOWIAZKOWA przy wiecej niz jednej serii - inaczej tozsamosc
   niesie sam kolor, czego nie odczyta ani osoba z daltonizmem, ani nikt
   patrzacy na wydruk. */
.legenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11px;color:var(--muted)}
.legenda-poz{display:flex;align-items:center;gap:6px}
.legenda-znak{display:inline-block;width:14px;height:3px;border-radius:2px}
.legenda-znak-slupek{height:10px;width:6px;background:rgba(184,174,158,.55)}
.legenda-znak-7{background:#CE7C00}
.legenda-znak-28{background:#5B93E0}

/* Bilans: duza liczba po lewej, zdanie po prawej. Stosunek 1,42 nie mowi
   nikomu nic; "+42%" mowi wszystko. */
.bilans{
  display:flex;align-items:center;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:0 var(--radius) var(--radius) 0;padding:12px 14px;
}
.bilans-lewa{display:flex;flex-direction:column;align-items:center;flex-shrink:0;min-width:88px}
.bilans-liczba{font-family:var(--font-display);font-size:34px;line-height:1;letter-spacing:.02em}
.bilans-etykieta{
  color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em;
  text-align:center;margin-top:3px;
}
.bilans-prawa{display:flex;flex-direction:column;gap:5px;min-width:0}
.bilans-zdanie{margin:0;font-size:13px;line-height:1.45;font-weight:600}
.bilans-drobne{margin:0;font-size:10px;line-height:1.45;color:var(--muted)}
/* Stan jest DODATKOWO nazwany slowami w zdaniu obok - kolor sam niczego tu
   nie orzeka, bo "wiecej niz zwykle" nie znaczy "zle". */
.bilans-rytm{border-left-color:var(--rest)}
.bilans-wyzej{border-left-color:var(--uwaga)}
.bilans-nizej{border-left-color:#5B93E0}
.bilans-rytm .bilans-liczba{color:var(--rest)}
.bilans-wyzej .bilans-liczba{color:var(--uwaga)}
.bilans-nizej .bilans-liczba{color:#5B93E0}

/* --- z kim i w czym -------------------------------------------------------- */
.stroje-rzad{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.stroj-kafel{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px;display:flex;flex-direction:column;align-items:center;gap:2px;
}
.stroj-nazwa{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.stroj-liczba{font-family:var(--font-display);font-size:30px;line-height:1.05}
.stroj-drobne{font-size:10px;color:var(--muted);text-align:center}
.partnerzy-lista{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.partner-wiersz{
  display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:10px 12px;font-size:13px;background:var(--panel);
  border-top:1px solid var(--line);
}
.partner-wiersz:first-child{border-top:0}
.partner-naglowek{
  font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  background:rgba(255,255,255,.03);
}
.partner-imie{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.partner-razy{color:var(--muted);font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.partner-tetno{font-weight:700;font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
.partner-naglowek .partner-tetno{font-weight:400}

.kalendarz{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.kalendarz-pasek{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kalendarz-pasek button{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:8px;
  color:var(--ink);font-size:18px;line-height:1;padding:4px 12px;cursor:pointer;
}
.kalendarz-tytul{font-weight:700;font-size:14px;text-transform:capitalize}
.kalendarz-siatka{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.kalendarz-naglowek{color:var(--muted);font-size:10px;text-align:center;padding:2px 0}
.kalendarz-pole{
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;border:1px solid rgba(255,255,255,.08);border-radius:6px;
  background:transparent;color:var(--muted);font:inherit;font-size:11px;padding:0;
}
.kalendarz-puste{border:none}
.kalendarz-trening{
  background:rgba(190,55,60,.35);border-color:rgba(230,90,95,.6);color:var(--ink);cursor:pointer;
}
.kalendarz-trening:hover{background:rgba(190,55,60,.55)}
/* Trening bez pomiaru tetna wyglada INACZEJ - to jedna z rzeczy, po ktore
   sie tu przychodzi. */
.kalendarz-bez-tetna{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.35)}
.kalendarz-dzien{font-weight:700}
.kalendarz-rundy{font-size:9px;opacity:.75}

.historia-filtry{
  display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;
  padding:10px;margin-bottom:12px;border:1px solid rgba(255,255,255,.12);border-radius:8px;
}
.filtr{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em}
.filtr select{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:8px;
  color:var(--ink);font:inherit;font-size:12px;padding:6px 8px;text-transform:none;letter-spacing:0;
}
.historia-licznik{width:100%;margin:0;font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0}
.historia-ocena{color:var(--muted);font-size:11px}
.historia-bloki{
  color:var(--rest);font-size:10px;font-weight:600;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.historia-pusto{color:var(--muted);font-size:14px;padding:20px 0}

.raport-akcje{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.raport-akcje button,.raport-akcje label{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:11px 14px;font:inherit;font-size:13px;cursor:pointer;
}
.raport-akcje .glowny{background:var(--accent);color:#0B0B0B;border-color:transparent;font-weight:700}

/* --- stopka ---------------------------------------------------------------
   `margin-top:auto` dosuwa ja do dolu okna, gdy ekran jest krotki, i idzie
   pod trescia, gdy dlugi. Bez tego na ekranie ustawien wisialaby w polowie
   wysokosci, a w historii - w srodku listy. */
.stopka-stara{color:var(--uwaga)}
.stopka{
  width:100%;flex-shrink:0;margin-top:auto;padding:26px 20px 22px;text-align:center;
  font-family:var(--font-heading);font-size:11px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:#5f5b55;
}
/* Na ekranie timera stopka jest zbedna - liczy sie zegar, nie marka. */
body[data-phase="fight"] .stopka,
body[data-phase="rest"] .stopka,
body[data-phase="prep"] .stopka{visibility:hidden}