/* Matematyka LAS B (ZAD0240) — styl jak drukarka3d: chrom bez koloru, kolor tylko na danych (postęp w granacie SLOT, zaległości na czerwono). Krój Lato (OFL). */
@font-face { font-family: "Lato"; src: url("/static/fonts/Lato-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/static/fonts/Lato-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/static/fonts/Lato-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ground: #f3f3f6; --surface: #ffffff; --raised: #f6f6f8; --active: #ebebf0; --border: #e5e5ea; --rule: #efeff3; --control: #d1d3da;
  --text: #16161d; --muted: #5d5e69; --faint: #686974;
  --primary: #1d1f20; --primary-ink: #ffffff; --accent: #343380; --accent-soft: #e9e9f6;
  --positive: #247b50; --positive-soft: #e4f3ea;
  --negative: #c4242a; --negative-soft: #ffedea; --negative-ink: #831c1e;
  --warn-soft: #fffbeb; --warn-ink: #92400e; --warn-line: #fde68a;
  --radius-card: 8px; --radius-control: 6px;
  --gap: 16px; --control-height: 36px; --chip: 32px;
  --font: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kolumna: 1160px;
  /* części karty: na lekcji (granat SLOT), praca własna (zieleń lasu), rozszerzenie (bursztyn) */
  --lekcja: #343380; --lekcja-soft: #e9e9f6; --praca: #1f7a4a; --praca-soft: #e2f3e9; --roz: #b7791f; --roz-soft: #fdf3dc;
  /* klasy: 4 — zieleń, 5 — błękit, 6 — pomarańcz */
  --kl4: #2e8b57; --kl4-soft: #e3f4ea; --kl5: #2b6cb0; --kl5-soft: #e3eefa; --kl6: #c05621; --kl6-soft: #fcebdf;
  --kl: var(--accent); --kl-soft: var(--accent-soft);
}
.kl4 { --kl: var(--kl4); --kl-soft: var(--kl4-soft); }
.kl5 { --kl: var(--kl5); --kl-soft: var(--kl5-soft); }
.kl6 { --kl: var(--kl6); --kl-soft: var(--kl6-soft); }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--ground); color: var(--text); font: 400 14px/20px var(--font); font-variant-numeric: tabular-nums lining-nums; -webkit-font-smoothing: antialiased; min-height: 100svh; }
button, select, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.kolumna { width: min(var(--kolumna), 100% - 32px); margin-inline: auto; }

/* ---------- pasek górny ---------- */
.topbar { position: sticky; top: 0; z-index: 5; background: var(--ground); box-shadow: 0 1px 0 var(--border); }
.topbar-in { min-height: 52px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0; }
.marka { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.marka img { width: 28px; height: 28px; }
.marka-nazwa { font-weight: 700; font-size: 15px; }
.marka-org { color: var(--muted); font-size: 14px; }
.menu { display: flex; gap: 4px; }
.menu a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--radius-control); font-weight: 600; color: var(--muted); }
.menu a:hover { background: var(--active); color: var(--text); }
.menu a[aria-current="page"] { background: var(--primary); color: var(--primary-ink); }

