:root {
  --orange: #e8641b;
  --orange-dark: #c94f0e;
  --ink: #1f2430;
  --muted: #6b7280;
  --bg: #f4f5f7;
  --card: #ffffff;
  --line: #e5e7eb;
  --green: #15803d;
  --green-bg: #dcfce7;
  --red: #b91c1c;
  --red-bg: #fee2e2;
  --amber: #92600a;
  --amber-bg: #fef3c7;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }

/* ---------- górny pasek ---------- */
.topbar {
  background: linear-gradient(135deg, #23262f, #363b47);
  color: #fff;
  border-bottom: 4px solid var(--orange);
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 14px rgba(15, 17, 22, .35);
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 8px; padding-top: 10px; padding-bottom: 10px;
}
.brand {
  color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem;
  display: flex; align-items: center; gap: 10px; letter-spacing: .01em;
}
.brand-logo { height: 42px; width: auto; }
.user-icons { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.user-icons a, .user-icons button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px; border-radius: 99px; border: 0; background: none;
  color: #c9cdd6; cursor: pointer; transition: background .15s, color .15s;
}
.user-icons a:hover, .user-icons button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.user-icons a.active { background: var(--orange); color: #fff; }
.user-icons .nav-ico { width: 20px; height: 20px; }
.nav {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap; justify-content: flex-end;
  max-width: 100%; padding: 4px 0;
}
/* zalogowany: menu w osobnej linii pod logo (ikony profilu/wylogowania są w linii logo) */
.user-icons ~ .nav { flex: 1 1 100%; }
.nav a, .nav .nav-out {
  color: #c9cdd6; text-decoration: none; font-size: .84rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 11px; border-radius: 99px; border: 0; background: none;
  font-family: inherit; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav a:hover, .nav .nav-out:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav a.active { background: var(--orange); color: #fff; }
.nav a.active:hover { background: var(--orange-dark); }
.nav-ico { width: 17px; height: 17px; flex: none; }
.nav .nav-out { color: #9aa0ab; }
.inline { display: inline; }
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--orange); font: inherit; font-size: .95rem;
}
.linklike:hover { text-decoration: underline; }

/* dostępność */
a:focus-visible, button:focus-visible, input:focus-visible + span,
.check-row:focus-within, .plan-cell:focus-within {
  outline: 2px solid var(--orange); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* main ma też klasę .wrap, a klasa bije selektor elementu – stąd main.wrap,
   inaczej padding z .wrap zeruje górny odstęp i nagłówek dotyka paska nawigacji */
main.wrap { padding: 30px 16px 44px; }
@media (max-width: 560px) { main.wrap { padding-top: 22px; } }

h1 { font-size: 1.5rem; margin: 0 0 16px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }

/* Tytuł strony – tylko nagłówki najwyższego poziomu, nie te w kartach
   (logowanie, rejestracja, dokumenty zachowują swój dotychczasowy wygląd). */
main.wrap > h1 {
  font-size: 1.72rem;
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 22px;
  padding-bottom: 13px;
  position: relative;
}
main.wrap > h1::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 48px; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, var(--orange), #f0b429);
}
/* link powrotu nad nagłówkiem – bez zbędnego marginesu u góry.
   :has(> a) celuje tylko w linki, żeby nie ruszyć np. logo na stronie logowania. */
main.wrap > p:first-child:has(> a) { margin: 0 0 14px; font-size: .9rem; }
@media (max-width: 560px) { main.wrap > h1 { font-size: 1.5rem; } }
h3 { font-size: 1rem; margin: 0 0 8px; }
.sub { color: var(--muted); font-size: .9rem; }

/* ---------- karty ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 20px;
}
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 720px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.stat { text-align: center; padding: 16px; }
.stat .num { font-size: 1.7rem; font-weight: 700; }
.stat .lbl { color: var(--muted); font-size: .85rem; }
.stat.bad .num { color: var(--red); }
.stat.good .num { color: var(--green); }

/* ---------- alerty / plakietki ---------- */
.alert { border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.alert-ok   { background: var(--green-bg); color: var(--green); }
.alert-err  { background: var(--red-bg); color: var(--red); }
.alert-info { background: #e0ecff; color: #1d4ed8; }
.alert-warn { background: var(--amber-bg); color: var(--amber); }

.badge {
  display: inline-block; padding: 2px 10px; border-radius: 99px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.badge-paid    { background: var(--green-bg); color: var(--green); }
.badge-due     { background: var(--amber-bg); color: var(--amber); }
.badge-overdue { background: var(--red-bg); color: var(--red); }
.badge-part    { background: #e0ecff; color: #1d4ed8; }
.badge-muted   { background: var(--line); color: var(--muted); }

/* ---------- tabele ---------- */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }

/* ---------- formularze ---------- */
label { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=search],
input[type=number], input[type=date], input[type=month], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #cbd0d8; border-radius: 8px;
  font: inherit; background: #fff;
}
/* Safari/Chrome narzucają polu wyszukiwania własny wygląd – wyrównujemy do reszty formularzy */
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--orange); outline-offset: 0; border-color: var(--orange);
}
.hint { color: var(--muted); font-size: .85rem; margin-top: 4px; }

.btn {
  display: inline-block; background: var(--orange); color: #fff; border: 0;
  padding: 10px 18px; border-radius: 8px; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--orange-dark); }
.btn-sm { padding: 5px 12px; font-size: .85rem; }
.btn-ghost { background: transparent; color: var(--orange); border: 1px solid var(--orange); }
.btn-ghost:hover { background: #fdf0e7; }
.btn-danger { background: transparent; color: var(--red); border: 1px solid #f3b4b4; }
.btn-danger:hover { background: var(--red-bg); }
.btn-green { background: var(--green); }
.btn-green:hover { background: #116232; }

.form-narrow { max-width: 420px; margin: 0 auto; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form-row > div { flex: 1; min-width: 130px; }
.mt { margin-top: 16px; }

.footer { color: var(--muted); font-size: .85rem; padding: 20px 16px 40px; text-align: center; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--orange-dark); }

/* ---------- pasek informacji o cookies ---------- */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: #23262f; color: #e5e7eb; border-top: 3px solid var(--orange);
  box-shadow: 0 -6px 24px rgba(15, 17, 22, .3); font-size: .88rem; line-height: 1.45;
}
.cookie-in {
  max-width: 1240px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.cookie-in span { flex: 1 1 320px; }
.cookie-in a { color: #f3b98a; }
.cookie-in .btn { flex: none; }

/* ---------- polityka prywatności ---------- */
.privacy .card { padding: 22px 26px; }
.privacy h2 { font-size: 1.08rem; margin-bottom: 10px; }
.privacy p, .privacy li { font-size: .95rem; color: #3c4250; }
.privacy p:last-child { margin-bottom: 0; }
.privacy ul { padding-left: 20px; margin: 8px 0; }
.privacy li { margin-bottom: 6px; }
.privacy code { background: #f1f3f6; border-radius: 5px; padding: 1px 6px; font-size: .9em; }
@media print { .cookie-bar { display: none !important; } }

.pay-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pay-form input[type=number] { width: 100px; }
.pay-form select { width: auto; }

.bank-box {
  background: #fdf0e7; border: 1px dashed var(--orange); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 20px; font-size: .95rem;
}
.bank-box .acct { font-weight: 700; font-size: 1.05rem; letter-spacing: .5px; }

details.child-card { margin-bottom: 8px; }
details.child-card summary { cursor: pointer; font-weight: 600; padding: 6px 0; }

/* ---------- statystyki finansowe (pulpit) ---------- */
.fin-hero {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap; border-left: 5px solid var(--orange);
}
.tile-lbl { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.hero-num { font-size: 48px; font-weight: 700; line-height: 1.1; }
.delta { font-weight: 600; font-size: .9rem; margin-top: 6px; }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }
.fin-meter { min-width: 240px; flex: 0 1 300px; }
.meter { height: 10px; border-radius: 99px; background: #f7d9c4; overflow: hidden; margin: 8px 0 6px; }
.meter > span { display: block; height: 100%; background: var(--orange); border-radius: 99px; }
.tile .tile-num { font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.tile-bad .tile-num { color: var(--red); }
.split-bar { display: flex; gap: 2px; height: 14px; border-radius: 99px; overflow: hidden; margin: 10px 0 8px; }
.split-bar .seg { display: block; min-width: 6px; }
.seg-p, .sw-p { background: var(--orange); }
.seg-g, .sw-g { background: #4b5563; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: baseline; }

/* ---------- zawodnicy ---------- */
.avatar-xs { width: 30px; height: 30px; border-radius: 50%; flex: none; object-fit: cover; }
.avatar-sm { width: 40px; height: 40px; border-radius: 50%; vertical-align: middle; flex: none; object-fit: cover; }
.p-cell .avatar-xs { width: 30px; height: 30px; }
.ph-photo { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.photo-btn { position: relative; overflow: hidden; cursor: pointer; margin: 0; font-weight: 600; }
.photo-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.avatar-lg {
  object-fit: cover;
  width: 100px; height: 100px; border-radius: 50%; flex: none;
  border: 3px solid #fff; box-shadow: 0 4px 14px rgba(31, 36, 48, .16);
}

/* pasek narzędzi listy: szukajka + chipy rozmiarów */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .search { position: relative; flex: 1 1 240px; max-width: 340px; }
.toolbar .search input { padding-left: 38px; border-radius: 99px; }
.toolbar .search svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 99px;
  padding: 5px 12px; font-size: .84rem; font-weight: 600; white-space: nowrap;
}
.chip b { color: var(--orange-dark); }
.chip-lbl { color: var(--muted); font-size: .8rem; font-weight: 600; }

/* tabela zawodników */
.tbl-players tr { transition: background .12s; }
.tbl-players tbody tr:hover, .tbl-players tr:hover td { background: #fdf6f1; }
.tbl-players td { vertical-align: middle; }
.tbl-players .num-col { font-variant-numeric: tabular-nums; }
.p-cell { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.p-cell a { text-decoration: none; color: var(--ink); font-weight: 700; }
.p-cell a:hover { color: var(--orange-dark); }
.p-cell .sub { display: block; font-weight: 400; }
.pos-tag {
  display: inline-block; background: #f1f3f6; border-radius: 6px;
  padding: 2px 9px; font-size: .82rem; font-weight: 600; color: #4b5563; white-space: nowrap;
}
tr.row-off td { opacity: .55; }

/* nagłówek profilu: łuki boiska + numer-duch */
.player-head {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  border-left: 5px solid var(--orange); position: relative; overflow: hidden;
}
.player-head::before, .player-head::after {
  content: ''; position: absolute; border: 2px solid rgba(232, 100, 27, .14);
  border-radius: 50%; pointer-events: none;
}
.player-head::before { width: 230px; height: 230px; right: -70px; top: -80px; }
.player-head::after { width: 150px; height: 150px; right: -30px; top: -40px; }
.ph-ghost {
  position: absolute; right: 22px; bottom: -14px; line-height: 1;
  font-size: 6.4rem; font-weight: 900; color: rgba(232, 100, 27, .10);
  pointer-events: none; user-select: none; letter-spacing: -.04em;
}
.player-head > div { position: relative; }
/* kolumna z nazwiskiem (i karteczką notatki) zajmuje resztę szerokości; na wąskim ekranie spada pod zdjęcie.
   Numer-duch to też div – musi zostać poza tą regułą, inaczej rozpycha nagłówek. */
.player-head > div:not(.ph-photo):not(.ph-ghost) { flex: 1 1 300px; min-width: 0; }
.jersey-chip {
  display: inline-block; background: var(--orange); color: #fff;
  border-radius: 8px; padding: 2px 10px; font-size: .95rem; font-weight: 800;
  vertical-align: middle;
}

/* segmenty rodzaju wpisu */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg span {
  display: inline-block; border: 2px solid var(--line); border-radius: 99px;
  padding: 6px 14px; font-size: .86rem; font-weight: 600; color: var(--muted);
  transition: border-color .12s, background .12s, color .12s;
}
.seg label:hover span { border-color: #cbd0d8; }
.seg input:checked + span { color: #fff; }
.seg .s-postep    input:checked + span { background: var(--green);  border-color: var(--green); }
.seg .s-zalecenie input:checked + span { background: var(--amber);  border-color: var(--amber); }
.seg .s-wskazowka input:checked + span { background: #1d4ed8;       border-color: #1d4ed8; }
.seg .s-info      input:checked + span { background: #4b5563;       border-color: #4b5563; }

/* przełącznik widoczności dla rodzica */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: .92rem; margin: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 42px; height: 24px; border-radius: 99px; background: #cbd0d8;
  position: relative; flex: none; transition: background .15s;
}
.switch .track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: left .15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.switch input:checked + .track { background: var(--green); }
.switch input:checked + .track::after { left: 21px; }

/* dziennik */
.note-list { display: flex; flex-direction: column; gap: 10px; }
.note-item { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 12px 14px; background: #fafbfc; }
.note-postep    { border-left-color: var(--green); }
.note-zalecenie { border-left-color: var(--amber); }
.note-wskazowka { border-left-color: #1d4ed8; }
.note-info      { border-left-color: #9aa0ab; }
.note-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.note-body { font-size: .95rem; }
.coach-notes { margin-bottom: 12px; }
.coach-notes summary { cursor: pointer; font-weight: 600; color: var(--orange-dark); }

/* ---------- trener <-> zawodnik ---------- */
/* akcje zdjęcia dziecka w panelu rodzica */
.child-photo-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -2px 0 12px; }

/* wybór trenerów (checkboxy) na profilu zawodnika */
.coach-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.coach-opt {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer;
  border: 2px solid var(--line); border-radius: 99px; padding: 5px 14px 5px 8px;
  font-size: .9rem; font-weight: 600; color: var(--muted);
  transition: border-color .12s, background .12s, color .12s;
}
.coach-opt:hover { border-color: #cbd0d8; }
.coach-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.coach-opt input:checked + .avatar-xs + span,
.coach-opt:has(input:checked) { color: var(--ink); }
.coach-opt:has(input:checked) { border-color: var(--orange); background: #fdf0e7; }

/* prowadzeni zawodnicy na profilu trenera */
.coach-kids { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kid-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fdf0e7; border: 1px solid #f3c9a8; border-radius: 99px;
  padding: 3px 4px 3px 12px; font-size: .86rem; font-weight: 600;
}
.kid-chip a { text-decoration: none; color: var(--orange-dark); }
.kid-chip a:hover { text-decoration: underline; }
.chip-x {
  border: none; background: #f3c9a8; color: #7a3b12; cursor: pointer;
  width: 18px; height: 18px; line-height: 1; border-radius: 50%;
  font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.chip-x:hover { background: var(--orange); color: #fff; }

/* wizytówka trenera w panelu rodzica */
.coach-badge { display: flex; align-items: flex-start; gap: 12px; }
.coach-badge .avatar-sm { margin-top: 2px; }

/* ---------- panel trenera ---------- */
/* dane klubowe zawodnika – podgląd bez formularza */
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 4px; }
@media (max-width: 620px) { .fact-grid { grid-template-columns: 1fr 1fr; } }
.fact { background: #fafbfc; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.fact-lbl { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.fact-val { display: block; font-weight: 700; font-size: 1.02rem; margin-top: 2px; }

/* akcje przy własnym wpisie w dzienniku */
.note-acts { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }

/* konto logowania trenera w panelu prezesa */
.coach-acc { border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; background: #fafbfc; }
.acc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coach-acc .form-row { gap: 10px; }
.coach-acc p.sub { margin: 6px 0 10px; }

/* zapowiedź naliczenia składki przy zatwierdzaniu zawodnika */
.enroll-note {
  margin: -4px 0 12px; padding: 9px 13px; border-radius: 10px;
  font-size: .87rem; line-height: 1.45;
}
.enroll-note.is-auto   { background: var(--green-bg); color: var(--green); }
.enroll-note.is-manual { background: var(--amber-bg); color: var(--amber); }

/* ---------- drugi rodzic / opiekun ---------- */
.guardian-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.guardian-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; background: #fafbfc;
}
.guardian-row.is-pending { border-style: dashed; background: #fffdf6; margin-top: 8px; }
.guardian-row .sub { font-size: .84rem; }

/* strona zaproszenia */
.invite-hero { text-align: center; margin-bottom: 18px; }
.invite-crest { height: 84px; margin-bottom: 10px; }
.invite-list { margin: 6px 0 14px; padding-left: 20px; color: #3c4250; font-size: .94rem; }
.invite-list li { margin-bottom: 4px; }

/* ---------- wykres wieku zawodników ---------- */
.age-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.age-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.age-chart {
  display: flex; align-items: flex-end; gap: 6px; padding: 8px 0 0;
}
.age-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.age-bar-wrap {
  width: 100%; height: 130px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  border-bottom: 2px solid var(--line);
}
.age-bar {
  width: 80%; max-width: 42px; min-height: 3px;
  background: linear-gradient(180deg, #f7a668, var(--orange));
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .05);
  transition: height .35s cubic-bezier(.22, 1, .36, 1);
}
.age-col.is-empty .age-bar { min-height: 0; }
.age-col.is-max .age-bar { background: linear-gradient(180deg, var(--orange), var(--orange-dark)); }
.age-count { font-size: .82rem; font-weight: 800; color: var(--ink); margin-bottom: 5px; min-height: 1em; line-height: 1; }
.age-col.is-max .age-count { color: var(--orange-dark); }
.age-x { margin-top: 8px; text-align: center; line-height: 1.05; }
.age-x b { font-size: .95rem; font-weight: 800; color: var(--ink); }
.age-x span { display: block; font-size: .66rem; color: var(--muted); }

/* ---------- dni treningów (deklaracja rodzica) ---------- */
/* trzy pastylki pon/wt/pt w tabelach i na kartach – zadeklarowane podświetlone */
.days { display: inline-flex; gap: 3px; vertical-align: middle; }
.days i {
  font-style: normal; font-size: .74rem; font-weight: 700; line-height: 1;
  padding: 4px 7px; border-radius: 6px; letter-spacing: .02em;
  background: #f1f3f6; color: #b3b9c4; border: 1px solid transparent;
}
.days i.on { background: var(--orange); color: #fff; }
.days-none { color: var(--muted); }
.chip-dim { color: var(--muted); border-style: dashed; }

/* chipy-filtry dni nad listą zawodników (prezes i trener) – klik zostawia tylko trenujących danego dnia */
button.day-filter { font: inherit; font-size: .84rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .12s, background .12s; }
button.day-filter:hover { border-color: var(--orange); }
button.day-filter:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
button.day-filter.is-on { background: var(--orange); border-color: var(--orange); border-style: solid; color: #fff; }
button.day-filter.is-on b { color: #fff; }
.day-filter-hint { font-size: .82rem; }
.day-filter-hint b { color: var(--orange-dark); }

/* wybór dni – duże, „klikalne” kafelki (panel rodzica i prezesa) */
.days-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.day-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.day-opt { margin: 0; cursor: pointer; }
.day-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.day-opt span {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 96px; padding: 8px 14px; border: 2px solid var(--line); border-radius: 10px;
  font-size: .8rem; font-weight: 500; color: var(--muted); background: #fff;
  transition: border-color .12s, background .12s, color .12s;
}
.day-opt span b { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.day-opt:hover span { border-color: #cbd0d8; }
.day-opt input:checked + span { border-color: var(--orange); background: #fdf0e7; color: var(--orange-dark); }
.day-opt input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }

/* blok deklaracji w panelu rodzica */
.days-box {
  border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 12px; background: #fafbfc;
}
.days-box.is-empty { border-left-color: var(--amber); background: #fffdf6; }
.days-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* kafelki „ilu w który dzień” na pulpicie prezesa */
.days-card { border-left: 5px solid var(--orange); }
.days-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.days-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.days-tile { text-align: center; background: #fdf0e7; border-radius: 10px; padding: 12px 8px; }
.days-tile-num { font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--orange-dark); }
.days-tile-lbl { font-size: .82rem; font-weight: 600; color: #7a3b12; text-transform: capitalize; }
@media (max-width: 480px) { .days-tiles { gap: 6px; } .days-tile-num { font-size: 1.5rem; } }

/* ---------- notatka trenera (niewidoczna dla rodzica) ---------- */
/* układ: [pole] [dyskietka] / pod spodem stan zapisu („zapisano ✓”) */
.cnote {
  display: grid; grid-template-columns: 1fr auto; column-gap: 6px; align-items: start;
  grid-template-areas: "ta save" "foot foot"; margin: 0;
}
.cnote textarea {
  grid-area: ta; display: block; width: 100%; min-width: 0; margin: 0; resize: none; overflow: hidden; line-height: 1.4;
  padding: 7px 10px; font-size: .9rem; border-radius: 8px;
}
.cnote-save {
  grid-area: save; width: 30px; height: 30px; padding: 0; margin: 3px 0 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--orange); border-radius: 8px; background: #fff; color: var(--orange);
  transition: opacity .12s, background .12s;
}
.cnote-save svg { width: 16px; height: 16px; }
.cnote-save:hover { background: var(--orange); color: #fff; }
/* ze skryptem: dyskietka wyblakła, dopóki nic nie zmieniono (bez JS zawsze pełny kolor) */
.cnote-js .cnote:not(.is-dirty) .cnote-save { opacity: .3; }
.cnote-js .cnote.is-dirty .cnote-save { opacity: 1; background: var(--orange); color: #fff; }
.cnote-foot { grid-area: foot; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; min-height: 1em; }
.cnote-state { font-size: .76rem; font-weight: 600; color: var(--green); margin-left: auto; }
.cnote.is-saving textarea { opacity: .6; }

/* w komórce tabeli: pole wygląda jak zwykły tekst, obramowanie dopiero pod kursorem */
.cnote-col { min-width: 230px; width: 26%; }
.cnote-compact textarea {
  background: transparent; border-color: transparent; padding: 5px 8px; font-size: .86rem;
}
.cnote-compact textarea::placeholder { color: #b3b9c4; font-style: italic; }
.cnote-compact:hover textarea { border-color: #cbd0d8; background: #fff; }
.cnote-compact textarea:focus { background: #fff; }
.cnote-compact .cnote-save { width: 26px; height: 26px; margin: 3px 0 0; }
.cnote-compact .cnote-save svg { width: 14px; height: 14px; }
/* w tabeli stopka pokazuje się tylko w trakcie zapisu i chwilę po nim */
.cnote-compact .cnote-foot { display: none; margin-top: 1px; min-height: 0; }
.cnote-compact.is-dirty .cnote-foot, .cnote-compact.is-saving .cnote-foot,
.cnote-compact.just-saved .cnote-foot { display: flex; }

/* „karteczka” przy zdjęciu na karcie zawodnika */
.cnote-box {
  margin-top: 12px; padding: 10px 12px; max-width: 560px;
  background: #fff8dc; border: 1px dashed #e3c86a; border-radius: 10px;
}
.cnote-lbl { font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.cnote-box textarea { background: #fffdf3; border-color: #ecdca0; }
.cnote-box textarea:focus { background: #fff; }

/* ---------- planer naliczania ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 720px) { .plan-grid { grid-template-columns: 1fr 1fr; } }
.plan-cell {
  display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font-size: .92rem; font-weight: 600; cursor: pointer;
}
.plan-cell input { width: 20px; height: 20px; accent-color: var(--orange); margin: 0; flex: none; }
.plan-cell:has(input:checked) { border-color: var(--orange); background: #fdf0e7; }
.plan-locked { cursor: default; color: var(--muted); background: #fafafa; flex-wrap: wrap; }

/* ---------- zgody / dokument ---------- */
.doc-wrap { max-width: 760px; margin: 0 auto; }
.doc-intro { text-align: center; margin-bottom: 20px; }

.doc-paper {
  background: #fffdf9;
  border: 1px solid var(--line);
  border-top: 6px solid var(--orange);
  border-radius: var(--radius);
  padding: 32px clamp(18px, 5vw, 48px);
  box-shadow: 0 10px 30px rgba(31, 36, 48, .08);
}
.doc-head { text-align: center; margin-bottom: 24px; }
.doc-logo { height: 90px; margin-bottom: 8px; }
.doc-org { font-weight: 700; letter-spacing: .04em; color: var(--orange-dark); font-size: .9rem; text-transform: uppercase; }
.doc-title { font-size: 1.25rem; margin: 10px 0 4px; letter-spacing: .02em; }
.doc-subtitle { color: var(--muted); font-size: .9rem; margin: 0; }

.doc-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
  background: #f8f4ec; border-radius: 10px; padding: 18px; margin-bottom: 24px;
}
@media (max-width: 620px) { .doc-fields { grid-template-columns: 1fr; } }
.doc-field-label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.doc-field-value { font-weight: 700; font-size: 1.05rem; }
.doc-fill { border-bottom: 2px solid var(--orange); padding: 0 2px; }

.doc-sec { margin: 26px 0; }
.doc-sec h3 { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; }
.doc-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--orange); color: #fff; font-size: .9rem;
}
.doc-sec p { color: #3c4250; font-size: .93rem; }
.doc-accepted-line { color: var(--green); font-weight: 600; }

.check-row {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--line); border-radius: 10px;
  padding: 13px 15px; cursor: pointer; font-weight: 600; font-size: .95rem;
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.check-row:hover { border-color: var(--orange); }
.check-row:has(input:checked) { border-color: var(--green); background: var(--green-bg); }
.check-row input { width: 24px; height: 24px; flex: none; accent-color: var(--green); margin: 0; }

.stickybar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 18px; margin-top: 16px;
  box-shadow: 0 -6px 24px rgba(31, 36, 48, .12);
}
.progress-dots { display: flex; gap: 8px; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.dot.on { background: var(--green); transform: scale(1.15); }
.btn-sign { font-size: 1.02rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.doc-signature {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 22px; border-top: 1px dashed #cbd0d8;
}
.stamp {
  border: 3px solid var(--green); color: var(--green);
  border-radius: 8px; padding: 8px 14px; font-weight: 800; font-size: .8rem;
  letter-spacing: .08em; text-align: center; transform: rotate(-6deg);
  opacity: .85; flex: none;
}
.doc-sig-meta { font-size: .92rem; line-height: 1.55; }

/* ekran sukcesu */
.success-box { text-align: center; }
.success-check { width: 84px; height: 84px; margin: 10px auto 4px; display: block; }
.success-check circle, .success-check path {
  stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 160; stroke-dashoffset: 160;
  animation: draw .7s ease forwards;
}
.success-check path { stroke-dasharray: 50; stroke-dashoffset: 50; animation-delay: .55s; animation-duration: .45s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- historia zmian danych klubowych ---------- */
.hist-list { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.hist-list .sub strong { color: var(--ink); }
.hist-row {
  padding: 5px 0;
  font-size: .86rem;
  border-bottom: 1px dashed var(--line);
}
.hist-row:last-child { border-bottom: 0; }
.hist-row .badge { margin-left: 4px; }
tr.hist-new > td { background: var(--amber-bg); }

/* ==========================================================================
   LEGITYMACJA CZŁONKOWSKA VIP
   Karta w pionie (jak wejściówka na mecz) – dobrze wygląda na telefonie,
   którym rodzic się wylegitymuje, i poprawnie się drukuje.
   ========================================================================== */

.card-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* złota ramka gradientowa – zewnętrzna warstwa */
.vipcard-frame {
  width: 100%; max-width: 380px;
  border-radius: 22px; padding: 2px;
  background: linear-gradient(150deg, #f6d365 0%, #e8641b 28%, #7a3b12 52%, #f0b429 78%, #e8641b 100%);
  box-shadow: 0 18px 40px rgba(11, 15, 26, .35), 0 2px 8px rgba(11, 15, 26, .2);
}

.vipcard {
  position: relative; overflow: hidden;
  border-radius: 20px; padding: 22px 22px 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(232, 100, 27, .28) 0%, transparent 60%),
    linear-gradient(165deg, #1b2338 0%, #131a2b 45%, #0b0f1a 100%);
  color: #fff;
}

/* delikatny giloszowy raster – podnosi „drukowany" charakter dokumentu */
.vipcard::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 7px);
  opacity: .55;
}
/* smuga światła po skosie */
.vipcard::after {
  content: ''; position: absolute; top: -60%; left: -30%; width: 90%; height: 220%;
  transform: rotate(18deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
}
.vipcard > * { position: relative; z-index: 1; }

/* --- nagłówek: herb + nazwa klubu + plakietka VIP --- */
.vc-head { display: flex; align-items: center; gap: 12px; }
.vc-crest {
  width: 54px; height: 54px; flex: none; object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .5));
}
.vc-club { flex: 1; min-width: 0; }
.vc-club b {
  display: block; font-size: .95rem; font-weight: 800; letter-spacing: .04em; line-height: 1.2;
}
.vc-club span {
  display: block; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: #f3b98a; margin-top: 3px;
}
.vc-vip {
  flex: none; align-self: flex-start;
  font-size: .68rem; font-weight: 900; letter-spacing: .14em;
  padding: 5px 11px; border-radius: 99px; color: #3a2408;
  background: linear-gradient(135deg, #fde68a, #f0b429 45%, #fff3c4 60%, #e0a020);
  box-shadow: 0 2px 8px rgba(240, 180, 41, .45);
}

.vc-rule { height: 1px; margin: 16px 0 14px; background: linear-gradient(90deg, transparent, rgba(243,185,138,.55), transparent); }

/* --- właściciel --- */
.vc-lbl { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: #8f9bb3; }
.vc-name {
  font-size: 1.42rem; font-weight: 800; line-height: 1.2; margin: 3px 0 0;
  letter-spacing: .01em; overflow-wrap: anywhere;
}

/* --- kod QR + metryka --- */
.vc-body { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.vc-qr {
  flex: none; width: 118px; height: 118px; padding: 7px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.vc-qr svg { display: block; width: 100%; height: 100%; }
.vc-meta { min-width: 0; display: grid; gap: 10px; }
.vc-meta .vc-val { font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.vc-scan { margin: 12px 0 0; font-size: .68rem; color: #8f9bb3; text-align: center; }

/* --- pasek statusu na dole karty --- */
.vc-status {
  margin: 16px -22px 0; padding: 13px 22px;
  display: flex; align-items: center; gap: 11px;
}
.vc-status.is-ok  { background: linear-gradient(90deg, #15803d, #22a75a); }
.vc-status.is-bad { background: linear-gradient(90deg, #b91c1c, #dc4444); }
.vc-status svg { width: 22px; height: 22px; flex: none; }
.vc-status b { display: block; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.vc-status span { display: block; font-size: .74rem; opacity: .9; }

/* zajawka legitymacji w panelu rodzica */
.vip-teaser {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px;
  background: linear-gradient(150deg, #1b2338, #0b0f1a); color: #fff;
  box-shadow: 0 6px 18px rgba(11, 15, 26, .22);
}
.vip-teaser .vt-star {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #3a2408;
  background: linear-gradient(135deg, #fde68a, #f0b429 55%, #e0a020);
}
.vip-teaser > div { flex: 1; min-width: 180px; }
.vip-teaser .sub { color: #b8c0d0; }
.vip-teaser .btn { flex: none; }

/* --- strona publicznej weryfikacji --- */
.verify-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 16px; background: #eef0f4; }
.verify-box { width: 100%; max-width: 430px; }
.verify-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 12px 34px rgba(31, 36, 48, .14); }
.verify-hero { padding: 26px 24px; text-align: center; color: #fff; }
.verify-hero.is-ok  { background: linear-gradient(160deg, #15803d, #0f6030); }
.verify-hero.is-bad { background: linear-gradient(160deg, #b91c1c, #8c1414); }
.verify-hero .vh-mark {
  width: 66px; height: 66px; margin: 0 auto 12px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: center;
}
.verify-hero .vh-mark svg { width: 36px; height: 36px; }
.verify-hero h1 { font-size: 1.32rem; margin: 0; letter-spacing: .06em; text-transform: uppercase; }
.verify-hero p { margin: 6px 0 0; font-size: .9rem; opacity: .92; }
.verify-rows { padding: 6px 24px 20px; }
.verify-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.verify-row:last-child { border-bottom: 0; }
.verify-row .k { color: var(--muted); font-size: .84rem; }
.verify-row .v { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.verify-foot { text-align: center; margin-top: 14px; font-size: .78rem; color: var(--muted); }
.verify-foot img { height: 46px; opacity: .8; display: block; margin: 0 auto 8px; }

/* --- wydruk: sama karta na czystej stronie --- */
@media print {
  .card-actions, .card-note { display: none !important; }
  .vipcard-frame { box-shadow: none; break-inside: avoid; }
  .vipcard { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (prefers-reduced-motion: reduce) {
  .vipcard::after { animation: none; }
}

/* wydruk dokumentu */
@media print {
  .topbar, .footer, .no-print, .alert { display: none !important; }
  body { background: #fff; }
  main.wrap { padding: 0; }
  .doc-paper { border: 0; box-shadow: none; padding: 0; }
}

/* ==========================================================================
   KTO JEST W SYSTEMIE – przycisk w nagłówku + boczna szuflada (tylko prezes)
   ========================================================================== */
.online-btn { position: relative; }
.online-n {
  position: absolute; top: 2px; right: 0;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: var(--green); color: #fff; font-size: .7rem; font-weight: 800; line-height: 18px;
  text-align: center; box-shadow: 0 0 0 2px #2b2f3a;
}
.online-btn[aria-expanded=true] { background: var(--orange); color: #fff; }

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(15, 17, 22, .45);
}
.online-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(400px, 94vw); display: flex; flex-direction: column;
  background: #fff; box-shadow: -12px 0 40px rgba(15, 17, 22, .25);
  transform: translateX(105%); transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.online-drawer.is-open { transform: none; }
body.drawer-open { overflow: hidden; }
@media print { .online-drawer, .drawer-backdrop, .online-btn { display: none !important; } }
.od-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #23262f, #363b47); color: #fff;
}
.od-head h2 { margin: 0; font-size: 1.1rem; }
.od-head .sub { color: #b8c0d0; font-size: .8rem; }
.od-head .sub b { color: #fff; }
.od-close {
  border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%; font-size: 1.4rem; line-height: 1; flex: none;
}
.od-close:hover { background: var(--orange); }
.od-body { flex: 1; overflow-y: auto; padding: 14px 20px; }
.od-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--line); font-size: .85rem; background: #fafbfc;
}
.od-foot a { font-weight: 700; color: var(--orange-dark); text-decoration: none; }
.od-foot a:hover { text-decoration: underline; }
.od-sec { margin-bottom: 18px; }
.od-sec-h {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--muted);
}
.od-sec-h b { color: var(--ink); background: var(--line); border-radius: 99px; padding: 0 8px; font-size: .74rem; }
.od-empty { color: var(--muted); font-size: .88rem; margin: 4px 0 0; }
.od-row {
  display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 6px; background: #fafbfc;
}
.od-row.is-on { border-color: #bbf7d0; background: #f0fdf4; }
.od-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .93rem; min-width: 0; }
.od-who a { color: var(--ink); text-decoration: none; }
.od-who a:hover { color: var(--orange-dark); }
.od-me { font-size: .7rem; font-weight: 700; color: var(--muted); border: 1px dashed #cbd0d8; border-radius: 6px; padding: 0 5px; }
.od-meta { grid-column: 2; font-size: .78rem; color: var(--muted); margin-top: 1px; }
.od-ip { font-variant-numeric: tabular-nums; opacity: .8; }
.od-exp { color: #b45309; }
.od-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.od-dot-on { background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }
.od-dot-off { background: #cbd0d8; }

/* kółko z inicjałami w kolorze funkcji */
.ini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  font-size: .78rem; font-weight: 800; letter-spacing: .02em;
}

/* plakietki funkcji użytkownika: prezes / rodzic / opiekun / trener */
.fn {
  display: inline-block; padding: 1px 8px; border-radius: 99px;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; line-height: 1.5;
}
.fn-admin,    .ini.fn-admin    { background: #fdf0e7; color: var(--orange-dark); }
.fn-parent,   .ini.fn-parent   { background: #e0ecff; color: #1d4ed8; }
.fn-guardian, .ini.fn-guardian { background: #ccfbf1; color: #0f766e; }
.fn-coach,    .ini.fn-coach    { background: #ede9fe; color: #6d28d9; }
.fn-system,   .ini.fn-system   { background: #e5e7eb; color: #4b5563; }
.fn-guest,    .ini.fn-guest    { background: #f1f3f6; color: var(--muted); border: 1px dashed #cbd0d8; }

/* ==========================================================================
   DZIENNIK ZDARZEŃ
   ========================================================================== */
.log-stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.log-stat {
  display: flex; align-items: baseline; gap: 7px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px;
}
.log-stat b { font-size: 1.25rem; font-weight: 800; line-height: 1; }
.log-stat span { font-size: .8rem; color: var(--muted); }
.log-stat.is-bad b { color: var(--red); }
.log-stats .btn { margin-left: auto; }

.log-filters { padding: 14px 20px 18px; }
.log-filters .form-row { align-items: flex-end; }
.log-filters .log-q { flex: 2 1 220px; position: relative; }
.log-filters .log-q input { padding-left: 38px; }
.log-filters .log-q svg {
  position: absolute; left: 13px; bottom: 12px; width: 17px; height: 17px;
  color: var(--muted); pointer-events: none;
}
.log-filters label { margin-top: 8px; }
.log-ranges { display: flex; gap: 6px; flex-wrap: wrap; }
.log-ranges .chip { text-decoration: none; color: var(--ink); cursor: pointer; }
.log-ranges .chip:hover { border-color: var(--orange); }
.log-ranges .chip.is-on { background: var(--orange); border-color: var(--orange); color: #fff; }

.log-legend { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.log-legend .cat { text-decoration: none; cursor: pointer; opacity: .8; border: 1px solid transparent; }
.log-legend .cat:hover { opacity: 1; }
.log-legend .cat.is-on { opacity: 1; border-color: currentColor; box-shadow: 0 0 0 2px #fff, 0 0 0 3px currentColor; }

/* plakietka kategorii */
.cat {
  display: inline-block; padding: 2px 9px; border-radius: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.cat-auth     { background: #e0ecff; color: #1d4ed8; }
.cat-members  { background: #fdf0e7; color: var(--orange-dark); }
.cat-players  { background: var(--green-bg); color: var(--green); }
.cat-payments { background: var(--amber-bg); color: var(--amber); }
.cat-coaches  { background: #ede9fe; color: #6d28d9; }
.cat-notes    { background: #ccfbf1; color: #0f766e; }
.cat-profile  { background: #f1f3f6; color: #4b5563; }
.cat-settings { background: #e5e7eb; color: var(--ink); }
.cat-system   { background: #f1f3f6; color: var(--muted); }

.log-card { padding-top: 14px; }
.log-summary { margin: 0 0 6px; }
.log-day {
  margin: 18px 0 8px; padding: 8px 12px; border-radius: 8px;
  background: #f1f3f6; color: var(--ink); font-size: .84rem; font-weight: 800; letter-spacing: .02em;
}
.log-day::first-letter { text-transform: uppercase; }
.log-list { display: flex; flex-direction: column; gap: 4px; }
.log-row {
  display: grid; grid-template-columns: 52px 210px 1fr; gap: 6px 12px; align-items: start;
  padding: 9px 10px; border-radius: 10px; border-left: 3px solid transparent;
  transition: background .12s;
}
.log-row:hover { background: #fafbfc; }
.log-row.is-bad { border-left-color: var(--red); background: #fff5f5; }
.log-time {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: .92rem; color: var(--ink); padding-top: 6px;
}
.log-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.log-who > div { min-width: 0; }
.log-who b { display: block; font-size: .92rem; line-height: 1.25; overflow-wrap: anywhere; }
.log-who a { color: var(--ink); text-decoration: none; }
.log-who a:hover { color: var(--orange-dark); }
.log-fn { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.log-main { min-width: 0; padding-top: 3px; }
.log-main .cat { margin-right: 6px; vertical-align: 1px; }
.log-desc { font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.log-meta { font-size: .76rem; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.log-meta a { color: var(--orange-dark); text-decoration: none; font-weight: 600; }
.log-meta a:hover { text-decoration: underline; }
.log-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }

@media (max-width: 720px) {
  .log-row { grid-template-columns: 46px 1fr; }
  .log-main { grid-column: 1 / -1; padding-left: 0; }
  .log-stats .btn { margin-left: 0; }
}

/* ================================================================
   Spójność z bksw.pl – typografia wyprowadzona z herbu klubu.
   Blok dopisany na końcu celowo: nadpisuje wcześniejsze reguły
   o tej samej wadze, nie zmieniając ich definicji. Kroje są
   hostowane lokalnie (/assets/fonts) – zero zapytań do Google,
   zgodnie z polityką prywatności portalu.
   ================================================================ */

:root {
  --display: "Saira Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --graphite-deep: #151922;
}

body { font-family: var(--body); }

/* górny pasek jak na stronie klubu: płaski grafit zamiast gradientu */
.topbar {
  background: var(--graphite-deep);
  border-bottom: 3px solid var(--orange);
}

/* logo w dwóch wierszach, jak napis w herbie */
.brand {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.32rem;
  line-height: 1;
  text-transform: uppercase;
}
.brand span { display: block; }
.brand small {
  display: block;
  font-size: .62em;
  color: var(--orange);
  letter-spacing: .06em;
  font-weight: 700;
}

/* tytuł strony */
main.wrap > h1 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 2.1rem;
  line-height: 1.04;
  letter-spacing: 0;
}
main.wrap > h1::after {
  background: var(--orange);
  width: 64px;
  height: 5px;
  border-radius: 0;
}
@media (max-width: 560px) { main.wrap > h1 { font-size: 1.68rem; } }

/* nagłówki w kartach */
h2 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.38rem;
  line-height: 1.1;
}
h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.15;
}

/* przyciski */
.btn {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .02em;
}

/* h1 również w kartach (logowanie, rejestracja) – inaczej h2 wyglądał
   mocniej niż tytuł nad nim */
h1 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.78rem;
  line-height: 1.06;
}

/* ---------- linie boiska na stronach przed zalogowaniem ---------- */
body.guest {
  background-image: url("/assets/boisko-jasne.svg");
  background-repeat: no-repeat;
  background-position: center 64px;
  background-size: min(1180px, 170%) auto;
}

/* ---------- informacja o cookies ----------
   Belka przez całą szerokość zasłaniała treść i wyglądała jak baner zgody,
   a to tylko informacja o jednym technicznym cookie. Stąd kompaktowa karta
   w rogu, z ikoną w tym samym stylu liniowym co ikony nawigacji. */
.cookie-bar {
  position: fixed;
  left: 16px; right: auto; bottom: 16px;
  z-index: 55;
  width: min(420px, calc(100% - 32px));
  background: var(--graphite-deep);
  color: #d7dae1;
  border: 0;
  border-left: 5px solid var(--orange);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 17, 22, .45);
  font-size: .87rem;
  line-height: 1.5;
}
.cookie-in {
  max-width: none;
  margin: 0;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ico txt" "btn btn";
  align-items: start;
  gap: 2px 12px;
}
.cookie-ico {
  grid-area: ico;
  width: 26px; height: 26px;
  color: var(--orange);
  margin-top: 2px;
}
.cookie-txt { grid-area: txt; }
.cookie-txt b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.14rem;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 3px;
}
.cookie-in a { color: #f0a06a; }
.cookie-in a:hover { color: #fff; }
.cookie-in .btn {
  grid-area: btn;
  justify-self: start;
  margin-top: 12px;
  padding: 8px 20px;
  font-size: .95rem;
}

.cookie-bar:not([hidden]) { animation: cookie-enter .3s ease-out both; }
@keyframes cookie-enter { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  .cookie-bar:not([hidden]) { animation: none; }
}

/* ---------- odnośniki pod formularzem logowania ----------
   Własna klasa zamiast .hint, bo .hint to drobny tekst pomocniczy
   używany też w panelu, adminie i u trenera. */
.login-links {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.login-forgot {
  color: var(--muted);
  text-decoration: none;
  font-size: .94rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.login-forgot:hover,
.login-forgot:focus-visible { color: var(--ink); border-bottom-color: var(--orange); }

.login-join {
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .94rem;
  color: var(--muted);
}
.login-join a {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 800;
  font-size: .98rem;
  letter-spacing: .02em;
  color: var(--orange-dark);
  text-decoration: none;
  border: 2px solid var(--orange);
  border-radius: 8px;
  padding: 6px 16px;
  transition: background-color .15s, color .15s;
}
.login-join a:hover,
.login-join a:focus-visible { background: var(--orange); color: #fff; }

/* ---------- piłka odbijająca się przy logowaniu ----------
   Jedno zejście na wejściu, nie pętla: strona logowania to miejsce
   pracy, a nie pokaz. Trzy warstwy, bo każda potrzebuje własnego
   transformu: lot, spłaszczenie przy uderzeniu i obrót. */
.ball-lane {
  position: fixed;
  right: 7vw;
  bottom: 0;
  width: clamp(52px, 7vw, 82px);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
}
.ball-drop  { height: 100%; animation: ball-fall 2.84s both; }
.ball-squash { height: 100%; animation: ball-squash 2.84s both; transform-origin: 50% 100%; }
.ball        { width: 100%; height: 100%; display: block; overflow: visible; }
/* obracają się tylko szwy – gradient i odblask stoją, więc piłka wygląda jak kula */
.ball-seams  { transform-box: view-box; transform-origin: 50% 50%; animation: ball-spin 2.84s cubic-bezier(.12, .7, .3, 1) both; }



@keyframes ball-spin {
  from { transform: rotate(-40deg); }
  to   { transform: rotate(520deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ball-lane { display: none; }
}

/* cień pod piłką jak na stronie „Nowy adres”: pełny przy kontakcie,
   maleje i blednie, gdy piłka jest wysoko – ten sam rytm co ball-fall */
.ball-lane { bottom: 16px; }
.ball-lane::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -7px;
  width: 110%; height: 16%;
  margin-left: -55%;
  border-radius: 50%;
  background: rgba(60, 25, 0, .35);
  filter: blur(1.5px);
  z-index: -1;
  animation: ball-shadow 2.84s both;
}

/* ---------- klatki piłki wyliczone z fizyki ----------
   Jedna grawitacja, 6 odbić, każde do 42% poprzedniej wysokości,
   czas odcinka ∝ √h (całość 2.84s). Krzywe to parabole: wznoszenie y=2t−t²,
   opadanie y=t². Spłaszczenie ∝ prędkości uderzenia (√h).
   Generowane skryptem – przy zmianie przelicz, nie poprawiaj ręcznie. */
@keyframes ball-fall {
  0% { transform: translateY(-105vh); animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  22.67% { transform: translateY(0vh); animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  37.37% { transform: translateY(-44.1vh); animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  52.07% { transform: translateY(0vh); animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  61.59% { transform: translateY(-18.52vh); animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  71.11% { transform: translateY(0vh); animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  77.28% { transform: translateY(-7.78vh); animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  83.46% { transform: translateY(0vh); animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  87.46% { transform: translateY(-3.27vh); animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  91.46% { transform: translateY(0vh); animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  94.05% { transform: translateY(-1.37vh); animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  96.64% { transform: translateY(0vh); animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  98.32% { transform: translateY(-0.58vh); animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  100% { transform: translateY(0vh); }
}
@keyframes ball-squash {
  0% { transform: scale(1, 1); }
  21.47% { transform: scale(1, 1); }
  22.67% { transform: scale(1.14, 0.86); }
  24.17% { transform: scale(1, 1); }
  50.87% { transform: scale(1, 1); }
  52.07% { transform: scale(1.09, 0.91); }
  53.57% { transform: scale(1, 1); }
  69.91% { transform: scale(1, 1); }
  71.11% { transform: scale(1.06, 0.94); }
  72.61% { transform: scale(1, 1); }
  82.26% { transform: scale(1, 1); }
  83.46% { transform: scale(1.04, 0.96); }
  84.96% { transform: scale(1, 1); }
  90.26% { transform: scale(1, 1); }
  91.46% { transform: scale(1.02, 0.98); }
  92.96% { transform: scale(1, 1); }
  95.44% { transform: scale(1, 1); }
  96.64% { transform: scale(1.02, 0.98); }
  98.14% { transform: scale(1, 1); }
  98.8% { transform: scale(1, 1); }
  100% { transform: scale(1, 1); }
}
@keyframes ball-shadow {
  0% { transform: scale(.3); opacity: 0; animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  22.67% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  37.37% { transform: scale(0.37); opacity: 0.37; animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  52.07% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  61.59% { transform: scale(0.74); opacity: 0.74; animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  71.11% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  77.28% { transform: scale(0.89); opacity: 0.89; animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  83.46% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  87.46% { transform: scale(0.95); opacity: 0.95; animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  91.46% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  94.05% { transform: scale(0.98); opacity: 0.98; animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  96.64% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  98.32% { transform: scale(0.99); opacity: 0.99; animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  100% { transform: scale(1); opacity: 1; }
}

/* =====================  LISTA OBECNOŚCI (obecnosc.php)  ===================== */
.cat-attendance { background: #e6f6ee; color: #0f6b3a; }
.att-present { --att: var(--green);  --att-bg: var(--green-bg); }
.att-late    { --att: var(--amber);  --att-bg: var(--amber-bg); }
.att-excused { --att: #1d4ed8;       --att-bg: #e0ecff; }
.att-absent  { --att: var(--red);    --att-bg: var(--red-bg); }
.badge.att-present, .badge.att-late, .badge.att-excused, .badge.att-absent { background: var(--att-bg); color: var(--att); }

.att-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: -4px 0 18px; border-bottom: 1px solid var(--line); }
.att-tabs a {
  padding: 8px 14px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.att-tabs a:hover { color: var(--ink); }
.att-tabs a.active { color: var(--orange-dark); border-bottom-color: var(--orange); }

/* start: dzisiejsze treningi */
.att-today { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.att-today-card {
  display: flex; flex-direction: column; gap: 4px; margin: 0; text-decoration: none; color: var(--ink);
  border-left: 5px solid var(--orange); transition: box-shadow .15s, transform .15s;
}
a.att-today-card:hover { box-shadow: 0 6px 18px rgba(31, 36, 48, .12); transform: translateY(-1px); }
.att-today-card .btn { margin-top: 10px; text-align: center; }
.att-today-time { font-size: 1.6rem; font-weight: 800; color: var(--orange-dark); line-height: 1.1; }
.att-today-wait { border-left-color: var(--line); opacity: .75; }
.att-today-wait .att-today-time { color: var(--muted); }

/* wybór treningu z ostatnich dni */
.att-items { display: flex; flex-direction: column; }
.att-item {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 8px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); border-radius: 8px;
}
.att-item:last-child { border-bottom: 0; }
.att-item:hover { background: #fdf6f1; }
.att-item-date b { display: block; text-transform: capitalize; }
.att-item-date span, .att-item-name .sub { display: block; font-size: .82rem; color: var(--muted); }
.att-item-name { font-weight: 600; }
.att-item-missing { background: #fffaf3; }
.att-item-cancel { opacity: .6; }
@media (max-width: 560px) {
  .att-item { grid-template-columns: 74px 1fr; }
  .att-item-state { grid-column: 2; }
}

/* lista treningu */
.att-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.att-bar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: rgba(244, 245, 247, .96); backdrop-filter: blur(6px); padding: 10px 0; margin-bottom: 4px;
}
.att-cnt {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; font-size: .85rem;
  font-weight: 700; background: var(--att-bg, #fff); color: var(--att, var(--muted)); border: 1px solid var(--line);
}
.att-cnt.att-none { background: #fff; color: var(--ink); }
.att-bar input[type=search] { flex: 1 1 160px; max-width: 260px; margin-left: auto; padding: 7px 12px; border-radius: 99px; }
.att-legend { margin: 0 0 12px; font-size: .82rem; }

.att-sec > summary, .att-text > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; }
.att-sec > summary::-webkit-details-marker, .att-text > summary::-webkit-details-marker { display: none; }
.att-sec > summary::before, .att-text > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.att-sec[open] > summary::before, .att-text[open] > summary::before { transform: rotate(90deg); }
.att-sec .att-all { margin-left: auto; }
.att-sec[open] > summary { margin-bottom: 10px; }
.att-text textarea { margin-top: 10px; }
.att-text-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 8px; }

.att-list { display: flex; flex-direction: column; }
.att-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line);
  border-radius: 10px; transition: background .15s;
}
.att-row:last-child { border-bottom: 0; }
.att-row[data-status="present"] { background: #f1fbf4; }
.att-row[data-status="late"]    { background: #fffaeb; }
.att-row[data-status="excused"] { background: #f2f6ff; }
.att-row[data-status="absent"]  { background: #fdf3f3; }
.att-row.saving { opacity: .7; }
.att-who { flex: 1; min-width: 0; }
.att-who b { font-weight: 700; }
.att-who .sub { display: block; font-size: .8rem; }
.att-guest-ico { display: inline-flex; align-items: center; justify-content: center; background: var(--line); color: var(--muted); font-weight: 800; font-size: .8rem; }
.att-btns { display: flex; gap: 5px; flex: none; }
.att-b {
  min-width: 44px; height: 44px; padding: 0 10px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; color: var(--att); font-weight: 800; font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .12s, color .12s, border-color .12s, transform .08s; -webkit-tap-highlight-color: transparent;
}
.att-b span { font-size: .8rem; font-weight: 600; }
.att-b:hover { border-color: var(--att); }
.att-b:active { transform: scale(.94); }
.att-b[aria-pressed="true"] { background: var(--att); border-color: var(--att); color: #fff; }
.att-b:disabled { cursor: default; opacity: .55; }
.att-b:disabled[aria-pressed="true"] { opacity: 1; }
.att-del { color: var(--red); font-size: .8rem; margin-left: 4px; }
@media (max-width: 900px) { .att-b span { display: none; } }
@media (max-width: 480px) {
  .att-row { flex-wrap: wrap; }
  .att-btns { width: 100%; }
  .att-b { flex: 1; height: 46px; }
  .att-row .avatar-xs { display: none; }
}

.att-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.att-pick-item { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 8px 14px; cursor: pointer; font: inherit; font-weight: 600; }
.att-pick-item:hover { border-color: var(--orange); color: var(--orange-dark); }
.att-finish { display: flex; flex-direction: column; gap: 10px; }
.att-finish .btn-green { font-size: 1.05rem; padding: 12px 22px; }
.att-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: 9px 18px; border-radius: 99px; font-weight: 600; font-size: .9rem;
  transition: opacity .2s, transform .2s; z-index: 80;
}
.att-toast.show { opacity: 1; transform: translate(-50%, 0); }
.att-toast.bad { background: var(--red); }

/* harmonogram (prezes) */
.att-slot { padding: 10px 0 2px; border-top: 1px solid var(--line); }
.att-slot-off { opacity: .55; }
.att-slot-del { display: block; margin: 2px 0 8px; text-align: right; }

/* karta frekwencji w profilu zawodnika */
.att-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.att-kpis .tile { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.att-kpis .att-kpi-present .tile-num { color: var(--green); }
.att-kpis .att-kpi-late .tile-num { color: var(--amber); }
.att-kpis .att-kpi-excused .tile-num { color: #1d4ed8; }
.att-kpis .att-kpi-absent .tile-num { color: var(--red); }
.att-dots { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 14px; }
.att-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--att); display: inline-block; }
.att-dots i.att-dot-cancel { opacity: .3; }