/* ---------- przyciski i pola ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-height); padding: 0 14px; border-radius: var(--radius-control); border: 1px solid var(--control); background: var(--surface); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .12s ease; }
.btn:hover { background: var(--raised); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-glowny { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn-glowny:hover { background: #33363a; }
.btn-cichy { border-color: transparent; background: transparent; color: var(--muted); }
.btn-maly { height: 28px; padding: 0 10px; font-size: 13px; }
select, input[type="text"], input[type="email"] { height: var(--control-height); padding: 0 10px; border-radius: var(--radius-control); border: 1px solid var(--control); background: var(--surface); min-width: 0; }

/* ---------- układ ---------- */
.tytul { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0 16px; }
.tytul h1 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
.tytul .pod { margin-top: 2px; color: var(--muted); }
.pasek { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.karta { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.pusto { padding: 40px 20px; text-align: center; color: var(--muted); }
.segment { display: inline-flex; border: 1px solid var(--control); border-radius: var(--radius-control); overflow: hidden; background: var(--surface); }
.segment button { height: 34px; padding: 0 16px; border: 0; background: transparent; font-weight: 600; cursor: pointer; color: var(--muted); border-right: 1px solid var(--control); }
.segment button:last-child { border-right: 0; }
.segment button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }

/* ---------- pigułki i paski ---------- */
.pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; background: var(--rule); color: #3b3c46; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.zle { background: var(--negative-soft); color: var(--negative-ink); }
.pill.ok { background: var(--positive-soft); color: var(--positive); }
.pill.uwaga { background: var(--warn-soft); color: var(--warn-ink); box-shadow: inset 0 0 0 1px var(--warn-line); }
.postep { display: flex; align-items: center; gap: 8px; min-width: 0; }
.postep-tor { flex: 1; height: 8px; border-radius: 4px; background: var(--active); overflow: hidden; min-width: 56px; }
.postep-w { height: 100%; background: var(--accent); border-radius: 4px; transition: width .2s ease; }
.postep-w.pelny { background: var(--positive); }
.postep-liczba { font-size: 12px; font-weight: 600; color: var(--muted); min-width: 52px; text-align: right; }

/* ---------- przegląd (tabela dzieci) ---------- */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabela td { padding: 10px 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover { background: var(--raised); }
.imie { font-weight: 600; }
.kol-postep { width: 30%; min-width: 180px; }

/* ---------- rozliczanie ---------- */
.karty-wybor { display: flex; gap: 6px; flex-wrap: wrap; }
.karta-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 12px; border-radius: var(--radius-control); border: 1px solid var(--control); background: var(--surface); cursor: pointer; text-align: left; min-width: 72px; }
.karta-chip b { font-size: 14px; }
.karta-chip span { font-size: 12px; color: var(--muted); }
.karta-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); }
.karta-chip[aria-pressed="true"] b, .karta-chip[aria-pressed="true"] span { color: var(--primary-ink); }
.karta-chip.przyszla { border-style: dashed; }
.naglowek-karty { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.naglowek-karty h2 { font-size: 16px; line-height: 22px; }
.naglowek-karty .pod { color: var(--muted); }
.wiersz { display: grid; grid-template-columns: minmax(150px, 220px) 1fr auto; gap: 10px 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.wiersz:last-child { border-bottom: 0; }
.wiersz.nieobecny { background: var(--warn-soft); }
.wiersz-zbiorczy { background: var(--raised); border-bottom: 2px solid var(--border); }
.wiersz-zbiorczy .wiersz-imie { font-weight: 500; color: var(--muted); }
.wiersz-imie { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.chipy { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.grupa-chipow { display: flex; gap: 4px; align-items: center; }
.grupa-chipow + .grupa-chipow { padding-left: 14px; border-left: 1px solid var(--border); }
.zad { width: var(--chip); height: var(--chip); border-radius: var(--radius-control); border: 1px solid var(--control); background: var(--surface); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.zad:hover { background: var(--raised); }
.zad[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.zad.praca { border-width: 2px; }
.zad.roz { border-style: dashed; }
.zad.roz[aria-pressed="true"] { background: var(--positive); border-color: var(--positive); border-style: solid; }
.akcje { display: flex; gap: 6px; }
.akcje .btn { height: 32px; padding: 0 10px; font-size: 13px; }
.btn[aria-pressed="true"] { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }

/* ---------- dziecko ---------- */
.sekcja { margin-bottom: 18px; }
.sekcja h2 { font-size: 16px; line-height: 22px; margin: 4px 0 8px; }
.dzialy { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); }
.dzial { padding: 14px 16px; display: grid; gap: 8px; }
.dzial b { font-size: 15px; }
.zaleglosc { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); align-items: center; }
.zaleglosc:last-child { border-bottom: 0; }
.zaleglosc .temat { color: var(--muted); grid-column: 1; }
.zaleglosc .akcje { grid-row: 1 / span 2; grid-column: 2; }
.siatka-kart { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px; }
.kafel { min-width: 74px; padding: 8px 10px; border-radius: var(--radius-control); border: 1px solid var(--border); background: var(--raised); display: grid; gap: 2px; }
.kafel b { font-size: 13px; }
.kafel span { font-size: 12px; color: var(--muted); }
.kafel.pelny { background: var(--positive-soft); border-color: #bfe3cf; }
.kafel.czesc { background: var(--accent-soft); border-color: #cfcfee; }
.kafel.zle { background: var(--negative-soft); border-color: #f5c6c2; }
.kafel.przyszla { background: transparent; border-style: dashed; }

/* ---------- biblioteka kart ---------- */
.biblioteka { display: grid; gap: var(--gap); }
.zeszyt { padding: 14px 16px; display: grid; gap: 10px; }
.zeszyt-gora { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.zeszyt-gora h2 { font-size: 16px; line-height: 22px; }
.pliki { display: flex; gap: 6px; flex-wrap: wrap; }
.lista-kart { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pozycja-karty { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--raised); }
.pozycja-karty span { color: var(--muted); font-size: 12px; display: block; }

/* ---------- tabele zakładki Karty i widok wszystkich ---------- */
.filtry select { min-width: 220px; }
.filtry input[type="search"] { height: var(--control-height); padding: 0 10px; border-radius: var(--radius-control); border: 1px solid var(--control); background: var(--surface); flex: 0 1 260px; min-width: 0; }
.tabela.statyczna tbody tr { cursor: default; }
.tabela.statyczna tbody tr.przyszla td { color: var(--muted); }
.tabela .nowrap { white-space: nowrap; }
.tabela .prawo { text-align: right; }
.tabela .prawo .pliki { justify-content: flex-end; flex-wrap: nowrap; }
.tabela .temat-kol { min-width: 220px; }
.kod.blok { display: block; margin-top: 0; }
.licznik { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--rule); border-radius: 4px; padding: 1px 7px; vertical-align: 2px; }
.dzial-w-wierszu { display: grid; gap: 2px; }
.dzial-w-wierszu + .dzial-w-wierszu { margin-top: 6px; }
.dzial-nazwa { font-size: 12px; color: var(--muted); }

/* ---------- ustawienia dzieci ---------- */
.formularz { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 16px; align-items: center; }
.formularz input { flex: 1 1 140px; }
.wiersz-prosty { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.wiersz-prosty:last-child { border-bottom: 0; }

/* ---------- wejście ---------- */
body.wejscie { display: grid; place-items: center; padding: 24px; }
.karta-wejscia { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 32px 28px; width: min(380px, 100%); display: grid; gap: 10px; justify-items: start; }
.karta-wejscia h1 { font-size: 22px; line-height: 28px; }
.karta-wejscia p { color: var(--muted); }
.karta-wejscia .btn { width: 100%; margin-top: 8px; height: 44px; font-size: 16px; }
.blad { color: var(--negative-ink); background: var(--negative-soft); padding: 8px 10px; border-radius: var(--radius-control); width: 100%; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--primary); color: #fff; padding: 10px 16px; border-radius: var(--radius-control); font-weight: 600; z-index: 10; max-width: calc(100% - 32px); }
.toast.zle { background: var(--negative); }

/* ---------- kolory klas i części karty ---------- */
.kl4 .segment button[aria-pressed="true"], .kl5 .segment button[aria-pressed="true"], .kl6 .segment button[aria-pressed="true"] { background: var(--kl); }
.kl4 .tytul h1, .kl5 .tytul h1, .kl6 .tytul h1 { color: var(--kl); }
.kl4 .karta-chip[aria-pressed="true"], .kl5 .karta-chip[aria-pressed="true"], .kl6 .karta-chip[aria-pressed="true"] { background: var(--kl); border-color: var(--kl); }
.kl4 .naglowek-karty, .kl5 .naglowek-karty, .kl6 .naglowek-karty { background: var(--kl-soft); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.kl4 .tabela thead th, .kl5 .tabela thead th, .kl6 .tabela thead th { background: var(--kl-soft); }
.zeszyt.kl4, .zeszyt.kl5, .zeszyt.kl6 { border-left: 5px solid var(--kl); }
.pill.klasa { background: var(--kl-soft); color: var(--kl-ink, var(--kl)); }
.kl4 { --kl-ink: #1d6440; } .kl5 { --kl-ink: #22558c; } .kl6 { --kl-ink: #8f3f17; }
.kod { display: inline-block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.zeszyt-dziecka { margin-bottom: 8px; padding-top: 12px; border-left: 5px solid var(--kl); }
.zeszyt-dziecka .zeszyt-gora { padding: 0 16px; justify-content: flex-start; }
.dzial { border-top: 4px solid var(--kl); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.znacznik { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.znacznik::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: currentColor; }
.znacznik.lekcja { color: var(--lekcja); } .znacznik.praca { color: var(--praca); } .znacznik.roz { color: var(--roz); }
.zad.lekcja { border-color: #c9c9ea; color: var(--lekcja); }
.zad.praca { border-color: #b5dcc6; color: var(--praca); border-width: 1px; }
.zad.roz { border-color: #ecd29c; color: var(--roz); }
.zad.lekcja[aria-pressed="true"] { background: var(--lekcja); border-color: var(--lekcja); color: #fff; }
.zad.praca[aria-pressed="true"] { background: var(--praca); border-color: var(--praca); color: #fff; }
.zad.roz[aria-pressed="true"] { background: var(--roz); border-color: var(--roz); color: #fff; border-style: solid; }
.btn-czesc.lekcja { color: var(--lekcja); border-color: #c9c9ea; }
.btn-czesc.praca { color: var(--praca); border-color: #b5dcc6; }
.btn-czesc.lekcja[aria-pressed="true"] { background: var(--lekcja); border-color: var(--lekcja); color: #fff; }
.btn-czesc.praca[aria-pressed="true"] { background: var(--praca); border-color: var(--praca); color: #fff; }
.btn-czesc.roz { color: var(--roz); border-color: #ecd29c; }
.btn-czesc.roz[aria-pressed="true"] { background: var(--roz); border-color: var(--roz); color: #fff; }

/* ---------- telefon ---------- */
@media (max-width: 720px) {
  .menu { order: 3; width: 100%; overflow-x: auto; }
  .tytul h1 { font-size: 20px; line-height: 26px; }
  .wiersz { grid-template-columns: 1fr; gap: 8px; }
  .wiersz .akcje { justify-content: flex-start; }
  .zad { --chip: 38px; width: 38px; height: 38px; }
  .tabela .kol-ukryj { display: none; }
  .kol-postep { min-width: 120px; }
  .zaleglosc { grid-template-columns: 1fr; }
  .zaleglosc .akcje { grid-row: auto; grid-column: 1; }
}
/* Rozliczanie: równe kolumny (Małgorzata 2026-11-15) — imię, numery zadań, przyciski o stałej szerokości; od 1200 px numery w jednym wierszu */
@media (min-width: 721px) {
  .wiersz.rozl { grid-template-columns: 160px 1fr auto; padding: 8px 16px; }
  .rozl .chipy { gap: 6px 8px; }
  .rozl .grupa-chipow { gap: 3px; }
  .rozl .grupa-chipow + .grupa-chipow { padding-left: 8px; }
  .rozl .zad { width: 23px; height: 23px; font-size: 12px; border-radius: 6px; }
  .rozl .akcje { display: grid; grid-auto-flow: column; grid-auto-columns: 96px; gap: 5px; }
  .rozl .akcje .btn { width: 100%; padding: 0 4px; font-size: 12.5px; }
}
@media (min-width: 1200px) { .rozl .chipy { flex-wrap: nowrap; } }
/* widok rodzica: objaśnienia (Małgorzata 2026-11-15) */
.objasnienie { margin: 4px 0 12px; color: var(--muted); font-size: 14px; max-width: 70ch; }
.karta.pusto.ok { color: var(--positive); font-weight: 600; padding: 24px 20px; }
.dzial .pill { justify-self: start; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- wejście rodziców ---------- */
.karta-wejscia .krok { display: grid; gap: 8px; width: 100%; }
.karta-wejscia label { font-weight: 600; font-size: 14px; }
.karta-wejscia input { width: 100%; height: 44px; font-size: 16px; }
.karta-wejscia .btn-cichy { margin-top: 0; height: 36px; font-size: 14px; }
body.wejscie .kolumna { display: contents; }
.tytul h2 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
.kl4 .tytul h2, .kl5 .tytul h2, .kl6 .tytul h2 { color: var(--kl); }
body.rodzic .pozycja-karty span, body.rodzic .kod, body.rodzic .postep-liczba { font-size: 13px; }

/* ===== nowocześniej, kolory z logo (ZAD0586, Małgorzata 2026-11-12) =====
   styl jak Techniczne Lasu (tool023), paleta Las (matematyka.lesnemontessori.gda.pl, grupa LAS B; _WIEDZA/0061): Instrument Sans zamiast Lato
   (pliki lokalnie w /static/fonts, licencja OFL jak Lato), pasek w zieleniach logo z paskiem tęczy, jasne zielonkawe tło, białe karty.
   Kolory danych zostają: klasy 4/5/6 (zieleń, błękit, pomarańcz) i części karty (lekcja, praca własna, rozszerzenie). Rozmiary przycisków zadań bez zmian. */
@font-face { font-family: "Instrument Sans"; src: url("/static/fonts/InstrumentSans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/static/fonts/InstrumentSans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/static/fonts/InstrumentSans-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
:root {
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g900: #094624; --g700: #1f623c; --g600: #2e7d47; --g500: #4ba850; --g300: #9ec654; --g100: #e3efd3; --g50: #f3f8ec;
  --slonce: #fcdc09; --slonce-2: #f6b81a; --pomarancz: #f28e1b; --turkus: #0e8491;
  --ground: #f4f7f0; --raised: var(--g50); --active: #e8efe0; --border: #e2e8dc; --rule: #e9eee4; --control: #cfd9c8;
  --text: #15291c; --muted: #5d6b60; --faint: #6b786e;
  --primary: var(--g700); --accent: var(--turkus); --accent-soft: #e2f2f3; --positive: var(--g600); --positive-soft: var(--g100);
  --radius-card: 20px; --radius-control: 12px;
}
body { background: var(--ground); }

/* pasek górny: gradient zieleni logo, jasne napisy, białe tło pod znakiem, pod spodem 3 px tęczy */
.topbar { background: linear-gradient(115deg, var(--g900) 0%, var(--g700) 55%, var(--g600) 100%); box-shadow: 0 2px 12px rgba(9, 70, 36, .25); }
.topbar::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--g300), var(--g500) 35%, var(--turkus) 60%, var(--slonce) 82%, var(--pomarancz)); }
.marka { color: #fff; }
.marka img { background: #fff; border-radius: 9px; padding: 2px; width: 32px; height: 32px; }
.marka-nazwa { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.marka-org { color: rgba(255, 255, 255, .72); }
.menu a { color: rgba(255, 255, 255, .82); font-weight: 500; border-radius: 999px; }
.menu a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.menu a[aria-current="page"] { background: #fff; color: var(--g900); font-weight: 600; }
.topbar .btn-cichy { color: rgba(255, 255, 255, .82); border-color: rgba(255, 255, 255, .35); border-radius: 999px; background: transparent; }
.topbar .btn-cichy:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* tytuł */
.tytul h1, .tytul h2 { font: 600 38px/1.1 var(--font); letter-spacing: -0.025em; color: var(--g900); }
.tytul .pod { font-size: 15px; margin-top: 6px; }

/* karty: białe, zaokrąglone, z delikatnym cieniem */
.karta { border-color: var(--border); box-shadow: 0 1px 3px rgba(21, 41, 28, .05); }
.karta.sekcja, .karta { overflow: hidden; }
.karta-wejscia { border-color: var(--border); border-radius: 22px; box-shadow: 0 6px 24px rgba(21, 41, 28, .08); position: relative; overflow: hidden; }
.karta-wejscia::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--g300), var(--g500) 35%, var(--turkus) 60%, var(--slonce) 82%, var(--pomarancz)); }
.karta-wejscia h1 { font-weight: 600; font-size: 26px; line-height: 32px; letter-spacing: -0.02em; color: var(--g900); }
.naglowek-karty h2, .sekcja h2, .zeszyt-gora h2 { font-weight: 600; letter-spacing: -0.01em; color: var(--g900); }
.dzial { border-radius: 18px; border-top-width: 4px; }
.kafel { border-radius: 12px; }
.pozycja-karty { border-radius: 12px; }
.zeszyt.kl4, .zeszyt.kl5, .zeszyt.kl6, .zeszyt-dziecka { border-left-width: 5px; }

/* tabele: nagłówki na jasnym tle, wersaliki 11 px */
.tabela th { background: var(--g50); color: #3f5a46; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.tabela tbody tr:hover { background: #f7faf3; }
.imie, .wiersz-imie { font-weight: 600; }

/* przyciski: główne w zieleni logo, „Dodaj” dziecko w kolorze słońca */
.btn { border-color: var(--control); font-weight: 600; }
.btn:hover { background: var(--g50); }
.btn-glowny { background: var(--g700); border-color: var(--g700); color: #fff; }
.btn-glowny:hover { background: var(--g900); border-color: var(--g900); }
.formularz .btn-glowny { background: linear-gradient(180deg, var(--slonce), var(--slonce-2)); border-color: var(--slonce-2); color: var(--g900);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12), 0 1px 0 rgba(255, 255, 255, .5) inset; }
.formularz .btn-glowny:hover { background: linear-gradient(180deg, #ffe53a, var(--pomarancz)); }
.segment { border-radius: 999px; border-color: var(--control); }
.segment button[aria-pressed="true"] { background: var(--g700); }
.karta-chip { border-radius: 12px; }
.karta-chip[aria-pressed="true"] { background: var(--g700); border-color: var(--g700); }
.zad { border-radius: 10px; }
.pill { border-radius: 999px; padding: 0 9px; }
.licznik { border-radius: 999px; background: var(--g100); color: var(--g700); }
.postep-tor { background: var(--active); border-radius: 999px; }
.postep-w { border-radius: 999px; background: linear-gradient(90deg, var(--turkus), #26a3b0); }
.postep-w.pelny { background: linear-gradient(90deg, var(--g600), var(--g500)); }
select, input[type="text"], input[type="email"], .filtry input[type="search"] { border-color: var(--control); }
:focus-visible { outline-color: var(--g600); }
.toast { background: var(--g900); border-radius: 14px; }
@media (max-width: 720px) {
  .tytul h1, .tytul h2 { font-size: 28px; line-height: 34px; }
  .menu { padding-bottom: 4px; }
}