/* Makieta poglądowa platformy szkoleń. Paleta i nazwa do podmiany w :root i data.js */

:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --border: #e3e6e4;
  --text: #1c211e;
  --muted: #5c6661;
  --accent: #00a65b;
  --accent-dark: #007d44;
  --accent-deep: #00532e;
  --accent-night: #002a17;
  --accent-soft: #e8f7ef;
  --accent-mid: #bfe9d6;
  /* Naglowki panelu w ciemnej zieleni marki (kolor z logo), nie w czerni -
     jeden token, zeby dalo sie przefarbowac w jednym miejscu. Na ciemnych pasach
     (.band, .hero-copy) naglowek i tak jest bialy - te reguly sa bardziej szczegolowe. */
  --heading: var(--accent-deep);
  --highlight: #ffcd02;
  --highlight-dark: #c39100;
  --ok: #007d44;
  --ok-soft: #e8f7ef;
  --warn: #8a6800;
  --warn-soft: #fff6d9;
  --bad: #a13030;
  --bad-soft: #fbeaea;

  /* Password strength meter (components/password_strength.css). */
  --pw-track: #d7dbd8;
  --pw-weak: #d5443a;
  --pw-fair: #e08a1e;
  --pw-ok: #c39100;
  --pw-good: #4a9e4a;
  --pw-strong: var(--accent);
  --pw-ink: var(--text);
  --pw-muted: var(--muted);
  --pw-faint: #8b938e;
  --pw-warn: var(--warn);
  --pw-accent: var(--highlight);
  --pw-line: var(--border);
  --pw-font-head: var(--font-head);

  --font-head: "Chivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --radius: 6px;
  --radius-btn: 9px;
  --shadow: 0 1px 2px rgba(0, 42, 23, .06), 0 4px 18px rgba(0, 42, 23, .05);
  --maxw: 1140px;
  --gutter: 20px;

  /*
    PALETA PRZYCISKOW DOSTAWCY. Te same nazwy co w AssetLife (application.css),
    inne wartosci - to jest podzial na palety. Przyciski biora kolor STAD, wiec
    przyszla paleta per dostawca podmieni tu wartosci i przefarbuje wszystko.
  */
  --btn-primary-1: var(--accent);
  --btn-primary-2: var(--accent-dark);
  --btn-primary-ink: #fff;
  --btn-primary-shadow: rgba(0, 83, 46, .22);
  --btn-secondary-line: var(--accent-mid);
  --btn-secondary-ink: var(--accent-dark);
  --btn-secondary-hover: var(--accent-soft);
  --btn-danger-line: #e0b9b4;
  --btn-danger-ink: var(--bad);
  --btn-danger-hover: var(--bad-soft);
  --btn-focus-ring: var(--accent-mid);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -.015em;
  color: var(--heading);
}
h1 { font-size: 2.1rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--accent); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* Wizytówka czyta się lepiej w węższej kolumnie, ale panele mają tabele z ośmioma
   kolumnami. Klasę `app` nakłada renderChrome na widokach po zalogowaniu. */
body.app { --maxw: 1480px; }

.stack > * + * { margin-top: 14px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }
.right { text-align: right; }

/* --- plakietka demo --- */
.demo-flag {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 50;
  background: #1a1d23;
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 11px;
  border-radius: 999px;
  opacity: .85;
}

/* --- nawigacja --- */
.nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}
.logo .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-mark {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--accent);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .8rem;
}
.nav-links { display: flex; gap: 18px; margin-left: auto; align-items: center; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: .925rem; white-space: nowrap; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); font-weight: 600; }

.nav-toggle {
  display: none;
  margin-left: auto;
  flex: 0 0 40px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  padding: 0;
}
.nav-toggle i {
  display: block;
  width: 17px;
  height: 2px;
  margin: 3px auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.nav.open .nav-toggle i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav.open .nav-toggle i:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Poniżej 900 px odnośniki schodzą do rozwijanego panelu. Na trzech piętrach pasek
   zajmował ćwierć ekranu telefonu. */
@media (max-width: 900px) {
  .nav { position: relative; }
  .nav-inner { min-height: 56px; gap: 12px; }
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 6px 20px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a {
    font-size: 1rem;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-links .btn { margin-top: 14px; padding: 12px 18px; }
}

@media (max-width: 420px) {
  .logo .name { font-size: .86rem; }
}

/* --- przyciski --- */
/* PRIMARY - P3: gradient marki. Kolory z tokenow --btn-* (paleta dostawcy). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-btn);
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, var(--btn-primary-1) 0%, var(--btn-primary-2) 100%);
  color: var(--btn-primary-ink);
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px var(--btn-primary-shadow);
  transition: background .16s ease, border-color .16s ease, color .16s ease,
              box-shadow .16s ease, transform .16s ease;
}
.btn:hover {
  background: linear-gradient(180deg, var(--btn-primary-2) 0%, var(--accent-deep) 100%);
  transform: translateY(-1px);
  box-shadow: 0 9px 22px var(--btn-primary-shadow);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--btn-focus-ring); }

/* SECONDARY - G1: obrys marki, wypelnia sie na hover. */
.btn.ghost {
  background: transparent;
  color: var(--btn-secondary-ink);
  border-color: var(--btn-secondary-line);
  box-shadow: none;
}
.btn.ghost:hover {
  background: var(--btn-secondary-hover);
  border-color: var(--accent);
  color: var(--accent-dark);
  transform: none;
  box-shadow: none;
}

.btn.small { padding: 7px 13px; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover { transform: none; box-shadow: none; }

/* Widoczny obrys tylko przy nawigacji klawiaturą, nie przy kliknięciu myszą. */
.btn:focus-visible, .role:focus-visible, .step-tab:focus-visible, .icon-btn:focus-visible,
.nav-links a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- karty --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.grid { display: grid; gap: 18px; }
.grid > * { min-width: 0; }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Prawa szpalta ma stałą, użyteczną szerokość. Przy udziale procentowym schodziła
   do dwustu pikseli i łamała każdy napis oraz przycisk na trzy linie. */
.grid.split { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }

/* Prawa szpalta odchodzi przy 1200 px. Poniżej tego progu lewa kolumna nie ma dość
   miejsca na pięć kolumn tabeli pracowników, więc wszystko idzie w jedną kolumnę. */
@media (max-width: 1200px) {
  .grid.split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .grid.c3, .grid.c2 { grid-template-columns: minmax(0, 1fr); }
}

/* --- hero --- */
.hero { padding: 64px 0 42px; }
.hero h1 { font-size: 2.6rem; max-width: 20ch; }
.hero p.lead { font-size: 1.1rem; color: var(--muted); max-width: 58ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

@media (max-width: 620px) {
  .hero h1 { font-size: 1.9rem; }
}

.pill {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .78rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* --- sekcje --- */
.section { padding: 40px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }

/* --- karta szkolenia --- */
.course { display: flex; flex-direction: column; }
.course h3 { margin-bottom: 6px; }
.course .meta { color: var(--muted); font-size: .875rem; margin-bottom: 12px; }
.course .price { font-size: 1.5rem; font-weight: 700; margin-top: auto; }
.course .price span { font-size: .85rem; font-weight: 400; color: var(--muted); }
.course-foot { margin-top: 14px; display: flex; gap: 10px; }

/* --- tabela --- */
table { width: 100%; border-collapse: collapse; font-size: .925rem; }
th, td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }

/* Tylko kolumny opisowe łamią wiersze. Reszta zostaje w jednej linii, a przy wąskim
   ekranie tabela dostaje suwak, zamiast zgniatać kolumny na dwa piętra. */
td.wrap, th.wrap { white-space: normal; min-width: 170px; max-width: 260px; }
.table-scroll { overflow-x: auto; }
/* Tabela dopasowuje się do karty. `width: max-content` brało szerokość treści
   i wypychało ostatnie kolumny za krawędź. */
.table-scroll > table { width: 100%; table-layout: auto; }

.tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }

/* --- statystyki --- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.stat .k { font-size: 1.65rem; font-weight: 700; line-height: 1.1; }
.stat .l { font-size: .82rem; color: var(--muted); }

@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* --- pasek postępu --- */
.bar { height: 7px; background: var(--border); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.bar.slim { height: 5px; }

/* --- formularze --- */
label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=number], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
  color: var(--text);
}
textarea { min-height: 96px; resize: vertical; }
.field + .field { margin-top: 14px; }

.choice {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  background: var(--surface);
}
.choice + .choice { margin-top: 12px; }
.choice[data-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.choice .t { font-weight: 600; display: flex; align-items: center; gap: 9px; }
.choice .d { color: var(--muted); font-size: .875rem; margin-top: 5px; }

/* --- podsumowanie zamówienia --- */
.sum-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: .925rem; }
.sum-row.total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 14px; font-size: 1.15rem; font-weight: 700; }

/* --- lekcja / quiz --- */
.player {
  aspect-ratio: 16 / 9;
  background: #10141e;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: #7d879c;
  font-size: .9rem;
  text-align: center;
  padding: 20px;
  /* ⚠ Nie na CALA szerokosc: na desktopie kadr rozlazil sie na pol ekranu.
     `width:100%` + `max-width` daje pelna szerokosc na telefonie i rozsadny
     kadr na duzym ekranie (RWD zostaje). */
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}

/* Kadr z filmem wypelnia player bez paddingu; sam <video> lezy w srodku. */
.player.is-playing { padding: 0; overflow: hidden; }
.player .frame {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
  border-radius: var(--radius);
}
.modules { list-style: none; margin: 0; padding: 0; }
.modules li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: .9rem;
}
.modules li.done { color: var(--muted); }
.modules li.current { background: var(--accent-soft); font-weight: 600; }
.modules .dot {
  flex: 0 0 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  margin-top: 2px;
  display: grid;
  place-items: center;
  font-size: .62rem;
  color: #fff;
}
.modules li.done .dot { background: var(--ok); border-color: var(--ok); }
.modules li.current .dot { border-color: var(--accent); }

.answer {
  display: block;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  background: var(--surface);
  font-size: .95rem;
}
.answer + .answer { margin-top: 9px; }
.answer:hover { border-color: var(--muted); }
.answer.correct { border-color: var(--ok); background: var(--ok-soft); }
.answer.wrong { border-color: var(--bad); background: var(--bad-soft); }
.answer.locked { cursor: default; }

.feedback { margin-top: 14px; padding: 13px 15px; border-radius: 8px; font-size: .9rem; }
.feedback.ok { background: var(--ok-soft); color: var(--ok); }
.feedback.bad { background: var(--bad-soft); color: var(--bad); }

/* --- certyfikat --- */
.cert {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 54px 48px;
  text-align: center;
  box-shadow: var(--shadow);
  position: relative;
}
.cert::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--accent-soft);
  border-radius: 6px;
  pointer-events: none;
}
.cert .kicker { text-transform: uppercase; letter-spacing: .18em; font-size: .74rem; color: var(--muted); }
.cert .who { font-size: 2.1rem; font-weight: 700; margin: 18px 0 6px; }
.cert .what { font-size: 1.1rem; margin-bottom: 26px; }
.cert .grid-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; font-size: .85rem; }
.cert .grid-facts .l { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }

@media (max-width: 620px) {
  .cert { padding: 32px 22px; }
  .cert .who { font-size: 1.5rem; }
  .cert .grid-facts { grid-template-columns: 1fr; }
}

/* --- stopka --- */
.footer { border-top: 1px solid var(--border); margin-top: 48px; padding: 26px 0 40px; color: var(--muted); font-size: .85rem; }

/* --- druk: certyfikat i raport wychodzą jak dokument --- */
@media print {
  .nav, .footer, .demo-flag, .no-print { display: none !important; }
  body { background: #fff; }
  .card, .cert { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .wrap { max-width: none; padding: 0; }
}

/* ---------- wizytówka: ciemne pasy i żółty akcent ---------- */
.band {
  background: var(--accent-night);
  color: #fff;
  padding: 76px 0;
}
.band.mid { background: var(--accent-deep); }
.band h1, .band h2, .band h3 { color: #fff; }
.band .lead, .band .muted { color: rgba(255, 255, 255, .78); }
.band .card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); box-shadow: none; color: #fff; }
.band .card .muted { color: rgba(255, 255, 255, .7); }
.band .stat { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #fff; }
.band .stat .l { color: rgba(255, 255, 255, .7); }

.btn.yellow { background: var(--highlight); border-color: var(--highlight); color: #1c211e; }
.btn.yellow:hover { filter: brightness(1.05); }
.btn.on-dark { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn.on-dark:hover { border-color: #fff; filter: none; }

.kicker {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .74rem;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}
.band .kicker { color: var(--highlight); }

.rule { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.band .rule { border-color: rgba(255, 255, 255, .16); }

.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature .ico {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-family: var(--font-head);
}
.band .feature .ico { background: rgba(255, 255, 255, .12); color: var(--highlight); }

/* ---------- logowanie ---------- */
.login-wrap { min-height: 78vh; display: grid; place-items: center; padding: 40px 20px; }
.login-box { width: 100%; max-width: 430px; }
.role {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.role + .role { margin-top: 10px; }
.role:hover { border-color: var(--accent); }
.role .ico {
  flex: 0 0 34px; height: 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark);
  display: grid; place-items: center; font-weight: 700;
}
.role .t { font-weight: 600; }
.role .d { font-size: .84rem; color: var(--muted); }

/* ---------- panel administracyjny ---------- */
.admin-shell { display: grid; grid-template-columns: 216px 1fr; gap: 26px; align-items: start; }
.side { position: sticky; top: 86px; }
.side a {
  display: block;
  padding: 9px 13px;
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
  font-size: .93rem;
}
.side a:hover { background: var(--surface); color: var(--text); }
.side a.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.side .grp { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 18px 0 7px 13px; }

@media (max-width: 800px) {
  .admin-shell { grid-template-columns: 1fr; }
  .side { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
}

.drawer-bg {
  position: fixed; inset: 0; background: rgba(0, 42, 23, .45);
  display: none; z-index: 60; padding: 20px; overflow-y: auto;
}
.drawer-bg.open { display: block; }
.drawer {
  background: var(--surface); border-radius: var(--radius);
  max-width: 640px; margin: 30px auto; padding: 26px;
  box-shadow: 0 20px 60px rgba(0, 42, 23, .3);
}

/* ---------- kreator kursu ---------- */
.steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.step-tab {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius); padding: 10px 14px;
  font: inherit; font-size: .9rem; color: var(--muted); cursor: pointer;
}
.step-tab .n {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg); color: var(--muted);
  display: grid; place-items: center; font-size: .78rem; font-weight: 700;
}
.step-tab.active { border-color: var(--accent); color: var(--text); font-weight: 600; }
.step-tab.active .n { background: var(--accent); color: #fff; }
.step-tab.done .n { background: var(--accent-mid); color: var(--accent-deep); }

.builder-row {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; background: var(--surface);
}
.builder-row + .builder-row { margin-top: 12px; }
.builder-row .head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.builder-row .idx {
  font-family: var(--font-head); font-weight: 900;
  color: var(--accent); font-size: .95rem;
}
.row-actions { display: flex; gap: 6px; }
.icon-btn {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 6px; width: 30px; height: 30px;
  cursor: pointer; color: var(--muted); font: inherit; line-height: 1;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent-dark); }

.ans-row { display: flex; align-items: center; gap: 10px; }
.ans-row + .ans-row { margin-top: 8px; }
.ans-row input[type=text] { flex: 1; }
.ans-row label { margin: 0; font-weight: 400; font-size: .8rem; color: var(--muted); white-space: nowrap; }

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; gap: 10px; padding: 7px 0; font-size: .93rem; }
.check-list .mark { font-weight: 700; }
.check-list li.ok .mark { color: var(--ok); }
.check-list li.no .mark { color: var(--bad); }

.wizard-foot {
  display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 22px;
}

/* ---------- skala w widokach aplikacyjnych ---------- */
/* Panele nie są stroną sprzedażową: nagłówek jest mniejszy, a odstępy ciaśniejsze,
   żeby tabela zaczynała się wyżej i mieściła więcej wierszy bez przewijania. */
.admin-shell h1,
.app-head h1 { font-size: 1.65rem; }
.app-head { margin-bottom: 18px; }
.app-head .sub { color: var(--muted); font-size: .9rem; margin: 6px 0 0; }

/* postęp: pasek nad wierszem z procentem i plakietką, bez łamania */
.progress-cell { min-width: 168px; }
.progress-cell .line { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .82rem; color: var(--muted); }

.card h2 { font-size: 1.2rem; }
.card h3 { font-size: 1rem; }

/* ---------- wąskie ekrany ---------- */
@media (max-width: 760px) {
  .section { padding: 30px 0; }
  .band { padding: 46px 0; }
  .hero { padding: 40px 0 30px; }
  .card { padding: 18px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .admin-shell h1, .app-head h1 { font-size: 1.4rem; }
  .band h1 { font-size: 1.85rem !important; }

  /* kroki kreatora jadą poziomo, zamiast rozpychać stronę */
  .steps { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .step-tab { flex: 0 0 auto; }

  .wizard-foot { flex-direction: column-reverse; }
  .wizard-foot .btn { width: 100%; }
  .hero-actions .btn { width: 100%; }
  .drawer { margin: 12px auto; padding: 18px; }
  .drawer-bg { padding: 10px; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat .k { font-size: 1.5rem; }
  h1 { font-size: 1.6rem; }
  .cert .who { font-size: 1.3rem; }
  .row-actions { flex-wrap: wrap; }
  .demo-flag { right: 8px; bottom: 8px; font-size: .66rem; }
}

/* ---------- wizytówka: hero dzielony, karty z grafiką ---------- */
/* Zielony blok zajmuje lewą część, grafika prawą, ale tekst leży na obu i wychodzi
   nieco na grafikę. Dwie kolumny bez tego zachodzenia czytały się jak dwa sklejone
   prostokąty. Czytelność na jaśniejszym tle daje cień pod literami. */
.hero-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  background: var(--accent-deep);
}
.hero-copy {
  grid-row: 1;
  grid-column: 1 / span 2;
  z-index: 2;
  padding: 78px 44px 92px;
  padding-left: max(24px, calc((100vw - var(--maxw)) / 2 + 20px));
  color: #fff;
  pointer-events: none;
}
.hero-copy > * { pointer-events: auto; }
.hero-copy .bar-mark { width: 96px; height: 5px; background: var(--accent); margin-bottom: 26px; }
.hero-copy h1 {
  color: #fff;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  margin: 0 0 18px;
  max-width: 21ch;
  text-shadow: 0 2px 18px rgba(0, 30, 16, .55), 0 1px 3px rgba(0, 30, 16, .4);
}
.hero-copy p {
  color: rgba(255, 255, 255, .92);
  font-size: 1.12rem;
  max-width: 34ch;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0, 30, 16, .5);
}
.hero-copy .hero-actions { margin-top: 30px; }
/* Tło rozciąga się dowolnie, znak ma stały rozmiar i siedzi w środku. */
.hero-art {
  grid-row: 1;
  grid-column: 2;
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(120deg, #0d4a58 0%, #0f5566 46%, #0d3c5c 100%);
}
.hero-art .bg { position: absolute; inset: 0; }
.hero-art .bg svg { width: 100%; height: 100%; display: block; }

/* Znak siedzi w prawej części grafiki, żeby nie wchodził pod tekst. */
.hero-art .mark { position: relative; width: min(52%, 280px); padding: 24px; margin-left: auto; margin-right: 6%; }
.hero-art .mark svg { width: 100%; height: auto; display: block; }

/* Miękkie przejście z zieleni w grafikę, zamiast twardej krawędzi na styku kolumn. */
.hero-art::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: linear-gradient(90deg, var(--accent-deep) 0%, rgba(0, 83, 46, .82) 42%, rgba(0, 83, 46, 0) 100%);
  z-index: 1;
}

/* biała karta kroków nachodzi na spód hero, jak na stronie referencyjnej */
.overlap { margin-top: -58px; position: relative; z-index: 2; }
.overlap .card { padding: 34px 32px; }
.step-num {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--accent);
  margin-bottom: 10px;
}

/* nagłówek sekcji z kreskami po bokach */
.rule-title { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.rule-title::before, .rule-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.rule-title h2 { margin: 0; text-align: center; font-size: 1.75rem; }
.band .rule-title::before, .band .rule-title::after { background: rgba(255, 255, 255, .2); }

/* kafel z grafiką na górze */
.media-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.media-card .thumb { aspect-ratio: 16 / 10; background: var(--accent-night); position: relative; }
.media-card .thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.media-card .body { padding: 20px 22px 24px; }
.media-card h3 { margin-bottom: 8px; }
.media-card p { margin: 0; }

/* Do 1200 px tekst potrzebuje więcej miejsca, więc zielony blok jest szerszy
   i grafika ustępuje, zamiast ściskać nagłówek do trzech wierszy. */
@media (max-width: 1200px) {
  .hero-split { grid-template-columns: minmax(0, 56%) minmax(0, 44%); }
  .hero-copy h1 { max-width: 24ch; }
  .hero-copy p { max-width: 40ch; }
  .hero-art .mark { width: min(70%, 220px); margin-right: 4%; }
}

@media (max-width: 900px) {
  /* Grafika schodzi pod tekst, więc znoszą się przypisania do kolumn i nakładka. */
  .hero-split { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { grid-column: 1; grid-row: 1; padding: 48px 24px 56px; }
  .hero-copy h1 { max-width: none; text-shadow: none; }
  .hero-copy p { max-width: 46ch; text-shadow: none; }
  .hero-art { grid-column: 1; grid-row: 2; min-height: 240px; }
  .hero-art::before { display: none; }
  .hero-art .mark { margin: 0 auto; width: min(56%, 200px); }
  .overlap { margin-top: -34px; }
  .overlap .card { padding: 22px; }
  .rule-title h2 { font-size: 1.4rem; }
  .rule-title::before, .rule-title::after { display: none; }
  .rule-title { justify-content: flex-start; }
  .rule-title h2 { text-align: left; }
}

/* ---------- stany interakcji ---------- */
/* Żółty i przezroczysty przycisk mają własne barwy najechania, bo bazowa reguła
   przemalowałaby je na zielone. */
.btn.yellow:hover {
  background: var(--highlight-dark);
  border-color: var(--highlight-dark);
  color: #fff;
  box-shadow: 0 6px 18px rgba(195, 145, 0, .3);
}
.btn.on-dark:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  color: #fff;
  box-shadow: none;
}

/* odnośniki w pasku: kreska wysuwa się od lewej */
.nav-links a:not(.btn) { position: relative; padding-bottom: 3px; transition: color .16s ease; }
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).active::after { transform: scaleX(1); }

@media (max-width: 900px) {
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links a:not(.btn):hover { background: var(--accent-soft); color: var(--accent-dark); }
}

/* karty klikalne podnoszą się, statyczne nie */
.card.course, .card.media-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card.course:hover, .card.media-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-mid);
  box-shadow: 0 10px 30px rgba(0, 42, 23, .12);
}

/* wiersze tabel podświetlają się pod kursorem */
tbody tr { transition: background-color .14s ease; }
tbody tr:hover { background: var(--accent-soft); }

/* wybór roli, kroki kreatora, ikony */
.role { transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.role:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.role:hover .ico { background: var(--accent); color: #fff; }
.role .ico { transition: background-color .16s ease, color .16s ease; }

.step-tab { transition: border-color .16s ease, color .16s ease, background-color .16s ease; }
.step-tab:hover { border-color: var(--accent); color: var(--text); }

.icon-btn { transition: border-color .14s ease, color .14s ease, background-color .14s ease; }
.icon-btn:hover { background: var(--accent-soft); }

.choice { transition: border-color .16s ease, box-shadow .16s ease; }
.choice:hover { border-color: var(--accent); }

.answer { transition: border-color .14s ease, background-color .14s ease; }
.answer:not(.locked):hover { border-color: var(--accent); background: var(--accent-soft); }

.side a { transition: background-color .14s ease, color .14s ease; }

/* treściowe odnośniki podkreślają się dopiero pod kursorem */
p a, .small a, li a { text-decoration: none; border-bottom: 1px solid var(--accent-mid); }
p a:hover, .small a:hover, li a:hover { border-bottom-color: var(--accent); }

/* pola formularzy reagują na wejście kursorem i na zaznaczenie */
input, select, textarea { transition: border-color .14s ease, box-shadow .14s ease; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

/* nikt nie chce animacji, jeśli system o tym mówi wprost */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn:hover, .card.course:hover, .card.media-card:hover, .role:hover { transform: none; }
}

@media print {
  tbody tr:hover { background: transparent; }
}

/* ---------- okładki szkoleń ---------- */
.cover { aspect-ratio: 16 / 9; background: var(--accent-night); position: relative; overflow: hidden; }
.cover svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.card.course { padding: 0; overflow: hidden; }
.card.course .course-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }

.cover-thumb {
  width: 56px;
  height: 34px;
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 56px;
  background: var(--accent-night);
  position: relative;
}
.cover-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.title-cell { display: flex; gap: 12px; align-items: flex-start; }

.cover-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cover-pick button {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  transition: border-color .16s ease, transform .16s ease;
}
.cover-pick button:hover { border-color: var(--accent-mid); transform: translateY(-1px); }
.cover-pick button[aria-pressed="true"] { border-color: var(--accent); }
.cover-pick .cover { aspect-ratio: 16 / 9; }
.cover-pick .cap { display: block; padding: 6px 8px; font-size: .76rem; color: var(--muted); background: var(--surface); }
.cover-pick button[aria-pressed="true"] .cap { color: var(--accent-dark); font-weight: 600; }

@media (max-width: 620px) { .cover-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- przewijanie i pojawianie się treści ---------- */
html { scroll-behavior: smooth; }

/* Pasek nawigacji jest przyklejony, więc kotwica musi zatrzymać się niżej,
   inaczej nagłówek sekcji chowa się za paskiem. */
[id] { scroll-margin-top: 92px; }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* karty w rzędzie wchodzą jedna po drugiej */
.reveal.d1 { transition-delay: .06s; }
.reveal.d2 { transition-delay: .12s; }
.reveal.d3 { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media print {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- awatary ---------- */
.avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  color: #fff;
  letter-spacing: .02em;
  overflow: hidden;
}
.avatar.sm { flex-basis: 28px; width: 28px; height: 28px; font-size: .68rem; }
.avatar.lg { flex-basis: 54px; width: 54px; height: 54px; font-size: 1.1rem; }
.person { display: flex; align-items: center; gap: 11px; }
.person .who strong { display: block; line-height: 1.3; }

/* ---------- powiadomienia i klienci w panelu wystawcy ---------- */
.notice {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--surface);
}
.notice + .notice { margin-top: 10px; }
.notice.urgent { border-left-color: var(--bad); background: var(--bad-soft); }
.notice.soon { border-left-color: var(--highlight); background: var(--warn-soft); }
.notice.calm { border-left-color: var(--accent); }
.notice .who { font-weight: 600; }
.notice .meta { font-size: .85rem; color: var(--muted); margin-top: 3px; }
.notice .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 760px) {
  .notice { grid-template-columns: 1fr; }
  .notice .acts { justify-content: flex-start; }
}

.plan { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.stage {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .82rem;
  color: var(--muted);
  background: var(--surface);
}
.stage.done { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }
.stage.now { border-color: var(--highlight-dark); color: var(--warn); background: var(--warn-soft); font-weight: 600; }
.stage .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* --- lista firm --- */
/* Karta firmy obcina swoją treść. W trakcie zwijania lista wystawała poza kartę
   i nachodziła na kolejne wiersze. */
.client {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.client + .client { margin-top: 12px; }
.client > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}
.client > summary::-webkit-details-marker { display: none; }
.client > summary:hover { background: var(--accent-soft); border-radius: var(--radius); }
.client[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.client .mono { font-family: var(--font-head); font-weight: 900; font-size: 1rem; }
.client .facts { margin-left: auto; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.client .fact { text-align: right; font-size: .82rem; color: var(--muted); }
.client .fact b { display: block; font-size: 1rem; color: var(--text); font-family: var(--font-head); }
.client .chev { transition: transform .18s ease; color: var(--muted); }
.client[open] .chev { transform: rotate(90deg); }
.client .inner { padding: 4px 18px 18px; overflow: hidden; }

@media (max-width: 760px) {
  .client > summary { flex-wrap: wrap; }
  .client .facts { margin-left: 0; gap: 14px; }
  .client .fact { text-align: left; }
}

/* Adres e-mail bywa dłuższy niż kolumna. Zamiast rozpychać tabelę do poziomego
   suwaka, skracamy go wielokropkiem. */
.line-clip {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.person { min-width: 0; }
.person .who { min-width: 0; flex: 1; }

/* Na ciasnych ekranach tabela musi zmieścić się w karcie, więc schodzą dopełnienia
   i minimalne szerokości kolumn. Wcześniej sumowały się do więcej, niż karta miała
   do dyspozycji, i cała strona jechała w bok. */
.table-scroll { min-width: 0; max-width: 100%; }

@media (max-width: 1100px) {
  th, td { padding: 9px 8px; }
  td.wrap, th.wrap { min-width: 140px; max-width: 210px; }
  .progress-cell { min-width: 118px; }
  .person { gap: 8px; }
  .avatar { flex-basis: 30px; width: 30px; height: 30px; font-size: .72rem; }
  .btn.small { padding: 5px 9px; font-size: .8rem; }
}

/* Poniżej 720 px kolumna wyniku znika - ta sama liczba stoi w raporcie zgodności,
   a bez niej wiersz mieści się bez przewijania. */
@media (max-width: 720px) {
  .hide-narrow { display: none; }
}

/* ---------- telefon: odstępy i plakietka ---------- */
@media (max-width: 620px) {
  .grid { gap: 14px; }
  .section { padding: 26px 0; }
  .section-head { margin-bottom: 14px; }
  .band { padding: 40px 0; }

  .card { padding: 16px; }
  .card.course, .card.media-card { padding: 0; }
  .card.course .course-body { padding: 16px 16px 18px; }
  .media-card .body { padding: 16px 16px 18px; }
  .overlap { margin-top: -26px; }
  .overlap .card { padding: 18px 16px; }

  /* Okładka na wąskim ekranie nie musi być tak wysoka jak w rzędzie trzech kart. */
  .cover, .media-card .thumb { aspect-ratio: 2 / 1; }

  .course-foot { flex-wrap: wrap; }
  .course-foot .btn { flex: 1 1 auto; }

  /* Plakietka nie może zasłaniać przycisków w karcie - siada w lewym dolnym rogu
     i nie przechwytuje kliknięć. */
  .demo-flag { left: 8px; right: auto; bottom: 8px; pointer-events: none; opacity: .7; }
}

/* ---------- tabela jako kafelki na telefonie ---------- */
/* Pięć kolumn na ekranie szerokości 360 px nie ma sensu, więc każdy wiersz staje się
   małą kartą, a nagłówki kolumn wracają jako podpisy nad wartościami. */
@media (max-width: 820px) {
  .stack-table thead { display: none; }
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: auto; }

  .stack-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 13px 14px;
    background: var(--surface);
  }
  .stack-table tr + tr { margin-top: 10px; }
  .stack-table tr:hover { background: var(--surface); }

  .stack-table td {
    border: 0;
    padding: 5px 0;
    white-space: normal;
    min-width: 0;
    max-width: none;
  }
  .stack-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin-bottom: 2px;
  }

  /* Wiersz z osobą jest nagłówkiem kafelka, bez podpisu i z odkreśleniem pod spodem. */
  .stack-table td.lead-cell {
    padding: 0 0 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .stack-table td.lead-cell::before { display: none; }
  .stack-table td.lead-cell .line-clip { white-space: normal; }

  .stack-table td.act-cell { padding-top: 12px; }
  .stack-table td.act-cell .btn { width: 100%; }
  .stack-table td.right { text-align: left; }
  .stack-table .progress-cell { min-width: 0; }
  .stack-table .avatar { flex-basis: 34px; width: 34px; height: 34px; }
}

/* ---------- twarde zabezpieczenie przed poziomym przewijaniem ---------- */
/* Jeden element szerszy od okna przewija całą stronę w bok i ucina wszystko po prawej.
   Zamiast szukać go za każdym razem, blokujemy przewijanie strony w poziomie i pilnujemy,
   żeby karty i tabele nigdy nie przekraczały szerokości rodzica. */
/* `clip` zamiast `hidden`: obcina nadmiar w poziomie, ale nie robi z body kontenera
   przewijania - przy `hidden` przyklejony pasek nawigacji przestaje trzymać się okna
   i odjeżdża w bok względem treści. */
html { max-width: 100%; overflow-x: clip; }
body { max-width: 100%; overflow-x: clip; }
.card, .notice, .client, .stat, .drawer { max-width: 100%; }
img, svg, table, pre { max-width: 100%; }

/* Panel wystawcy: menu boczne odchodzi wcześniej, a wiersze przypomnień układają się
   pionowo, zanim zaczną walczyć o miejsce z przyciskami. */
@media (max-width: 1000px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .side .grp { margin: 0; align-self: center; }
}

@media (max-width: 900px) {
  .notice { grid-template-columns: minmax(0, 1fr); }
  .notice .acts { justify-content: flex-start; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client > summary { flex-wrap: wrap; }
  .client .facts { margin-left: 0; width: 100%; gap: 16px; }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .plan { gap: 6px; }
  .stage { padding: 4px 9px; font-size: .76rem; }
  .notice { padding: 12px 13px; }
  .notice .acts { flex-direction: column; align-items: stretch; }
  .notice .acts .btn { width: 100%; }
  .client > summary { padding: 13px 14px; gap: 10px; }
  .client .inner { padding: 4px 12px 14px; }
  .client .facts { gap: 12px; }
  .client .fact { min-width: 72px; }
}

/* ---------- menu panelu na wąskim ekranie: pasek zakładek ---------- */
/* Sidebar rozłożony na płasko wyglądał jak przypadkowa sterta odnośników z wtrąconymi
   nagłówkami grup. Na wąskim ekranie to pasek zakładek przewijany poziomo, a nagłówki
   grup znikają, bo w jednej linii nie mają sensu. */
@media (max-width: 1000px) {
  .side {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 4px 0 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .side::-webkit-scrollbar { display: none; }
  .side .grp { display: none; }
  .side a {
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    padding: 8px 14px;
    font-size: .88rem;
    white-space: nowrap;
  }
  .side a.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .admin-shell { gap: 14px; }
  .admin-shell > main { min-width: 0; }
}

/* ---------- sekcje panelu jako akordeon ---------- */
.sect { padding: 0; }
.sect > summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}
.sect > summary::-webkit-details-marker { display: none; }
.sect > summary:hover { background: var(--accent-soft); border-radius: var(--radius); }
.sect[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }
.sect .sect-title { display: flex; flex-direction: column; gap: 3px; }
.sect .sect-title h2 { margin: 0; }
.sect > summary .chev { color: var(--muted); transition: transform .18s ease; line-height: 1.4; }
.sect[open] > summary .chev { transform: rotate(90deg); }
.sect > *:not(summary) { padding: 0 22px; }
.sect > *:not(summary):last-child { padding-bottom: 22px; }

@media (max-width: 620px) {
  .sect > summary { padding: 15px 16px; }
  .sect > *:not(summary) { padding: 0 14px; }
  .sect > *:not(summary):last-child { padding-bottom: 16px; }

  /* Plakietka wchodziła na treść karty, a stopka i tak mówi, że to makieta. */
  .demo-flag { display: none; }
}

/* Na telefonie zamiast paska zakładek jest akordeon, więc menu panelu nie jest
   potrzebne i nie ma poziomego przewijania. */
@media (max-width: 1000px) {
  .side { display: none; }
  .admin-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* W kafelku miniatura okładki stoi nad tytułem i jest większa, bo obok tekstu robiła
   się znaczkiem przyklejonym do pierwszej litery. */
@media (max-width: 820px) {
  .stack-table .title-cell { flex-direction: column; gap: 10px; }
  .stack-table .cover-thumb { width: 100%; flex-basis: auto; height: 96px; border-radius: 5px; }
  .stack-table td.act-cell { display: flex; gap: 8px; }
  .stack-table td.act-cell .btn { flex: 1 1 0; width: auto; }
}

/* Pasek i treść muszą mieć to samo wcięcie boczne, inaczej logo i nagłówek strony
   nie stoją w jednej pionowej linii. */
@media (max-width: 620px) {
  .app-head { margin-bottom: 16px; }
  .app-head h1 { font-size: 1.35rem; }
  .stats { gap: 10px; }
  .admin-shell > main > .section-head { padding-top: 4px; }
}

/* Jedno wcięcie boczne dla paska i dla treści. Wcześniej były ustawiane osobno
   i rozjeżdżały się o kilka pikseli. */
@media (max-width: 620px) {
  :root { --gutter: 16px; }
}

/* Kolumna tytułu w wykazie szkoleń potrzebuje więcej miejsca niż zwykła kolumna
   opisowa - przy suficie 260 px łamała tytuł po jednym słowie, choć obok było pusto. */
.title-col { min-width: 300px; max-width: 460px; }
.title-text { min-width: 0; }
.title-text strong { display: block; }

/* Opis pod tytułem: dwa wiersze i wielokropek, zamiast piramidy na pół tabeli. */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1100px) {
  .title-col { min-width: 220px; max-width: 340px; }
}

@media (max-width: 620px) {
  .title-col { min-width: 0; max-width: none; }
}

/* ---------- tabela pracowników: sztywne kolumny ---------- */
/* Adres e-mail i plakietki rozpychały tabelę do poziomego suwaka. Szerokości kolumn
   są zadane z góry: procenty się skalują, treść zawija albo dostaje wielokropek,
   a kolumna akcji ma stałe piksele, więc przycisk nigdy nie jest ucięty. */
/* Cztery kolumny, szerokości w procentach sumujące się do stu. Mieszanie procentów
   ze stałymi pikselami ścinało ostatnią kolumnę, gdy karta była węższa. */
.staff-table { table-layout: fixed; }

/* Ptaszek albo krzyżyk zamiast plakietki i drugiej kolumny z procentem.
   Wynik testu siedzi w podpowiedzi pod kursorem. */
.mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: .82rem;
  font-weight: 700;
  cursor: default;
}
.mark.yes { background: var(--ok-soft); color: var(--ok); }
.mark.no { background: var(--bad-soft); color: var(--bad); }

/* Przycisk bierze całą szerokość swojej komórki, więc nie ma jak zostać ucięty. */
.staff-table .act-cell .btn { width: 100%; }
.staff-table .score { color: var(--text); font-weight: 600; }

/* Przy sztywnym układzie limity minimalne przestają pomagać, a szkodzą. */
.staff-table td.wrap, .staff-table th.wrap { min-width: 0; max-width: none; }
.staff-table .progress-cell { min-width: 0; }
/* Plakietka spada pod procent, gdy nie mieści się obok. */
.staff-table .progress-cell .line { flex-wrap: wrap; row-gap: 2px; }

/* Przedział, w którym prawa szpalta jeszcze jest, a lewa kolumna już wąska -
   kolumna akcji dostaje większy udział, bo tu było najciaśniej. */
@media (max-width: 1440px) {
          }

@media (max-width: 1200px) {
          }

/* Między 620 a 700 px tabela jest jeszcze tabelą, a nie kafelkami, i kolumna akcji
   robi się bardzo wąska - przycisk dostaje mniejsze dopełnienie i stopień pisma. */
@media (max-width: 760px) {
  .staff-table .act-cell .btn { padding: 5px 7px; font-size: .78rem; }
}

/* Tabela pracowników zajmuje teraz całą szerokość karty, bez prawej szpalty, więc
   kolumny tekstowe mogą być szersze, a znacznik i przycisk zostają wąskie. */

@media (max-width: 900px) {
          }

/* Pole dodawania osób: na wąskim ekranie lista i przydział jeden pod drugim. */
@media (max-width: 760px) {
  .card > .grid[style*="2fr"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- tabela pracowników: jeden zestaw szerokości ---------- */
/* Karta zajmuje całą szerokość, więc jeden zestaw udziałów wystarcza od 681 px
   (niżej wiersze zamieniają się w kafelki) do najszerszych monitorów. */
.staff-table th:nth-child(1) { width: 30%; }
.staff-table th:nth-child(2) { width: 25%; }
.staff-table th:nth-child(3) { width: 19%; }
.staff-table th:nth-child(4) { width: 8%; }
.staff-table th:nth-child(5) { width: 18%; }

/* ---------- wiersz dodawania osoby ---------- */
.adder-row td { border-top: 1px solid var(--border); border-bottom: 0; background: var(--bg); }
.adder-row:hover td { background: var(--bg); }
.adder-row.editing td { background: var(--accent-soft); vertical-align: top; }
/* Komórki mają globalnie `nowrap`, więc pola formularza ustawiały się w jednej linii
   i wylewały na sąsiednie kolumny. W tym wierszu wracamy do zwykłego układu blokowego. */
.adder-row td { white-space: normal; }
.adder-row input, .adder-row select {
  display: block;
  width: 100%;
  font-size: .9rem;
  padding: 8px 10px;
}
.adder-row.editing td > input + input { margin-top: 6px; }
.adder-row .act-cell { display: flex; flex-direction: column; gap: 6px; }
.adder-row .act-cell .btn { width: 100%; }
.adder-row .feedback { margin: 0; }

.plus {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  line-height: 1;
}

/* ---------- szukanie: kółko nad przygaszoną listą ---------- */
/* Lista zostaje ta sama, tylko wyblakła i nieklikalna, a nad nią kręci się kółko.
   Podmiana treści następuje po odczekaniu, żeby wiersze nie skakały przy każdej literze. */
.busy { position: relative; pointer-events: none; min-height: 160px; }
.busy > * { opacity: .3; filter: grayscale(.5); transition: opacity .15s ease; }

/* Mleczna zasłona na całej liście, żeby było widać, że wyniki są nieaktualne. */
.busy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .55);
  z-index: 1;
}
.busy::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 64px;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border: 3px solid var(--accent-mid);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  z-index: 2;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .busy::after { animation: none; }
}

/* ---------- wykaz szkoleń: sztywne kolumny ---------- */
/* Przy układzie automatycznym kolumna tytułu przegrywała z kolumnami, które mają
   zakaz łamania, i tytuł łamał się na cztery wiersze, a miniatura wisiała na kresce. */
.courses-table { table-layout: fixed; }
.courses-table th:nth-child(1) { width: 29%; }
.courses-table th:nth-child(2) { width: 14%; }
.courses-table th:nth-child(3) { width: 7%; }
.courses-table th:nth-child(4) { width: 9%; }
.courses-table th:nth-child(5) { width: 8%; }
.courses-table th:nth-child(6) { width: 9%; }
.courses-table th:nth-child(7) { width: 10%; }
.courses-table th:nth-child(8) { width: 14%; }

.courses-table td.title-col { min-width: 0; max-width: none; }
.courses-table .title-cell { align-items: center; gap: 12px; }
.courses-table .cover-thumb { width: 64px; flex-basis: 64px; height: 40px; }

/* Dwa przyciski w kolumnie akcji: obok siebie, a gdy brakuje miejsca, jeden pod drugim. */
.courses-table .act-cell,
.courses-table td:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.courses-table td:last-child .btn { flex: 1 1 auto; }

@media (max-width: 1200px) {
  .courses-table th:nth-child(2) { width: 12%; }
  .courses-table th:nth-child(8) { width: 17%; }
  .courses-table .cover-thumb { width: 52px; flex-basis: 52px; height: 33px; }
}

/* Odstęp między kolejnymi polami dotyczy układu pionowego. W siatce sąsiadujące pola
   stoją obok siebie, więc ten odstęp spychał prawą kolumnę o kilkanaście pikseli w dół. */
.grid .field + .field { margin-top: 0; }

/* Poniżej 1024 px w wykazie szkoleń schodzą dwie najmniej potrzebne kolumny - liczba
   pytań i sprzedane miejsca. Jedno i drugie widać po wejściu w szkolenie. */
@media (max-width: 1024px) {
  .hide-md { display: none; }
  .courses-table th:nth-child(1) { width: 34%; }
  .courses-table th:nth-child(2) { width: 15%; }
  .courses-table th:nth-child(3) { width: 8%; }
  .courses-table th:nth-child(5) { width: 10%; }
  .courses-table th:nth-child(7) { width: 13%; }
  .courses-table th:nth-child(8) { width: 20%; }
}

/* Strzałka przy firmie obraca się przy rozwijaniu. Obrót liczymy tu, wysokość w JS. */
.client .chev { display: inline-block; transition: transform .2s ease; }

/* ---------- rozliczenia ---------- */
.books-table { table-layout: fixed; }
.books-table th:nth-child(1) { width: 17%; }
.books-table th:nth-child(2) { width: 18%; }
.books-table th:nth-child(3) { width: 9%; }
.books-table th:nth-child(4) { width: 9%; }
.books-table th:nth-child(5) { width: 9%; }
.books-table th:nth-child(6) { width: 8%; }
.books-table th:nth-child(7) { width: 10%; }
.books-table th:nth-child(8) { width: 10%; }
.books-table th:nth-child(9) { width: 10%; }
.books-table td.wrap { min-width: 0; max-width: none; }
.books-table .act-cell { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.books-table .act-cell .btn { flex: 1 1 auto; }

@media (max-width: 1200px) {
  .books-table th:nth-child(6) { display: none; }
  .books-table td:nth-child(6) { display: none; }
  .books-table th:nth-child(1) { width: 19%; }
  .books-table th:nth-child(9) { width: 13%; }
}
/* V2 — nagłówek odwzorowany z cyberhabit.pl.
   Wymiary zdjęte z ich live.css i z Bootstrapa 5.3, którego używają:
   · kontener = bootstrapowy (540/720/960/1140/1320), NIE 1000 px — reguła
     `.ko_ThemeBoxed #website .container{max-width:1000px}` u nich nie działa,
     bo mają klasę `ko_Theme`, nie `ko_ThemeBoxed`
   · logo w bloku wysokości 100 px
   · menu 18 px, odstęp 15 px na stronę, li 25 px góra-dół
   Palety ani fontów nie podmieniamy — CyberHabit używa dokładnie tych samych
   co makieta (Chivo + Roboto, #00a65b / #007d44 / #ffcd02). */

.ch-wrap { width: 100%; margin: 0 auto; padding: 0 12px; }
@media (min-width: 576px)  { .ch-wrap { max-width: 540px; } }
@media (min-width: 768px)  { .ch-wrap { max-width: 720px; } }
@media (min-width: 992px)  { .ch-wrap { max-width: 960px; } }
@media (min-width: 1200px) { .ch-wrap { max-width: 1140px; } }
@media (min-width: 1400px) { .ch-wrap { max-width: 1320px; } }

/* ---------- biały pasek: logo + menu ---------- */
.ch-header {
  background: #fff;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 0 rgba(0, 42, 23, .07), 0 4px 16px rgba(0, 42, 23, .05);
}
.ch-header .ch-wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 100px; gap: 24px;
}
.ch-logo { display: flex; align-items: center; flex-shrink: 0; line-height: 0; }
.ch-logo img { height: 62px; width: auto; display: block; }

.ch-menu { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.ch-menu > li { display: flex; align-items: center; }
.ch-menu > li > a {
  display: block; padding: 0 15px;
  font: 700 18px/50px var(--font-head);
  color: var(--text); text-decoration: none; white-space: nowrap;
  letter-spacing: -.01em;
  transition: color .16s ease;
}
.ch-menu > li > a:hover { color: var(--accent); }
.ch-menu > li.is-active > a { color: var(--accent); }

.ch-menu .ch-cta { margin-left: 14px; }
.ch-menu .ch-cta > a {
  background: var(--accent); color: #fff;
  border-radius: 999px; padding: 0 32px; line-height: 50px;
  box-shadow: 0 4px 14px rgba(0, 166, 91, .32);
  transition: background-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.ch-menu .ch-cta > a:hover {
  background: var(--accent-dark); color: #fff;
  box-shadow: 0 6px 20px rgba(0, 125, 68, .38);
  transform: translateY(-1px);
}

/* Wariant bez nawigacji — używany na logowaniu: samo logo.
   Styl menu zostaje w tym pliku dla ekranów publicznych, gdzie nawigacja ma sens.
   Pasek kontaktowy z adresem, telefonem i social media wyleciał całkowicie. */
.ch-header--bare .ch-wrap { justify-content: flex-start; }

/* ---------- wąski ekran: szuflada ---------- */
.ch-burger {
  display: none; background: none; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 13px; cursor: pointer;
  color: var(--text); line-height: 0;
}
.ch-burger:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 991px) {
  .ch-header .ch-wrap { height: 76px; }
  .ch-logo img { height: 46px; }
  .ch-burger { display: block; }
  .ch-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: stretch;
    padding: 10px 20px 18px; box-shadow: var(--shadow);
    border-top: 1px solid var(--border);
  }
  .ch-menu.open { display: flex; }
  .ch-menu > li > a { line-height: 46px; padding: 0; font-size: 17px; }
  .ch-menu .ch-cta { margin: 12px 0 0; }
  .ch-menu .ch-cta > a { text-align: center; line-height: 46px; }
}

/* ---------- plakietka: to nie jest ich strona ---------- */
.ch-mockflag {
  background: var(--highlight); color: #1c211e;
  font: 700 .72rem/1 var(--font-head); letter-spacing: .09em; text-transform: uppercase;
  text-align: center; padding: 8px 20px;
}

/* ---------- pola, których nie łapie assets/style.css ----------
   V1 stylowała tylko input[type=text|email|number] i dawała hasłu type="text",
   więc password, tel i search nigdy nie były potrzebne. V2 używa prawdziwych
   typów, więc trzeba je dopisać. Ta sama reguła co w V1, żeby nic się nie
   rozjechało. */
input[type=password], input[type=tel], input[type=search], input[type=date] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
  color: var(--text);
}

/* checkbox nie ma być rozciągany na całą szerokość */
input[type=checkbox], input[type=radio] {
  width: auto; height: auto; margin: 0; accent-color: var(--accent);
}

/* ---------- wybór drugiego składnika ---------- */
.alt-toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 .875rem var(--font-body); color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
}
.alt-toggle:hover { color: var(--accent-dark); text-decoration: underline; }
.alt-toggle .caret { transition: transform .18s ease; display: inline-block; }
.alt-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.alt-list { display: none; margin-top: 12px; }
.alt-list.open { display: block; }
.alt-way {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 15px; cursor: pointer;
}
.alt-way + .alt-way { margin-top: 9px; }
.alt-way:hover { border-color: var(--accent); background: var(--accent-soft); }
.alt-way .ico {
  width: 30px; height: 30px; border-radius: 7px; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-dark);
}
.alt-way:hover .ico { background: var(--accent); color: #fff; }
.alt-way .t { font-weight: 600; font-size: .92rem; display: block; }
.alt-way .d { font-size: .82rem; color: var(--muted); display: block; margin-top: 2px; }

.resend { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.resend button:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; }

/* ---------- .choice jako <button> ----------
   V1 używała .choice na <label> i <div>. Na przycisku trzeba zdjąć domyślne
   wyśrodkowanie tekstu i wymusić dziedziczenie fontu, inaczej wygląda jak
   systemowy przycisk. */
button.choice {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}
button.choice .t { text-align: left; }
button.choice:hover { border-color: var(--accent); }

/* ---------- przełącznik stanu konta w panelu makiety ----------
   Musi wyglądać inaczej niż przyciski nawigacyjne obok, bo robi coś innego:
   nie zmienia ekranu, zmienia założenie o koncie. */
.mock-acct { margin-top: 14px; border-top: 1px dashed var(--highlight-dark); padding-top: 13px; }
.mock-acct .lbl {
  font: 700 .68rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--warn); display: block; margin-bottom: 4px;
}
.mock-acct .hint { font-size: .78rem; color: var(--muted); margin: 0 0 9px; }
.seg { display: flex; border: 1px solid var(--highlight-dark); border-radius: var(--radius); overflow: hidden; }
.seg button {
  flex: 1; background: #fff; border: 0; cursor: pointer; padding: 9px 6px;
  font: 600 .78rem/1.25 var(--font-body); color: var(--muted);
}
.seg button + button { border-left: 1px solid var(--highlight-dark); }
.seg button:hover { background: #fff6d9; color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--highlight); color: #1c211e; }
.mock-acct .effect {
  font-size: .78rem; color: var(--text); background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 11px; margin: 9px 0 0;
}
.mock-acct .effect b { font-family: var(--font-head); }
/* Panel Dostawcy — układ ze stałym paskiem po lewej.
   Paleta i fonty z assets/style.css (te same, których używa CyberHabit). */

:root { --side: 248px; --topbar-h: 60px; }

body.adm { background: var(--bg); }

/* ---------- pasek górny ---------- */
.adm-top {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 40;
  background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px; padding: 0 22px;
}
.adm-top .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.adm-top .brand img { height: 30px; width: auto; display: block; }
.adm-top .brand .sep { width: 1px; height: 24px; background: var(--border); }
.adm-top .brand .role {
  font: 700 .78rem/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-soft);
  padding: 6px 10px; border-radius: 5px; white-space: nowrap;
}
.adm-top .host {
  font: 500 .8rem/1 var(--font-body); color: var(--faint, var(--muted));
  padding: 5px 9px; border: 1px solid var(--border); border-radius: 5px;
}
@media (max-width: 900px) { .adm-top .host { display: none; } }
.adm-top .spacer { flex: 1; }
.adm-user { display: flex; align-items: center; gap: 10px; }
.adm-user .av {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font: 700 .78rem var(--font-head);
}
.adm-user .who { line-height: 1.25; }
.adm-user .who b { display: block; font-size: .86rem; font-weight: 600; }
.adm-user .who span { font-size: .76rem; color: var(--muted); }
@media (max-width: 700px) { .adm-user .who { display: none; } }

/* ---------- staly pasek nawigacji po lewej ----------
   Wyglad z panelu AssetLife (.nav-item): pozycje to zaokraglone "pigulki"
   wsuniete od krawedzi, aktywna ma miekkie tlo marki i zolty wskaznik po lewej
   (inset box-shadow, tak jak zloto w AssetLife). Kolory z palety dostawcy
   (ProviderTheme) - te same style, inne barwy per dostawca. */
.adm-side {
  position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: var(--side); z-index: 30;
  background: #fff; border-right: 1px solid var(--border);
  overflow-y: auto; padding: 14px 12px 18px;
  display: flex; flex-direction: column; gap: 2px;
}
/* AssetLife + „Wyloguj" przypiete do dolu. AssetLife stoi NAD kreska, „Wyloguj"
   pod nia (kreska = border-top .side-foot). */
.adm-side .side-bottom { margin-top: auto; }
.adm-side .side-foot { padding-top: 12px; border-top: 1px solid var(--border); }
.adm-side .grp {
  font: 700 .68rem/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 14px 12px 8px;
}
.adm-side a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 500;
  border-radius: 10px; white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.adm-side a:hover { background: var(--accent-soft); color: var(--accent-deep); text-decoration: none; }
.adm-side a[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent-deep); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--highlight);
}
.adm-side a .ic { width: 18px; flex: none; display: grid; place-items: center; color: var(--muted); }
.adm-side a:hover .ic,
.adm-side a[aria-current="page"] .ic { color: var(--accent); }
/* Licznik przy pozycji - zolta plakietka jak w AssetLife (nav-item__badge). */
.adm-side a .badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--highlight); color: var(--highlight-dark);
  font: 700 .72rem/20px var(--font-head); text-align: center;
}
.adm-side a .soon {
  margin-left: auto; font: 600 .64rem/1 var(--font-body); letter-spacing: .06em;
  text-transform: uppercase; color: var(--warn); background: var(--warn-soft);
  padding: 4px 6px; border-radius: 4px;
}
/* Grupa "AssetLife": natywny <details>, rodzic wyglada jak zwykla pozycja menu.
   Kolory marki AssetLife (niebieski + zloto), NIE tokeny dostawcy - ten obszar
   jest nasz i nie przemalowuje sie z paleta whitelabel (jak ekran rozliczen). */
.adm-side .navgroup {
  --al-blue: #3151A3; --al-blue-dark: #0C447C;
  --al-ice: #E9F1FA; --al-ice-mid: #9DBEE4;
  --al-gold: #F0B139; --al-gold-deep: #8A5A08;
}
.adm-side .navgroup summary.nav-parent {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  color: var(--muted); font-size: .92rem; font-weight: 500;
  border-radius: 10px; white-space: nowrap; cursor: pointer; list-style: none;
  transition: background-color .12s ease, color .12s ease;
}
.adm-side .nav-parent::-webkit-details-marker { display: none; }
.adm-side .nav-parent:hover,
.adm-side .navgroup[open] .nav-parent { background: var(--al-ice); color: var(--al-blue-dark); }
.adm-side .nav-parent .ic { width: 18px; flex: none; display: grid; place-items: center; color: var(--muted); }
.adm-side .nav-parent:hover .ic,
.adm-side .navgroup[open] .nav-parent .ic { color: var(--al-blue); }
/* Prawdziwy znak AssetLife (kolorowy PNG) zamiast glyphu - nie tintujemy go. */
.adm-side .nav-parent .ic--mark img { width: 18px; height: 18px; display: block; }
.adm-side .nav-parent .badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--al-gold); color: var(--al-gold-deep);
  font: 700 .72rem/20px var(--font-head); text-align: center;
}
.adm-side .nav-parent .chev { margin-left: auto; flex: none; color: var(--muted); transition: transform .12s ease; }
.adm-side .nav-parent .badge + .chev { margin-left: 8px; }
.adm-side .navgroup[open] .nav-parent .chev { transform: rotate(90deg); color: var(--al-blue); }
/* Podpozycje AssetLife: BEZ doczepionej kreski z boku - sam wciety wpis, tak zeby
   ikony dzieci siedzialy pod etykieta rodzica. Aktywne dziecko dostaje LEKKIE
   podkreslenie (zlota nitka), nie pelny pill - klik ma tylko zaznaczac, nie krzyczec. */
.adm-side .nav-sub {
  display: flex; flex-direction: column; gap: 1px;
  margin: 1px 0 6px 0; padding-left: 0;
}
.adm-side .nav-sub a { font-size: .89rem; padding: 7px 10px 7px 30px; border-radius: 8px; }
.adm-side .nav-sub a:hover { background: transparent; color: var(--al-blue-dark); }
.adm-side .nav-sub a:hover .ic { color: var(--al-blue); }
.adm-side .nav-sub a[aria-current="page"] {
  background: transparent; color: var(--al-blue-dark); font-weight: 700; box-shadow: none;
  text-decoration: underline; text-decoration-color: var(--al-gold);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.adm-side .nav-sub a[aria-current="page"] .ic { color: var(--al-blue); }

/* AS-0095: addons (Store, Kanban) under a rule and a heading, drawn as buttons
   like the client panel's store link (.side-store) - a separate feature, not a menu row. */
.adm-side .nav-addons {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px; border-top: 1px solid var(--border);
}
.adm-side .nav-addons .grp { padding: 14px 12px 2px; }
.adm-side a.nav-addon {
  border: 1px solid var(--accent); background: var(--accent-soft);
  color: var(--accent-deep); font-weight: 600;
}
.adm-side a.nav-addon .ic { color: var(--accent); }
.adm-side a.nav-addon:hover,
.adm-side a.nav-addon[aria-current="page"] { background: var(--accent); color: #fff; box-shadow: none; }
.adm-side a.nav-addon:hover .ic,
.adm-side a.nav-addon[aria-current="page"] .ic { color: #fff; }

/* ---------- obszar treści ---------- */
.adm-main { margin: var(--topbar-h) 0 0 var(--side); padding: 26px 26px 60px; }
@media (max-width: 900px) {
  .adm-side { transform: translateX(-100%); transition: transform .18s ease; }
  .adm-side.open { transform: none; box-shadow: var(--shadow); }
  .adm-main { margin-left: 0; padding: 20px 16px 50px; }
}
.adm-burger { display: none; background: none; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; cursor: pointer; line-height: 0; }
@media (max-width: 900px) { .adm-burger { display: block; } }

.adm-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.adm-head h1 { font-size: 1.6rem; margin: 0 0 4px; }
.adm-head .sub { color: var(--muted); font-size: .9rem; margin: 0; }
.adm-head .spacer { flex: 1; }
/* Dodaj firme: sam plus (ikona, bez tekstu) - web i mobile. */
.addbtn {
  flex: none; width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center; cursor: pointer; text-decoration: none;
  background: var(--accent); color: #fff; border: 0;
  box-shadow: 0 1px 2px rgba(16, 40, 28, .16);
  transition: background-color .14s ease, transform .14s ease;
}
.addbtn:hover { background: var(--accent-dark); transform: translateY(-1px); }
.addbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.addbtn svg { width: 18px; height: 18px; }

/* ---------- Baner naglowka: jeden wyglad w calym panelu (jak „Moje Kursy") ----------
   Poziomy gradient marki, dekoracyjne okregi po prawej, liczby i "+" w szklanym
   boksie. Okregi sa TLEM pseudo-elementow (gradienty przyciete do zaokraglen),
   nie obrysem z overflow:hidden - dymki (Kanban Premium) musza wystawac za baner. */
.statbar {
  --ring-x: calc(100% - 110px); --ring-y: 50%;
  position: relative; display: flex; align-items: center; gap: 20px 24px; flex-wrap: wrap;
  margin-bottom: 24px; padding: 28px 32px; border-radius: 16px; color: #fff;
  background: linear-gradient(90deg, var(--accent-night, var(--accent-deep)), var(--accent-deep), var(--accent-night, var(--accent-deep)));
}
.statbar::before, .statbar::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.statbar::before {
  background: repeating-conic-gradient(from 0deg at var(--ring-x) var(--ring-y), rgba(255, 255, 255, .12) 0 1.4deg, transparent 1.4deg 2.8deg);
  -webkit-mask: radial-gradient(circle at var(--ring-x) var(--ring-y), transparent 148.5px, #000 148.5px 150px, transparent 150px);
  mask: radial-gradient(circle at var(--ring-x) var(--ring-y), transparent 148.5px, #000 148.5px 150px, transparent 150px);
}
.statbar::after {
  background: radial-gradient(circle at var(--ring-x) var(--ring-y), transparent 98px, rgba(255, 255, 255, .08) 98px 100px, transparent 100px);
}
.statbar > * { position: relative; z-index: 1; }
.statbar__title { margin: 0; font: 800 2rem/1.15 var(--font-head); letter-spacing: -.01em; color: #fff; }
.statbar__aside {
  display: flex; align-items: center; gap: 24px; margin-left: auto; padding: 14px 20px; border-radius: 12px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); backdrop-filter: blur(10px);
}
.statbar__aside:not(:has(.statbar__stat, .statbar__ring)) { padding: 0; background: none; border: 0; backdrop-filter: none; }
.statbar__ring { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.statbar__ring-t { position: absolute; font: 700 .6rem var(--font-head); color: #fff; font-variant-numeric: tabular-nums; }
.statbar__stat { display: grid; gap: 2px; }
.statbar__stat b { font: 700 1.5rem/1 var(--font-head); font-variant-numeric: tabular-nums; }
.statbar__stat span { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-mid); }
.statbar__add {
  flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: #fff; color: var(--accent-deep); text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.statbar__add:hover { background: var(--highlight); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .22); }
.statbar__add:active { background: var(--highlight-dark); transform: translateY(0); }
.statbar__add:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.statbar__add svg { width: 18px; height: 18px; }
/* Wyszarzony "+" (nie ma czego dodac). Sam przycisk ma pointer-events:none,
   wiec title siedzi na wrapperze - to on lapie hover i pokazuje podpowiedz. */
.statbar__add-wrap { display: inline-grid; flex: none; cursor: help; }
.statbar__add[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.statbar__note { color: var(--muted); font-size: .9rem; margin: -8px 0 16px; }

/* Baner AssetLife: ksztalt statbara, ale bialy z ramka w markowym niebieskim
   AssetLife i pelnym logo (mark + wordmark) zamiast tytulu na zieleni dostawcy. */
.statbar--al { background: #fff; border: 1.5px solid #3151A3; color: inherit; padding: 18px 22px; }
.statbar--al::before, .statbar--al::after { content: none; }
.statbar--al .statbar__logo { display: block; height: 40px; width: auto; max-width: 100%; }

/* Naglowek karty firmy jako zielony baner (wariant .statbar): sama nazwa firmy,
   opcjonalnie plakietka stanu pod spodem. */
.statbar--head { align-items: flex-start; }
.statbar--head .idn { min-width: 0; }
.statbar--head .chips { margin-top: 12px; }

/* Telefon: jak „Moje Kursy" - mniejszy tytul, okregi schodza w prawy dolny rog,
   liczby w pasku pod tytulem, "+" w prawym gornym rogu. */
@media (max-width: 640px) {
  .statbar { --ring-x: calc(100% - 60px); --ring-y: calc(100% - 30px); gap: 12px; padding: 20px; margin-bottom: 20px; }
  .statbar__title { font-size: 1.5rem; }
  .statbar__aside {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px;
    position: static; margin-left: 0; width: 100%; box-sizing: border-box; padding: 14px 10px; text-align: center;
    background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .1); backdrop-filter: none;
  }
  .statbar__aside:not(:has(.statbar__stat, .statbar__ring)) { display: flex; width: auto; }
  .statbar__ring { display: none; }
  .statbar__stat b { font-size: 1.3rem; }
  .statbar__stat span { font-size: .6rem; }
  .statbar:has(.statbar__stat) .statbar__aside > :is(.statbar__add, .statbar__add-wrap) { position: absolute; top: 18px; right: 18px; z-index: 2; }
  .statbar:has(.statbar__stat) .statbar__main { padding-right: 52px; }
}

/* Podtytul w banerze (firma + dostep) znika, gdy baner robi sie ciasny i tekst
   nie miesci sie obok liczb - inaczej zawijalby sie pod pierscien. */
@media (max-width: 1150px) {
  .statbar__meta--hide-narrow { display: none; }
}

/* Historia firmy w panelu klienta (AS-0098): filtry nad tabela dziennika. */
.chist-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin-bottom: 16px; }
.chist-fld { display: grid; gap: 6px; min-width: 0; }
.chist-fld--wide { min-width: min(220px, 100%); }
.chist-lbl { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chist-input {
  height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: var(--text); font: 500 .9rem var(--font-body);
}
.chist-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chist-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.chist-seg__btn { padding: 7px 14px; border-radius: 9px; font-size: .88rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.chist-seg__btn:hover { color: var(--text); background: var(--bg); }
.chist-seg__btn.is-on { background: var(--accent-deep); color: #fff; }
.chist-clear { align-self: flex-end; height: 42px; display: inline-flex; align-items: center; }

.chist-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.chist-when b, .chist-when span { display: block; }
.chist-when span { font-size: .78rem; color: var(--muted); }
.chist-who { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.chist-who b, .chist-who span span { display: block; }
.chist-who span span { font-size: .78rem; color: var(--muted); }
.chist-av {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-size: .72rem; font-weight: 800; background: var(--accent-soft); color: var(--accent-deep);
}
.chist-av--prov { background: #efe9fb; color: #5b3fa8; }
.chist-what { min-width: 220px; }
.chist-what b { font-weight: 700; }
.chist-typecol { width: 1%; white-space: nowrap; }
.chist-kind { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.chist-kind--people { background: #e8eef7; color: #3b5b86; }
.chist-kind--courses { background: var(--warn-soft); color: var(--warn); }
.chist-detail { display: block; margin-top: 3px; font-size: .78rem; color: var(--muted); }
.chist-subj { font-weight: 700; white-space: nowrap; }
.chist-subj.is-gone { font-weight: 500; font-style: italic; color: var(--muted); }
.chist-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.chist-foot .pager { margin: 0; }
.chist-ro { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.chist-ro svg { width: 13px; height: 13px; }

/* Modal „Dodaj dział do kursu": select puli + callout z arytmetyką slotów. */
.modal__body .sel {
  width: 100%; height: 44px; padding: 0 12px; margin: 0;
  border: 1px solid var(--border-strong, #cbd3dd); border-radius: 11px;
  font: 500 .92rem var(--font-body); background: var(--surface); color: var(--text);
}
.modal__body .sel:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.slotbox { border-radius: 12px; padding: 12px 14px; margin: 4px 0 16px; font-size: .88rem; line-height: 1.5; }
.slotbox--ok  { background: var(--ok-soft); border: 1px solid var(--accent-mid); color: var(--accent-deep); }
.slotbox--bad { background: var(--warn-soft); border: 1px solid #e8d089; color: var(--warn); }
.slotbox:empty { display: none; }

/* Kolumna akcji w tabeli Działów. */
table.tbl th.act, table.tbl td.act { width: 48px; text-align: right; white-space: nowrap; }

/* Nawias „(n)" przy zajętych slotach = ile z nich trzymają zarchiwizowani.
   Opacity (nie kolor), żeby czytał się i na zielonym banerze, i na białym tle. */
.slot-arch { font-size: .82em; font-weight: 600; opacity: .7; margin-left: 1px; }

/* ---------- siatka kafli ---------- */
.tiles { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.tiles + .box, .tiles + .alert, .box + .tiles { margin-top: 16px; }
.tile {
  grid-column: span 3; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px; text-align: left;
  cursor: pointer; font: inherit; color: inherit;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.tile:hover { border-color: var(--accent-mid); box-shadow: var(--shadow); transform: translateY(-1px); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile.w4 { grid-column: span 4; }
.tile.w6 { grid-column: span 6; }
.tile.w8 { grid-column: span 8; }
.tile.w12 { grid-column: span 12; }
@media (max-width: 1200px) { .tile { grid-column: span 6; } }
@media (max-width: 1200px) { .tile.w4, .tile.w8 { grid-column: span 6; } }
@media (max-width: 700px) { .tile, .tile.w4, .tile.w6, .tile.w8 { grid-column: span 12; } }

.tile .cap {
  font: 700 .7rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
/* Liczba i jej jednostka to jeden napis: wspólna linia bazowa i stały stosunek
   rozmiarów. Wcześniej jednostka miała .9rem przy liczbie 2rem, czyli ponad dwa
   razy mniej — wyglądało to jak literówka w rozmiarze czcionki. */
.tile .big {
  font: 900 2rem/1 var(--font-head); letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.tile .big small {
  font: 700 1.05rem/1 var(--font-head); color: var(--muted); letter-spacing: 0;
}
.tile .foot { font-size: .82rem; color: var(--muted); margin-top: 8px; }
.tile .arrow { margin-left: auto; color: var(--muted); }
.tile:hover .arrow { color: var(--accent); }

/* rozbicie liczb w kaflu */
.split { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.split div { min-width: 62px; }
.split b { display: block; font: 700 1.15rem/1 var(--font-head); }
.split span { font-size: .76rem; color: var(--muted); }

/* ---------- paski realizacji (jeden odcień, procent zawsze podpisany) ---------- */
.bars { margin-top: 4px; }
.bar-row { display: grid; grid-template-columns: 1fr 46px; gap: 10px; align-items: center; padding: 7px 0; }
.bar-row .nm { font-size: .88rem; }
.bar-row .track { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; margin-top: 5px; }
.bar-row .fill { height: 100%; border-radius: 4px; background: var(--accent); }
.bar-row .pc { text-align: right; font: 700 .88rem/1 var(--font-head); }
.bar-row.low .fill { background: var(--accent-mid); }
.bar-row.low .pc { color: var(--bad); }

/* ---------- statusy: kolor NIGDY sam, zawsze z podpisem ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 600 .74rem/1 var(--font-body); padding: 5px 9px; border-radius: 999px;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
/* Numer wersji kursu — etykieta WEWNĘTRZNA, klient jej nie widzi. Dlatego
   neutralna, bez koloru stanu: nie mówi „dobrze" ani „uwaga", tylko „która to". */
.chip-ver { background: #eef1f5; color: #4b5b6e; letter-spacing: .01em; }
/* Statusy wersji kursu: aktywna (chip-ok) i szkic (chip-warn) mają już swoje
   kolory, dochodzą dwa stany bez oceny — „w użyciu" i „archiwalna". */
.chip-info { background: #e8eef7; color: #3b5b86; }
.chip-off { background: #f0f1f2; color: #6b7280; }

/* Historia wersji kursu na liście i na karcie. */
.vlist { margin: 6px 0 0; padding: 0; list-style: none; font-size: .85rem; }
.vlist li { padding: 5px 0; border-top: 1px solid var(--border); color: var(--muted); }
.vlist li:first-child { border-top: 0; }
.vlist li b { color: var(--text); font-weight: 600; }
.chip-bad { background: var(--bad-soft); color: var(--bad); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-ok { background: var(--ok-soft); color: var(--ok); }

/* ---------- listy w kaflach ---------- */
.mini { margin: 6px 0 0; padding: 0; list-style: none; }
.mini li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: .88rem; }
.mini li:first-child { border-top: 0; }
.mini li .t { min-width: 0; }
.mini li .t b { font-weight: 600; display: block; }
.mini li .t span { color: var(--muted); font-size: .8rem; }
.mini li .r { margin-left: auto; text-align: right; white-space: nowrap; }

/* ---------- wykres przychodu: jedna seria, jeden odcień ---------- */
.chart { margin-top: 10px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .gl { stroke: var(--border); stroke-width: 1; }
.chart .bx { fill: var(--accent); }
.chart .bx:hover { fill: var(--accent-dark); }
.chart .lbl { font: 500 10px var(--font-body); fill: var(--muted); }
.chart .val { font: 700 11px var(--font-head); fill: var(--text); }
.chart-tip {
  position: fixed; z-index: 60; pointer-events: none; display: none;
  background: var(--accent-night); color: #fff; border-radius: 6px;
  padding: 7px 10px; font: 500 .8rem var(--font-body); box-shadow: var(--shadow);
  white-space: nowrap;
}

/* ---------- baner przerwy technicznej (AS-0034) ---------- */
.mbar {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px; padding: 11px 16px; border-radius: var(--radius);
  background: var(--warn-soft); border: 1px solid var(--highlight);
  color: var(--warn); font-size: .92rem; line-height: 1.4;
}
.mbar b { color: var(--heading); }
.mbar__ico {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--highlight); color: var(--heading); font-weight: 800;
}
.mbar__text { flex: 1; min-width: 0; }
.mbar__x { flex-shrink: 0; border: 0; background: none; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 2px 6px; }
.mbar--live { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.mbar--live .mbar__ico { background: var(--bad); color: #fff; }

/* ---------- plakietka makiety ---------- */
.adm-flag {
  position: fixed; z-index: 70; right: 16px; bottom: 16px;
  background: var(--highlight); color: #1c211e;
  font: 700 .7rem/1 var(--font-head); letter-spacing: .09em; text-transform: uppercase;
  padding: 9px 13px; border-radius: 999px; box-shadow: var(--shadow);
}
/* ⚠ MAKIETOWY `.toast` USUNIETY. Byl to dolny, srodkowy dymek z `.on`, ktorego
   ta aplikacja nigdy nie uzywa - komunikaty leca przez shared/_flash.html.erb
   (klasy `.toast--ok/warn/info`). Zostawiony, nadpisywal nasz toast: `opacity: 0`
   i `position: fixed; bottom` wygrywaly dla wlasciwosci, ktorych nasza regula nie
   deklaruje - efekt: komunikat byl niewidoczny. */


/* ---------- pusty obszar treści ---------- */
.empty {
  background: #fff; border: 1px dashed var(--border-strong, #cbd3dd);
  border-radius: 10px; padding: 54px 30px; text-align: center;
}
.empty .t { font: 700 1.05rem/1.3 var(--font-head); margin: 0 0 8px; }
.empty .d { color: var(--muted); font-size: .9rem; max-width: 46ch; margin: 0 auto; }

/* ---------- tabela listy ---------- */
.tbl-wrap { background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.tbl-scroll { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.tbl th, table.tbl td { padding: 12px 14px; text-align: left; vertical-align: top; }
table.tbl thead th {
  font: 700 .7rem/1.2 var(--font-head); letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.tbl tbody tr + tr td { border-top: 1px solid var(--border); }
table.tbl tbody tr:hover { background: var(--accent-soft); }
table.tbl td.num, table.tbl th.num { text-align: right; white-space: nowrap; }
.cell-main b { font-weight: 600; display: block; }
.cell-main span { color: var(--muted); font-size: .8rem; }

/* Kompaktowy znacznik typu pliku w tabeli (duzy `.filerow .fi` to inna, ikonowa forma). */
.filetag {
  display: inline-block; margin-right: 8px; padding: 2px 6px; border-radius: 5px;
  font: 700 .6rem/1.2 var(--font-head); letter-spacing: .04em; vertical-align: 1px;
  background: var(--bad-soft); color: var(--bad);
}
.filetag--img { background: var(--warn-soft); color: var(--warn); }

/* Wiersz osoby z kolorowym inicjal-awatarem (kolor per osoba - AvatarHelper). */
.personcell { display: flex; align-items: center; gap: 12px; }
.personcell__av {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font: 700 .8rem/1 var(--font-head);
}
.personcell__txt { min-width: 0; }
.mini-bar { width: 84px; height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; margin-top: 5px; }
.mini-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.mini-bar.low i { background: var(--accent-mid); }
.seats { font-variant-numeric: tabular-nums; }
.seats b { font-weight: 700; }
.seats span { color: var(--muted); }
.tbl-foot {
  display: flex; gap: 18px; flex-wrap: wrap; padding: 13px 14px;
  border-top: 1px solid var(--border); background: var(--bg); font-size: .84rem; color: var(--muted);
}
.tbl-foot b { color: var(--text); font-weight: 700; }
/* Podsumowanie pod lista firm plynie jak zwykly tekst (separatory `·` w tresci),
   nie jako rozstrzelony flex - inaczej pozycje rozjezdzaly sie na cala szerokosc. */
.tbl-foot--summary { display: block; gap: 0; line-height: 1.85; }
/* Wariant „na dole strony": wolny wiersz, nie pasek przyklejony do listy -
   bez ramki i tla, z odstepem od tego, co nad nim. */
.tbl-foot--page { border-top: 0; background: transparent; padding: 0; margin-top: 22px; }
@media (max-width: 640px) {
  .tbl-foot--summary { font-size: .8rem; line-height: 1.75; padding: 12px 14px; }
  .tbl-foot--page { padding: 0; }
}
.note-cell { max-width: 240px; color: var(--muted); font-size: .82rem; }


/* ---------- wiersz rozwijany ---------- */
th.chev, td.chev { width: 44px; padding-right: 0; }
.chev-btn {
  background: none; border: 0; cursor: pointer; padding: 4px; line-height: 0;
  color: var(--muted); border-radius: 5px;
}
.chev-btn:hover { background: var(--accent-soft); color: var(--accent); }
.chev-btn svg { transition: transform .18s ease; }
tr.is-open .chev-btn { color: var(--accent); }
tr.is-open .chev-btn svg { transform: rotate(90deg); }

table.tbl tr.row-main { cursor: pointer; }
table.tbl tr.row-main.is-open td { background: var(--accent-soft); }

/* Wiersz-link: caly wiersz wchodzi w rekord (rowlink), bez rozwijania. Tytul
   zostaje zwyklym tekstem - klikalnosc niesie wiersz, nie kolor linku. */
table.tbl tr.row-link:hover td { background: var(--accent-soft); }
.row-link__title { color: var(--text); text-decoration: none; }
.row-link__title:hover { color: var(--accent-deep); }
table.tbl tr.row-detail > td { padding: 0; border-top: 0; background: var(--surface-2, #fbfcfd); }
table.tbl tr.row-detail:hover > td { background: var(--surface-2, #fbfcfd); }
/* Rozwijany wiersz rozciąga się i zwija, a nie skacze. Wysokości treści nie znamy
   z góry, więc animujemy `grid-template-rows` 0fr->1fr - ten sam idiom co `.rowopen`
   i `.fold__body`, tyle że TRANSITION (reaguje też na zwijanie), bo klasę `is-open`
   zdejmujemy w tym samym elemencie. Padding i kreska siedzą na wewnętrznym
   `.detail-inner`, bo to ONO ma przycinać: na zewnętrznym pudle zostawałyby przy
   0fr jako pasek. */
.detail-box { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.detail-box > .detail-inner {
  overflow: hidden; min-height: 0;
  padding: 0 20px 0 64px; border-top: 0 solid var(--border);
  transition: padding .28s ease, border-width .28s ease;
}
/* ⚠ Zwinięty wiersz zeruje TEŻ pionowy padding i kreskę na `.detail-inner`.
   Sam `grid-template-rows: 0fr` nie starcza: w gridzie o wysokości auto ścieżka
   `0fr` schodzi tylko do minimum treści, a padding+border pudełka to minimum
   podbijały (~39px paska pod każdym wierszem). Dlatego pionowe odstępy żyją w
   stanie `is-open` i jadą tą samą animacją. */
tr.row-detail.is-open .detail-box { grid-template-rows: 1fr; }
tr.row-detail.is-open .detail-box > .detail-inner { padding: 18px 20px 20px 64px; border-top-width: 1px; }
@media (prefers-reduced-motion: reduce) { .detail-box, .detail-box > .detail-inner { transition: none; } }

/* Rozwiniecie kursow w tabeli pracownikow (.people) - ta sama mechanika
   .detail-box co w .tbl. Zwiniety wiersz ma zerowy padding i bez kreski, zeby
   nie zostawiac pustego paska; aktywny wiersz podswietlony jak reszta panelu. */
.people tr.row-detail > td { padding: 0; border-top: 0; background: none; }
.people tr.row-main.is-open > td { background: var(--accent-soft); }
.cmanage .assign__name { font-weight: 600; }

/* ---------- skóra „Zebra + karta" — wspólny system list ----------
   Modyfikator .tbl--card na .tbl-wrap: zielony nagłówek, naprzemienne wiersze
   (klasę .row-alt dokłada partial wiersza per index.odd?), rozwinięcie jako
   zagnieżdżona karta z paskiem marki (.finfo-card). Ta sama skóra na Firmach,
   Kursach, Lekcjach, Zespole itd. Tabele bez tej klasy zostają na bazowym .tbl. */
.tbl--card { border-radius: 12px; box-shadow: var(--shadow); }
.tbl--card table.tbl thead th {
  background: var(--accent-soft); color: var(--accent-deep);
  border-bottom: 1px solid var(--accent-mid);
}
.tbl--card table.tbl thead th .sortbtn { color: var(--accent-deep); }
.tbl--card table.tbl thead th .sortbtn:hover,
.tbl--card table.tbl thead th .sortbtn[data-active="true"] { color: var(--accent-dark); }

/* Wartości stoją równo GÓRĄ - inaczej „—" w Slotach (jedna linia) wisi niżej niż
   „—" w Realizacji (dwie linie: kreska + „czeka na pakiet"). */
.tbl--card table.tbl tr.row-main td { vertical-align: top; }

/* Zebra liczona po FIRMIE (dwa <tr> na firmę) - klasę .row-alt dokłada _row. */
.tbl--card table.tbl tr.row-main.row-alt td { background: var(--surface-2, #fbfcfd); }
.tbl--card table.tbl tr.row-main:hover td,
.tbl--card table.tbl tr.row-main.is-open td { background: var(--accent-soft); }

/* Rozwinięcie: zagnieżdżona karta z zielonym paskiem na lekko szarym tle, żeby
   biała karteczka „wyskakiwała" z wiersza. */
.tbl--card table.tbl tr.row-detail > td,
.tbl--card table.tbl tr.row-detail:hover > td { background: var(--surface-2, #fbfcfd); }
.tbl--card tr.row-detail .detail-box > .detail-inner { padding: 0 16px 0 16px; border-top: 0; }
.tbl--card tr.row-detail.is-open .detail-box > .detail-inner { padding: 4px 16px 18px 16px; border-top-width: 0; }
.tbl--card .finfo-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 12px; padding: 4px 20px 18px;
}
.tbl--card .finfo-card .finfo { border-top: 0; }
/* Wartość układa się pionowo: nazwa grubo, reszta pod spodem, cicho - zamiast
   ciągu „nazwa · e-mail · telefon" sklejonego kropkami w jedną linię. */
.tbl--card .finfo .v { display: flex; flex-direction: column; gap: 3px; }
.tbl--card .finfo .v b { font-weight: 700; }
/* Tylko bezpośrednie podlinie stają w kolumnie - numer wersji „v1" przy tytule
   kursu (zagnieżdżony .sub2 w <li>) ma zostać w linii. */
.tbl--card .finfo .v > .sub2 { display: block; margin: 0; color: var(--muted); font-size: .84rem; }
.tbl--card .btn-open { align-self: flex-end; margin-top: 14px; }
.tbl--card .tbl-foot { background: var(--surface); }
.tbl--card td.cell-dni, .tbl--card th.dni { white-space: nowrap; }

/* Cichy przycisk „Otwórz" - prostokątny, obrysowany, strzałka odjeżdża w prawo.
   Bez krzykliwej zielonej pigułki ze cieniem, która gubiła się w karcie. */
.btn-open {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--surface); color: var(--accent-deep);
  border: 1px solid var(--border-strong, #cbd3dd); border-radius: 9px;
  padding: 9px 15px; font: 600 .86rem/1 var(--font-body); cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.btn-open:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.btn-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-open svg { flex: none; color: var(--accent); transition: transform .16s ease; }
.btn-open:hover svg { transform: translateX(3px); }
/* Wariant do wiersza tabeli: mniejszy, do prawej. Akcja stoi w glownym wierszu. */
.btn-open--sm { padding: 6px 12px; font-size: .82rem; }
.cell-open { text-align: right; white-space: nowrap; width: 1%; }
table.tbl td.cell-open { vertical-align: middle; }

.dgrid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 22px;
}
@media (max-width: 1100px) { .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dgrid { grid-template-columns: 1fr; } }
.dgrid .f { min-width: 0; }
.dgrid .f .k {
  font: 700 .66rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 5px;
}
.dgrid .f .v { font-size: .9rem; }
.dgrid .f .v b { font-weight: 600; }
.dgrid .f.wide { grid-column: span 2; }
@media (max-width: 640px) { .dgrid .f.wide { grid-column: span 1; } }
.dsep { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }

/* ---------- rozwinięty wiersz kursu ----------
   Program jest najdłuższy, więc dostaje szeroką kolumnę, a liczby stoją obok
   w jednej kolumnie jeden pod drugim. Poprzedni układ (siatka 4×) zostawiał
   dziurę po prawej i ściskał listę lekcji do jednej trzeciej szerokości. */
.kdet { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px 30px; }
@media (max-width: 900px) { .kdet { grid-template-columns: 1fr; } }

.kdet .k {
  font: 700 .66rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 8px;
}

/* Program: numeracja własna, żeby numer i tytuł trzymały jedną linię bazową. */
.kdet__plan { list-style: none; margin: 0; padding: 0; counter-reset: lsn; }
.kdet__plan li {
  counter-increment: lsn; display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: .9rem;
}
.kdet__plan li:last-child { border-bottom: 0; }
.kdet__plan li::before {
  content: counter(lsn) "."; flex: none; width: 20px; text-align: right;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.kdet__plan .t { flex: 1; min-width: 0; }
.kdet__plan .m { flex: none; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* Liczby: kafel z trzema wierszami, każdy z podpisem pod wartością. */
.kdet__facts {
  background: var(--bg, #f6f8f7); border: 1px solid var(--border);
  border-radius: 10px; padding: 4px 14px;
}
.kdet__facts div { padding: 11px 0; border-bottom: 1px solid var(--border); }
.kdet__facts div:last-child { border-bottom: 0; }
.kdet__facts b { display: block; font: 600 1.02rem/1.25 var(--font-body); }
.kdet__facts .sub2 { display: block; color: var(--muted); font-size: .78rem; margin-top: 3px; }
.kdet__warn { grid-column: 1 / -1; }

/* ---------- lista informacji: etykieta obok wartości ----------
   Wiersz po wierszu, na pełną szerokość. Etykiety stoją w jednej kolumnie,
   więc oko schodzi w dół zamiast skakać po siatce. */
.finfo { border-top: 1px solid var(--border); }
.finfo > div {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 4px 24px;
  padding: 11px 2px; border-bottom: 1px solid var(--border); align-items: baseline;
}
@media (max-width: 700px) { .finfo > div { grid-template-columns: 1fr; gap: 4px; } }
.finfo .k {
  font: 700 .66rem/1.5 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.finfo .v { font-size: .9rem; min-width: 0; }
.finfo .v b { font-weight: 600; }
.finfo .v .sep { color: var(--border-strong, #cbd3dd); margin: 0 7px; }
/* Globalne .sub2 jest blokowe — w tej liście wszystko ma zostać w jednej
   linii, inaczej separator zawisa na końcu wiersza. */
.finfo .v .sub2 {
  display: inline; margin-top: 0; color: var(--muted); font-size: inherit;
}
/* Ostatni wiersz nie potrzebuje kreski — pod listą stoi już separator. */
.finfo > div:last-child { border-bottom: 0; }


/* ---------- przycisk „prowadzi dalej" ----------
   Jeden wzorzec na całą makietę: pigułka w kolorze marki ze strzałką, która
   przy najechaniu odjeżdża w prawo. Kształt wzięty z przycisku CTA w nagłówku
   cyberhabit.pl (border-radius 999px), żeby panel i strona mówiły tym samym
   językiem. Zwykłe .btn zostaje do akcji, które NIE zmieniają ekranu. */
.btn-go {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent); color: #fff; border: 0; border-radius: 999px;
  padding: 10px 20px; font: 600 .88rem/1 var(--font-body); cursor: pointer;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 166, 91, .26);
  transition: background-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.btn-go:hover {
  background: var(--accent-dark); color: #fff;
  box-shadow: 0 4px 16px rgba(0, 125, 68, .32); transform: translateY(-1px);
}
.btn-go:active { transform: translateY(0); }
.btn-go:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.btn-go svg { flex: none; transition: transform .16s ease; }
.btn-go:hover svg { transform: translateX(3px); }

/* Wariant drugorzędny — ta sama pigułka, ale bez wypełnienia. */
.btn-go--soft {
  background: #fff; color: var(--accent-dark);
  border: 1px solid var(--accent-mid); box-shadow: none;
}
.btn-go--soft:hover {
  background: var(--accent-soft); color: var(--accent-dark);
  border-color: var(--accent); box-shadow: none;
}
.finfo .v ol { list-style: none; margin: 0; padding: 0; counter-reset: fl; }
.finfo .v ol li { counter-increment: fl; padding: 1px 0; }
.finfo .v ol li::before { content: counter(fl) ". "; color: var(--muted); }




/* ---------- kolumna realizacji w wierszu głównym ---------- */
td.cell-pct { width: 170px; }
td.cell-pct b { font: 700 .95rem/1 var(--font-head); }
td.cell-pct .mini-bar { width: 100%; max-width: 140px; height: 7px; margin-top: 6px; }
td.cell-pct .sub3 { display: block; color: var(--muted); font-size: .76rem; margin-top: 5px; }
@media (max-width: 640px) { td.cell-pct { width: auto; } }

/* ---------- karta firmy ---------- */
/* Breadcrumb tak jak na platformie AssetLife (application.css `.crumb`): tekst
   półgruby, linki bez podkreślenia (podkreślenie dopiero na hover), separator „•"
   cichy i lekki, wstawiany helperem `crumbs`. Kolory nasze - marka zielona,
   układ i wagi te same co u AssetLife. */
.crumb { margin: 0 0 10px; font-size: .86rem; font-weight: 600; color: var(--text); }
.crumb a { color: var(--accent-dark); text-decoration: none; }
.crumb a:hover { color: var(--accent-deep); text-decoration: underline; }
.crumb__sep { margin: 0 .45rem; color: var(--border-strong, #cbd3dd); font-weight: 700; }

.card-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.card-head h1 { margin: 0 0 6px; font-size: 1.55rem; }
.card-head .meta { color: var(--muted); font-size: .88rem; }
.card-head .chips { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.card-head .acts { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }

.cols { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 1080px) { .cols { grid-template-columns: 1fr; } }

/* Dopisek pod wartością jest ZAWSZE osobną linią — jedna reguła na cały panel,
   bo rozsypana po kontekstach zawsze gdzieś się gubi i tekst skleja się z kwotą. */
.sub2 {
  display: block; margin-top: 3px; color: var(--muted);
  font-size: .78rem; font-weight: 400; letter-spacing: 0; text-transform: none;
}

/* Jednostka STOI PRZY LICZBIE: "1 lekcja", a nie liczba i slowo w drugiej
   linii, bez zwiazku z naglowkiem kolumny. `.sub2` jest z definicji osobna
   linia, wiec jednostka ma wlasna klase. */
.unit { color: var(--muted); font-size: .82rem; font-weight: 400; margin-left: 5px; }

/* Kolumny liczbowe zwezone do tresci, a zapas szerokosci idzie w NAZWE.
   Rozciagniete na rowne czesci stawialy liczbe w polowie tabeli - daleko
   i od naglowka, i od kolumny obok; zapas w ostatniej kolumnie zostawial
   plakietke stanu samotnie przy liczbach, z pustka po prawej. */
.tbl--tight td.num, .tbl--tight th.num { width: 1%; }
.tbl--tight td.cell-main, .tbl--tight thead th:nth-of-type(2) { width: 100%; }

/* ⚠ `width: 100%` na nazwie sciska pozostale kolumny do min-content, a `width`
   w ukladzie auto jest tylko sugestia - strzalka rozwijania zostawala z 8 px
   miejsca i svg gaslo do zera. Minimum jest twarde. */
.tbl--tight th.chev, .tbl--tight td.chev { min-width: 44px; }

.box { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.box + .box { margin-top: 16px; }
/* Strefa usuwania: subtelnie czerwonawa ramka, zeby akcja odcinala sie od reszty. */
.box--danger { border-color: color-mix(in srgb, var(--bad) 35%, var(--border)); }
/* ...i wyrazny odstep od karty nad nia. Nie przez `.box + .box--danger`, bo miedzy
   kartami siedzi w DOM element modala i sasiedztwo nie lapie - margines wprost. */
.box--danger { margin-top: 32px; }
.box--danger .boxtitle { color: var(--bad); }
.box > h2 {
  font: 700 .72rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-deep); margin: 0 0 14px;
}
.box .rows { display: grid; gap: 0; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 9px 0; font-size: .9rem; }
.kv + .kv { border-top: 1px solid var(--border); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv dd b { font-weight: 600; }
@media (max-width: 520px) { .kv { grid-template-columns: 1fr; gap: 2px; } }

.stat4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px) { .stat5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .stat4, .stat5 { grid-template-columns: repeat(2, 1fr); } }
.stat4 .s, .stat5 .s, .lic-nums .s { background: var(--bg); border-radius: 8px; padding: 12px 14px; }
.stat4 .s b, .stat5 .s b, .lic-nums .s b { display: block; font: 900 1.5rem/1 var(--font-head); letter-spacing: -.02em; }
.stat4 .s span, .stat5 .s span, .lic-nums .s span { font-size: .78rem; color: var(--muted); }

.people { width: 100%; border-collapse: collapse; font-size: .88rem; }
.people th {
  font: 700 .68rem/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.people td { padding: 9px 10px; }
.people tbody tr + tr td { border-top: 1px solid var(--border); }
.people tbody tr:hover { background: var(--accent-soft); }
.people td.num, .people th.num { text-align: right; }
.people .nm b { font-weight: 600; display: block; }
.people .nm span { color: var(--muted); font-size: .78rem; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filters button, .filters a {
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 13px; font: 600 .8rem var(--font-body); color: var(--muted); cursor: pointer;
  text-decoration: none;
}
.filters button:hover, .filters a:hover { border-color: var(--accent); color: var(--accent); }
.filters button[aria-pressed="true"], .filters a[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.card-head [data-section="archive"] { margin-left: auto; }
.hintbox {
  border-left: 3px solid var(--highlight); background: #fffdf4;
  padding: 12px 15px; border-radius: 0 8px 8px 0; font-size: .86rem; margin-top: 4px;
}
.hintbox b { font-family: var(--font-head); }
.hintbox + .hintbox { margin-top: 10px; }

/* ---------- sortowanie w nagłówku ---------- */
.sortbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  display: inline-flex; align-items: center; gap: 5px;
}
.sortbtn::after {
  content: "↕"; font-size: .82em; opacity: .35; font-weight: 400;
}
.sortbtn:hover { color: var(--accent); }
.sortbtn[data-active="true"] { color: var(--accent); }
.sortbtn[data-dir="asc"]::after { content: "↑"; opacity: 1; }
.sortbtn[data-dir="desc"]::after { content: "↓"; opacity: 1; }

td.cell-date { white-space: nowrap; }
td.cell-date b { font-weight: 600; }
td.cell-date .sub3 { display: block; color: var(--muted); font-size: .76rem; margin-top: 4px; }

/* ---------- grupa filtrów: ramka z batonami (chip + popover) ---------- */
/* `hidden` musi wygrywać z display na .btn — inaczej ukryty przycisk dalej wisi
   na ekranie (tak wychodziło „Wyczyść" przy zerowej liczbie filtrów). */
[hidden] { display: none !important; }

.filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
/* Wewnątrz paska akcji filtr nie ma własnego marginesu — to on przesuwał przycisk
   „Filtry" w górę względem sąsiadów w tym samym rzędzie. */
.acts > .filterbar, .filterbar-row > .filterbar { margin-bottom: 0; }
.acts, .filterbar-row { align-items: center; }
.acts > *, .filterbar-row > * { align-self: center; }
/* Ramka grupy filtrów: obrys z wpiętą etykietą „Filtry" (jak <fieldset>).
   `--ffield-bg` musi być tłem PODŁOŻA, na którym stoi ramka — inaczej etykieta
   nie przecięłaby obrysu. Strony listowe stoją na --bg, karty firmy na --surface. */
.ffield {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  border: 1.5px solid var(--border-strong, #cbd3dd); border-radius: 14px;
  padding: 16px 14px 14px; --ffield-bg: var(--bg);
}
.worker-bar .ffield, .toolbar .ffield { --ffield-bg: var(--surface); }
.ffield-legend {
  position: absolute; top: -9px; left: 16px; padding: 0 9px; background: var(--ffield-bg);
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 .68rem/1 var(--font-head); letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.ffield-legend svg { color: var(--accent); }
.ffield-legend .n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; letter-spacing: 0;
  background: var(--accent); color: #fff; text-align: center;
  font: 700 .66rem/18px var(--font-head); font-variant-numeric: tabular-nums;
}
.ffield-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Szukanie NA GORZE ramki: osobny rzad na cala szerokosc (pole + "Szukaj"),
   filtry ida pod spodem. */
.fsearchrow { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
.fsearch {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 13px; background: var(--surface);
  border: 1px solid var(--border-strong, #cbd3dd); border-radius: 11px; color: var(--muted);
  /* ⚠ .fsearch to <label> - globalny `label { margin-bottom:5px }` wypychal go
     w gorę wzgledem przycisku w rzedzie z align-items:center. Zerujemy. */
  margin: 0;
}
.fsearch svg { flex: none; }
.fsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* ⚠ Mocny reset: `input[type=search]` (0,1,1) bije pojedyncza klase, wiec
   zdejmujemy jego ramke/tlo/padding dwuczlonowym selektorem. */
.fsearch .fsearch__input {
  appearance: none; -webkit-appearance: none;
  flex: 1; width: 100%; min-width: 0; min-height: 0; height: auto;
  margin: 0; padding: 0; border: 0; border-radius: 0; outline: none;
  background: transparent; box-shadow: none;
  /* ⚠ line-height jawnie: skrot `font` zeruje ja do `normal`, a wtedy font
     obcinal ogonki (g, j, p, y, ą, ę) - <input> przycina swoja tresc. */
  font: 500 .92rem/1.5 var(--font-body); color: var(--text);
}
.fsearch .fsearch__input::placeholder { color: var(--muted); }
.fsearch__btn {
  flex: none; height: 44px; padding: 0 18px; border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%); color: #fff;
  font: 700 .88rem var(--font-head);
}
.fsearch__btn:hover { background: linear-gradient(180deg, var(--accent-dark) 0%, var(--accent-deep) 100%); }

/* Baton wymiaru: stała szerokość, żeby „Stan" nie zwijał się do ogryzka. */
.attr { position: relative; }
.attr-btn {
  display: inline-flex; align-items: center; gap: 10px; min-width: 236px;
  padding: 11px 13px 11px 14px; border-radius: 11px; cursor: pointer; text-align: left;
  background: #fff; border: 1px solid var(--border-strong, #cbd3dd); color: var(--text);
  font: 600 .9rem/1 var(--font-body);
}
.attr-btn:hover { border-color: var(--accent); }
.attr-btn .ic { display: grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--muted); }
.attr-btn .ic svg { width: 16px; height: 16px; }
.attr-btn.has .ic { color: var(--accent); }
.attr-btn .k {
  flex: 1; min-width: 0; color: var(--muted); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* ⚠ line-height 1 from .attr-btn + overflow:hidden clipped descenders (y, j, g).
     Taller line box, negative margin keeps the button height unchanged. */
  line-height: 1.4; margin-block: -.2em;
}
.attr-btn.has .k { color: var(--text); }
.attr-btn .k .val { color: var(--accent-dark); font-weight: 700; }
.attr-btn .k .badge {
  display: inline-block; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 2px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark);
  font: 700 .68rem/17px var(--font-head); text-align: center; vertical-align: 1px;
}
.attr-btn .car { flex: none; color: var(--muted); transition: transform .18s ease; }
.attr.open .attr-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.attr.open .car { transform: rotate(180deg); }

/* Popover batonu nie wyskakuje - wchodzi miękko (fade + zjazd o 6px). Jest
   `position:absolute`, więc ukryty przez `visibility` nie zajmuje miejsca i nie
   łapie kliknięć; `visibility 0s .16s` gasi go dopiero PO zjeździe. */
.pop {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 25;
  min-width: 260px; width: max-content; max-width: min(320px, 88vw); background: #fff;
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  padding: 6px; max-height: 70vh; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s .16s;
}
.attr.open .pop {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .16s ease, transform .16s ease;
}
@media (prefers-reduced-motion: reduce) { .pop, .attr.open .pop { transition: none; } }
/* AS-0201: the option list scrolls on its own, so a long one (labels) never
   runs down the page; the filter field stays on top while it scrolls. */
.pop__list { max-height: min(320px, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.pop--search { overflow: visible; }
.pop__q {
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 6px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; font-size: .88rem;
}
.pop__q:focus { outline: none; border-color: var(--accent); }
.pop__list .fopt[hidden] { display: none; }
.pop__empty { margin: 0; padding: 10px 12px; color: var(--muted); font-size: .84rem; }
.fopt {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 11px; align-items: center;
  padding: 9px 12px; border-radius: 7px; cursor: pointer;
}
.fopt:hover { background: var(--accent-soft); }
.fopt input { margin: 0; }
.fopt .l b { display: block; font: 600 .88rem/1.25 var(--font-body); }
.fopt .l span { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.fopt .c {
  font: 700 .78rem/1 var(--font-head); color: var(--muted); font-variant-numeric: tabular-nums;
}
.fopt.is-empty { opacity: .45; }
.fopt:has(input:checked) { background: var(--accent-soft); }
.fopt:has(input:checked) .c { color: var(--accent-deep); }

/* Wlasny checkbox filtra - kwadrat z ptaszkiem, zielony po zaznaczeniu. */
.fopt input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: 0; cursor: pointer; position: relative;
  border: 1.5px solid var(--border-strong, #cbd3dd); border-radius: 5px; background: #fff;
}
.fopt input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.fopt input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Stopka popowera: "Zastosuj" rusza filtr (submit całego formularza). */
.popfoot {
  padding: 10px 6px 6px; margin-top: 4px; border-top: 1px solid var(--border);
}
.popfoot .btn { width: 100%; justify-content: center; }
/* „Wyczyść filtry" — zdejmuje wszystkie wymiary naraz, obok batonów w ramce. */
.flink-clear { font-size: .84rem; color: var(--muted); white-space: nowrap; padding: 0 6px; }
.flink-clear:hover { color: var(--accent-dark); }

.fsummary { color: var(--muted); font-size: .84rem; }
.flink {
  background: none; border: 0; padding: 0; cursor: pointer; display: none;
  font: 600 .84rem var(--font-body); color: var(--accent); text-decoration: underline;
}
.flink:hover { color: var(--accent-dark); }

.empty-row {
  padding: 40px 20px; text-align: center; display: grid; gap: 8px; justify-items: center;
}
.empty-row b { font: 700 1rem var(--font-head); }
.empty-row span { color: var(--muted); font-size: .88rem; max-width: 46ch; }
.empty-row .btn { margin-top: 6px; }
.empty-row--slim { padding: 22px 20px; }

/* ---------- Sklep: tablica produktow ----------
   Dwie kolumny obok siebie (Opublikowane / Robocze), karty przeciaga
   board_controller (wspolny z tablica zadan w /admin - tamta skora ma swoj
   .board w application.css, panel laduje shared.css, wiec baza jest tu).
   Na waskim ekranie kolumny ida jedna pod druga.

   Pierwsza karta kolumny „Opublikowane" jest WYROZNIONA: wieksza, w zoltej
   ramce (--highlight), z plakietka. Wyroznienie liczy sie z POZYCJI w DOM
   (`:first-of-type`), nie z klasy - po przeciagnieciu na gore karta dostaje je
   od razu, bez przeladowania. Plakietka siedzi w kazdej karcie i tylko tu
   wychodzi z ukrycia. */
.store-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 960px) { .store-board { grid-template-columns: 1fr; } }

.board__col {
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; display: grid; gap: 10px; align-content: start; min-height: 220px;
  transition: border-color .12s, background-color .12s;
}
.board__col--over { border-color: var(--accent); background: var(--accent-soft); }
.board__head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; }
.board__title { margin: 0; font: 700 .95rem var(--font-head); color: var(--heading); }
.board__pages { font-size: .78rem; color: var(--muted); }
.board__empty { margin: 0; padding: 18px 8px; text-align: center; font-size: .86rem; color: var(--muted); }
.board__empty[hidden] { display: none; }
.board__pager { padding-top: 4px; }
.board__pager .pager { margin: 0; }

.pcard {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 14px 14px 30px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  cursor: grab;
}
.pcard:hover { border-color: var(--accent-mid); }
.pcard:has(.tile__menu[open]) { z-index: 30; }
body.is-dragging .pcard { cursor: grabbing; }

/* ⚠ `touch-action: none` TYLKO NA UCHWYCIE - na calej karcie zabieraloby
   przewijanie tablicy palcem (board_controller). */
.pcard__grip {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; padding: 6px 4px; border-radius: 6px;
  color: var(--muted); cursor: grab; touch-action: none;
}
.pcard__grip:hover { background: var(--accent-soft); color: var(--text); }

.pcard__body { display: flex; align-items: center; gap: 13px; min-width: 0; }
.pcard__thumb { width: 64px; height: 40px; flex-basis: 64px; border-radius: 7px; }
.pcard__text { min-width: 0; display: grid; gap: 4px; }
.pcard__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 3px; }
.pcard__price { font: 600 .82rem var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.pcard__acts { align-self: start; }

.pcard__badge {
  display: none; align-items: center; gap: 5px; width: max-content;
  grid-column: 1 / -1; padding: 3px 9px; border-radius: 999px;
  background: var(--highlight); color: #1c211e; font: 700 .7rem/1.3 var(--font-head); letter-spacing: .04em; text-transform: uppercase;
}
.pcard__badge svg { width: 12px; height: 12px; }

.board__col[data-state="published"] > .pcard:first-of-type {
  border: 2px solid var(--highlight); background: #fffdf4; padding: 18px 18px 18px 34px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.board__col[data-state="published"] > .pcard:first-of-type .pcard__badge { display: inline-flex; }
.board__col[data-state="published"] > .pcard:first-of-type .pcard__thumb { width: 96px; height: 60px; flex-basis: 96px; }
.board__col[data-state="published"] > .pcard:first-of-type .tile__name { font-size: 1.12rem; }

/* Duch leci za wskaznikiem NAD ukladem (position: fixed) i nie lapie
   zdarzen - inaczej przechwytywalby elementFromPoint i kolumna pod nim
   bylaby nie do trafienia. Original zostaje wyszarzony, wiec widac, skad
   karta wyszla. */
.pcard.card--ghost {
  position: fixed; z-index: 100; margin: 0; pointer-events: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22); transform: rotate(1.5deg); opacity: .96;
}
.pcard.card--lifted { opacity: .35; }
body.is-dragging { user-select: none; -webkit-user-select: none; }

/* ---------- zakładki karty firmy ----------
   Wyglad "folderow" jak na stronie operatora AssetLife (application.css .tab):
   aktywna zakladka to uniesione pudelko z ramka i gorna listwa akcentu, a nie
   samo podkreslenie. Kolory zostaja dostawcy - listwa i tekst w --accent, nie
   w zlocie operatora. Wariant `button` (zakladki przelaczane JS-em) i `a.tab`
   (zakladki-linki, shared.css) trzymamy identycznie. */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 22px 0 18px; overflow-x: auto; }
.tabs button {
  background: none; cursor: pointer; white-space: nowrap;
  padding: 11px 16px; font: 600 .92rem/1 var(--font-body); color: var(--muted);
  border: 1px solid transparent; border-bottom: none;
  border-radius: 12px 12px 0 0; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 8px;
}
.tabs button:hover { color: var(--text); background: var(--accent-soft); }
.tabs button[aria-selected="true"] {
  background: var(--surface); border-color: var(--border);
  color: var(--accent-deep); box-shadow: inset 0 3px 0 var(--accent);
}
.tabs button .b {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--bg); color: var(--muted);
  display: inline-grid; place-items: center;
  font: 700 .74rem/1 var(--font-head); font-variant-numeric: tabular-nums;
}
.tabs button[aria-selected="true"] .b { background: var(--accent-soft); color: var(--accent-deep); }
.tabpane { display: none; }
.tabpane.on { display: block; }

/* ---------- edytor palety (panel/shared/_palette_editor) ----------
   Wspolny dla Ustawien > Wyglad i Sklep > Wyglad sklepu: wiersz = probnik,
   podpis, plakietka zrodla (z profilu / domyslny vs wlasny) i reset. */
.pal-group + .pal-group { margin-top: 18px; }
.pal-group__t {
  display: block; margin-bottom: 4px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--muted);
}
.pal-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); }
.pal-group .pal-row:first-of-type { border-top: none; }
.pal-row input[type="color"] {
  -webkit-appearance: none; appearance: none; border: none; background: none; padding: 0;
  width: 40px; height: 34px; border-radius: 8px; cursor: pointer; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,42,23,.06);
}
.pal-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.pal-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }
.pal-row input[type="color"]::-moz-color-swatch { border: none; border-radius: 8px; }
.pal-row__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pal-row__n { font-size: .88rem; font-weight: 600; }
.pal-row__s { font-size: .76rem; color: var(--muted); }
.pal-src {
  font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--bg); color: var(--muted); white-space: nowrap;
}
.pal-src.is-own { background: color-mix(in srgb, var(--highlight) 18%, var(--surface)); color: var(--highlight-dark); }
.pal-reset {
  background: none; border: none; color: var(--accent-dark); font-family: var(--font-body);
  font-weight: 600; font-size: .8rem; cursor: pointer; padding: 5px 8px; border-radius: 7px; white-space: nowrap;
}
.pal-reset:hover { background: var(--accent-soft); }
.pal-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 560px) {
  .pal-row { flex-wrap: wrap; }
  .pal-src, .pal-reset { margin-left: auto; }
}

/* ---------- zakładki podkreślane (Ustawienia + karta firmy) ----------
   Underline z ikonka 16x16, aktywny = tekst --accent-deep i zielona kreska pod
   spodem. Ten sam wyglad na obu ekranach (przeniesione z settings/show.html.erb),
   zeby panel byl spojny. */
.set-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 22px 0 24px; overflow-x: auto; }
.set-tab {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 11px 14px; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: .92rem; font-weight: 600;
  color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.set-tab svg { width: 16px; height: 16px; flex: none; }
.set-tab:hover { color: var(--text); }
.set-tab.is-on { color: var(--accent-deep); border-bottom-color: var(--accent); }
.set-tab.is-on svg { color: var(--accent); }
.set-tab .b {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--bg); color: var(--muted);
  display: inline-grid; place-items: center;
  font: 700 .74rem/1 var(--font-head); font-variant-numeric: tabular-nums;
}
.set-tab.is-on .b { background: var(--accent-soft); color: var(--accent-deep); }

/* ---------- nagłówek karty: spokojniejszy ---------- */
.chead { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.chead .idn { min-width: 0; }
.chead h1 { margin: 0; font-size: 1.7rem; letter-spacing: -.025em; }
.chead .chips { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.chead .acts { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }

/* Wiersz na liscie zarchiwizowanych firm: nazwa + kiedy zeszla po lewej,
   „Przywroc" po prawej. */
.arch-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.arch-row:last-child { border-bottom: 0; }
.arch-row__idn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arch-row__idn .sub { font-size: .8rem; color: var(--muted); }
.arch-row form { margin-left: auto; }
.idmeta { display: flex; gap: 0; flex-wrap: wrap; margin-top: 9px; font-size: .86rem; color: var(--muted); }
.idmeta span { padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--border); }
.idmeta span:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

/* ---------- notatki ---------- */
.notes { display: grid; gap: 12px; }
.note-item { border-left: 3px solid var(--accent-mid); padding: 2px 0 2px 14px; }
.note-item .who { font-size: .78rem; color: var(--muted); margin-bottom: 4px; }
.note-item .who b { color: var(--text); font-weight: 600; }
.note-item p { margin: 0; font-size: .9rem; }
.note-add { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.note-add textarea { min-height: 74px; }
.note-bar { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
.note-item .who .sep { color: var(--border-strong, #cbd3dd); }

/* świeżo dopisana notatka mruga raz, żeby było widać, gdzie wylądowała */
.note-item.is-fresh { animation: noteIn .45s ease-out; }
@keyframes noteIn {
  0%   { background: var(--ok-soft); border-left-color: var(--ok); opacity: .4; transform: translateY(-4px); }
  100% { background: transparent; border-left-color: var(--accent-mid); opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .note-item.is-fresh { animation: none; } }

/* stan pusty w zdarzeniach — ma wyglądać jak nagroda, nie jak brak danych */
.ev-clear { padding: 44px 20px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.ev-clear .mark {
  width: 46px; height: 46px; border-radius: 50%; background: var(--ok-soft); color: var(--ok);
  display: grid; place-items: center; font: 900 1.35rem/1 var(--font-head);
}
.ev-clear b { font: 700 1.02rem var(--font-head); }
.ev-clear span { color: var(--muted); font-size: .88rem; max-width: 44ch; }

/* ---------- zdarzenia ---------- */
.evlist { display: grid; gap: 0; }
.ev {
  display: grid; grid-template-columns: 34px 1fr 44px; gap: 14px; align-items: start;
  padding: 15px 2px;
}
.ev + .ev { border-top: 1px solid var(--border); }
.ev .ic {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  font: 900 .95rem/1 var(--font-head); flex: none;
}
.ev--warn .ic { background: var(--warn-soft); color: var(--warn-dark, #8a6800); }
.ev--bad  .ic { background: var(--bad-soft); color: var(--bad); }
.ev--info .ic { background: var(--accent-soft); color: var(--accent-deep); }
.ev .body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.ev .body b { font-weight: 600; font-size: .92rem; }
.ev .body .meta { color: var(--muted); font-size: .8rem; }
.ev .body .meta em { font-style: normal; color: var(--text); }
.ev .act { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.ev-group {
  font: 700 .66rem/1 var(--font-head); letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); padding: 22px 0 10px; margin-top: 6px;
  border-top: 1px solid var(--border);
}
.ev-group:first-child { border-top: 0; margin-top: 0; padding-top: 14px; }
.tabs button .warn-dot {
  width: 18px; height: 18px; border-radius: 999px; background: var(--highlight);
  color: #3a2600; display: inline-grid; place-items: center;
  font: 900 .72rem/1 var(--font-head);
}

/* ---------- przełącznik widoku zdarzeń ---------- */
/* Przełącznik jest osobną warstwą nad listą, nie jej częścią — dlatego linia
   i porządny odstęp, a nie 4 px. */
.evswitch {
  display: flex; gap: 8px;
  padding-bottom: 16px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.evswitch button {
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 8px 7px 14px; cursor: pointer; color: var(--text);
  font: 600 .84rem/1 var(--font-body);
  display: inline-flex; align-items: center; gap: 8px;
}
.evswitch button:hover { border-color: var(--accent); color: var(--accent-deep); }
.evswitch button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.evswitch button .n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--bg); color: var(--muted); display: inline-grid; place-items: center;
  font: 700 .74rem/1 var(--font-head); font-variant-numeric: tabular-nums;
}
.evswitch button[aria-pressed="true"] .n { background: rgba(255,255,255,.24); color: #fff; }

/* ---------- zdarzenie: ikona po lewej, checkbox po prawej ---------- */
.ev .slot { display: grid; place-items: center; padding-top: 2px; }

/* pole zaznaczenia */
.evchk { position: relative; width: 26px; height: 26px; cursor: pointer; display: block; }
.evchk input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.evchk .frame {
  position: absolute; inset: 0; border: 2px solid var(--border-strong, #cbd3dd);
  border-radius: 7px; background: #fff;
  transition: border-color .16s ease, background-color .16s ease, transform .12s ease;
}
.evchk:hover .frame { border-color: var(--accent); }
.evchk input:focus-visible + .frame { outline: 2px solid var(--accent); outline-offset: 2px; }
.evchk svg { position: absolute; inset: 0; width: 26px; height: 26px; pointer-events: none; }
.evchk svg path {
  fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
}

/* --- moment zaznaczenia: ptaszek się rysuje, wiersz mruga, potem się zwija --- */
.ev.is-resolving .evchk .frame { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.ev.is-resolving .evchk svg path { animation: tick .22s ease-out .04s forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }

.ev.is-resolving { animation: evflash .34s ease-out .16s both; }
@keyframes evflash {
  0%   { background: transparent; }
  35%  { background: var(--ok-soft); }
  100% { background: var(--ok-soft); }
}
.ev.is-collapsing {
  animation: evcollapse .3s cubic-bezier(.4, 0, .2, 1) forwards;
  overflow: hidden;
}
@keyframes evcollapse {
  0%   { opacity: 1; max-height: 120px; padding-top: 14px; padding-bottom: 14px; }
  100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .ev.is-resolving .evchk svg path { animation: none; stroke-dashoffset: 0; }
  .ev.is-resolving, .ev.is-collapsing { animation: none; }
}

/* Podpis rozwiązania: jedna cicha linia, bez kafelka — kafelek rozpychał wiersz
   i krzyczał głośniej niż samo zdarzenie. */
.stampline { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.stampline .ok { color: var(--ok); font-weight: 700; }
.stampline b { font-weight: 600; color: var(--text); }
.stampline .sep { color: var(--border-strong, #cbd3dd); }

/* W widoku rozwiązanych ikona jest zielona — czerwony wykrzyknik przy zamkniętym
   zadaniu przeczy sam sobie. */
.ev--closed .ic { background: var(--ok-soft); color: var(--ok); }
.ev--closed .body b { color: var(--muted); font-weight: 600; }

/* ---------- dokumenty ---------- */
.money { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 760px) { .money { grid-template-columns: repeat(2, 1fr); } }
.money .m { background: var(--bg); border-radius: 8px; padding: 13px 16px; }
.money .m b { display: block; font: 900 1.25rem/1 var(--font-head); letter-spacing: -.02em; }
.money .m span { font-size: .78rem; color: var(--muted); }
.money .m.bad b { color: var(--bad); }
.money .m.warn b { color: var(--warn); }
.money .m.ok b { color: var(--ok); }

/* ---------- Rozliczenie z AssetLife ----------
   Hero prowadzi kwota do zaplaty; warunki umowy jako chipy obok. Pod spodem
   rowny rzad KPI i pasek proporcji abonament/prowizja. */
.setl-hero { display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: start; }
@media (max-width: 820px) { .setl-hero { grid-template-columns: 1fr; } }
.setl-hero__eyebrow {
  font: 700 .72rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
}
.setl-hero__big { font: 900 2.4rem/1 var(--font-head); letter-spacing: -.02em; margin: 0; }
.setl-hero__meta { color: var(--muted); font-size: .9rem; margin: 8px 0 0; }
.setl-hero--bad .setl-hero__big, .setl-hero--bad .setl-hero__meta strong { color: var(--bad); }
.setl-hero__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.setl-chip {
  display: flex; flex-direction: column; gap: 3px; min-width: 118px;
  background: var(--bg); border-radius: 10px; padding: 10px 14px;
}
.setl-chip b { font: 800 1.05rem/1 var(--font-head); letter-spacing: -.01em; }
.setl-chip span { font-size: .74rem; color: var(--muted); }
.setl-hero__terms { grid-column: 1 / -1; margin: 2px 0 0; }
/* Prowizja od leadow - podsekcja w bloku Subskrypcja, oddzielona cienka kreska. */
.setl-hero__sub { grid-column: 1 / -1; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.setl-hero__sub .setl-hero__eyebrow { margin: 0 0 3px; }
.setl-hero__subval { margin: 0; font-size: .95rem; }
.setl-hero__subval b { font-size: 1.15rem; font-family: var(--font-head); }

.setl-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 760px) { .setl-kpis { grid-template-columns: repeat(2, 1fr); } }
.setl-kpi { background: var(--bg); border-radius: 10px; padding: 14px 16px; }
.setl-kpi b { display: block; font: 900 1.4rem/1 var(--font-head); letter-spacing: -.02em; }
.setl-kpi span { font-size: .78rem; color: var(--muted); }
.setl-kpi--ok b { color: var(--ok); }
.setl-kpi--warn b { color: var(--warn); }
.setl-kpi--bad { background: var(--bad-soft); }
.setl-kpi--bad b { color: var(--bad); }

.setl-split { margin-top: 16px; }
.setl-split__bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--bg); }
.setl-split__fee { background: var(--accent); }
.setl-split__com { background: var(--warn); }
.setl-split__legend { display: flex; gap: 22px; margin-top: 9px; font-size: .82rem; color: var(--muted); }
.setl-split__legend b { color: var(--text); font-weight: 700; }
.setl-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
.setl-dot--fee { background: var(--accent); }
.setl-dot--com { background: var(--warn); }

.docs-tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.docs-tbl th {
  font: 700 .68rem/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.docs-tbl td { padding: 11px 10px; vertical-align: middle; }
.docs-tbl tbody tr + tr td { border-top: 1px solid var(--border); }
.docs-tbl tbody tr:hover { background: var(--accent-soft); }
.docs-tbl td.num, .docs-tbl th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.docs-tbl .no { font-weight: 600; }
.docs-tbl .no span { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; }

.filerow {
  display: flex; align-items: center; gap: 13px; padding: 12px 0;
}
.filerow + .filerow { border-top: 1px solid var(--border); }
.filerow .fi {
  width: 34px; height: 34px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--bad-soft); color: var(--bad); font: 700 .64rem/1 var(--font-head);
}
.filerow .t { min-width: 0; flex: 1; }
.filerow .t b { display: block; font-weight: 600; font-size: .9rem; }
.filerow .t span { color: var(--muted); font-size: .78rem; }
.dropzone {
  border: 1px dashed var(--border-strong, #cbd3dd); border-radius: 9px;
  padding: 22px; text-align: center; margin-top: 14px; background: var(--bg);
}
.dropzone b { display: block; font: 700 .92rem var(--font-head); margin-bottom: 4px; }
.dropzone span { color: var(--muted); font-size: .82rem; }

/* ---------- podgląd dokumentu (wzór: assetlife-platform) ---------- */
.doc-frame {
  width: 100%; height: 70vh; min-height: 420px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg);
}
.doc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.doc-head h2 { margin: 0; }
.doc-head .sp { flex: 1; }
.filerow.is-picked { background: var(--accent-soft); border-radius: 8px; padding: 12px 10px; }
.filerow.is-fresh { animation: noteIn .45s ease-out; }

/* ---------- formularz wgrania ----------
   Trzy rzeczy, których V1 nie stylowała, bo ich nie używała: pola daty, pole pliku
   i select. Do tego `.field + .field` z V1 dawało drugiej kolumnie siatki 14 px
   marginesu góra — stąd krzywe etykiety. */
.upload-form { margin-top: 4px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.grid-2 > .field + .field { margin-top: 0; }
@media (max-width: 620px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2 > .field + .field { margin-top: 14px; }
}

select,
input[type=date],
input[type=password],
input[type=tel],
input[type=search] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
  color: var(--text);
  min-height: 42px;
}
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%235c6661'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}
input[type=date] { cursor: pointer; }
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; }
input[type=date]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* Pole pliku: native „Choose File" jest brzydki i nieprzewidywalny, więc
   chowamy go i sterujemy etykietą. */
.filepick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filepick input[type=file] {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.filepick .pick {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 17px; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-deep);
  font: 600 .89rem/1 var(--font-body); white-space: nowrap;
  transition: background-color .14s ease, box-shadow .14s ease;
}
.filepick .pick:hover { background: var(--accent-mid); }
.filepick input[type=file]:focus-visible + .pick { outline: 2px solid var(--accent); outline-offset: 2px; }
.filepick .chosen { font-size: .88rem; color: var(--muted); min-width: 0; }
.filepick .chosen b { color: var(--text); font-weight: 600; word-break: break-all; }
.filepick.has-file .pick { background: #fff; }

.hint { color: var(--muted); font-size: .8rem; margin: 7px 0 0; }
.form-bar {
  display: flex; align-items: center; gap: 14px; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--border);
}
.form-bar .hint { margin: 0; }


/* ---------- licencja i postęp: subskrypcja + liczby ---------- */
.lic { display: grid; grid-template-columns: 250px 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 1000px) { .lic { grid-template-columns: 1fr; } }

.lic-sub {
  background: linear-gradient(150deg, var(--accent-soft), #fff 130%);
  border: 1px solid var(--accent-mid); border-radius: 9px; padding: 16px 18px;
  display: flex; flex-direction: column;
}
.lic-sub .k {
  font: 700 .66rem/1 var(--font-head); letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent-deep); opacity: .75;
}
.lic-sub .kind {
  display: block; font: 900 1.5rem/1.05 var(--font-head); letter-spacing: -.025em;
  color: var(--accent-deep); margin: 9px 0 0;
}
.lic-sub .row2 {
  margin-top: auto; padding-top: 13px; font-size: .84rem;
  border-top: 1px solid var(--accent-mid);
}
.lic-sub .row2 > div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.lic-sub .row2 span { color: var(--muted); }
.lic-sub .row2 b { font-weight: 600; }
.lic-sub .row2 .urgent { color: var(--bad); font-weight: 700; }

/* Liczby wyśrodkowane, równa wysokość — inaczej rząd czyta się jak drabina. */
.lic-nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1240px) { .lic-nums { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .lic-nums { grid-template-columns: repeat(2, 1fr); } }
.lic-nums .s {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 7px; padding: 16px 12px; min-height: 104px;
  border: 1px solid transparent; border-radius: 9px;
}
.lic-nums .s b { font-size: 1.75rem; }
.lic-nums .s span { line-height: 1.3; max-width: 15ch; }

/* Kolor niesie znaczenie, ale liczba i podpis mówią to samo — kolor nigdy nie jest
   jedynym nośnikiem. Progi: realizacja i wynik wzgl. progu zaliczenia 70%. */
.lic-nums .s--ink   { background: #f1f4f2; border-color: #e3e6e4; }
.lic-nums .s--ink b { color: var(--accent-night); }

.lic-nums .s--accent   { background: var(--accent-soft); border-color: var(--accent-mid); }
.lic-nums .s--accent b { color: var(--accent-deep); }

.lic-nums .s--free   { background: var(--warn-soft); border-color: #ecd9a0; }
.lic-nums .s--free b { color: var(--warn); }

.lic-nums .s--ok   { background: var(--ok-soft); border-color: var(--accent-mid); }
.lic-nums .s--ok b { color: var(--ok); }

.lic-nums .s--mid   { background: var(--warn-soft); border-color: #ecd9a0; }
.lic-nums .s--mid b { color: var(--warn); }

.lic-nums .s--bad   { background: var(--bad-soft); border-color: #edc7c7; }
.lic-nums .s--bad b { color: var(--bad); }

.lic-nums .s .sub { font-size: .72rem; color: var(--muted); opacity: .85; }

/* ---------- pasek nad listą pracowników ---------- */
.worker-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.worker-bar .filterbar { margin-bottom: 0; }
@media (max-width: 620px) { .worker-bar { align-items: stretch; flex-direction: column; } }

/* firma bez nadanej subskrypcji */
.lic-sub--none {
  background: #fffdf4; border-color: var(--highlight-dark);
  border-style: dashed;
}
.lic-sub--none .k { color: var(--warn); }
.lic-sub--none .kind { color: var(--warn); }
.lic-sub--none .none-hint { font-size: .82rem; color: var(--muted); margin: 8px 0 12px; }

/* ---------- znaczniki zamiast plakietek ---------- */
.people th.mid, .people td.mid, .docs-tbl th.mid, .docs-tbl td.mid { text-align: center; }
.okmark, .nomark, .badmark, .waitmark {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font: 700 .82rem/1 var(--font-head);
}
.okmark { background: var(--ok-soft); color: var(--ok); }
.nomark { background: #f1f4f2; color: var(--faint, #8a94a3); }
.badmark { background: var(--bad-soft); color: var(--bad); }
.waitmark { background: var(--warn-soft); color: var(--warn); font-size: 1.1rem; }

/* Kropka stanu zamowienia (kolumna „Stan"): kolor = stan, miekka aureola jak
   przy stanach pracownikow. Tooltip w `title`. */
.statedot {
  position: relative;
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--muted); vertical-align: middle;
}
/* Wlasny tooltip - natychmiastowy (natywny `title` otwiera sie z ~1s opoznieniem
   przegladarki, czego CSS nie zmieni). Tekst w `data-tip`. */
.statedot[data-tip], .kdot[data-tip] { position: relative; }
.statedot[data-tip]::after, .kdot[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #1c2430; color: #fff; font: 600 .72rem/1.2 var(--font-body);
  padding: 5px 9px; border-radius: 7px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .08s ease; z-index: 30;
}
.statedot[data-tip]:hover::after, .kdot[data-tip]:hover::after { opacity: 1; }
/* Zamowienia: menu „⋯" to dropdown; w scroll-boxie tabeli by sie ucinal, wiec
   na desktopie pozwalamy tresci wyjsc poza tabele. Na waskim ekranie wraca
   poziomy scroll (menu i tak przerzuca sie w gore przez `place()`). */
.docs-wrap { overflow: visible; }
.docs-scroll { overflow: visible; }
@media (max-width: 760px) { .docs-scroll { overflow-x: auto; } }
/* Dwie ikonki akcji (oko + „⋯") w kolumnie Akcja, do prawej. */
.qacts { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
/* Kolumna „Stan" (kropka) wysrodkowana - inaczej `.mid` centruje sie tylko w
   .people/.docs-tbl, a tabela zamowien to zwykly .tbl. */
.docs-wrap td.mid, .docs-wrap th.mid { text-align: center; }

.statedot--issued  { background: var(--muted); box-shadow: 0 0 0 3px #eef1f4; }
.statedot--sent    { background: var(--warn);  box-shadow: 0 0 0 3px var(--warn-soft); }
.statedot--paid    { background: var(--ok);    box-shadow: 0 0 0 3px var(--ok-soft); }
.statedot--overdue { background: var(--bad);   box-shadow: 0 0 0 3px var(--bad-soft); }

.people tr.no-seat .nm b { color: var(--muted); }
.chip-plan { background: #eef0f4; color: var(--muted); }
.tiny.muted { font-size: .76rem; color: var(--muted); }

/* ---------- ślad wysyłki w kolumnie akcji ---------- */
.sentmark {
  display: inline-block; font: 600 .76rem/1 var(--font-body); color: var(--ok);
  background: var(--ok-soft); border-radius: 999px; padding: 5px 10px; white-space: nowrap;
}
.linkbtn {
  display: block; margin: 5px 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 .74rem var(--font-body); color: var(--muted); text-decoration: underline;
}
.linkbtn:hover { color: var(--accent); }

/* pytanie otwarte na ekranie — ma być widać, że to nie decyzja */
.qbox {
  border-left: 3px solid var(--highlight-dark); background: #fffdf4;
  padding: 12px 15px; border-radius: 0 8px 8px 0; font-size: .85rem; margin-bottom: 14px;
}
.qbox b { font-family: var(--font-head); }
input[type=number] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; background: var(--surface); color: var(--text); min-height: 42px;
}

/* ---------- edycja danych firmy: wiersze zamieniają się w pola ---------- */
.dataform { display: grid; gap: 14px; }
.dataform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 640px) { .dataform .two { grid-template-columns: 1fr; } }

/* align-content: start — bez tego wiersze wewnętrznej siatki rozciągają się do
   wysokości najwyższej kolumny i pole z podpowiedzią rozpycha to obok siebie.
   Stąd brały się etykiety i inputy na różnych wysokościach. */
.fld { display: grid; gap: 6px; align-content: start; }
.fld > span { font-size: .82rem; font-weight: 600; color: var(--muted); }
.fld > em { font-style: normal; font-size: .76rem; color: var(--muted); line-height: 1.4; }
.fld input {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong, #cbd3dd);
  border-radius: 8px;
  padding: 10px 12px;
}
.fld input:focus, .fld textarea:focus, .fld select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.fld input, .fld select { min-height: 44px; }
.fld textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; background: var(--surface); color: var(--text); min-height: 84px; resize: vertical;
}

.dataform .acts { display: flex; gap: 10px; margin-top: 2px; }

/* ---------- treści: lekcje i kursy ---------- */

.crumb2 { margin: -6px 0 18px; font-size: .88rem; color: var(--muted); }

/* Nagłówek pudełka z akcjami po prawej. `.box > h2` tu nie sięgało, więc te
   nagłówki wypadały ze stylu i były dwa razy większe od pozostałych. */
.boxhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.boxhead h2 {
  font: 700 .72rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-deep); margin: 0;
}
/* Akcje zostają w jednym rzędzie — zawinięte w słupek wyglądają jak awaria. */
.boxhead .acts { flex: 0 0 auto; flex-wrap: nowrap; }

.pillcount {
  font-size: .78rem; font-weight: 700; color: var(--muted);
  background: var(--bg); border-radius: 999px; padding: 3px 10px;
}

/* ---------- Sklep: zamowienie i profil klienta ---------- */

/* Zamowienie: dwie ROWNORZEDNE kolumny kart na cala szerokosc [#45] - lewa
   Kupujacy + Produkty, prawa Faktura + Konto. Zadna nie jest bocznym panelem:
   te same karty, ten sam styl, kazda kolumna to zwykly slupek. Na waskim
   ekranie jedna kolumna w kolejnosci DOM. */
.ogrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ogrid__col { display: grid; gap: 16px; min-width: 0; }
.ogrid .box + .box { margin-top: 0; }
@media (max-width: 1100px) { .ogrid { grid-template-columns: minmax(0, 1fr); } }

/* Meta pod tytulem zielonego banera i przyciski na zieleni (jasne, czytelne). */
.statbar__meta { color: rgba(255, 255, 255, .82); font-size: .9rem; margin-top: 6px; }
.statbar .btn.btn--onbar {
  background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .45); box-shadow: none;
}
.statbar .btn.btn--onbar:hover { background: rgba(255, 255, 255, .26); border-color: #fff; color: #fff; transform: none; }
.statbar--head .statbar__aside { align-self: center; }

/* Pozycje zamowienia. */
.items { width: 100%; border-collapse: collapse; font-size: .92rem; }
.items th, .items td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--border); }
.items thead th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.items td.num, .items th.num { text-align: right; white-space: nowrap; }
.items tfoot td { border: 0; padding-top: 14px; font-weight: 700; font-size: 1.02rem; }

/* Faktura: nota, checkbox "poza systemem", karta dokumentu, rzad akcji. */
.inv-note { color: var(--muted); font-size: .86rem; margin: 0 0 12px; }
.inv-check {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg); font-size: .9rem; cursor: pointer;
}
.inv-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.inv-check .sub { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.inv-doc { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.inv-doc .r { display: flex; gap: 10px; font-size: .9rem; margin: 0; }
.inv-doc .r dt { color: var(--muted); width: 140px; flex: none; }
.inv-doc .r dd { margin: 0; font-weight: 600; }

/* Karta pol etykieta:wartosc (dane klienta, konto i dostep) [#66, #67]: ten sam
   rysunek co `.inv-doc` - jeden wiersz na pole, etykieta stalej szerokosci po
   lewej, wartosc z chipami/przyciskami po prawej. Wasko: etykieta nad wartoscia. */
.datagrid { display: grid; gap: 0; margin: 0; padding: 2px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.datagrid .r { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 10px 0; font-size: .9rem; margin: 0; }
.datagrid .r + .r { border-top: 1px solid var(--border); }
.datagrid .r dt { color: var(--muted); padding-top: 2px; }
.datagrid .r dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; overflow-wrap: anywhere; }
.datagrid .r dd b { font-weight: 600; }
.datagrid .r dd form { display: inline; }
.datagrid .r dd .btn { margin: 0; }
@media (max-width: 520px) {
  .datagrid .r { grid-template-columns: 1fr; gap: 3px; }
  .datagrid .r dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; padding-top: 0; }
}
.acts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.acts-row form { display: inline; }

/* Natywny dropdown "Integracje": <details>, summary jak .btn, lista w bialym panelu. */
.inv-dd { position: relative; display: inline-block; }
.inv-dd > summary { list-style: none; cursor: pointer; }
.inv-dd > summary::-webkit-details-marker { display: none; }
.inv-dd > summary::after { content: "▾"; margin-left: 6px; font-size: .8em; }
.inv-dd__menu {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 220px;
  display: grid; padding: 6px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}
.inv-dd__menu form { display: contents; }
.inv-dd__menu button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); font: inherit; font-size: .9rem; cursor: pointer;
}
.inv-dd__menu button:hover { background: var(--accent-soft); color: var(--accent-deep); }
.inv-dd__menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Ramka "co dzieje sie po oplaceniu" - zeby sekcja nie byla zagadka. */
.explain {
  background: var(--accent-soft); border: 1px solid var(--accent-mid); color: var(--accent-deep);
  border-radius: 10px; padding: 12px 14px; font-size: .86rem; line-height: 1.45; margin: 0 0 14px;
}
.grantrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding: 10px 0; font-size: .92rem; }
.grantrow + .grantrow { border-top: 1px solid var(--border); }
.grantrow .m { color: var(--muted); font-size: .85rem; margin-left: auto; white-space: nowrap; }
.grantrow__cert { flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .86rem; }

/* Zwijane listy read-only w profilu klienta (kursy, certyfikaty). */
.rolist { border: 0; }
.rolist > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  font: 700 .72rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-deep); padding: 2px 0;
}
.rolist > summary::-webkit-details-marker { display: none; }
.rolist > summary .chev { margin-left: auto; color: var(--muted); transition: transform .12s ease; }
.rolist[open] > summary .chev { transform: rotate(90deg); }
.rolist__items { margin-top: 12px; display: grid; gap: 0; }
.rolist__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding: 10px 0; font-size: .92rem; }
.rolist__row + .rolist__row { border-top: 1px solid var(--border); }
.rolist__row .t { font-weight: 600; color: var(--text); }
.rolist__row .m { color: var(--muted); font-size: .85rem; margin-left: auto; white-space: nowrap; }
.ro-badge {
  font-size: .72rem; color: var(--muted); background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 8px;
}

/* lista lekcji */
.lrows { display: grid; gap: 8px; }
.lrow {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; text-decoration: none; color: inherit;
  transition: border-color .14s ease, transform .12s ease;
}
.lrow:hover { border-color: var(--accent); transform: translateY(-1px); }
.lrow__play {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: var(--bg); color: var(--accent); font-size: .8rem;
}
.lrow__main { min-width: 0; }
.lrow__main b { display: block; }

/* kafle kursów */
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

/* Karta kursu: jedna informacja pod drugą, w stałej kolejności. Wcześniej tytuł
   zderzał się z plakietką, a pięć dużych liczb w jednym rzędzie się łamało. */
.kcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px 0; text-decoration: none; color: inherit;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.kcard:hover {
  border-color: var(--accent-mid); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 42, 23, .08); text-decoration: none;
}
.kcard__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kcard__go { margin-left: auto; color: var(--border-strong, #cbd3dd); font-size: 1.1rem; }
.kcard:hover .kcard__go { color: var(--accent); }

.kcard__title {
  margin: 0 0 6px; font-size: 1.06rem; line-height: 1.3; letter-spacing: -.015em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kcard__lead {
  margin: 0 0 14px; font-size: .86rem; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kcard__meta { margin: 0 0 12px; font-size: .82rem; color: var(--muted); }
.kcard__meta .sep { color: var(--border-strong, #cbd3dd); padding: 0 7px; }

.kcard__quiz {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 11px 13px; border-radius: 8px; background: var(--bg);
  font-size: .82rem; color: var(--muted); margin-bottom: 14px;
}
.kcard__quiz b { color: var(--text); font-weight: 700; }

.kcard__foot {
  margin-top: auto; padding: 12px 0; border-top: 1px solid var(--border);
}
.kstate { font-size: .82rem; font-weight: 600; }
.kstate--ok { color: var(--ok); }
.kstate--warn { color: var(--warn); }
.kcard__ok { margin: 12px 0 0; font-size: .8rem; color: var(--ok); }

/* program kursu */
.prows { display: grid; gap: 8px; margin-bottom: 16px; }
.prow {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.prow__no {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--bg); font-size: .8rem; font-weight: 700; color: var(--muted);
}
.prow__main b { display: block; }
.prow__acts { display: flex; gap: 4px; }

/* Program kursu: lekcje w JEDNEJ karcie, rozdzielone liniami, z zielonym
   kwadratowym numerkiem (jak makieta). Modifier, żeby nie ruszać .prow, którego
   używa kilkanaście innych list (faktury, firmy, klient...). */
.prows--lessons { display: block; margin-bottom: 16px; }
.prows--lessons .prow {
  border: 0; border-radius: 0; border-top: 1px solid var(--border);
  padding: 13px 4px; background: transparent;
}
.prows--lessons .prow:first-child { border-top: 0; }
.prows--lessons .prow__no {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent-deep);
}

/* Ustawienia kursu w czytelnej kolumnie - inaczej inputy rozciagaja sie na cala
   szerokosc karty (~2000px na monitorze). Prog to liczba, wiec zostaje waski. */
/* Pola tekstowe czytaja sie lepiej waskie, ale karta „Dostawa kursu" ma isc na
   pelna szerokosc (inaczej po prawej zostaje duzo bieli) - wiec cap tylko na polach. */
.crs-settings > .field { max-width: 680px; }
.crs-settings .field--narrow input { max-width: 220px; }
/* Labelki szare (jak w makiecie i jak edytor certyfikatu obok) - nie czarne,
   zeby ustawienia nie odstawaly od reszty karty kursu. */
.crs-settings label { color: var(--muted); }

/* ⚠ Ta klasa nazywała się .mini i nadpisywała listę .mini z dashboardu — kafel
   z wygasającymi dostępami rozjeżdżał się na inne kafle. Nazwa musi być unikalna. */
.iconbtn {
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
  color: var(--muted); font-size: .85rem; cursor: pointer; text-decoration: none;
}
.iconbtn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.iconbtn[disabled] { opacity: .35; cursor: default; }

/* bank pytań — aktualne reguły są niżej, w sekcji „pytanie: wiersz rozwijany" */
.qform { display: grid; gap: 12px; }

/* gotowość */
.issues { margin: 0 0 12px; padding-left: 18px; font-size: .86rem; color: #9a6a00; line-height: 1.7; }
.allgood { margin: 0 0 12px; font-size: .88rem; color: var(--ok); font-weight: 600; }

/* ---------- Certyfikat na ukonczonym kursie ----------
   "Swiateczny" pasek z pieczecia i para przyciskow (obejrzyj / pobierz) -
   trwaly, przy bannerze "Kurs ukonczony" (klient/profile/_certificate).
   Zwija sie na waskim ekranie: przyciski schodza pod tekst. */
.cert {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 2px 0 16px; padding: 15px 18px;
  border: 1px solid var(--accent-mid); border-radius: 14px;
  background: linear-gradient(115deg, var(--accent-soft) 0%, var(--surface) 72%);
}
.cert__seal {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; color: #fff;
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%);
  box-shadow: 0 6px 15px rgba(20, 110, 70, .28);
}
.cert__seal svg { width: 26px; height: 26px; }
.cert__body { flex: 1; min-width: 190px; }
.cert__title { margin: 0; font: 700 1rem/1.2 var(--font-head); color: var(--accent-deep); }
.cert__sub { margin: 3px 0 0; font-size: .85rem; color: var(--muted); }
.cert__btn {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 17px; border-radius: 10px; cursor: pointer;
  font: 600 .9rem/1 var(--font-body); text-decoration: none;
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 15px rgba(20, 110, 70, .25);
  transition: background .15s ease, transform .12s ease;
}
.cert__btn:hover { background: var(--accent-deep); transform: translateY(-1px); }
.cert__btn svg { width: 16px; height: 16px; }
.cert__side { flex: none; display: grid; gap: 7px; justify-items: end; }
.cert__actions { flex: none; display: flex; gap: 10px; flex-wrap: wrap; }
/* "Wygeneruj ponownie" - drugorzedne, tekstowe; po zmianie wzoru u dostawcy */
.cert__regen { display: grid; gap: 8px; justify-items: end; }
.cert__again {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: 500 .8rem/1 var(--font-body); color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.cert__again:hover { color: var(--accent-deep); }
.cert__again svg { width: 13px; height: 13px; }
.cert__btn--ghost {
  background: var(--surface); color: var(--accent-deep);
  border: 1px solid var(--accent-mid); box-shadow: none;
}
.cert__btn--ghost:hover { background: var(--accent-soft); }

/* stan "do wygenerowania": przycisk, a na czas requestu pasek + zywy licznik */
.cert__gen { flex: none; display: grid; gap: 8px; justify-items: end; }
.cert__busy { display: grid; gap: 7px; min-width: 220px; }
.cert__bar {
  display: block; height: 6px; border-radius: 999px;
  background: var(--accent-soft); overflow: hidden;
}
.cert__bar i {
  display: block; height: 100%; width: 36%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
  animation: certbar 1.15s ease-in-out infinite;
}
@keyframes certbar {
  from { transform: translateX(-110%); }
  to   { transform: translateX(310%); }
}
.cert__clock { font-size: .82rem; color: var(--muted); }
.cert__clock b { color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.cert__err { margin: 0; font-size: .82rem; color: #b3261e; }
.cert__took { display: block; margin-top: 2px; color: var(--accent-deep); font-weight: 600; }

.cert-hint { margin: 2px 0 14px; }
@media (max-width: 560px) {
  .cert__actions, .cert__gen, .cert__gen .cert__btn, .cert__side { width: 100%; }
  .cert__btn { flex: 1; justify-content: center; }
  .cert__gen { justify-items: stretch; }
  .cert__side, .cert__regen { justify-items: center; }
}

/* .chead jest zdefiniowane wyżej — tu zostaje tylko to, czego tam nie ma. */
.chead { margin-bottom: 18px; }
.chead .idn { flex: 1; }

/* Banner variant of the page header - accent fill, white ink. Whitelabel: the
   green comes from the provider's --accent, so each tenant gets its own colour. */
.chead--banner {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: var(--shadow);
}
.chead--banner h1 { color: #fff; }
.chead--banner .crumb,
.chead--banner .crumb a,
.chead--banner .idmeta { color: rgba(255, 255, 255, .85); }
.chead--banner .crumb a:hover { color: #fff; }
.lead2 { margin: 8px 0 0; color: var(--muted); font-size: .9rem; }

.empty2 { text-align: center; padding: 40px 24px; }
.empty2 h2 { margin-bottom: 8px; }
.empty2 p { margin: 0 auto 16px; max-width: 52ch; color: var(--muted); font-size: .9rem; }

.dataform textarea {
  width: 100%; font: inherit; color: var(--text); background: #fff;
  border: 1px solid var(--border-strong, #cbd3dd); border-radius: 8px; padding: 10px 12px; resize: vertical;
}
.dataform textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__veil { position: absolute; inset: 0; background: rgba(16, 26, 43, .45); }
/* Stopka z przyciskami MUSI być widoczna bez przewijania — przewija się tylko
   środek. Wcześniej całe okno miało overflow i „Dodaj pytanie" wypadało pod krawędź. */
.modal__box {
  position: relative; background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 42, 23, .28);
  width: 100%; max-width: 680px; max-height: min(88vh, 780px);
  display: flex; flex-direction: column; overflow: hidden;
  animation: modalIn .18s ease-out;
}
.modal__box > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
/* align-content: start — inaczej grid rozciaga wiersze na pelna wysokosc okna
   (na telefonie okno jest pelnoekranowe) i wpycha duze puste odstepy miedzy
   sekcje. Tresc ma siedziec u gory i przewijac sie w dol. */
.modal__body { overflow-y: auto; flex: 1; min-height: 0; padding: 18px 22px 6px; display: grid; gap: 14px; align-content: start; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.99); } }
@media (prefers-reduced-motion: reduce) { .modal__box { animation: none; } }
/* Wspolna skora modala: pasek naglowka w ciemnej zieleni marki (jak .statbar),
   bialy tytul i „×". Zmiana tutaj przemalowuje KAZDY modal - o to chodzi: chrome
   jest jeden, zmienia sie tylko wnetrze (shared/_modal, shared/_modal_foot). */
.modal__head {
  display: flex; align-items: center; gap: 12px; padding: 16px 22px; flex: none;
  background: linear-gradient(180deg, var(--accent-deep), var(--accent-night));
}
.modal__head h2 { margin: 0; font-size: 1.1rem; color: #fff; }
/* Podtytul po myslniku ("Edytuj — Ewa Bialostocka"): lzejszy niz sam tytul. */
.modal__head h2 .modal__sub { font-weight: 400; color: rgba(255, 255, 255, .82); }
.modal__x {
  margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 1.5rem;
  line-height: 1; color: rgba(255, 255, 255, .8); padding: 0 4px;
}
.modal__x:hover { color: #fff; }
.modal .qform { padding: 0; }
/* Stopka: przyciski do PRAWEJ (Anuluj + glowny), jeden uklad dla wszystkich okien. */
.modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; flex: none; margin: 0;
  border-top: 1px solid var(--border); background: var(--bg);
}

/* Addon/connector terms in the acceptance modal (AS-0033). */
.terms-box {
  max-height: 40vh; overflow-y: auto; margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg);
  font-size: .88rem; line-height: 1.6;
}
.terms-box p { margin: 0 0 .7em; }
.terms-box > :last-child { margin-bottom: 0; }

/* MOBILE: modal przestaje byc kartka na przyciemnieniu i staje sie PELNYM
   EKRANEM - okno na cala szerokosc i wysokosc, bez zaokraglen i cienia. Zielony
   pasek naglowka (bialy tytul i „×") ZOSTAJE taki sam jak na desktopie - to samo
   chrome na kazdym ekranie. Stopka zostaje przyklejona do dolu, przewija sie
   tylko srodek. */
@media (max-width: 560px) {
  .modal { padding: 0; }
  .modal__veil { display: none; }
  .modal__box, .modal__box--sm, .modal__box--lg {
    width: 100%; max-width: none; height: 100%; max-height: none;
    border-radius: 0; box-shadow: none;
  }
}

/* wybór rodzaju pytania w dwóch kolumnach — pionowa lista rozpychała okno */
.kindpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .kindpick { grid-template-columns: 1fr; } }
.kindopt {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
}
.kindopt:hover { border-color: var(--accent); background: var(--accent-soft); }
.kindopt input { margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.kindopt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.kindopt b { display: block; font-size: .88rem; }
.kindopt em { display: block; font-style: normal; font-size: .76rem; color: var(--muted); margin-top: 1px; }

/* pola odpowiedzi ciaśniej, żeby okno mieściło się bez przewijania */
.modal .ansrow { margin-bottom: 6px; }
.modal .ansrow input[type=text] { padding: 8px 11px; }

/* ---------- wybór opiekuna firmy (companies/_tab_contact) ----------
   Lista radio zamiast selecta: obecny opiekun zaznaczony i oznaczony
   "prowadzi teraz", admin przepina na kogokolwiek. Wzór jak .kindopt.

   Prefix opk- (opiekun), NIE mgr-: .mgr-pick jest juz zajete przez inny
   komponent (picker z selectem, align-items:center) - uzycie tej samej nazwy
   sprawialo, ze tamta regula nadpisywala te liste i kazda karta kurczyla sie
   do wlasnej tresci (nierowna piramidka).
   Flex-kolumna + align-items:stretch daje KAZDEJ karcie te sama pelna szerokosc
   niezaleznie od dlugosci maila/telefonu; align-items MUSI byc jawne, bo globalny
   fieldset ustawia center. min-inline-size:0 zdejmuje domyslne min-content
   <fieldset>, zeby wypelnil okno. */
.opk-pick {
  border: 0; padding: 0; margin: 0; min-inline-size: 0; width: 100%;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
.opk-pick legend {
  padding: 0; margin: 0 0 2px; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.opk-opt { display: block; cursor: pointer; }
.opk-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opk-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 13px;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.opk-opt:hover .opk-card { border-color: var(--accent); background: var(--accent-soft); }
.opk-opt input:checked + .opk-card {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.opk-opt input:focus-visible + .opk-card { outline: 2px solid var(--accent); outline-offset: 2px; }

.opk-radio {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted);
  flex: none; display: grid; place-items: center;
}
.opk-opt input:checked + .opk-card .opk-radio { border-color: var(--accent); }
.opk-radio::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  transform: scale(0); transition: transform .14s;
}
.opk-opt input:checked + .opk-card .opk-radio::after { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .opk-radio::after, .opk-card { transition: none; }
}

.opk-who { min-width: 0; flex: 1; display: grid; }
.opk-who .n { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opk-who .r { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.opk-who .c {
  color: var(--muted); font-size: .8rem; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opk-now {
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok);
  flex: none;
}
.opk-load {
  margin-left: auto; flex: none; text-align: right;
  font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.opk-load b { color: var(--text); font-weight: 700; }
.opk-opt--none .opk-card { border-style: dashed; }
.opk-opt--none .opk-who .n { color: var(--muted); }

/* ---------- paginacja: JEDEN komponent w calej apce (shared/_pager) ----------
   Ten sam blok, co w panelu admina (application.css) - numery to secondary
   buttony, zaznaczony pelny primary, "Poprzednie/Nastepne" tak samo. Kolor
   idzie z tokenow przyciskow (--btn-*), wiec tu farbuje sie na zielono, a
   u admina na niebiesko. shared/_pager renderuje <a>/<span>, nie <button>. */
.pager { display: flex; align-items: center; gap: .4rem; margin-top: 16px; flex-wrap: wrap; }

.pg {
  font-weight: 600; font-size: .88rem; font-variant-numeric: tabular-nums;
  min-width: 2.3rem; height: 2.3rem; padding: 0 .6rem; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-btn); border: 1.5px solid var(--btn-secondary-line);
  background: transparent; color: var(--btn-secondary-ink); text-decoration: none; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
a.pg:hover { background: var(--btn-secondary-hover); border-color: var(--btn-primary-1); color: var(--btn-secondary-ink); }
.pg:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--btn-focus-ring); }
.pg.is-on {
  background: linear-gradient(180deg, var(--btn-primary-1) 0%, var(--btn-primary-2) 100%);
  border-color: transparent; color: var(--btn-primary-ink); cursor: default;
}
.pg[aria-disabled="true"], .pg:disabled { color: var(--muted); opacity: .5; pointer-events: none; }

.pgbtn {
  font-weight: 600; font-size: .84rem; display: inline-flex; align-items: center; gap: .4rem;
  height: 2.3rem; padding: 0 .95rem; border-radius: var(--radius-btn); box-sizing: border-box;
  border: 1.5px solid var(--btn-secondary-line); background: transparent; color: var(--btn-secondary-ink);
  text-decoration: none; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pgbtn:hover { background: var(--btn-secondary-hover); border-color: var(--btn-primary-1); }
.pgbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--btn-focus-ring); }
.pgbtn[aria-disabled="true"] { color: var(--muted); border-color: var(--border); opacity: .55; pointer-events: none; }
.pgbtn svg { width: 13px; height: 13px; }

.pg__gap, .pgdots { color: var(--muted); padding: 0 .15rem; pointer-events: none; }
.pginfo { margin-left: .5rem; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Mobile: jeden rzad zamiast zawijania. Numery i info znikaja, zostaja
   strzalki prev/next (sama ikona) i licznik "Strona X z Y" w srodku. */
.pg__mobile { display: none; }
@media (max-width: 560px) {
  .pager { flex-wrap: nowrap; gap: .5rem; }
  .pager .pg, .pg__gap, .pgdots, .pginfo { display: none; }
  .pg__mobile {
    display: inline-flex; align-items: center; justify-content: center; flex: 1;
    font-weight: 600; font-size: .9rem; color: var(--btn-secondary-ink);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .pgbtn { padding: 0 .8rem; font-size: 0; gap: 0; flex: none; }
  .pgbtn svg { width: 16px; height: 16px; }
}

.boxhead .bh-sp { flex: 1; }

/* ---------- dobieranie lekcji ---------- */
.picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.picker__label { font: 600 .86rem/1 var(--font-body); margin: 0; white-space: nowrap; }
.picker select { flex: 1; min-width: 260px; max-width: 520px; }
.lockbox {
  margin-top: 16px; border-left: 3px solid var(--border-strong, #cbd3dd);
  background: var(--bg); padding: 13px 16px; border-radius: 0 8px 8px 0; font-size: .86rem;
}
.lockbox b { font-family: var(--font-head); }

/* ---------- pytanie: wiersz rozwijany ----------
   Zwinięte pokazuje samą treść i pinezkę. Odpowiedzi i usuwanie są w środku —
   krzyżyk w narożniku zasłaniał pinezkę i nie dało się jej kliknąć. */
.qlist { margin: 0; padding: 0; }

/* Jeden „+" z menu w naglowku banku: przycisk plus + rozwijane menu (.menu).
   Wrapper musi byc position:relative, bo .menu kotwiczy sie absolutnie. */
.addwrap { position: relative; }

/* Pytanie = kafel (wspolne .tile*). Trzy kolumny: chevron, tresc, pinezka.
   Selektor dwuklasowy, bo bazowe `.tile__main` stoi nizej w pliku i inaczej
   by nadpisalo uklad kolumn. */
.tile--q .tile__main {
  grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; padding: 12px 16px;
}
.tile__qtext { min-width: 0; font-size: .92rem; font-weight: 600; line-height: 1.4; color: var(--text); }

/* Przypiete („stale") = zielony zarys po lewej. */
.tile--q.is-fixed { border-left: 3px solid var(--accent); }

/* Pytanie wyłączone z puli. Nie krąży w quizach, więc gaśnie — ale zostaje
   czytelne, bo ktoś ma je poprawić. Kolor ostrzegawczy, nie błędu: to stan
   przejściowy, nie awaria. */
.tile--q.is-off { border-left: 3px solid var(--warn); background: #fcfcfb; }
.tile--q.is-off .tile__qtext { color: var(--muted); font-weight: 500; }
.qoff {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font: 700 .68rem/1 var(--font-body); letter-spacing: .02em;
  color: var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 4px 8px;
}
.pillcount--off { color: var(--warn); background: var(--warn-soft); }
.qpin[disabled] { opacity: .4; cursor: not-allowed; }
.qpin[disabled]:hover { border-color: var(--border); color: var(--faint, #8a94a3); }

.qpin {
  width: 30px; height: 30px; flex: none; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; cursor: pointer; display: grid; place-items: center;
  color: var(--faint, #8a94a3); padding: 0;
}
.qpin:hover { border-color: var(--accent); color: var(--accent); }
.qpin.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Rozwiniete pytanie: cialo z zielonym paskiem, wciete pod tresc (za chevronem).
   Rozwijanie/zwijanie robi wspolna mechanika .tile__detail (grid 0fr->1fr). */
.q__box {
  margin: 0 16px 16px 58px; border-left: 3px solid var(--accent);
  padding: 4px 0 6px 18px;
}
.q__tools { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.pencil {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: 600 .82rem/1 var(--font-body); color: var(--accent-dark);
  background: var(--accent-soft); border: 1px solid var(--accent-mid);
  border-radius: 9px; padding: 7px 12px;
}
.pencil:hover { background: var(--accent-mid); }
.pencil svg { width: 15px; height: 15px; }
.tile--q.is-editing .pencil { background: var(--accent); color: #fff; border-color: var(--accent); }
.pencil__edit { display: none; }
.tile--q.is-editing .pencil__view { display: none; }
.tile--q.is-editing .pencil__edit { display: inline; }

/* Widok odpowiedzi vs tryb edycji - przelacza olowek (answers#toggle). */
.ansedit { display: none; }
.tile--q.is-editing .ansview { display: none; }
.tile--q.is-editing .ansedit { display: block; }
.tile--q.is-editing .q__foot--acts { display: none; }

.q__ans { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.q__ans li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: .88rem; color: var(--muted); padding: 8px 11px;
  background: var(--bg); border-radius: 7px;
}
.q__ans li .ok { width: 14px; flex: none; color: transparent; font-weight: 700; }
.q__ans li.is-correct {
  background: var(--ok-soft); color: var(--ok); font-weight: 600;
}
.q__ans li.is-correct .ok { color: var(--ok); }

.q__foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border);
}
.q__note { font-size: .8rem; color: var(--muted); flex: 1; min-width: 200px; }
.qshape { display: flex; gap: 18px; flex-wrap: wrap; margin: 2px 0 14px; font-size: .86rem; }
.qshape div { color: var(--muted); }
.qshape b { color: var(--text); font-weight: 700; }
.qshape .tot b { color: var(--accent-deep); }
.ansrow .rlab { font-size: .88rem; }
.ansrow .rlab b { font-weight: 700; }

/* ---------- nagranie: sterowanie + podgląd ---------- */
.vidgrid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .vidgrid { grid-template-columns: 1fr; } }

.poster__frame--live { background: #000; }
.poster__frame--live video { width: 100%; height: 100%; object-fit: contain; display: block; }
.poster__frame--live::after { content: none; }

/* Podgląd nagrania pokazuje tę samą klatkę tytułową co panel kursanta —
   wcześniej był tu zielony gradient, więc te same nagrania wyglądały
   inaczej po obu stronach. */
.poster__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: #0e141d url(/assets/lekcja-klatka-ee821dcb58e7d8aef7fa0f4878ab5ba4b2f2bef193ff3732321011054b090e09.svg) center / cover no-repeat;
  display: grid; place-items: center;
}
.poster__frame::after {
  content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35);
}
.poster__play {
  position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 50%;
  border: 0; cursor: pointer; background: rgba(255, 255, 255, .92); color: #0f2a1e;
  font-size: 1.15rem; display: grid; place-items: center; padding-left: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.poster__play:hover { background: #fff; transform: scale(1.05); }
.poster__time {
  position: absolute; z-index: 1; right: 9px; bottom: 9px;
  background: rgba(0, 0, 0, .68); color: #fff; border-radius: 4px;
  font: 600 .72rem/1 var(--font-body); padding: 4px 6px; font-variant-numeric: tabular-nums;
}
.poster__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.22); }
.poster__bar i { display: block; height: 100%; background: var(--accent); }

.poster__info { margin-top: 10px; }
.poster__info b { display: block; font-size: .88rem; font-weight: 600; word-break: break-all; }
.poster__info span { font-size: .78rem; color: var(--muted); }

.poster--empty {
  aspect-ratio: 16 / 9; border: 1px dashed var(--border-strong, #cbd3dd); border-radius: 10px;
  background: var(--bg); display: grid; place-content: center; text-align: center; gap: 6px; padding: 18px;
}
.poster--empty .poster__ico { font-size: 1.4rem; color: var(--border-strong, #cbd3dd); }
.poster--empty .poster__t { font: 700 .92rem var(--font-head); }
.poster--empty .poster__d { font-size: .78rem; color: var(--muted); max-width: 30ch; margin: 0 auto; }

/* Processing loader: frosted-glass card floated over the title frame while Bunny encodes. */
.poster__glass {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px 26px; border-radius: 14px; text-align: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(9px) saturate(120%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .38);
}
.poster__glass .poster__d { font-size: .8rem; color: #fff; max-width: 26ch; margin: 0; }
.poster__glass--error { border-color: rgba(255, 180, 160, .5); background: rgba(120, 40, 30, .28); }
.poster__spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .poster__spin { animation: none; } }

/* ---------- edycja pytania w miejscu ---------- */
.qform--edit { padding: 14px 0 0; }
.qform--edit .fld { margin-bottom: 12px; }
.ansrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.ansrow input[type=radio] { width: 17px; height: 17px; flex: none; accent-color: var(--accent); }
.ansrow input[type=text] {
  flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; background: var(--surface); color: var(--text);
}
.ansrow input[type=text]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.qform .fld > span em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 6px; }

/* ---------- pasek akcji ----------
   Klasa .acts była używana w ośmiu miejscach i nie miała żadnej reguły, więc
   przyciski stały jeden przy drugim bez odstępu. */
.acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ⚠ Komorka akcji w tabeli MUSI zostac komorka. `display: flex` odbieral jej
   wysokosc wiersza (55 px w wierszu 65 px), wiec pod przyciskami zostawal pasek,
   w ktorym przeswitywalo tlo <tr> - podkreslenie pod kazdym wierszem, a na zoltym
   wierszu company admina zielony pasek hovera. Przyciski ustawia obok siebie
   inline-flex na dzieciach, nie flex na komorce. */
td.acts { display: table-cell; white-space: nowrap; }
td.acts > * { display: inline-flex; vertical-align: middle; }
td.acts > * + * { margin-left: 10px; }

/* ---------- wiersz edycji: rozwija sie, nie wyskakuje ----------
   Wysokosci formularza nie znamy z gory, wiec animuje sie `grid-template-rows`
   0fr -> 1fr. Zgadywany `max-height` konczylby ruch skokiem albo zostawialby
   dziure pod formularzem. Tresc siedzi w drugim <div>, bo to ON ma przycinac.
   ⚠ Stan DOMYSLNY jest rozwiniety, a animacja idzie OD zera - bez `forwards`.
   Odwrotnie (0fr + forwards) formularz zostawal niewidoczny wszedzie, gdzie
   animacje nie ida: karta w tle nie liczy klatek, wiec wiersz mial 0 px. */
.rowopen { display: grid; grid-template-rows: 1fr; animation: rowOpen .28s ease-out; }
.rowopen > * { overflow: hidden; animation: rowOpenIn .28s ease-out; }
@keyframes rowOpen { from { grid-template-rows: 0fr; } }
@keyframes rowOpenIn { from { opacity: 0; transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .rowopen, .rowopen > * { animation: none; }
}

/* ---------- komunikaty i listy warunków ----------
   Te klasy istniały tylko w arkuszu logowania, a używam ich też w formularzach
   panelu (nowy pracownik, nadanie subskrypcji) — tam komunikaty błędów nie miały
   żadnego stylu i renderowały się jako zwykły tekst. */
.alert {
  border-radius: 10px; padding: 14px 20px; font-size: .86rem;
  border: 1px solid; margin: 0 0 16px;
}
.box + .alert, .crumb2 + .alert { margin-top: 16px; }
.alert + .box { margin-top: 0; }
.alert-bad { background: var(--bad-soft); border-color: #edc7c7; color: #7a2020; }
.alert-warn { background: var(--warn-soft); border-color: #e8d089; color: var(--warn); }
.alert-ok { background: var(--ok-soft); border-color: var(--accent-mid); color: var(--ok); }

.rules { margin: 8px 0 0; padding-left: 0; list-style: none; font-size: .82rem; color: var(--muted); }
.rules li { display: flex; gap: 7px; align-items: flex-start; padding: 2px 0; }
.rules li::before { content: "○"; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.rules li.ok { color: var(--ok); }
.rules li.ok::before { content: "●"; color: var(--ok); }



/* akcje przy fakturze */
.fv-acts { display: inline-flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- company admin: pasek nad wierszem ----------
   ⚠ Te reguły były już raz i wyleciały, gdy wycinałem sąsiedni blok .ro-badge.
   Bez nich wiersz administratora nie był żółty. */
.people tr.admin-band td {
  background: var(--highlight); color: #3a2600;
  padding: 1px 12px; text-align: center; border-top: 0;
  font: 700 .64rem/1.5 var(--font-head); letter-spacing: .12em; text-transform: uppercase;
}
.people tr.is-admin td { background: #fffaeb; border-top: 0; }
.people tr.is-admin:hover td { background: #fff4d6; }
.people tr.is-admin .nm b { color: #6b4e00; }
.people tr.is-admin + tr td { border-top: 1px solid var(--border); }

.modal__box--sm { max-width: 470px; }
/* Formularze z tabelą pozycji potrzebują miejsca — przy 600 px przycisk „Dodaj"
   i kolumna „Usuń" wychodziły poza krawędź okna. */
.modal__box--lg { max-width: 1000px; }

/* Modal prezentacji dodatku: szerzej i wyzej, zeby zmiescic wideo + tresc bez
   scrolla; bez paska naglowka - zamyka „×" plywajacy albo klik w tlo. */
.modal__box--present { max-width: min(1180px, 95vw); max-height: 94vh; }
.modal__xfloat {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(16, 26, 43, .38); color: #fff; backdrop-filter: blur(3px);
  transition: background .15s ease;
}
.modal__xfloat:hover { background: rgba(16, 26, 43, .62); }
.modal__xfloat:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- zmiana subskrypcji czekająca na wprowadzenie ----------
   Ma się różnić od reszty ekranu, bo pokazuje stan, którego jeszcze nie ma
   w umowie. Zestawienie „teraz → po zmianie" czyta się w poziomie. */
/* ---------- pasek stanu subskrypcji ----------
   Pierwsza rzecz na zakładce: czy subskrypcja działa, ile kosztuje, kiedy się
   odnawia — i jedyny przycisk, który ten stan zmienia. */
.subbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid var(--accent-mid);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 16px;
}
.subbar__main { flex: 1 1 320px; min-width: 0; }
.subbar__main > b { display: block; font: 700 1rem/1.3 var(--font-head); color: var(--accent-deep); }
.subbar__main > span { display: block; font-size: .88rem; color: var(--text); margin-top: 3px; }
.subbar__main > span + span { color: var(--muted); font-size: .82rem; }
/* Dwie decyzje o subskrypcji stoją razem: rozszerzenie jako główna, zawieszenie
   jako wyjście awaryjne. Białe tło ginęło w zielonym pasku, więc „Zawieś" jest
   czerwony od razu — jasnym tłem, a pełną czerwień bierze pod kursorem. */
.subbar__acts { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }

/* Wybór opiekuna: lista obok przycisku, nie jedno pod drugim. */
/* Przełącznik konta w pasku — element makiety, więc ma wyglądać na doklejony:
   żółty jak plakietka „Makieta", a nie jak część panelu. */
.adm-asme {
  margin-right: 12px; max-width: 300px; padding: 6px 10px;
  border: 1px dashed var(--highlight-dark, #d9b430); border-radius: 8px;
  background: var(--highlight, #ffe27a); color: #1c211e;
  font: 600 .78rem var(--font-body); cursor: pointer;
}
@media (max-width: 860px) { .adm-asme { display: none; } }

.mgr-pick { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mgr-pick select { flex: 1 1 260px; min-width: 0; }
.pickrow.is-off { opacity: .5; }
.subbar__stop {
  background: var(--bad-soft, #fdecec); border-color: #e4b4b4;
  color: var(--bad, #a02020); font-weight: 600;
}
.subbar__stop:hover {
  background: var(--bad, #a02020); border-color: var(--bad, #a02020); color: #fff;
}

/* Pakiet ustalony, ale jeszcze nieuruchomiony — żółty, bo to stan przejściowy,
   nie awaria. */
.subbar--wait { background: var(--warn-soft, #fff6d9); border-color: var(--highlight-dark, #d9b430); }
.subbar--wait .subbar__main > b { color: #6d5200; }

.subbar--stop { background: var(--bad-soft, #fdecec); border-color: #edc7c7; }
.subbar--stop .subbar__main > b { color: var(--bad, #a02020); }

.draftbox { border-color: var(--accent-mid); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Prośba od firmy to nie to samo co zmiana ustalona przez nas — inny kolor
   ramki mówi, że po drugiej stronie ktoś czeka na odpowiedź. */
.draftbox--ask {
  border-color: var(--highlight-dark, #d9b430);
  box-shadow: 0 0 0 3px #fff6d9;
}
.dr-sum {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 13px 16px; margin-bottom: 14px;
}
@media (max-width: 760px) { .dr-sum { grid-template-columns: 1fr; } }
.dr-sum .k {
  display: block; font: 700 .66rem/1 var(--font-head); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.dr-sum .v { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .95rem; }
.dr-sum .v s { color: var(--muted); text-decoration-thickness: 1px; }
.dr-sum .v b { font: 600 1.05rem var(--font-body); }
.dr-sum .v .sub2 { display: block; width: 100%; margin-top: 2px; }
.dr-arrow { color: var(--accent); font-weight: 700; }
/* Kwota faktury to jedyna liczba, którą klient realnie zapłaci teraz —
   podkreślenie wyciąga ją przed pozostałe. */
.dr-inv {
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}
.dr-delta {
  display: inline-block; background: var(--accent-soft); color: var(--accent-dark);
  border-radius: 999px; padding: 2px 9px; font: 600 .78rem var(--font-body);
  white-space: nowrap;
}
/* Wiersze bez zmian mają zejść na drugi plan — liczy się to, co dochodzi. */
.tbl tr.is-dim td { color: var(--muted); }
.tbl tr.is-dim .cell-main b { font-weight: 500; }

/* subskrypcja zawieszona */
.lic-sub--stop {
  background: linear-gradient(150deg, var(--bad-soft), #fff 130%);
  border-color: #edc7c7;
}
.lic-sub--stop .k, .lic-sub--stop .kind { color: var(--bad); }
.lic-sub--stop .row2 { border-top-color: #edc7c7; }

/* ---------- przycisk operacji nieodwracalnej - D1: obrys czerwieni ---------- */
.btn.btn-danger {
  background: transparent; border-color: var(--btn-danger-line); color: var(--btn-danger-ink);
  box-shadow: none;
}
.btn.btn-danger:hover { background: var(--btn-danger-hover); border-color: var(--bad); color: var(--bad); transform: none; }

/* ---------- pasek wartości (meter) — JEDEN styl w calej aplikacji ----------
   Obwodka + wypelnienie gradientem + procent wysrodkowany nad paskiem. Rozmiar
   zmienia modyfikator, styl zostaje ten sam (shared/_meter). */
.meter {
  position: relative; height: 20px; width: 100%; max-width: 200px;
  border-radius: 6px; background: var(--bg); border: 1px solid var(--border);
  overflow: hidden;
}
.meter i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  transition: width .3s ease;
}
.meter__n {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 .72rem/1 var(--font-head); color: var(--text);
  text-shadow: 0 0 3px rgba(255, 255, 255, .85);
}
/* Rozmiary */
.meter--sm { height: 18px; max-width: 120px; }
.meter--wide { max-width: 320px; }
/* Tony wypelnienia */
.meter--low i  { background: var(--accent-mid); }
.meter--done i { background: var(--ok); }
.meter--late i { background: linear-gradient(90deg, var(--warn-dark, #b57500), var(--highlight-dark)); }

/* ---------- faktury od AssetLife ---------- */
.ktag {
  display: inline-block; padding: 3px 8px; border-radius: 5px;
  font: 700 .68rem/1.3 var(--font-head); letter-spacing: .04em;
  background: var(--bg); color: var(--muted); border: 1px solid var(--border); white-space: nowrap;
}
.ktag--com { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-mid); }
.ktag--open { background: #fdf6e3; color: #8a6100; border-color: #e8d9a8; }
table.tbl tr.is-open-period td { background: #fffdf6; }

.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 700px) { .split2 { grid-template-columns: 1fr; } }
.split2 .sp { background: var(--bg); border-radius: 8px; padding: 13px 16px; }
.split2 .sp .k {
  display: block; font: 700 .66rem/1 var(--font-head); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.split2 .sp b { font: 900 1.15rem/1 var(--font-head); letter-spacing: -.02em; }

.mini-tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.mini-tbl th {
  font: 700 .64rem/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 0 10px 8px 0; white-space: nowrap;
}
.mini-tbl td { padding: 7px 10px 7px 0; border-top: 1px solid var(--border); }
.mini-tbl td.num, .mini-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mini-tbl tfoot td { border-top: 2px solid var(--border); }
.mini-tbl .muted { color: var(--muted); }

/* ---------- dwie podstawy rozliczenia: co wygrało ---------- */
.basis { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 700px) { .basis { grid-template-columns: 1fr; } }
.basis .b {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px;
}
.basis .b .k {
  display: block; font: 700 .66rem/1.3 var(--font-head); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.basis .b b { font: 900 1.2rem/1 var(--font-head); letter-spacing: -.02em; display: block; }
.basis .b.basis--win { border-color: var(--accent); background: var(--accent-soft); }
.basis .b.basis--win b { color: var(--accent-dark); }
.basis .bvs {
  display: grid; place-items: center; font: 700 .64rem/1.3 var(--font-head);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 2px; text-align: center;
}

/* ---------- warunki subskrypcji AssetLife na górze ---------- */
.terms { border-color: var(--accent-mid); }
.terms__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 860px) { .terms__grid { grid-template-columns: repeat(2, 1fr); } }
.terms__grid .t { background: var(--accent-soft); border-radius: 8px; padding: 13px 16px; }
.terms__grid .t .k {
  display: block; font: 700 .66rem/1.3 var(--font-head); letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-dark); margin-bottom: 6px;
}
.terms__grid .t b { font: 900 1.4rem/1 var(--font-head); letter-spacing: -.02em; display: block; }

/* ---------- podgląd naszej faktury nad listą ---------- */
.doc-preview {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 18px;
}

/* Nagłówek miesiąca: trzyma parę faktur (abonament + prowizja) razem. */
table.tbl tr.mrow td {
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 9px 14px;
}
table.tbl tr.mrow:hover td { background: var(--bg); }
table.tbl tr.mrow b {
  font: 700 .74rem/1.2 var(--font-head); letter-spacing: .06em; text-transform: uppercase;
}
table.tbl tr.mrow span { color: var(--muted); font-size: .78rem; margin-left: 10px; }

/* ================= POSTĘPY UCZESTNIKÓW ================= */

.tile.w3 { grid-column: span 3; }
@media (max-width: 1100px) { .tile.w3 { grid-column: span 6; } }
.tile.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tile.is-on .cap { color: var(--accent-dark); }

/* Pasek filtrów nad tabelą: filtry, szukajka, licznik. Jeden rząd, jak w planie. */
.filterbar-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
/* Ramka filtrow bierze cala szerokosc, zeby szukanie w srodku sie rozciagnelo. */
.filterbar-row > .filterbar { flex: 1 1 auto; min-width: 0; }
.filterbar-row > .filterbar > .ffield { width: 100%; }
.filterbar-row .srch {
  flex: 0 1 260px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  font: 400 .88rem var(--font-body); background: #fff; color: var(--text);
}
.filterbar-row .srch:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.filterbar-row .cnt-lab { color: var(--muted); font-size: .84rem; }

/* Sortowanie: strzałka pojawia się tylko na aktywnej kolumnie. */
table.tbl th.srt { cursor: pointer; user-select: none; }
table.tbl th.srt:hover { color: var(--text); }
table.tbl th.srt i { font-style: normal; font-size: .62rem; margin-left: 5px; }
table.tbl th.srt.is-on { color: var(--accent-dark); }
table.tbl.tbl--people tbody tr { cursor: pointer; }
table.tbl td.nowrap { white-space: nowrap; }

/* Postęp osoby: ile lekcji z ilu. Jedna seria, jeden odcień. */
.lp {
  display: inline-block; vertical-align: middle; width: 68px; height: 7px;
  border-radius: 4px; background: var(--bg); overflow: hidden;
  border: 1px solid var(--border);
}
.lp i { display: block; height: 100%; background: var(--accent); }
.lp-n { margin-left: 8px; font-variant-numeric: tabular-nums; font-size: .84rem; }

/* „Co dalej" — kolor nigdy sam: zawsze znak plus słowa. */
.risk {
  display: inline-flex; align-items: center; gap: 7px; font-size: .82rem;
  padding: 4px 9px 4px 6px; border-radius: 6px; border: 1px solid transparent;
}
.risk i {
  font-style: normal; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; font: 700 .68rem/1 var(--font-head); flex: none;
}
.risk--bad { background: var(--bad-soft); border-color: #edc7c7; color: #7a2020; }
.risk--bad i { background: var(--bad); color: #fff; }
.risk--warn { background: var(--warn-soft); border-color: #e8d089; color: #6d5200; }
.risk--warn i { background: var(--warn); color: #fff; }
.risk--ok { color: var(--muted); }
.risk--ok i { background: var(--ok-soft); color: var(--ok); }

/* Wybór kursu w lejku */
.picks { display: flex; gap: 10px; flex-wrap: wrap; }
.picks .pick {
  text-align: left; background: var(--bg); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 14px; cursor: pointer;
  font: 600 .88rem var(--font-body); color: var(--text);
}
.picks .pick span { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; margin-top: 3px; }
.picks .pick:hover { border-color: var(--accent-mid); }
.picks .pick.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }

/* Lejek lekcji: jaśniejsza część to „doszło", ciemniejsza „zaliczyło".
   Dwa odcienie jednego koloru, z opisem obok — bez legendy. */
td.fn { min-width: 240px; }
.fnbar {
  position: relative; height: 16px; border-radius: 5px; background: var(--bg);
  border: 1px solid var(--border); overflow: hidden;
}
.fnbar i { position: absolute; top: 0; bottom: 0; left: 0; display: block; }
.fnbar i.reach { background: var(--accent-soft); border-right: 2px solid #fff; }
.fnbar i.pass { background: var(--accent); }
.fn-lab { display: block; margin-top: 5px; font-size: .78rem; color: var(--muted); }
.fn-lab b { color: var(--text); }
.dn { color: var(--bad); font-variant-numeric: tabular-nums; }
table.tbl td.is-hot { color: var(--bad); font-weight: 700; }

/* Skuteczność pytania */
.rate {
  display: inline-block; padding: 3px 8px; border-radius: 5px; font-weight: 700;
  font-variant-numeric: tabular-nums; background: var(--bg);
}
.rate--bad { background: var(--bad-soft); color: #7a2020; }

.mini-h {
  font: 700 .72rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 20px 0 12px;
}
.qstat { display: grid; gap: 10px; }
.qs { border: 1px solid var(--border); border-radius: 9px; padding: 11px 14px; background: #fff; }
.qs.is-bad { border-color: #edc7c7; background: #fffafa; }
.qs-t { font-size: .88rem; display: flex; gap: 8px; align-items: baseline; }
.qs-t .ktag { flex: none; }
.qs-b { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.qsbar {
  flex: 1; height: 7px; border-radius: 4px; background: var(--bg);
  border: 1px solid var(--border); overflow: hidden; max-width: 320px;
}
.qsbar i { display: block; height: 100%; background: var(--accent); }
.qs.is-bad .qsbar i { background: var(--bad); }
.qs-n { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ================= RAPORT ZGODNOŚCI ================= */

.rep .rep-head {
  display: flex; align-items: flex-start; gap: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.rep .rep-title { font: 700 1.15rem/1.25 var(--font-head); margin: 0 0 4px; letter-spacing: 0;
  text-transform: none; color: var(--text); }
.rep .rep-sub { margin: 0; color: var(--muted); font-size: .86rem; }
.rep .rep-by { margin-left: auto; text-align: right; font-size: .84rem; }
.rep .rep-by b { display: block; font: 700 .92rem var(--font-head); }
.rep .rep-by span { color: var(--muted); }
.rep .rep-meta { margin-bottom: 18px; }

/* Jeden pasek na cały raport: zaliczone, w trakcie, resztа to niezaczęte.
   Kolor nigdy sam — pod paskiem podpisy z liczbami. */
.repbar {
  display: flex; height: 20px; border-radius: 6px; overflow: hidden;
  background: var(--bad-soft); border: 1px solid var(--border);
}
.repbar i { display: block; height: 100%; }
.repbar i.a { background: var(--accent); }
.repbar i.b { background: var(--accent-soft); border-left: 2px solid #fff; }
.repbar-lab { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; font-size: .82rem; color: var(--muted); }
.repbar-lab b { color: var(--text); }
.repbar-lab i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; }
.repbar-lab i.k-a { background: var(--accent); }
.repbar-lab i.k-b { background: var(--accent-soft); border: 1px solid var(--accent-mid); }
.repbar-lab i.k-c { background: var(--bad-soft); border: 1px solid #edc7c7; }

/* Stan w liście imiennej: słowo, nie sam kolor. */
.rstate { display: inline-block; padding: 3px 9px; border-radius: 5px; font-size: .8rem; font-weight: 600; }
.rstate--ok { background: var(--ok-soft); color: var(--ok); }
.rstate--warn { background: var(--warn-soft); color: #6d5200; }
.rstate--bad { background: var(--bad-soft); color: #7a2020; }
/* Lekcja jeszcze nietknięta — szara, żeby nie krzyczała jak stan wymagający reakcji. */
.rstate--idle { background: var(--bg); color: var(--muted); }

/* ---------- historia decyzji o pakiecie ---------- */
.dec-list { display: grid; gap: 10px; }
.dec {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px;
  padding: 12px 14px; border-radius: 9px; border: 1px solid var(--border); background: #fff;
}
.dec-ic {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .82rem/1 var(--font-head);
}
.dec--ok { border-color: var(--accent-mid); background: var(--ok-soft); }
.dec--ok .dec-ic { background: var(--accent); color: #fff; }
.dec--no { border-color: #edc7c7; background: var(--bad-soft); }
.dec--no .dec-ic { background: var(--bad); color: #fff; }
.dec-b b { display: block; font: 600 .95rem/1.3 var(--font-body); }
.dec-b span { display: block; color: var(--muted); font-size: .82rem; margin-top: 3px; }
.dec-b .dec-why { color: var(--text); margin-top: 7px; }

table.tbl tbody tr.is-picked td { background: var(--accent-soft); }
.repnote { color: var(--muted); font-size: .8rem; line-height: 1.6; margin: 16px 0 0; max-width: 82ch; }

/* Na papier idzie sam raport: bez panelu, bez przycisków, bez tła. */
@media print {
  .adm-top, .adm-side, .adm-flag, .no-print, .toast, .picks,
  .tabs, .crumb2, .filterbar-row, .adm-head .acts { display: none !important; }
  .adm-main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  body { background: #fff; }
  .box { border: 0; padding: 0 0 18px; break-inside: avoid; }
  .box + .box { margin-top: 18px; }
  .tbl-scroll { overflow: visible; }
  table.tbl { font-size: 9pt; }
  table.tbl thead th { background: #f2f4f3; }
  .tbl-foot { background: #fff; padding-left: 0; padding-right: 0; }
  .adm-head { margin-bottom: 12px; }
  a[href]::after { content: ""; }
  @page { size: A4 portrait; margin: 14mm; }
}

/* Szukajka w pasku nagłówka pudełka — przy 500 firmach to jedyne wejście do listy. */
.boxhead .acts .srch {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  font: 400 .88rem var(--font-body); background: #fff; color: var(--text);
  width: 260px; min-width: 0;
}
.boxhead .acts .srch:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.hot { color: var(--bad); font-weight: 700; }

/* Lista wyboru zamiast systemowej (app/javascript/dropdowns.js). Rysunek
   przeglądarki dla rozwiniętego <select> jest jedyną częścią panelu, której nie
   ustawiamy my — węższą od pola i w czcionce systemu. Ta otwiera się na całą
   szerokość pola i nosi kolory panelu. */
.drop { position: relative; }
.drop__native { display: none; }

.drop__btn {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; text-align: left; background: var(--surface); color: var(--text);
  cursor: pointer;
}
.drop__btn:hover { border-color: var(--accent); }
.drop__btn:focus-visible { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.drop__btn[disabled] { cursor: not-allowed; opacity: .6; }
.drop__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.drop__arrow {
  flex: none; width: 8px; height: 8px; margin-right: 2px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
}
.drop__btn[aria-expanded="true"] .drop__arrow { transform: translateY(2px) rotate(-135deg); }
.drop__btn[aria-expanded="true"] { border-color: var(--accent); }

/* Pozycję i szerokość ustawia skrypt — lista musi wyjść poza każde przewijane
   pudełko, w którym stoi pole. `fixed` już w CSS: skrypt mierzy pole zaraz po
   pokazaniu listy, a lista w przepływie poszerza wąski (inline) dropdown
   i przesuwa pole, więc pomiar lądował obok przycisku. */
.drop__list {
  position: fixed; z-index: 60; margin: 0; padding: 5px; list-style: none; background: #fff;
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
  overflow-y: auto; overscroll-behavior: contain;
}
.drop__opt {
  display: flex; align-items: center; min-height: 40px; padding: 8px 10px;
  border-radius: 7px; font-size: .9rem; cursor: pointer;
}
.drop__opt:hover, .drop__opt.is-active { background: var(--accent-soft); }
.drop__opt.is-cur { font-weight: 600; color: var(--accent-dark); }

@media (pointer: coarse) {
  .drop__opt { min-height: 46px; }
}

/* Pole z podpowiedziami (combobox) — dla wyboru jednego rekordu z długiej listy. */
.combo { position: relative; max-width: 420px; }
.combo-field {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--border); border-radius: 9px; padding: 0 10px;
}
.combo-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.combo-ic { color: var(--muted); flex: none; }
/* Ramkę i podświetlenie rysuje otoczka .combo-field, nie samo pole. Bez tego
   reguły input:focus z V1 dorysowują drugą ramkę w środku pierwszej. */
.combo-field input,
.combo-field input:focus,
.combo-field input:hover {
  flex: 1; width: auto; min-width: 0; border: 0; outline: 0; box-shadow: none;
  background: none; padding: 10px 0;
  font: 400 .92rem var(--font-body); color: var(--text);
}
.combo-x {
  border: 0; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1;
  cursor: pointer; padding: 2px 4px; border-radius: 5px;
}
.combo-x:hover { background: var(--bg); color: var(--text); }
.combo-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 5px);
  margin: 0; padding: 5px; list-style: none; background: #fff;
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
  max-height: 320px; overflow-y: auto;
}
.combo-list li[data-id] { padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.combo-list li[data-id] b { display: block; font-weight: 600; font-size: .9rem; }
.combo-list li[data-id] span { color: var(--muted); font-size: .78rem; }
.combo-list li.is-active, .combo-list li[data-id]:hover { background: var(--accent-soft); }
.combo-list li.is-cur b { color: var(--accent-dark); }
.combo-more { padding: 8px 10px; color: var(--muted); font-size: .8rem; }

/* Zaznaczenie w filtrach musi być widoczne bez wpatrywania się: kolor marki
   na samym haczyku, mocniejsza nazwa i pasek przy krawędzi. */
.fopt input {
  margin: 0; width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer;
}
.fopt { border-left: 3px solid transparent; }
.fopt:has(input:checked) { border-left-color: var(--accent); }
.fopt:has(input:checked) .l b { color: var(--accent-dark); font-weight: 700; }
/* Wybrane widać też przy zamkniętym menu. */
.fsummary { color: var(--accent-dark); font-size: .84rem; font-weight: 600; }

/* Dopisek w nagłówku kolumny: mówi, od czego liczony jest słupek. */
.thsub {
  display: block; margin-top: 3px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--muted); font-size: .7rem;
}

/* Wybor kursu w modalu „Dodaj do kursu" (coursepick). Pole szukania korzysta
   z .combo-field; reszta to lista wierszy z wersja, wolnymi slotami i stanem
   „juz w kursie" na szaro. Wszystko na tokenach marki - panel jest whitelabel. */
.cpick { display: grid; gap: 8px; }
.cpick__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 2px;
}
.cpick__count {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.cpick__scroll { font-size: .72rem; color: var(--muted); }

.cpick__list {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden auto;
  max-height: 260px; background: #fff;
}
/* Wiersz to <button> - kasujemy jego domyslny wyglad do zera. */
.cpick__opt {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--border); background: #fff;
  padding: 11px 13px; font: inherit; color: var(--text); cursor: pointer;
}
.cpick__opt:last-child { border-bottom: 0; }
.cpick__opt:hover:not(.is-disabled) { background: var(--accent-soft); }
.cpick__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cpick__opt.is-selected { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }

.cpick__radio {
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--border); display: grid; place-items: center;
}
.cpick__opt.is-selected .cpick__radio { border-color: var(--accent); }
.cpick__opt.is-selected .cpick__radio::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}

.cpick__main { flex: 1; min-width: 0; }
.cpick__title { display: flex; align-items: center; gap: 8px; }
.cpick__name {
  font-weight: 600; font-size: .92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cpick__ver {
  flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  color: var(--muted); background: var(--bg); border: 1px solid var(--border);
  padding: 2px 6px; border-radius: 5px; font-variant-numeric: tabular-nums;
}
.cpick__meta { display: block; margin-top: 2px; font-size: .78rem; color: var(--muted); }
.cpick__free { color: var(--accent-dark); font-weight: 600; }
.cpick__warn { color: var(--warn); font-weight: 600; }

.cpick__badge {
  flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  color: var(--muted); background: var(--bg); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}

/* Juz przypisany albo bez wolnych slotow: zostaje widoczny, ale wyszarzony
   i nieklikalny (button[disabled]). */
.cpick__opt.is-disabled { cursor: default; }
.cpick__opt.is-disabled .cpick__name { color: var(--muted); }
.cpick__opt.is-disabled .cpick__radio { opacity: .4; }
.cpick__opt.is-in { background: var(--bg); }

.cpick__empty { margin: 0; padding: 22px 14px; text-align: center; color: var(--muted); font-size: .85rem; }
/* Granica odcinka „doszło" musi być widoczna także wtedy, gdy zdali wszyscy —
   bez niej słupek wygląda jak jeden ciemny pasek o dziwnej długości. */
.fnbar i.reach { background: var(--accent-soft); box-shadow: inset -2px 0 0 var(--accent-mid); }

/* Linia kontekstu nad statystykami: liczby kursu, od których liczą się słupki. */
/* Linia kontekstu to zdanie, nie kafel — w ramce udawała trzeci rodzaj pudełka. */
.ctxline { margin: 14px 2px 0; font-size: .86rem; color: var(--muted); line-height: 1.6; }
.ctxline b { color: var(--text); font-weight: 700; }

/* Krzyżyk musi mieć wygodny cel kliknięcia i nie może wyglądać na dekorację. */
.combo-x {
  border: 0; background: none; color: var(--muted); font-size: 1.15rem; line-height: 1;
  cursor: pointer; padding: 6px 8px; border-radius: 6px; flex: none;
}
.combo-x:hover { background: var(--bad-soft); color: var(--bad); }
.combo-field input { cursor: text; }

/* ================= HISTORIA FIRMY ================= */
.hday {
  font: 700 .68rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 16px 0 8px; border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.hday:first-child { padding-top: 0; }
.hrow {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: start;
  padding: 9px 4px; border-radius: 7px;
}
.hrow:hover { background: var(--bg); }
.hic {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .72rem/1 var(--font-head); background: var(--bg); color: var(--muted);
}
.hrow--ok .hic { background: var(--ok-soft); color: var(--ok); }
.hrow--bad .hic { background: var(--bad-soft); color: var(--bad); }
.hrow--warn .hic { background: var(--warn-soft); color: var(--warn); }
.hbody b { display: block; font: 600 .88rem/1.3 var(--font-body); }
.hbody span { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.hwho { color: var(--muted); font-size: .8rem; white-space: nowrap; padding-top: 2px; }

/* Tor zdarzenia przy wierszu logu. Kolor rozdziela dwa tory od jednego
   spojrzenia; oba sa spokojne, bo tor to KATEGORIA, a nie ocena - zieleń
   sukcesu i czerwień awarii mówiłyby tu coś, czego nie ma. */
.chip--track { margin-top: 1px; }
.chip--track-konto { background: #e8eef7; color: #3b5b86; }
.chip--track-nauka { background: var(--accent-soft); color: var(--accent-dark); }

/* Na wąskim ekranie tor schodzi pod treść i staje przy jej lewej krawędzi -
   trzecia kolumna nie ma się gdzie zmieścić, a przyklejona do prawej wisiała
   sama nad pustym miejscem. */
@media (max-width: 620px) {
  .hrow { grid-template-columns: 26px minmax(0, 1fr); row-gap: 6px; }
  .hrow .chip--track { grid-column: 2; justify-self: start; }
}

/* ================= PANEL KLIENTA ================= */

.adm-main--narrow { max-width: 940px; }

/* Wybór osoby w makiecie */
.picklist { display: grid; gap: 8px; }
.pickrow {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: #fff; border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 12px; cursor: pointer; color: var(--text); font: inherit;
}
.pickrow:hover { border-color: var(--accent); background: var(--accent-soft); }
.pickrow.is-on { border-color: var(--accent); background: var(--accent-soft); }
.pickrow .av {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font: 700 .74rem var(--font-head); flex: none;
}
.pickrow .t { min-width: 0; }
.pickrow .t b { display: block; font: 600 .92rem/1.35 var(--font-body); }
.pickrow .t span {
  display: block; margin-top: 3px; color: var(--muted);
  font: 400 .82rem/1.45 var(--font-body);
}

/* Wariant z checkboxem: wybór kilku kursów do pakietu i przypisania grupowe.
   Natywny checkbox rysuje się inaczej w każdym systemie i siada w innym
   miejscu linii, więc rysujemy własny — kwadrat z ramką i ptaszkiem. */
.pickrow input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0; cursor: pointer;
  border: 1.5px solid var(--border-strong, #cbd3dd); border-radius: 5px;
  background: #fff; position: relative;
  transition: border-color .14s ease, background-color .14s ease;
}
.pickrow input[type="checkbox"]:hover { border-color: var(--accent); }
.pickrow input[type="checkbox"]:checked {
  background: var(--accent); border-color: var(--accent);
}
/* Ptaszek: dwie kreski złożone w znacznik, obrócone o 45 stopni. */
.pickrow input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.pickrow input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent-dark); outline-offset: 2px;
}
/* Zablokowany checkbox NIE gubi stanu zaznaczenia. Wczesniej `:disabled`
   nadpisywal `:checked` i wypelniony kwadrat robil sie pusty - ostatni
   administrator wygladal, jakby roli nie mial. Teraz:
   - zaznaczony + zablokowany zostaje wypelniony, tylko przygaszony (to jest ON,
     ale nie da sie go ruszyc),
   - odznaczony + zablokowany to zwykly wyszarzony pusty kwadrat. */
.pickrow input[type="checkbox"]:disabled { cursor: default; }
.pickrow input[type="checkbox"]:disabled:not(:checked) {
  background: var(--bg); border-color: var(--border);
}
.pickrow input[type="checkbox"]:disabled:checked {
  background: var(--accent); border-color: var(--accent); opacity: .5;
}
.pickrow > .t { font: 600 .9rem var(--font-body); }
.pickrow > .d { color: var(--muted); font-size: .78rem; margin-left: auto; text-align: right; }

/* Opcja z opisem na całe zdanie: checkbox po lewej, obok niego nazwa, a pod
   nazwą opis. Bez tego wariantu opis leci po prawej stronie wiersza (dobre dla
   krótkich dopisków w rodzaju „12 wolnych slotów", złe dla zdania).
   Wyrównanie do góry, bo tekst bywa dwuwierszowy. */
.pickrow.pickrow--stack { align-items: flex-start; padding: 12px 14px; }
.pickrow.pickrow--stack > input[type="checkbox"] { margin-top: 2px; }
/* Wariant z radiem (jeden stan z trzech, np. stan pozycji sklepu): natywne
   kolko w kolorze akcentu, wyrownane do pierwszej linii tekstu. */
.pickrow input[type="radio"] { width: 18px; height: 18px; flex: none; margin: 0; cursor: pointer; accent-color: var(--accent); }
.pickrow.pickrow--stack > input[type="radio"] { margin-top: 2px; }
.pickrow:has(input[type="radio"]:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pickrow.pickrow--stack > .t { flex: 1 1 auto; min-width: 0; }

/* ---------- wybór jednej opcji (.choice) w panelu ----------
   `button.choice` dostaje pełną szerokość dopiero w v2.css, a ten arkusz
   wchodzi tylko na logowaniu — w panelu przyciski były więc szerokie na tyle,
   ile miały tekstu, i lista wyglądała jak schodki. Do tego wybór poznawało się
   wyłącznie po kolorze ramki; teraz z lewej stoi kropka, tak jak w zwykłym
   radiu, więc widać go też bez patrzenia na kolory. */
.adm .choice {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 3px 12px;
  width: 100%; text-align: left; font: inherit; color: inherit;
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--border); border-radius: 9px;
  background: #fff; padding: 13px 15px; cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.adm .choice + .choice { margin-top: 8px; }

/* Kropka wyboru — pierwsza kolumna siatki, przez oba wiersze. */
.adm .choice::before {
  content: ""; grid-row: 1 / span 2; grid-column: 1;
  width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  border: 2px solid var(--border-strong, #cbd3dd); background: #fff;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.adm .choice:hover { border-color: var(--accent); background: var(--accent-soft); }
.adm .choice:hover::before { border-color: var(--accent); }
.adm .choice[data-selected="true"] {
  border-color: var(--accent); background: var(--accent-soft); box-shadow: none;
}
.adm .choice[data-selected="true"]::before {
  border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 3px #fff;
}
.adm .choice:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }

.adm .choice .t {
  grid-column: 2; display: block; font: 600 .9rem/1.35 var(--font-body); margin: 0;
}
.adm .choice .d {
  grid-column: 2; color: var(--muted); font-size: .82rem; line-height: 1.45; margin: 0;
}
.adm .choice .d:empty { display: none; }

/* Nagłówek nad grupą opcji — ma odstawać od tego, co nad nim. */
.adm .choice-group { margin-top: 4px; }
/* ⚠ Ta reguła dotyczy WYŁĄCZNIE nagłówka grupy. Opcje w środku też bywają
   etykietami (`label.pickrow`), a `display: block` z dwoma klasami bił ich
   `display: flex` — checkbox i opis lądowały wtedy jeden pod drugim, sklejone
   z nazwą. */
.adm .choice-group > label:not(.pickrow):not(.choice) {
  display: block; font: 600 .82rem var(--font-body); color: var(--text); margin-bottom: 8px;
}
.pickrow:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.picklist--tight .pickrow { padding: 8px 10px; }
/* AS-0058: przelacznik Kursy | Materialy nad tablica produktow sklepu. */
.kind-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.kind-switch__tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 9px;
  font-weight: 600; font-size: .9rem; color: var(--muted); text-decoration: none; }
.kind-switch__tab:hover { color: var(--text); background: var(--bg); }
.kind-switch__tab.is-on { background: var(--accent-soft); color: var(--accent-deep, var(--accent)); }
/* AS-0058: wybor typu produktu - kafle sa linkami, bez podkreslen. */
.picklist--kinds a.pickrow, .picklist--kinds a.pickrow:hover { text-decoration: none; color: inherit; }

/* Picker rol (Administrator / Opiekun): zaznaczenie ma pokazywac SAM checkbox,
   nie malowac calego prostokata na zielono. Hover zostaje, ale delikatny -
   ramka, nie zielone tlo. Wybor kursow (inne .pickrow) trzyma stary wyglad. */
.choice-group .pickrow:hover {
  border-color: var(--border-strong, #cbd3dd);
  background: var(--bg);
}
.choice-group .pickrow.is-on,
.choice-group .pickrow:has(input:checked) {
  border-color: var(--border);
  background: #fff;
}

/* ---------- tablica lekcji: do zrobienia / w trakcie / skończone ---------- */
.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 1000px) { .lanes { grid-template-columns: 1fr; } }
.lane {
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; display: grid; gap: 10px; align-content: start;
}
.lane > header { display: flex; align-items: center; gap: 10px; }
.lane > header h2 {
  margin: 0; font: 700 .72rem/1 var(--font-head); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-deep);
}
.lane > header .cnt {
  margin-left: auto; font: 700 .74rem var(--font-head); color: var(--muted);
  background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
}
.lane--doing { background: #fffdf5; border-color: #e8d089; }
.lane--done { background: var(--ok-soft); border-color: var(--accent-mid); }
.lane-empty { margin: 0; color: var(--muted); font-size: .82rem; padding: 8px 2px 12px; }

.lcard {
  position: relative; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 13px 14px 12px; box-shadow: 0 1px 2px rgba(0, 42, 23, .04);
}
.lcard h3 { margin: 0 0 4px; font: 600 .94rem/1.35 var(--font-body); padding-right: 26px; }
.lcard .lnum {
  position: absolute; top: 12px; right: 12px; font: 700 .72rem var(--font-head);
  color: var(--muted); background: var(--bg); border-radius: 6px; padding: 2px 7px;
}
.lcard .lmeta { margin: 0 0 10px; color: var(--muted); font-size: .78rem; }
.lcard .lfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .8rem; }
.lcard .lfoot .btn { margin-left: auto; }
.lcard .lfoot .ok { color: var(--ok); font-weight: 600; }
.lcard .lfoot .bad { color: var(--bad); font-weight: 600; }
.lcard .lfoot .warn { color: #6d5200; font-weight: 600; }
/* Zamknięty materiał: informacja, nie przycisk — nie ma tu czego kliknąć. */
.lcard .lfoot .lfoot-done {
  margin-left: auto; color: var(--muted); font-size: .76rem;
  border: 1px dashed var(--border); border-radius: 999px; padding: 3px 10px;
}
.lcard--done { border-color: var(--accent-mid); }
/* Lekcja z oblanym testem siedzi w kolumnie „W trakcie", więc na żółtym tle
   niczym się nie wyróżniała. Różowe tło z palety mówi, że coś poszło nie tak,
   zanim ktokolwiek przeczyta napis pod spodem. */
.lcard--failed { background: var(--bad-soft); border-color: #edc7c7; }

/* ---------- lekcje jednej osoby w rozwiniętym wierszu ----------
   Siatka o stałych kolumnach, żeby liczby stały pod sobą i dało się przebiec
   wzrokiem w dół: która lekcja zatrzymała, ile razy ktoś do niej wracał. */
.lsn-list {
  margin: 10px 0 2px; border: 1px solid var(--border); border-radius: 9px;
  background: #fff; overflow: hidden;
}
.lsn-head, .lsn-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 100px 90px 110px;
  gap: 10px 14px; padding: 9px 14px; align-items: center;
}
.lsn-head {
  background: var(--bg); border-bottom: 1px solid var(--border);
  font: 700 .66rem/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.lsn-row + .lsn-row { border-top: 1px solid var(--border); }
.lsn-row { font-size: .86rem; }
.lsn-t { min-width: 0; overflow-wrap: anywhere; }
.lsn-t b { color: var(--muted); font-weight: 600; margin-right: 4px; }
.lsn-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.lsn-row .sub2 { display: block; font-size: .72rem; }
.lsn-ok { color: var(--accent-dark); }
.lsn-bad { color: var(--bad); }
@media (max-width: 720px) {
  .lsn-head { display: none; }
  .lsn-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .lsn-row .num { text-align: left; }
}
.lcard--doing { border-color: #e8d089; }

/* ---------- lekcja: nagranie ---------- */
.lesson .lesson-h { margin: 4px 0 6px; font: 800 1.5rem/1.25 var(--font-head); letter-spacing: -.01em; }
.lesson .lesson-lead { margin: 0; color: var(--muted); font-size: .92rem; max-width: 70ch; }
/* ---------- odtwarzacz lekcji ----------
   Odwzorowanie z prezentacji: klatka tytułowa nagrania, przyciemnienie pod
   białym przyciskiem play i pasek postępu na dole. Wcześniej było tu czarne
   pole z napisem — wyglądało jak brakująca grafika, a nie jak nagranie. */
.player {
  position: relative; aspect-ratio: 16 / 9; background: #05100e; border-radius: 10px;
  overflow: hidden; margin-top: 18px; display: grid; place-items: center;
}
.player .frame {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Przyciemnienie daje kontrast białej ikonie; na czas odtwarzania znika.
   ⚠ `pointer-events: none` - inaczej ta nakladka (inset:0) lezy NAD <video>
   i lapie klikniecia w natywny przycisk play, wiec film sie nie odtwarzal. */
.player::after {
  content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35);
  transition: opacity .3s ease; pointer-events: none;
}
.player.is-playing::after { opacity: 0; }
.player .play, .player .tick, .player .stamp { position: relative; z-index: 2; }
.player .play {
  width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); display: grid; place-items: center;
  transition: transform .14s ease, background-color .14s ease;
}
.player .play:hover { background: #fff; transform: scale(1.06); }
.player .play svg { margin-left: 4px; }
.player .tick {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(255, 255, 255, .22);
}
.player .tick i { display: block; height: 100%; width: 0; background: var(--accent); }
.player .stamp {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 6px;
  color: #fff; text-align: center; padding: 20px; background: rgba(2, 16, 13, .72);
}
.player .stamp b { font: 700 1rem var(--font-head); }
.player .stamp span { color: rgba(255, 255, 255, .7); font-size: .8rem; }

/* AS-0011: presence check over the player - provider palette via tokens. */
.presence {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px;
  background: rgba(10, 12, 18, .8); backdrop-filter: blur(6px);
}
.presence__card {
  display: grid; gap: 12px; justify-items: center; text-align: center;
  width: min(420px, 100%); box-sizing: border-box; padding: 28px 28px 24px;
  background: var(--surface); color: var(--text); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.presence__icon {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-dark);
}
.presence__card b { font: 700 1.25rem var(--font-head); }
.presence__card > span:not([class]) { color: var(--muted); font-size: .92rem; line-height: 1.5; }
.presence__card .btn { width: 100%; justify-content: center; margin-top: 4px; }
.presence__timer { width: 100%; height: 4px; border-radius: 2px; background: var(--accent-mid); overflow: hidden; }
.presence__timer i { display: block; height: 100%; width: 100%; background: var(--accent); transition: width 1s linear; }
@media (max-width: 560px) {
  .presence__card { padding: 16px; gap: 8px; }
  .presence__icon { display: none; }
  .presence__card > span:not([class]) { font-size: .8rem; }
}

.player-fake {
  display: flex; align-items: center; gap: 14px; background: #10231b; color: #eaf3ee;
  border-radius: 12px 12px 0 0; padding: 46px 22px; font-size: .86rem;
}
.player-fake .play {
  width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .14);
  display: grid; place-items: center; font-size: 1.1rem; flex: none;
}
.player-fake .pname { font-weight: 600; }
.player-fake .ptime { margin-left: auto; opacity: .7; }
.player-bar { height: 6px; background: #d8e0da; border-radius: 0 0 12px 12px; overflow: hidden; }
.player-bar i { display: block; height: 100%; background: var(--accent); transition: width .06s linear; }

/* ---------- quiz ---------- */
.quiz-head { display: flex; align-items: center; gap: 12px; font-size: .82rem; color: var(--muted); }
.quiz-head .qof { font-weight: 700; color: var(--text); }
/* Pasek to jeden segment na pytanie, nie ciągły wypełniacz: kolor mówi
   o poprawności odpowiedzi, a nie o samym postępie. Zielony pasek przy
   pomyłce wyglądałby jak zaliczone pytanie. */
.qbar { display: flex; gap: 4px; height: 5px; margin: 12px 0 20px; }
.qbar i {
  flex: 1; background: var(--border); border-radius: 999px;
  position: relative; overflow: hidden;
}
.qbar i::after {
  content: ""; position: absolute; inset: 0; width: 0; border-radius: inherit;
  transition: width .38s ease;
}
.qbar i.ok::after { width: 100%; background: var(--accent); }
.qbar i.bad::after { width: 100%; background: var(--bad); }

.qtext { margin: 0 0 18px; font: 700 1.3rem/1.4 var(--font-head); letter-spacing: -.01em; }
.qans { display: grid; gap: 10px; }
.qa {
  display: flex; align-items: flex-start; gap: 13px; text-align: left; width: 100%;
  background: #fff; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 14px 16px; cursor: pointer; color: var(--text); font: inherit;
  transition: border-color .12s ease, background .12s ease, opacity .2s ease;
}
.qa:hover { border-color: var(--accent-mid); background: var(--accent-soft); }
.qa[disabled] { cursor: default; }
.qa-mark {
  width: 26px; height: 26px; border-radius: 7px; background: var(--bg); color: var(--muted);
  display: grid; place-items: center; font: 700 .8rem var(--font-head); flex: none;
}
.qa-t { flex: 1; font-size: .95rem; line-height: 1.45; padding-top: 3px; }

/* Stan po odpowiedzi: trafiona na zielono, pudło na czerwono, a przy pomyłce
   podświetlamy też tę właściwą — inaczej człowiek nie wie, gdzie był błąd. */
.qa.is-right { border-color: var(--accent); background: var(--accent-soft); }
.qa.is-right .qa-mark { background: var(--accent); color: #fff; }
.qa.is-wrong { border-color: var(--bad); background: var(--bad-soft, #fdecec); }
.qa.is-wrong .qa-mark { background: var(--bad); color: #fff; }

/* Ikona wskakuje dopiero po odpowiedzi — puste miejsce nie ma jej trzymać. */
.qa-ic { width: 22px; height: 22px; flex: none; display: none; margin-top: 2px; }
.qa.is-right .qa-ic, .qa.is-wrong .qa-ic { display: block; animation: markIn .32s ease both; }
.qa.is-right .qa-ic { color: var(--accent-dark); }
.qa.is-wrong .qa-ic { color: var(--bad); }
@keyframes markIn { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }

/* Kliknięta odpowiedź podbija się na moment, reszta gaśnie — wzrok idzie tam,
   gdzie trzeba, i widać, że klik się zarejestrował. */
.qa.is-picked { animation: ansPop .34s ease both; }
@keyframes ansPop { 0% { transform: scale(1); } 45% { transform: scale(1.025); } 100% { transform: scale(1); } }
.qa.is-dim { opacity: .4; }

/* Wyjście pytania w lewo przed wejściem następnego. */
#qBlock { transition: opacity .22s ease, transform .22s ease; }
#qBlock.is-out { opacity: 0; transform: translateX(-14px); }

@media (prefers-reduced-motion: reduce) {
  .qbar i::after { transition: none; }
  .qa.is-picked, .qa.is-right .qa-ic, .qa.is-wrong .qa-ic { animation: none; }
  #qBlock { transition: none; }
}

/* ---------- wynik ---------- */
/* ---------- wynik podejścia ----------
   Liczba stoi nad podpisem, wyśrodkowana, jak w prezentacji. Wcześniej była
   w rzędzie obok tekstu, a znak procenta wisiał przyklejony do cyfr na innej
   linii bazowej — czytało się to jak literówka. */
.score {
  text-align: center; padding: 30px 22px 26px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg);
}
.score--ok { background: var(--ok-soft); border-color: var(--accent-mid); }
.score--near { background: var(--warn-soft, #fff6d9); border-color: var(--highlight-dark, #d9b430); }
.score--bad { background: var(--bad-soft); border-color: #edc7c7; }

.score-n {
  display: block; font: 900 4rem/1 var(--font-head); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
/* Procent mniejszy, ale w tej samej linii bazowej i z oddechem od cyfr. */
.score-n small { font: 900 1.6rem/1 var(--font-head); margin-left: 4px; letter-spacing: 0; }

/* Kolor mówi prawdę o wyniku: od progu zielony, blisko progu żółty, niżej
   czerwony. Zielone 60% przy progu 70% kłamałoby. */
.score--ok .score-n { color: var(--accent-dark); }
.score--near .score-n { color: var(--highlight-dark, #a8801a); }
.score--bad .score-n { color: var(--bad); }

.score-t { display: block; margin-top: 12px; }
.score-t b { display: block; font: 700 1.15rem/1.3 var(--font-head); }
.score-t span { display: block; color: var(--muted); font-size: .86rem; margin-top: 5px; }

.qsummary { display: grid; gap: 8px; margin-top: 20px; }
.qsum {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: start;
  padding: 10px 12px; border-radius: 9px; background: var(--bg); font-size: .86rem;
}
.qsum-i {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .78rem/1 var(--font-head);
}
.qsum.is-ok .qsum-i { background: var(--ok-soft); color: var(--ok); }
.qsum.is-bad .qsum-i { background: var(--bad-soft); color: var(--bad); }
.qsum-a { color: var(--muted); font-size: .8rem; text-align: right; max-width: 32ch; }

/* Rozwijany przeglad odpowiedzi: klik na pytanie pokazuje mozliwe odpowiedzi
   (natywny <details>), z poprawna i wyborem pracownika. */
.qsum--exp { display: block; padding: 0; }
.qsum--exp > summary.qsum-head {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; cursor: pointer; list-style: none; border-radius: 9px;
}
.qsum--exp > summary::-webkit-details-marker { display: none; }
.qsum--exp > summary:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.qsum--exp .qsum-t { font-size: .86rem; }
.qsum-chev { color: var(--muted); font-size: .72rem; transition: transform .15s ease; }
.qsum--exp[open] .qsum-chev { transform: rotate(180deg); }
.qopts { list-style: none; margin: 0; padding: 2px 12px 12px 48px; display: grid; gap: 6px; }
.qopt {
  display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 8px;
  background: #fff; border: 1px solid var(--border); font-size: .85rem;
}
.qopt.is-correct { background: var(--ok-soft); border-color: var(--accent-mid); }
.qopt.is-picked:not(.is-correct) { background: var(--bad-soft); border-color: #edc7c7; }
.qopt-text { flex: 1; }
.qopt-tag {
  font: 700 .66rem/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; white-space: nowrap;
}
.qopt-tag--ok { background: var(--accent); color: #fff; }
.qopt-tag--pick { background: var(--muted); color: #fff; }
@media (prefers-reduced-motion: reduce) { .qsum-chev { transition: none; } }

table.tbl tbody tr.is-me td { background: var(--accent-soft); }
.mycourse .rep-by b { font: 900 1.4rem/1 var(--font-head); }


/* ---------- kursy w pakiecie i przypisania grupowe ---------- */
.crs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.crs {
  text-align: left; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; color: var(--text); font: inherit; display: grid;
  grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline;
}
.crs:hover { border-color: var(--accent); }
.crs.is-on { border-color: var(--accent); background: var(--accent-soft); }
.crs b { font: 600 .9rem var(--font-body); }
.crs .n { font: 700 1.15rem var(--font-head); }
.crs .d { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; }
.subhead {
  font: 700 .72rem var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 20px 0 8px;
}
.markbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 9px;
  padding: 9px 12px; font-size: .86rem;
}
.markbar b { margin-right: auto; }

/* Przełącznik kursów pracownika */
.crs-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.crs-tab {
  display: grid; gap: 2px; text-decoration: none; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
}
.crs-tab b { font: 600 .9rem var(--font-body); }
.crs-tab span { color: var(--muted); font-size: .78rem; }
.crs-tab:hover { border-color: var(--accent); }
.crs-tab.is-on { border-color: var(--accent); background: var(--accent-soft); }
/* Kurs zamknięty ma być rozpoznawalny z rzędu kafelków, bez czytania liczb. */
.crs-tab.is-done b { color: var(--accent-deep); }
.crs-tab.is-done span { color: var(--accent-dark); font-weight: 600; }
/* ---------- nowa wersja kursu ----------
   Staje w miejscu wybieraka lekcji, gdy kurs jest w użyciu. To NORMALNA droga,
   nie ostrzeżenie, więc wygląda spokojnie — informacja plus jedno wyjście. */
.verbox {
  margin: 14px 0 0; padding: 14px 16px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border);
}
.verbox > b { display: block; font: 700 .95rem/1.35 var(--font-head); }
.verbox p { font-size: .85rem; line-height: 1.6; margin: 8px 0 12px; color: var(--muted); }
.verbox p b { color: var(--text); }

/* ---------- rail wersji na karcie kursu ----------
   Karty wersji w poziomie, NAJNOWSZA Z LEWEJ (szkic na początku). Tę, którą
   oglądasz, wyróżniamy; pozostałe są linkiem — cała karta przełącza wersję.
   Na telefonie rail staje się karuzelą: najnowsza pełną szerokością, starsze
   przewijasz w prawo. */
.verrail { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.vcard {
  flex: 0 1 236px; min-width: 200px; max-width: 300px;
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; text-decoration: none; color: var(--text);
}
/* Bieżącą wersję wskazuje grubsza zielona ramka - bez osobnej plakietki. */
.vcard--on { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.vcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vnum { font: 800 .96rem/1 var(--font-head); letter-spacing: -.01em; }
.vsub { color: var(--muted); font-size: .77rem; }
.vsubs { font-size: .77rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.vsubs strong { font: 700 .88rem/1 var(--font-head); color: var(--text); }
.vsubs .sub3 {
  flex-basis: 100%; font-size: .72rem; color: var(--faint, #8a94a3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Stopka przyklejona do dołu karty - karty w rzędzie są równej wysokości
   (.verrail align-items: stretch), więc przyciski stoją w jednej linii. */
.vcard__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.vbtn { padding: 6px 12px; font-size: .77rem; line-height: 1; }
/* Otwarcie wersji to ikonka (jak „otwórz w oknie"), nie napis - napis „otwórz"
   rozpychał stopkę i skakał na hover. */
.vopen {
  display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: 8px; color: var(--muted);
  text-decoration: none; transition: border-color .15s ease, color .15s ease;
}
.vopen:hover { border-color: var(--accent); color: var(--accent); }
.vhere { flex: 0 0 auto; }

@media (max-width: 700px) {
  .verrail {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 2px 20px 10px;
  }
  .vcard { flex: 0 0 78%; max-width: none; scroll-snap-align: start; }
}

/* Wiersz importu: szablon i wybór pliku obok siebie. */
.imp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.imp-row input[type="file"] { flex: 1 1 240px; min-width: 0; font-size: .86rem; }

/* Kłódka przy lekcji kursu w użyciu — zamiast strzałek przestawiania. */
.prow__lock { color: var(--muted); font-size: .9rem; cursor: default; padding: 0 4px; }

/* Odstęp między filtrowaniem a akcjami w tym samym pasku — wyszukiwarka
   i filtry zawężają listę, przyciski ją zmieniają. */
.acts-sep { display: inline-block; width: 1px; height: 22px; background: var(--border); margin: 0 4px; }

/* Wiersz z zaległymi lekcjami kursu — nazwa po lewej, akcja po prawej. */
.lsn-add {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 0;
}
.lsn-add > span { flex: 1 1 240px; }

/* Lista wcielania: nagłówek firmy nad jej ludźmi. */
.swap-co {
  padding: 12px 2px 6px; border-bottom: 1px solid var(--border); margin: 6px 0 8px;
}
.swap-co:first-child { padding-top: 0; }
.swap-co b { display: block; font: 700 .9rem var(--font-head); }
.swap-co span { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.swap-tag {
  display: inline-block; background: var(--accent-soft); color: var(--accent-dark);
  border-radius: 999px; padding: 1px 8px; font: 600 .68rem var(--font-body);
  vertical-align: 1px; margin-left: 6px;
}

.crs-again { display: block; color: var(--muted); font-size: .72rem; margin-top: 2px; }
.crs-locked {
  display: inline-block; color: var(--muted); font-size: .76rem;
  border: 1px dashed var(--border); border-radius: 999px; padding: 3px 10px;
}
.crs-fl {
  display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 5px;
  border-radius: 50%; background: var(--accent); color: #fff;
  font: 700 .62rem/1 var(--font-head); vertical-align: -2px; font-style: normal;
}

/* Dodawanie pozycji umowy: kurs + miejsca + stawka w jednej linii */
.addline {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 130px auto;
  gap: 12px; align-items: end;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 4px;
}
/* Wariant z cyklem ma pięć pól, nie cztery — bez własnej siatki select
   „powtórzeń w roku" wpadał w kolumnę 110 px i ucinał tekst. */
/* ---------- suma pozycji umowy ----------
   Cztery liczby w rzędzie, z wartością całej umowy wyróżnioną — bo to ona
   idzie do rozmowy z klientem. */
.itsum {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin: 18px 0 0;
}
@media (max-width: 860px) { .itsum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .itsum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.itsum .k {
  display: block; font: 700 .6rem/1.25 var(--font-head); letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.itsum b { font: 600 .98rem/1.2 var(--font-body); white-space: nowrap; }
.itsum .sub2 { font-size: .72rem; }
.itsum .sub2 { display: block; margin-top: 2px; }
.itsum__tot { border-left: 2px solid var(--accent); padding-left: 12px; }
.itsum__tot b { color: var(--accent-deep); font-size: 1.1rem; }
@media (max-width: 860px) {
  .itsum__tot { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border);
    padding: 10px 0 0; }
}

/* Skróty do najczęstszych okresów umowy — pole obok zostaje edytowalne. */
.termq { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.termq__b {
  border: 1px solid var(--border); background: #fff; border-radius: 999px;
  padding: 2px 10px; font: 600 .76rem var(--font-body); color: var(--muted); cursor: pointer;
}
.termq__b:hover { border-color: var(--accent); color: var(--accent-dark); }
.termq__t { color: var(--muted); }

.addline--cycle { grid-template-columns: minmax(0, 1fr) 190px 90px 120px auto; }
@media (max-width: 1000px) {
  .addline--cycle { grid-template-columns: minmax(0, 1fr) 190px; }
  .addline--cycle .btn { grid-column: 1 / -1; }
}
.addline .field { margin: 0; min-width: 0; }
.addline .btn { grid-column: 4; }
.addline .addsum { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .addline { grid-template-columns: 1fr 1fr; }
  .addline .field:first-child, .addline .btn { grid-column: 1 / -1; }
}
.cellnum {
  width: 84px; text-align: right; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 7px; font: inherit; background: #fff; color: var(--text);
}

/* Info przy stawce ponizej minimum z umowy dostawca<->AssetLife (ratefloor) -
   nie blokada: firma placi mniej, dostawca rozlicza sie z AssetLife wg minimum. */
.cell-note {
  margin: 4px 0 0; font-size: .72rem; font-weight: 600; color: var(--accent-dark);
}

/* Pola wyzerowane opcja "darmowy dostawca" - widac, ze sa nieaktywne. */
input.is-muted { opacity: .5; cursor: not-allowed; }

/* ---------- fazy subskrypcji ---------- */
.lic-sub .kind .phase {
  font: 700 .62rem var(--font-head); letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: #fff; border-radius: 5px; padding: 2px 6px;
  margin-left: 8px; vertical-align: middle; font-style: normal;
}
.lic-sub .licbtn { margin-top: auto; text-align: center; }
.phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ph {
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 10px; padding: 12px 14px; background: #fff;
}
.ph.is-now { border-left-color: var(--accent); background: var(--accent-soft); }
.ph-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ph-head b { font: 600 .92rem var(--font-body); }
.ph-when { color: var(--muted); font-size: .78rem; margin-left: auto; }
.ph-money { margin: 6px 0; font: 700 1.05rem var(--font-head); }
.ph-money .up {
  font: 600 .74rem var(--font-body); color: var(--ok);
  background: var(--ok-soft); border-radius: 6px; padding: 2px 7px; margin-left: 8px;
}
.ph-what { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ph-note {
  margin: 8px 0 0; font-size: .82rem; color: var(--muted);
  border-left: 2px solid var(--border); padding-left: 10px;
}
.ph-foot { margin-top: 8px; font-size: .76rem; color: var(--muted); }

/* Suma pozycji liczona w trakcie pisania */
.addsum {
  flex: 1 1 100%; font-size: .84rem; color: var(--muted);
  border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 2px;
}
.addsum b { color: var(--text); font-size: .95rem; }

/* ---------- rozwijany wiersz osoby: jej kursy ----------
   ⚠ Nazwy MUSZĄ być unikalne. Pierwsza wersja używała `.prow`, a ta klasa jest
   już zajęta przez listę lekcji w programie kursu (`display: grid`, trzy
   kolumny) — wiersz tabeli przejmował tamten układ i cała lista zespołu
   rozjeżdżała się w pionowe kafle. */
table.tbl tbody tr.team-row.is-open > td { background: var(--accent-soft); }
.team-row .cell-main.clickable { cursor: pointer; }
table.tbl tbody tr.team-detail > td { background: var(--bg); padding: 0; border-top: 0; }
table.tbl tbody tr.team-detail:hover > td { background: var(--bg); }
/* ⚠ Ten wiersz ma własną klasę (`team-detail`, nie `row-detail`), więc rządzą nim
   osobne reguły stanu. `.detail-box` animuje się jak wszędzie (grid 0fr->1fr);
   tu tylko rozciągamy go po `is-open` i dajemy węższy padding lewy. */
table.tbl tbody tr.team-detail.is-open .detail-box { grid-template-rows: 1fr; }
table.tbl tbody tr.team-detail .detail-box > .detail-inner { padding-left: 56px; }
table.tbl tbody tr.team-detail.is-open .detail-box > .detail-inner { padding-top: 16px; padding-bottom: 18px; border-top-width: 1px; }
.pdet-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.pdet-head b { font: 600 .95rem var(--font-body); }
.pdet-head > span { color: var(--muted); font-size: .8rem; }
.crs-list { display: grid; gap: 8px; }
.crs-row {
  display: grid; gap: 4px 16px; align-items: center;
  grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) auto auto auto;
  background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px;
}
.crs-nm b { display: block; font: 600 .88rem var(--font-body); }
.crs-nm span { color: var(--muted); font-size: .76rem; }
.crs-bar .lp-n { display: block; color: var(--muted); font-size: .76rem; margin-top: 3px; }
.crs-sc { text-align: right; }
.crs-sc .sub2 { display: block; color: var(--muted); font-size: .74rem; }
.crs-act { text-align: right; }
@media (max-width: 860px) {
  .crs-row { grid-template-columns: 1fr 1fr; }
  .crs-act, .crs-sc { text-align: left; }
}

/* Zablokowany przycisk w modalu — musi wyglądać na zablokowany */
.modal .btn[disabled],
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Podsumowanie rozszerzenia: kwota cykliczna obok jednorazowej dopłaty.
   Stoją osobno, bo się NIE sumują i to jest najczęstsze nieporozumienie. */
.upsum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.upsum > div {
  background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
}
.upsum span {
  display: block; font: 700 .68rem var(--font-head); letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.upsum b { display: block; font: 700 1.05rem var(--font-head); }
.upsum i { display: block; font-style: normal; color: var(--muted); font-size: .76rem; }
@media (max-width: 620px) { .upsum { grid-template-columns: 1fr; } }

/* Co i kiedy zostanie zafakturowane — obok tego, co już wystawione. */
.nextinv {
  margin-top: 14px; border: 1px dashed var(--border); border-radius: 10px;
  padding: 12px 14px; background: var(--bg);
}
.nextinv span {
  display: block; font: 700 .68rem var(--font-head); letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.nextinv b { font: 700 1.1rem var(--font-head); }
.nextinv i { display: block; font-style: normal; color: var(--muted); font-size: .78rem; }
.nextinv p { margin: 10px 0 0; font-size: .82rem; color: var(--muted); }

/* Zaplanowane rozszerzenie: wyraźnie inne niż stan obecny — przerywana ramka,
   bo to zapowiedź, nie fakt. */
.pendbox { border-style: dashed; border-color: var(--accent); background: var(--accent-soft); }
.pendbox .boxhead h2 { color: var(--accent-deep); }

/* Kolumna „Kursy" jest przyciskiem — sama strzałka była za mało widoczna
   i użytkownik nie zauważał, że wiersz się rozwija. */
.crs-open {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 2px 0; cursor: pointer; color: var(--text); font: inherit;
}
.crs-open b { font: 600 .9rem var(--font-body); }
.crs-open .sub2 { display: block; color: var(--muted); font-size: .76rem; }
.crs-open__hint {
  display: inline-block; margin-top: 3px; font: 600 .72rem var(--font-body);
  color: var(--accent); border-bottom: 1px dashed currentColor;
}
.crs-open:hover .crs-open__hint { color: var(--ok); }
.crs-open.is-empty { color: var(--muted); }

/* Kurs z odebranym dostępem: zostaje jako dowód, ale ma być widać, że nie działa. */
.crs-row.is-revoked { background: var(--bg); border-style: dashed; opacity: .85; }
.crs-row.is-revoked .crs-nm b { text-decoration: line-through; }

/* Kurs rozpoczęty: zaznaczony, ale zablokowany — odbiera się go świadomie
   przyciskiem „Odepnij", nie odznaczeniem w oknie przypisywania. */
.pickrow.is-locked { opacity: .6; cursor: not-allowed; background: var(--bg); }
.pickrow.is-locked input { cursor: not-allowed; }
.pickrow.is-locked .d { color: var(--muted); font-style: italic; }
/* Kurs przypisany, ale nierozpoczęty: da się odznaczyć i tym cofnąć. */
.pickrow.is-undoable { border-color: var(--accent); }
.pickrow.is-undoable .d { color: var(--accent); }

/* ---------- historia w panelu klienta ---------- */
.hchips { display: flex; flex-wrap: wrap; gap: 8px; }
.hchip {
  display: inline-flex; align-items: center; gap: 7px; background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px;
  font: 600 .8rem var(--font-body); cursor: pointer;
}
.hchip span {
  background: var(--bg); border-radius: 999px; padding: 1px 7px;
  font: 700 .72rem var(--font-head); color: var(--muted);
}
.hchip:hover { border-color: var(--accent); }
.hchip.is-on { border-color: var(--accent); background: var(--accent-soft); }
.hchip.is-on span { background: #fff; color: var(--ok); }

.hlist { list-style: none; margin: 0; padding: 0; }
.hlist li {
  display: grid; gap: 4px 14px; align-items: baseline; padding: 11px 0;
  grid-template-columns: 92px 150px 1fr auto;
  border-top: 1px solid var(--border);
}
.hlist li:first-child { border-top: 0; }
.hdate { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.htext { font-size: .88rem; }
.hwho { color: var(--muted); font-size: .76rem; text-align: right; white-space: nowrap; }
@media (max-width: 780px) {
  .hlist li { grid-template-columns: 1fr auto; }
  .hdate { grid-column: 1; }
  .htext { grid-column: 1 / -1; }
}

/* Wiersz wersji nagrania. Nazwa wyswietlana jest edytowalna w miejscu, wiec
   pole i jego przycisk stoja w jednej linii; przyciski akcji nie moga isc na
   `.acts`, bo ta klasa niesie wlasny margines i wyrownanie z pasków akcji nad
   tabelami. */
.recname { display: flex; gap: 6px; align-items: center; }
.recname input[type="text"] { min-width: 160px; }
/* Rozszerzenie nalezy do pliku, nie do nazwy - stoi obok pola, wyszarzone
   i bez mozliwosci edycji. */
.recname__ext { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
table.tbl td.recacts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Raport wgrywania pytan (panel/lessons/_import_report) ----------
   Notyfikacja u gory mowi tylko tak/nie; ten box zostaje na stronie z tym, co
   dokladnie weszlo, a co nie. Lewa krawedz w kolorze wyniku - zielona, gdy
   wszystko przeszlo, czerwona, gdy nie. */
/* Pasek raportu W SRODKU pudelka banku: oddzielony od listy pytan gorna linia,
   caly naglowek klikalny, tresc rozwija sie pod nim (disclosure, po `.is-open`). */
.ir { border-top: 1px solid var(--border); margin-top: 6px; }
.ir__head {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 12px 8px; margin: 0 -8px; border-radius: 8px;
}
.ir__head:hover { background: var(--accent-soft); }
.ir__title {
  font: 700 .72rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.ir-chev {
  flex: none; color: var(--border-strong, #cbd3dd);
  display: grid; place-items: center; transition: transform .18s ease;
}
.ir.is-open .ir-chev { transform: rotate(90deg); color: var(--accent); }
/* Raport rozwija się płynnie (grid 0fr->1fr), padding na `.ir__inner`. */
.ir__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.ir__body > .ir__inner { overflow: hidden; min-height: 0; padding: 0 8px; transition: padding .28s ease; }
.ir.is-open .ir__body { grid-template-rows: 1fr; }
.ir.is-open .ir__body > .ir__inner { padding: 2px 8px 8px; }
@media (prefers-reduced-motion: reduce) { .ir__body, .ir__body > .ir__inner { transition: none; } }

.ir-status {
  padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700;
}
.ir-status--ok   { background: var(--ok-soft);   color: var(--ok); }
.ir-status--warn { background: var(--warn-soft); color: var(--warn); }
.ir-status--bad  { background: var(--bad-soft);  color: var(--bad); }

.ir-meta { color: var(--muted); font-size: .8rem; margin: 0 0 10px; }
.ir-count { margin: 0 0 8px; }
.ir-line--bad { color: var(--bad); font-weight: 600; margin: 0 0 8px; }
.ir-sub { font-size: .82rem; font-weight: 700; color: var(--muted); margin: 12px 0 4px; }
.ir-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.ir-list li { font-size: .88rem; line-height: 1.4; }
.ir-why { color: var(--bad); }
.ir-list--note li { color: var(--muted); }
.ir-list--note .ir-why { color: var(--warn); }

/* ==========================================================================
   Subskrypcja klienta — karta-podsumowanie (klient/subscription/show).
   Akcja "Poproś o sloty" stoi w prawym gornym rogu i otwiera modal; status
   pakietu to maly pill w karcie, a nie osobny napis "Pakiet dziala".
   ========================================================================== */
.pkg-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pkg-head h1 { font: 900 1.5rem/1.1 var(--font-head); letter-spacing: -.02em; margin: 0; }
.pkg-head__sub { margin: 5px 0 0; color: var(--muted); font-size: .86rem; }
.pkg-head form { margin: 0; }

.pkg-hero {
  border: 1px solid var(--accent-mid); border-radius: 14px;
  background: linear-gradient(145deg, var(--accent-soft), #fff 70%);
  padding: 24px 26px; display: grid; grid-template-columns: 1fr 280px; gap: 26px; align-items: center;
}
@media (max-width: 860px) { .pkg-hero { grid-template-columns: 1fr; } }
.pkg-hero__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pkg-hero__eyebrow .k {
  font: 700 .68rem/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-deep); opacity: .72;
}
.pkg-hero__big { font: 900 4rem/.9 var(--font-head); letter-spacing: -.04em; color: var(--accent-deep); }
.pkg-hero__cap { font: 700 1.05rem/1.25 var(--font-head); color: var(--text); margin: 8px 0 2px; }
.pkg-hero__meta { color: var(--muted); font-size: .9rem; margin: 0; }

/* Pill stanu: zamiast napisu "Pakiet dziala". Zielony=aktywny, czerwony=zawieszony,
   zolty=czeka na uruchomienie. */
.spill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px;
  background: #fff; border: 1px solid var(--accent-mid); font: 700 .72rem/1 var(--font-head);
  letter-spacing: .02em; color: var(--accent-dark);
}
.spill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.spill--bad { border-color: #eab8b8; color: var(--bad); }
.spill--bad .dot { background: var(--bad); }
.spill--wait { border-color: #e6cf8a; color: var(--warn); }
.spill--wait .dot { background: var(--highlight-dark); }

.pkg-facts { background: #fff; border: 1px solid var(--accent-mid); border-radius: 11px; padding: 4px 16px; }
.pkg-facts .r { display: flex; flex-direction: column; padding: 12px 0; }
.pkg-facts .r + .r { border-top: 1px solid var(--border); }
.pkg-facts .r .l {
  font: 700 .64rem/1 var(--font-head); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
.pkg-facts .r b { font-weight: 700; font-size: .98rem; }
.pkg-facts .r span { color: var(--muted); font-size: .8rem; margin-top: 2px; }

.pkg-sec { margin-top: 22px; }
.pkg-sectitle {
  font: 700 .7rem/1 var(--font-head); letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px;
}

/* ⚠ auto-fit, nie stale dwie kolumny: przy JEDNYM kursie karta wypelnia caly
   rzad (jak hero i historia), a nie stoi obcieta na pol szerokosci z pustka
   obok. Dwa i wiecej dzieli sie na kolumny; `min(100%,...)` chroni przed
   przewijaniem na waskim ekranie. */
.pkg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
/* Karta kursu: pierscien postepu | opis + chipy | wolne sloty. Akcent po lewej
   i lekkie tlo, zeby nie byla plaska biala plyta. */
.ccard {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px 18px 26px;
  background: linear-gradient(180deg, #fbfefc, #ffffff);
}
.ccard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); }
.ccard__ring {
  --p: 0; width: 74px; height: 74px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--accent-soft) 0);
}
.ccard__ring b {
  width: 56px; height: 56px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font: 900 1rem/1 var(--font-head); color: var(--accent-deep);
}
.ccard__name { font: 700 1.15rem/1.2 var(--font-head); margin: 0; }
.ccard__sub { color: var(--muted); font-size: .84rem; margin: 4px 0 10px; }
.ccard__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cpill {
  font-size: .74rem; font-weight: 700; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
}
.ccard__free { text-align: right; white-space: nowrap; }
.ccard__free b { display: block; font: 900 1.9rem/1 var(--font-head); color: var(--accent-deep); }
.ccard__free span { color: var(--muted); font-size: .78rem; }
@media (max-width: 560px) {
  .ccard { grid-template-columns: auto 1fr; }
  .ccard__free { grid-column: 1 / -1; text-align: left; }
}

/* Przycisk "Poproś o sloty" po prawej stronie naglowka karty pakietu. */
.pkg-hero__ask { margin-left: auto; }

/* Zmiana przygotowana przez dostawce - rozpisany baner (za ktory kurs, kiedy,
   ile). Zastepuje cienki .notice.soon: klient widzi wszystko z rekordu zmiany. */
.pkgchg {
  border: 1px solid var(--border);
  border-left: 4px solid var(--highlight);
  background: var(--warn-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.pkgchg__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.pkgchg__who { font: 700 1.02rem/1.3 var(--font-head); margin: 0; color: var(--text); }
.pkgchg__by { font-size: .8rem; color: var(--muted); margin: 4px 0 0; }
.pkgchg__pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .74rem; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  color: var(--warn); background: rgba(255, 205, 2, .16);
  border: 1px solid rgba(195, 145, 0, .35);
}
.pkgchg__pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--highlight-dark); }

.pkgchg__hero {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 2px; padding-top: 14px; border-top: 1px solid rgba(138, 104, 0, .18);
}
.pkgchg__big { font: 900 1.7rem/1 var(--font-head); color: var(--accent-deep); }
.pkgchg__arrow { color: var(--muted); font-weight: 700; }
.pkgchg__from { color: var(--muted); font-weight: 600; }
.pkgchg__to { font-weight: 800; }

.pkgchg__lines { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pkgchg__line {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 13px;
}
.pkgchg__cname { font-weight: 600; margin: 0; }
.pkgchg__cmeta { font-size: .78rem; color: var(--muted); margin: 2px 0 0; }
.pkgchg__delta {
  font: 800 .95rem/1.1 var(--font-head); color: var(--accent-dark);
  white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
}
.pkgchg__delta small { display: block; font: 500 .72rem/1.2 var(--font-body); color: var(--muted); }

.pkgchg__facts {
  margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.pkgchg__fact { background: var(--surface); padding: 11px 14px; }
.pkgchg__k {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 4px;
}
.pkgchg__v { font-weight: 600; margin: 0; font-variant-numeric: tabular-nums; }
.pkgchg__v em { font-style: normal; color: var(--accent-dark); font-weight: 800; }
.pkgchg__sub { font-size: .76rem; color: var(--muted); margin: 2px 0 0; }

.pkgchg__foot {
  margin: 13px 0 0; font-size: .82rem; color: var(--muted);
  display: flex; align-items: flex-start; gap: 8px;
}
.pkgchg__foot svg { flex: none; margin-top: 2px; }

@media (max-width: 640px) {
  .pkgchg__facts { grid-template-columns: 1fr; }
}

/* Historia zmian: zwijana (disclosure), zwinieta domyslnie. */
.hist__head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.hist__title { margin: 0; }
.hist__chev { flex: none; color: var(--border-strong, #cbd3dd); display: grid; place-items: center; transition: transform .18s ease; }
.hist.is-open .hist__chev { transform: rotate(90deg); color: var(--accent); }
.hist__prev { margin-left: auto; color: var(--muted); font-size: .82rem; }
.hist__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.hist__inner { overflow: hidden; display: grid; gap: 10px; }
.hist.is-open .hist__body { grid-template-rows: 1fr; }
.hist.is-open .hist__inner { padding-top: 14px; }
@media (prefers-reduced-motion: reduce) { .hist__body { transition: none; } }

/* Wprowadzenie zmiany pakietu: kalendarz "Wprowadz od" z presetami
   (panel/companies/_change_draft). "Dzis" = od razu, pozniejsza data = od okresu. */
.applybar__when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.applybar__when input[type=date] { width: auto; min-width: 170px; }
.applybar__presets { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn {
  border: 1px solid var(--border); background: #fff; border-radius: 999px;
  padding: 6px 13px; font: 600 .8rem var(--font-body); color: var(--muted); cursor: pointer;
}
.chip-btn:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }

/* Znacznik osoby ze ZDJECIEM (shared/_avatar): zdjecie wypelnia kolko, inaczej
   zostaja inicjaly. Bazowy rozmiar/ksztalt bierze sie z klasy miejsca (.av,
   .personcell__av); tu tylko kadrowanie obrazu. */
/* ⚠ TLO NEUTRALNE, NIE ZIELONE: pod zdjeciem, zanim sie doladuje (twardy reload,
   pierwsze wejscie), przez ulamek sekundy widac samo tlo znacznika - w zieleni
   marki blyskalo zielenia. Szare tlo jest niewidoczne pod zdjeciem i spokojne,
   gdy zdjecie jeszcze leci. */
.av--photo, .personcell__av--photo, .tile__avatar--photo { padding: 0; overflow: hidden; background: #e9edf0; }
.av--photo img, .personcell__av--photo img, .tile__avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Dashboard klienta - wykresy zgodnosci (klient/dashboard).
   Statusy nauki jako kolory: ukonczone (zielony, themuje sie per dostawca),
   w trakcie (bursztyn), nie zaczete (neutralny szary). Kazdy kolor ma etykiete
   w legendzie - nigdy sam kolor.
   ========================================================================== */
:root{
  --c-done: var(--accent);
  --c-prog: #f0b429;
  --c-none: #d6ddd8;
  --c-track: #edf1ef;
}

.report { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }

/* Donut realizacji */
.donutwrap { position: relative; width: 168px; height: 168px; flex: none; }
.donut { width: 168px; height: 168px; display: block; }
.donut circle { transition: stroke-dasharray .5s ease; }
.donut__c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut__c strong { display: block; font: 900 2.4rem/1 var(--font-head); letter-spacing: -.03em; color: var(--accent-deep); }
.donut__c strong i { font-style: normal; font-size: 1.1rem; font-weight: 700; margin-left: 1px; }
.donut__c span { display: block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

/* KPI / legenda przy donucie */
.kpi { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 210px; }
.kpi li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.kpi li:last-child { border-bottom: 0; }
.kpi__dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.kpi__dot--hollow { background: none !important; border: 2px solid var(--muted); border-radius: 50%; }
.kpi__n { font: 800 1.15rem/1 var(--font-head); min-width: 2ch; }
.kpi__n i { font-style: normal; font-size: .8rem; font-weight: 700; }
.kpi__l { color: var(--muted); font-size: .9rem; }
.kpi__p { margin-left: auto; font: 700 .85rem/1 var(--font-head); color: var(--muted); font-variant-numeric: tabular-nums; }

/* Karta slotow */
.slotcard { flex: 1 1 200px; min-width: 190px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.slotcard__top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.slotcard__top strong { font: 900 2rem/1 var(--font-head); letter-spacing: -.02em; color: var(--accent-deep); }
.slotcard__top span { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.slotcard__foot { margin: 8px 0 0; font-size: .82rem; color: var(--muted); }

/* Slupek skumulowany (sloty, dzialy) */
.stackbar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--c-track); gap: 2px; }
.stackbar__seg { height: 100%; }
.stackbar__seg:first-child { border-radius: 99px 0 0 99px; }
.stackbar__seg:last-child { border-radius: 0 99px 99px 0; }
.stackbar__seg:only-child { border-radius: 99px; }

/* Slupek w wierszu dzialu: pasek + procent */
.deptbar { display: flex; align-items: center; gap: 12px; min-width: 180px; }
.deptbar .stackbar { flex: 1; }
.deptbar__p { font: 700 .85rem/1 var(--font-head); color: var(--text); min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }

/* Legenda przy tytule */
.chartlegend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.chartlegend span { display: inline-flex; align-items: center; gap: 6px; }
.chartlegend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

@media (max-width: 640px) {
  .report { gap: 20px; justify-content: center; }
  .kpi { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .donut circle { transition: none; } }

/* ---------- edytor certyfikatu na karcie kursu (WYSIWYG) ----------
   Przeniesione z panelu platformy (application.css) na tokeny dostawcy: panel
   dostawcy ładuje arkusz `shared`, więc bez tego chipy leciały inline i
   ogromne, poza podglądem. Chip jest ABSOLUTNY nad obrazkiem: `left` = środek
   tekstu (translateX(-50%) w JS), `top` = górna krawędź linii - tak liczy serwer. */
.certed { display: grid; gap: 16px; justify-items: start; margin-top: 18px; }
.cert-switch { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.certed__stage {
  position: relative; width: 100%; max-width: 560px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--surface-2, #fbfcfd);
  touch-action: none;
}
.certed__image { display: block; width: 100%; height: auto; user-select: none; }
.certed__chip {
  position: absolute; line-height: 1; white-space: nowrap;
  font-family: "Libre Baskerville", Georgia, serif; font-style: italic;
  cursor: move; user-select: none; outline-offset: 3px;
  transition: top .08s ease, left .08s ease;
}
/* Tytuł może być wielolinijkowy: „\n" w treści łamie linię. Spacing 1.15 musi
   być identyczny jak krok linii w CertificateRenderer, żeby podgląd = wynik. */
.certed__chip--title { white-space: pre-line; text-align: center; line-height: 1.15; }
.certed__chip:hover, .certed__chip:focus-visible { outline: 2px dashed var(--accent); }
.certed__chip.is-dragging { outline: 2px solid var(--accent); transition: none; }
@media (prefers-reduced-motion: reduce) { .certed__chip { transition: none; } }
/* Podgląd po lewej, panele z suwakami po prawej. Na wąsko (≤900px) panele
   schodzą pod podgląd - jedna kolumna. */
.certed__work {
  display: grid; grid-template-columns: minmax(0, 560px) 1fr;
  gap: 20px; align-items: start; width: 100%;
}
@media (max-width: 900px) {
  .certed__work { grid-template-columns: 1fr; }
}
/* Panele stoją jeden pod drugim (kolumna po prawej, na mobile pod podglądem). */
.certed__controls {
  display: grid; grid-template-columns: 1fr;
  gap: 12px; width: 100%; align-content: start;
}
.certed__group {
  display: grid; gap: 9px; align-content: start; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.certed__group-title { font-size: .82rem; font-weight: 600; color: var(--muted); }
.certed__control {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  font-size: .82rem; color: var(--muted);
}
.certed__control input[type="range"] { width: 140px; accent-color: var(--accent); }
.certed__control input[type="color"] {
  width: 2.4rem; height: 1.6rem; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-btn, 8px);
  background: var(--surface); cursor: pointer;
}
.certed__sample {
  width: 160px; padding: 5px 8px; font-size: .82rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-btn, 8px);
}

/* ================= LISTA FIRM: KAFLE =================
   Firma = jeden kafel zamiast dwoch <tr>. Rzad glowny to grid (chevron, nazwa,
   metryki, akcje), a szczegoly rozwijaja sie w obrebie kafla ta sama mechanika
   grid-template-rows 0fr->1fr co dawny .detail-box, tyle ze wyzwalana klasa
   .is-open na samym kaflu. Detal reuzywa .finfo-card/.finfo, wiec tresc wyglada
   jak wczesniej. */
.num { font-variant-numeric: tabular-nums; }
.tiles { display: flex; flex-direction: column; gap: 12px; }

/* Doczytywanie na scrollu: niewidoczny sentinel do obserwacji + pasek „wczytuje". */
.tiles-sentinel { height: 1px; }
.tiles-spinner {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 14px 0 4px; color: var(--muted); font: 600 .84rem var(--font-body);
}
.tiles-spinner .spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--accent-mid); border-top-color: var(--accent);
  animation: tiles-spin .7s linear infinite;
}
@keyframes tiles-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tiles-spinner .spin { animation: none; } }

.tile {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.tile:hover { border-color: var(--accent-mid); box-shadow: 0 4px 8px rgba(0, 42, 23, .07), 0 20px 44px -18px rgba(0, 42, 23, .22); }
.tile.is-open { border-color: var(--accent-mid); }

.tile__main {
  display: grid; align-items: center; gap: 20px;
  grid-template-columns: 44px minmax(240px, 2.6fr) repeat(4, minmax(0, .8fr)) auto;
  padding: 18px 22px;
}

/* Chevron rozwijania - jedyny element, ktory otwiera detal. Ten sam rozmiar/ramka
   co przycisk wejscia .tile__go, zeby oba przyciski akcji byly rowne. */
.tile__twist {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  color: var(--muted); cursor: pointer; border: 1px solid var(--border); background: var(--surface);
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.tile__twist svg { width: 20px; height: 20px; transition: transform .18s ease; }
.tile__twist:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-mid); }
.tile__twist:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile.is-open .tile__twist { color: var(--accent); }
.tile.is-open .tile__twist svg { transform: rotate(90deg); }

/* Pelnoszerokosciowy pasek rozwijania - TYLKO mobilny kafel firmy (wlaczany
   nizej w @media). Domyslnie ukryty, zeby nie wchodzil na desktop ani na inne kafle. */
/* Wyglad zdefiniowany w bazie (renderuje sie dopiero gdy display != none), a
   WIDOCZNOSC wlaczamy per typ kafla i prog: firma na <=640, pracownik na <=1080. */
.tile__expand {
  display: none; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 14px 16px 16px; cursor: pointer;
  border: 0; background: transparent; color: var(--muted);
  font: 700 .7rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  transition: color .14s ease;
}
.tile__expand::before, .tile__expand::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.tile__expand:hover { color: var(--accent-dark); }
.tile__expand-less { display: none; }
.tile.is-open .tile__expand-more { display: none; }
.tile.is-open .tile__expand-less { display: inline; }

/* Nazwa firmy + avatar z inicjalami + podlinia meta. */
.tile__id { display: flex; align-items: center; gap: 13px; min-width: 0; }
.tile__idbox { min-width: 0; }
.tile__avatar {
  flex: none; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-mid); color: var(--accent-deep); font: 800 .95rem/1 var(--font-head);
}
/* Nazwa: lamiemy dlugie/nieprzerywalne tokeny i przycinamy do 2 linii z „…",
   zeby ekstremalnie dluga nazwa nie rozpychala kafla ani nie wyjezdzala poza. */
.tile__name {
  font: 700 1rem/1.2 var(--font-body); letter-spacing: -.01em; color: var(--text);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* Podlinia (np. e-mail pracownika w naglowku): jedna linia z „…". */
/* Podlinia (m.in. e-mail): PELNY tekst - da sie go zaznaczyc i skopiowac. Dlugi
   mail lamie sie na kolejna linie (idbox jest ograniczony szerokoscia przez
   .tile__idrow width:100%), zamiast wyjezdzac albo byc ucietym „…". */
.tile__sub {
  font-size: .78rem; color: var(--muted); margin-top: 3px;
  max-width: 100%; overflow-wrap: anywhere;
}

/* --- Kafel FIRMY (.tile--company): bez chevrona po lewej (kolumna zdjeta),
   wejscie na pelna karte przyciskiem „Zarzadzaj" zamiast strzalki. --- */
.tile--company .tile__main {
  grid-template-columns: minmax(240px, 2.6fr) repeat(4, minmax(0, .8fr)) auto;
}
/* Kurs ma o jedna metryke mniej (kolumna „Wersja" zdjeta z listy) - 3 metryki. */
.tile--course .tile__main {
  grid-template-columns: minmax(240px, 2.6fr) repeat(3, minmax(0, .8fr)) auto;
}
/* Przycisk zarzadzania: KWADRAT z ikona zebatki. Obwodka w pelnym akcencie,
   wypelnienie ~16% (color-mix trzyma brand kazdego dostawcy). */
.tile__manage {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  width: 40px; height: 40px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-dark);
  transition: background-color .14s ease, transform .14s ease;
}
.tile__manage svg { width: 19px; height: 19px; }
.tile__manage:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); transform: translateY(-1px); }
.tile__manage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Przycisk usuwania: KWADRAT z koszem, czerwony. `button_to` opakowuje go w
   <form> - zerujemy jego margines, zeby stal rowno obok zebatki. */
.tile__del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--bad); color: var(--bad);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  transition: background-color .14s ease, transform .14s ease;
}
.tile__del svg { width: 18px; height: 18px; }
.tile__del:hover { background: var(--bad); color: #fff; transform: translateY(-1px); }
.tile__del:focus-visible { outline: 2px solid var(--bad); outline-offset: 2px; }
.tile__acts .button_to { margin: 0; }

/* Metryka: etykieta u gory, wartosc pod nia. */
.tile__cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tile__k {
  font: 700 .62rem/1 var(--font-head); letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.tile__v { font: 700 .97rem/1.1 var(--font-body); letter-spacing: -.01em; color: var(--text); }
.tile__v.soft { font-weight: 600; color: var(--muted); }
.tile__v small { font-weight: 600; color: var(--muted); }
.tile__sub3 { font-size: .72rem; color: var(--muted); }

/* ---------- menu „⋯" ----------
   Baza klas menu zyje tylko w application.css (skora /admin). Panel laduje
   shared.css, wiec bez tego kebab w kaflu renderowalby sie bez pozycji,
   tla i cienia. Przenosimy baze i farbujemy tokenami zielonej skorki; rozmiary
   i kotwiczenie w kaflu dopina .tile__acts .more / .tile__main .menu nizej. */
.more {
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--muted);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.more svg { width: 20px; height: 20px; }
.more:hover { background: var(--accent-soft); color: var(--text); }
.more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.menu__veil { position: fixed; inset: 0; z-index: 15; }
.menu__veil[hidden] { display: none; }

.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  width: 210px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow);
}
.menu--up { top: auto; bottom: calc(100% + 6px); }
/* Dla „+" stojacego po LEWEJ (np. pracownicy): menu rozwija sie w prawo, zeby
   nie ucieklo za lewa krawedz. Domyslnie kotwiczy prawa krawedzia (right:0). */
.menu--left { left: 0; right: auto; }
.menu[hidden] { display: none; }
.menu form { margin: 0; }

.menu__item {
  display: block; width: 100%; padding: .5rem .6rem;
  border: 0; border-radius: 7px; background: none; color: var(--text);
  font: inherit; font-size: .88rem; text-align: left;
  text-decoration: none; cursor: pointer;
}
.menu__item:hover { background: var(--accent-soft); }
.menu__item--out { color: var(--bad); }
.menu__item--out:hover { background: var(--bad-soft); }
.menu__line { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }

/* Akcje: kebab (menu poboczne) + okragla zielona strzalka (otworz karte). */
.tile__acts { position: relative; display: flex; align-items: center; gap: 9px; justify-self: end; }
.tile__go {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid var(--accent-mid); background: var(--accent-soft); color: var(--accent-dark);
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
.tile__go svg { width: 19px; height: 19px; transition: transform .14s ease; }
.tile__go:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-1px); }
.tile__go:hover svg { transform: translateX(2px); }
.tile__go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Kebab: szerszy target pod ikone, spojny z reszta panelu (.more + .menu). */
.tile__acts .more { width: 44px; height: 44px; border-radius: 11px; font-size: 1.25rem; }

/* Kafel nie jest klikalny jako calosc - kursor domyslny i bez unoszenia; raczka
   tylko na przyciskach. Unoszenie (transform) trzeba zdjac tez dlatego, ze
   robilo z kafla containing block dla position:fixed zaslony menu - przez to
   zaslona zamykala sie tylko w obrebie kafla i klik poza nie zamykal menu.
   Otwarte menu podnosi swoj kafel nad sasiadow, inaczej dropdown chowa sie pod
   nastepna karta. */
.tile:has(.tile__main) { cursor: default; }
.tile:has(.tile__main):hover { transform: none; }
.tile:has(.menu:not([hidden])) { position: relative; z-index: 30; }
.tile__go { cursor: pointer; }

/* Rozwijany detal w obrebie kafla - ta sama animacja co .detail-box. */
.tile__detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.tile.is-open .tile__detail { grid-template-rows: 1fr; }
.tile__detail > .inner { overflow: hidden; min-height: 0; }
/* Detal reuzywa markup .finfo-card/.finfo, ale te style sa w skorze scope'owane
   pod .tbl--card. Poza tabela odtwarzamy ramke z zielonym paskiem i pionowy
   uklad wartosci (nazwa grubo, e-mail/telefon pod spodem). */
.tile__detail .finfo-card {
  margin: 0 22px 18px 52px; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 12px; padding: 4px 20px 8px;
}
.tile__detail .finfo { border-top: 0; }
.tile__detail .finfo .v { display: flex; flex-direction: column; gap: 3px; }
.tile__detail .finfo .v b { font-weight: 700; }
.tile__detail .finfo .v > .sub2 { display: block; margin: 0; color: var(--muted); font-size: .84rem; }
@media (prefers-reduced-motion: reduce) { .tile__detail { transition: none; } }

@media (max-width: 1080px) {
  .tile__main { grid-template-columns: 34px 1fr 1fr; gap: 16px; }
  .tile__id { grid-column: 2 / -1; }
  .tile__acts { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-end; }
  .tile__detail .finfo-card { margin-left: 16px; }
}

/* ---------- kafel zespolu ----------
   Ten sam uklad co lista firm, ale kolumny dopasowane do metryk osoby i BEZ
   wiodacej kolumny na chevron (edycja siedzi w kebabie): osoba, Role (szersza -
   bywa kilka batonow), Firmy / Status / 2FA, kebab. Strzalki wejscia (.tile__go)
   tez nie ma - osoba nie ma osobnej karty. */
.tile--staff .tile__main {
  grid-template-columns: minmax(190px, 2.2fr) minmax(130px, 1.3fr) repeat(3, minmax(0, .8fr)) auto;
}
/* Akcje zespolu: STALE dwa sloty 40px (zebatka | kosz-albo-pusto). Kosz jest
   tylko przy czesci kont (nie admin, nie ja), wiec bez rezerwacji slotu kolumna
   `auto` skakalaby i rozjezdzala ROLE/FIRMY/STATUS/2FA miedzy rzedami. */
.tile--staff .tile__acts { display: grid; grid-template-columns: repeat(2, 40px); gap: 8px; align-items: center; justify-self: end; }
.tile--staff .tile__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tile--staff .tile__roles { display: flex; flex-wrap: wrap; gap: 6px; }
.tile--staff .tile__roles .ktag { flex: none; }
/* Detal zespolu to formularz (role + 2FA), nie siatka .finfo - zdejmujemy
   zawezajacy lewy margines (byl pod chevron) i dajemy oddech w srodku ramki. */
.tile--staff .tile__detail .finfo-card { margin: 0 22px 18px; padding: 16px 20px; }

@media (max-width: 1080px) {
  /* Bez tego wielokolumnowa siatka desktopu (wyzsza specyficznosc niz .tile__main)
     zostalaby na waskim ekranie i rozjechala kafel. Osoba na cala szerokosc. */
  .tile--staff .tile__main { grid-template-columns: 1fr 1fr; }
  .tile--staff .tile__id { grid-column: 1 / -1; }
  /* Akcje (zebatka + kosz) w jednym rzedzie, pelna szerokosc, do prawej. Bez tego
     generyczne `.tile__acts { display: contents }` (<=640) rozrzuciloby przyciski. */
  .tile--staff .tile__acts {
    grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; padding: 0 14px 14px;
  }
}

/* ---------- blok „Sortuj": blizniak bloku „Filtry" ----------
   Ramka i etykieta na obrysie to te same klasy co filtry (.ffield / .ffield-legend),
   wiec „Sortuj" lezy na linii ramki tak samo jak „Filtry". Rozni sie tylko trescia:
   chipy sortujace zamiast batonow filtra. */
/* Blok „Sortuj" miesci jeden rzad chipow. Symetryczny, ciasniejszy padding niz
   w Filtrach (te maja rzad szukania nad chipami) trzyma ramke tylko tak wysoka,
   jak trzeba, a chipy siedza w pionie na srodku - nie przy gornej krawedzi. */
.sortfield { align-items: center; padding-top: 12px; padding-bottom: 12px; }
.sortfield .sortbar { align-self: center; }
.sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.sortchip {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none;
  height: 38px; padding: 0 14px; box-sizing: border-box; border-radius: 11px; cursor: pointer;
  background: #fff; border: 1px solid var(--border-strong, #cbd3dd);
  color: var(--muted); font: 600 .88rem/1 var(--font-body);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.sortchip:hover { border-color: var(--accent); color: var(--text); }
.sortchip.on { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-mid); }
.sortchip .car { transition: transform .18s ease; }
.sortchip .car.flip { transform: rotate(180deg); }
.sortchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- szukanie z lupa (wariant `icon` filterdropa) ----------
   Pole zrosniete z kwadratowym zielonym przyciskiem z sama lupa: input traci
   prawy promien i obwod, przycisk domyka grupe. Wlaczane tylko tam, gdzie
   filterdrop dostaje search[:icon] (lista firm). */
.fsearchrow--join { gap: 0; }
.fsearchrow--join .fsearch { border-radius: 11px 0 0 11px; border-right: 0; }
.fsearchrow--join .fsearch:focus-within { border-right: 0; }
.fsearch__btn--icon {
  width: 52px; padding: 0; border-radius: 0 11px 11px 0;
  display: grid; place-items: center;
}
.fsearch__btn--icon svg { width: 19px; height: 19px; }

/* Lista firm: cialo ramki rozciaga sie na cala szerokosc, zeby rzad szukania
   (`.fsearchrow` ma podstawe 100%) zajal pelny obrys, a batony filtra zeszly
   pod niego. Bez tego jedyny element w flexowym `.ffield` kurczyl sie do
   szerokosci batonow i pole szukania bylo zwezone. Scope tylko na wariant
   z lupa (search[:icon]), by nie ruszac innych pasków filterdropa. */
.ffield-body:has(.fsearchrow--join) { flex: 1 1 100%; width: 100%; }

/* ---------- mobilny akordeon Filtry/Sortuj ----------
   Ten sam blok co desktop, tyle ze na waskim ekranie chowa sie za paskiem-
   naglowkiem (ikona + tytul + licznik + chevron). Desktop: naglowek ukryty,
   tresc otwarta. Nazwa `.mcollapse` - wlasny wrapper listy firm, wnetrza
   wspoldzielonego filterdropa nie ruszamy. */
.mcollapse__head { display: none; }
.mcollapse__body > .mcollapse__inner > .filterbar-row { margin-bottom: 14px; }

@media (max-width: 640px) {
  .mcollapse {
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
    box-shadow: var(--shadow); margin-bottom: 10px; overflow: hidden;
  }
  .mcollapse.is-open { border-color: var(--accent-mid); }
  .mcollapse__head {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 13px 14px; border: 0; background: none; cursor: pointer; text-align: left;
  }
  .mcollapse__ic { flex: none; width: 18px; height: 18px; color: var(--accent-dark); }
  .mcollapse__ttl {
    font: 700 .78rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
    color: var(--text);
  }
  .mcollapse__badge {
    flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--accent); color: #fff; font: 700 .7rem/20px var(--font-head);
    text-align: center; font-variant-numeric: tabular-nums;
  }
  .mcollapse__tag {
    flex: none; padding: 2px 9px; border-radius: 999px; font: 600 .76rem var(--font-body);
    color: var(--accent-dark); background: var(--accent-soft); border: 1px solid var(--accent-mid);
  }
  .mcollapse__sp { margin-left: auto; }
  .mcollapse__caret { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform .2s ease; }
  .mcollapse.is-open .mcollapse__caret { transform: rotate(180deg); color: var(--accent); }
  .mcollapse__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
  .mcollapse.is-open .mcollapse__body { grid-template-rows: 1fr; }
  .mcollapse__inner { overflow: hidden; min-height: 0; }
  /* Po rozwinieciu zdejmujemy przyciecie, inaczej popover filtra (fdrop) wpadalby
     pod krawedz akordeonu. Zwiniete zostaje przyciete - potrzebne do animacji. */
  .mcollapse.is-open .mcollapse__inner { overflow: visible; }
  /* Chrome daje akordeon - ramka i legenda ffield w srodku sa zbedne. */
  .mcollapse .ffield { border: 0; border-radius: 0; padding: 4px 12px 12px; }
  .mcollapse .ffield-legend { display: none; }
  .mcollapse__body > .mcollapse__inner > .filterbar-row { margin-bottom: 0; }

  /* Kafel firmy pionowo: naglowek (avatar+nazwa+kebab), metryki 2 kolumny,
     stopka z dwiema ikonami. Ten sam HTML co desktop - tu tylko przelozony grid.
     `display:contents` na .tile__acts rozdziela kebab (do naglowka) i strzalke
     wejscia (do stopki), mimo ze w HTML sa rodzenstwem. */
  .tile__main {
    grid-template-columns: 1fr 1fr; gap: 0; padding: 0; align-items: stretch;
  }
  .tile__acts { display: contents; }
  .tile__id { grid-column: 1; grid-row: 1; padding: 14px 14px 12px; }
  .tile__main .more { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; margin: 13px 12px 0 0; }
  .tile__cell { padding: 11px 14px; gap: 4px; }
  .tile__cell--slots { grid-column: 1; grid-row: 2; }
  .tile__cell--days  { grid-column: 2; grid-row: 2; }
  .tile__cell--until { grid-column: 1 / -1; grid-row: 3; }
  .tile__cell--meter {
    grid-column: 1 / -1; grid-row: 4; padding-bottom: 13px;
    border-bottom: 1px solid var(--border);
  }
  .tile__cell--meter .meter, .tile__cell--meter .meter--sm { max-width: none; width: 100%; }

  /* ⚠ Uklad kafla FIRMY (minimum + „Więcej") siedzi w osobnym @media <=1080px
     nizej - firma zwija sie wczesniej niz 640, bo jej 6-kolumnowa siatka cisnie
     sie juz miedzy 640 a 1080 (tak jak kafel pracownika). */
  /* Stopka: chevron rozwijania po lewej, zielona strzalka wejscia po prawej. */
  .tile__twist {
    grid-column: 1; grid-row: 5; justify-self: start; margin: 11px 0 11px 14px;
    width: 50px; height: 44px; border-radius: 12px;
    border: 1px solid var(--accent-mid); background: var(--accent-soft); color: var(--accent-dark);
  }
  .tile__twist svg { width: 20px; height: 20px; }
  .tile.is-open .tile__twist { background: var(--accent); color: #fff; border-color: var(--accent); }
  .tile__go { grid-column: 2; grid-row: 5; justify-self: end; margin: 11px 14px 11px 0; width: 52px; height: 44px; }
  .tile__go svg { width: 21px; height: 21px; }
  /* Menu kebaba kotwiczy teraz do .tile (tile__acts znikl przez display:contents)
     - sadzamy je pod naglowkiem, przy kebabie. */
  .tile__main .menu { top: 54px; right: 12px; bottom: auto; }

  /* Chipy sortowania nie zawijaja - przewijaja sie w poziomie. */
  .sortbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sortbar::-webkit-scrollbar { height: 0; }
  .sortchip { flex: none; }
}

/* Kafel FIRMY: minimum + „Więcej" juz na <=1080 (nie 640) - 6-kolumnowa siatka
   cisnie sie miedzy 640 a 1080 (sidebar/burger nawigacji), jak kafel pracownika.
   Kolapsowana = logo + nazwa + „Zarzadzaj" w jednej linii; metryki po „Więcej".
   Blok samodzielny, scope .tile--company (w tym progu generyczne reguly z <=640
   jeszcze nie dzialaja). */
@media (max-width: 1080px) {
  .tile--company .tile__main {
    grid-template-columns: 1fr 1fr; gap: 0; padding: 0; align-items: stretch; cursor: pointer;
  }
  .tile--company .tile__acts { display: contents; }
  .tile--company .tile__id { grid-column: 1; grid-row: 1; padding: 14px 14px 12px; }
  .tile--company .tile__manage {
    grid-column: 2; grid-row: 1; justify-self: end; align-self: center; margin: 0 12px 0 0;
  }
  .tile--company .tile__cell { display: none; padding: 11px 14px; gap: 4px; }
  .tile--company.is-open .tile__cell { display: flex; }
  .tile--company .tile__cell--slots { grid-column: 1; grid-row: 2; }
  .tile--company .tile__cell--days  { grid-column: 2; grid-row: 2; }
  .tile--company .tile__cell--until { grid-column: 1 / -1; grid-row: 3; }
  .tile--company .tile__cell--meter {
    grid-column: 1 / -1; grid-row: 4; padding-bottom: 13px; border-bottom: 0;
  }
  .tile--company .tile__cell--meter .meter,
  .tile--company .tile__cell--meter .meter--sm { max-width: none; width: 100%; }
  .tile--company .tile__detail { display: none; }
  .tile--company .tile__expand { display: flex; }
}

/* Kafel KURSU zwija sie tak samo jak firmowy: nazwa + „Zarzadzaj" w jednej
   linii, metryki po „Więcej". Komorki kursu sa generyczne (bez klas --slots
   itd.), wiec ukladaja sie samoplynnie w dwie kolumny. */
@media (max-width: 1080px) {
  .tile--course .tile__main {
    grid-template-columns: 1fr 1fr; gap: 0; padding: 0; align-items: stretch; cursor: pointer;
  }
  .tile--course .tile__id { grid-column: 1; grid-row: 1; padding: 14px 14px 12px; }
  /* Akcje (zebatka + kosz) razem w prawym gornym rogu. */
  .tile--course .tile__acts {
    grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
    display: flex; gap: 8px; margin: 0 12px 0 0;
  }
  .tile--course .tile__cell { display: none; padding: 11px 14px; gap: 4px; }
  .tile--course.is-open .tile__cell { display: flex; }
  .tile--course .tile__detail { display: none; }
  .tile--course .tile__expand { display: flex; }
}

/* ---------- kafel KLIENTA sklepu [#53] ----------
   Ta sama siatka co firma (osoba + 4 metryki + akcje); na desktopie wszystko
   miesci sie w rzedzie, na <=1080 minimum + „Więcej" (blok nizej). Akcje: ikona
   „Profil" (.tile__manage) + kebab na <details> (details-menu) z lista .menu
   kotwiczona do <details>. */
.tile--customer .tile__main {
  grid-template-columns: minmax(240px, 2.6fr) repeat(4, minmax(0, .8fr)) auto;
}
.tile--customer .tile__name a { color: inherit; text-decoration: none; }
.tile--customer .tile__name a:hover { color: var(--accent-dark); }
.tile__menu { position: relative; }
.tile__menu > summary { list-style: none; }
.tile__menu > summary::-webkit-details-marker { display: none; }
.tile__menu[open] > .more { background: var(--accent-soft); color: var(--text); }
.tile__menu .menu form { display: contents; }
/* ⚠ `.menu` w <details> nigdy nie dostaje [hidden], wiec ogolne
   `.tile:has(.menu:not([hidden]))` wyzej podnosilo KAZDY kafel klienta/zamowienia
   na z-index 30 - nastepny kafel (pozniej w DOM) przykrywal otwarte menu
   poprzedniego [#70/#71]. Podnosimy tylko kafel z OTWARTYM <details>. */
.tile:has(.tile__menu:not([open])) { z-index: auto; }
.tile:has(.tile__menu[open]) { z-index: 30; }

/* <=1080: minimum + „Więcej" jak kafel firmy/pracownika [#69-#71].
   Rzad 1: naglowek (avatar + nazwa + e-mail) na cala szerokosc z rezerwa 112px
   po prawej - tam, przybite absolutnie do .tile__main, siedza oba przyciski
   (ikona wejscia 12+44+8 od prawej, kebab 12). Rzad 2: kontener akcji, w stanie
   zamknietym ZEROWEJ wysokosci (przyciski sa poza flow). Menu kebaba na mobile
   NIE plywa: `.menu` wraca do flow wewnatrz <details>, wiec otwarte wypelnia
   rzad 2 - lista rozwija sie POD naglowkiem na szerokosc kafla, rozpycha kafel
   i nic nie zaslania ani nie wchodzi na sasiedni kafel. Metryki poza
   `.tile__cell--peek` schowane do `.is-open` (rzedy 3+). */
@media (max-width: 1080px) {
  .tile--customer .tile__main {
    grid-template-columns: 1fr 1fr; gap: 0; padding: 0; align-items: stretch; cursor: pointer;
    position: relative;
  }
  .tile--customer .tile__id { grid-column: 1 / -1; grid-row: 1; padding: 14px 112px 12px 14px; }
  .tile--customer .tile__acts {
    grid-column: 1 / -1; grid-row: 2; justify-self: stretch; display: block;
    position: static; margin: 0; padding: 0 12px;
  }
  .tile--customer .tile__manage { position: absolute; top: 14px; right: 64px; }
  .tile--customer .tile__menu { position: static; }
  /* `margin:0` zdejmuje tez `13px 12px 0 0` z generycznego `.tile__main .more` (<=640). */
  .tile--customer .tile__menu > .more { position: absolute; top: 12px; right: 12px; margin: 0; }
  .tile--customer .tile__menu > .menu { position: static; width: auto; margin: 0 0 8px; }

  .tile--customer .tile__cell { display: none; padding: 11px 14px 13px; gap: 4px; }
  .tile--customer .tile__cell--peek, .tile--customer.is-open .tile__cell { display: flex; }
  .tile--customer .tile__cell--account  { grid-column: 1; grid-row: 3; }
  .tile--customer .tile__cell--invoices { grid-column: 2; grid-row: 3; }
  .tile--customer .tile__cell--courses  { grid-column: 1; grid-row: 4; }
  .tile--customer .tile__cell--orders   { grid-column: 2; grid-row: 4; }
  .tile--customer .tile__expand { display: flex; }
}

/* ---------- kafel ZAMOWIENIA sklepu [#65] ----------
   Ta sama siatka co klient, ale szesc metryk (Kwota / Platnosc / Mail /
   Faktura / Konto / Data) - kolumna osoby wezsza, chipy na minmax(0). */
.tile--order .tile__main {
  grid-template-columns: minmax(220px, 2fr) repeat(6, minmax(0, .8fr)) auto;
}
.tile--order .tile__sub b { color: var(--text); font-weight: 600; }
.tile--order .tile__cell .chip { width: fit-content; max-width: 100%; }

/* Mobile dziedziczy z .tile--customer (ten sam blok wyzej); tu rozklad szesciu
   komorek: Kwota + Platnosc widoczne od razu (peek), reszta po „Więcej".
   ⚠ Reset siatki JEST konieczny: desktopowa `.tile--order .tile__main` (8 kolumn)
   stoi wyzej w pliku niz mobilna `.tile--customer .tile__main` o tej samej
   specyficznosci i bez tego wygrywala - kafel zamowienia trzymal 8 kolumn na
   telefonie i nazwa wchodzila pod ikony [#69]. */
@media (max-width: 1080px) {
  .tile--order .tile__main { grid-template-columns: 1fr 1fr; }
  .tile--order .tile__cell--total   { grid-column: 1; grid-row: 3; }
  .tile--order .tile__cell--payment { grid-column: 2; grid-row: 3; }
  .tile--order .tile__cell--mail    { grid-column: 1; grid-row: 4; }
  .tile--order .tile__cell--invoice { grid-column: 2; grid-row: 4; }
  .tile--order .tile__cell--account { grid-column: 1; grid-row: 5; }
  .tile--order .tile__cell--date    { grid-column: 2; grid-row: 5; }
}

/* Przycisk „Odwiedź sklep" na pasku zakladek Sklepu [#52/#68]: po prawej,
   nie-zakladka - .btn.small.ghost z obrysem marki, wyrownany do zakladek. */
.set-tab--ext { margin-left: auto; align-self: center; margin-bottom: 6px; flex: none; }
.set-tab--ext svg { width: 15px; height: 15px; flex: none; }

/* AS-0259: Sklep ma do dziewieciu pozycji w pasku - przy overflow-x ostatnie
   chowaly sie za prawa krawedzia juz na 13". Tu pasek zawija sie w wiersze,
   a na waskim ekranie zakladki ukladaja sie w siatke z obrysem. */
.set-tabs--wrap { flex-wrap: wrap; overflow: visible; gap: 2px 0; }
.set-tabs--wrap .set-tab { padding: 10px 11px; }
@media (max-width: 760px) {
  .set-tabs--wrap {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px; border-bottom: none;
  }
  .set-tabs--wrap .set-tab {
    border: 1px solid var(--border); border-radius: 10px; margin: 0;
    background: var(--surface); white-space: normal;
  }
  .set-tabs--wrap .set-tab.is-on { border-color: var(--accent); background: var(--accent-soft); }
  .set-tabs--wrap .set-tab--ext { margin: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mcollapse__body { transition: none; }
  .mcollapse__caret, .tile__twist svg, .tile__go svg { transition: none; }
}

/* ================= KURSY I LEKCJE: RÓŻNICE KOLUMN =================
   Te same kafle co lista firm - rozni sie tylko uklad kolumn i klikalnosc. */

/* Lekcje: kafel bez chevrona rozwijania, wiec pierwsza kolumna to od razu nazwa.
   Reszta kolumn i strzalka wejscia ta sama co przy firmach/kursach. */
.tile__main--flush {
  grid-template-columns: minmax(240px, 2.6fr) repeat(4, minmax(0, .8fr)) auto;
}

/* Kafel lekcji NIE jest klikalny jako calosc - jedynym wejsciem jest strzalka
   .tile__go (jak w Firmach/Kursach). Baza `.tile:has(.tile__main)` trzyma kursor
   domyslny i zdejmuje unoszenie; raczka zostaje tylko na .tile__go. */

/* Zielony „ptaszek" w kolumnie Wideo lekcji. */
.ok-check { color: var(--ok); }

/* Kafel LEKCJI zwija sie tak samo jak firmowy/kursowy: nazwa + strzalka wejscia
   w jednej linii, metryki po „Więcej". Rozni sie tylko wejscie - strzalka
   .tile__go zamiast „Zarzadzaj" - reszta mechaniki wspolna (rows_controller,
   prog 1080 zgodny z data-rows-mobile-body w _row).

   ⚠ Reset siatki JEST konieczny: bazowa `.tile__main--flush` (6 kolumn desktopu)
   stoi nizej w pliku niz mobilna `.tile__main { 1fr 1fr }`, wiec bez wyzszej
   specyficznosci (`.tile--lesson ...`) lekcja trzymalaby na telefonie desktopowy
   grid i komorki nachodzilyby na siebie. */
@media (max-width: 1080px) {
  .tile--lesson .tile__main--flush {
    grid-template-columns: 1fr 1fr; gap: 0; padding: 0; align-items: stretch; cursor: pointer;
  }
  /* Naglowek zajmuje CALA szerokosc (obie kolumny) - dlugi tytul lekcji ma sie
     gdzie rozlac. Akcje (zebatka + kosz) leza w tym samym wierszu w prawym rogu;
     padding-right w .tile__id robi im miejsce (dwa przyciski ~88px). */
  .tile--lesson .tile__id { grid-column: 1 / -1; grid-row: 1; padding: 14px 106px 12px 14px; }
  .tile--lesson .tile__acts {
    grid-column: 1 / -1; grid-row: 1; justify-self: end; align-self: center;
    display: flex; gap: 8px; margin: 0 12px 0 0;
  }
  .tile--lesson .tile__cell { display: none; padding: 11px 14px; gap: 4px; }
  .tile--lesson.is-open .tile__cell { display: flex; }
  .tile--lesson .tile__cell--meter .meter,
  .tile--lesson .tile__cell--meter .meter--sm { max-width: none; width: 100%; }
  .tile--lesson .tile__expand { display: flex; }
}

/* ---------- pasek postepu Turbo ----------
   Turbo Drive rysuje ten pasek na kazda nawigacje GET (szukanie, filtry, sort),
   ale panel laduje shared.css - bez tej reguly pasek nie mial wysokosci ani
   koloru i ladowanie bylo niewidoczne. Delay 100 ms ustawia application.js. */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}

/* ---------- Pracownicy: pasek + kafelki (styl listy firm) ---------- */
/* Naglowek „Pracownicy" + licznik po lewej, nazwane akcje po prawej. Zastapil
   samotny „+" nad ramka filtrow (bez etykiety, wizualnie oderwany). */
.worker-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.worker-top__head { display: flex; align-items: center; gap: 10px; }
.worker-top__title { margin: 0; font: 800 1.15rem/1 var(--font-head); letter-spacing: -.01em; color: var(--text); }
.worker-top__count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-deep);
  display: inline-grid; place-items: center;
  font: 700 .76rem/1 var(--font-head); font-variant-numeric: tabular-nums;
}
.worker-top__acts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.worker-top__note { margin-left: auto; }

/* Mobilny wariant „Dodaj pracownika": jeden zwijany przycisk zamiast dwoch.
   Na desktopie ukryty - tam graja dwa nazwane batony (.worker-acts__wide). */
.worker-acts__mobile { display: none; }

@media (max-width: 640px) {
  /* Naglowek „Pracownicy N" znika - nie chcemy go na mobile. Zostaje sam pasek
     akcji, pelnej szerokosci, nad wyszukiwarka i lista. */
  .worker-top { display: block; margin-bottom: 10px; }
  .worker-top__head { display: none; }
  .worker-top__acts { margin: 0; display: block; }

  /* Dwa desktopowe batony chowamy, pokazujemy zwijany „Dodaj pracownika". */
  .worker-acts__wide { display: none; }
  .worker-acts__mobile { display: block; margin-bottom: 10px; }

  /* Glowa akordeonu wyglada jak zielony przycisk primary (jak dotad), tyle ze
     pelnej szerokosci i z chevronem po prawej. Nadpisuje bazowy .mcollapse. */
  .mcollapse--add { border: 0; background: none; box-shadow: none; overflow: visible; }
  .mcollapse--add.is-open { border-color: transparent; }
  .mcollapse--add .mcollapse__head {
    position: relative; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--radius-btn);
    background: linear-gradient(180deg, var(--btn-primary-1) 0%, var(--btn-primary-2) 100%);
    color: var(--btn-primary-ink); box-shadow: 0 6px 16px var(--btn-primary-shadow);
  }
  .mcollapse--add .mcollapse__ic { width: 17px; height: 17px; color: currentColor; }
  .mcollapse--add .mcollapse__ttl {
    font: 600 .95rem/1 var(--font-body); letter-spacing: 0; text-transform: none;
    color: currentColor;
  }
  .mcollapse--add .mcollapse__sp { display: none; }
  .mcollapse--add .mcollapse__caret {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: currentColor;
  }
  .mcollapse--add.is-open .mcollapse__caret { transform: translateY(-50%) rotate(180deg); color: currentColor; }

  /* Rozwiniete opcje: osobny panel „dropdown" pod przyciskiem, dwa batony w slupku.
     Odstep w .mcollapse__inner (przyciety przy zwinieciu), nie w __body. */
  .worker-add__menu {
    display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); box-shadow: var(--shadow);
  }
  .worker-add__menu .btn { width: 100%; }
}

/* Kafelki pracownikow. Kursy rozwija sie z menu "...", wiec bez kolumny chevrona
   po lewej. Bez wrappera z overflow - obcinalby dropdown; komorki sciskaja sie
   przez minmax(0,...). */
.tile__main--emp {
  /* Metryki po odchudzeniu: Dzial, Kursy, 2FA + szersza Zaproszenie (miesci
     przycisk „Wyślij zaproszenie" bez lamania). Stan/Wynik/Podejscia zeszly. */
  grid-template-columns: minmax(200px, 2.2fr) repeat(3, minmax(0, .8fr)) minmax(0, 1.2fr) auto;
  gap: 14px; padding: 15px 20px;
}
.tile__main--emp .tile__avatar { width: 40px; height: 40px; }

/* Kolumna "Zaproszenie" - akcja wprost w wierszu zamiast wpisu w menu. */
.invite-form { margin: 0; display: contents; }
.invite-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--accent-mid);
  background: var(--accent-soft); color: var(--accent-dark);
  font: 600 .78rem/1.2 var(--font-body); cursor: pointer; white-space: normal;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.invite-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.invite-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.invite-btn--again { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.invite-btn--again:hover { background: var(--warn); color: #fff; }

/* Stan "zrobione": ptaszek w kolku + etykieta, wyszarzone. Aktywny (osoba
   weszla) dostaje zielony wariant - to juz nie "czeka", tylko dziala. */
.invite-done {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 .78rem/1.2 var(--font-body); color: var(--muted);
}
.invite-check {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: #eef0f4; color: var(--faint, #8a94a3); font-size: .72rem; font-weight: 700;
}
.invite-done--live { color: var(--ok); }
.invite-done--live .invite-check { background: var(--ok-soft); color: var(--ok); }

.people-tiles .tile__acts { gap: 7px; }
/* E-mail ma wlasna komorke tylko w mobilnym „Więcej" - na desktopie siedzi w
   naglowku, wiec tu ukryta (regula PO bazowym .tile__cell, wiec wygrywa). */
.tile__cell--email { display: none; }

/* Pracownik ma rozwiniecie z kursami (w odroznieniu od firmy, ktora na desktopie
   wchodzi na pelna karte „Zarzadzaj"). Dlatego pasek „Więcej/Mniej" jest tu
   widoczny NA KAZDEJ SZEROKOSCI: na desktopie odslania same kursy, na mobile
   dodatkowo metryki schowane pod naglowkiem. Detal bez lewego wciecia (osoba nie
   ma kolumny chevrona), a przy odpieciu przycisk ma zerowy margines. */
.people-tiles .tile__expand { display: flex; }
.people-tiles .tile__detail .finfo-card { margin: 0 20px 18px; }
.crs-head { display: flex; align-items: baseline; gap: 8px; padding: 8px 0 4px; }
.crs-head .k {
  font: 700 .62rem/1 var(--font-head); letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.crs-count { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.crs-list { list-style: none; margin: 0; padding: 0 0 6px; display: flex; flex-direction: column; gap: 9px; }
.crs-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crs-name { font-weight: 600; color: var(--text); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.crs-line .button_to { margin: 0; }

/* Kafel PRACOWNIKA - najgestszy (8 kolumn) i siedzi w widoku z sidebarem, wiec
   przechodzi w tryb minimum+rozwijanie juz na <=1080 (tam apka i tak zwija kafle:
   .tile__main / .tile--staff / burger nawigacji). Bez tego miedzy 640 a 1080
   8-kolumnowa siatka desktopu wciska sie i tresc sie nakłada. Scope `.people-tiles`
   bije `.tile__main--emp` (0,2,0 > 0,1,0) i nie rusza kafli firm/kursow. */
@media (max-width: 1080px) {
  .people-tiles .tile__main--emp {
    grid-template-columns: 1fr 1fr; gap: 0; padding: 0; align-items: stretch;
  }
  /* Pasek „Więcej/Mniej" widoczny w tym trybie (wyglad z bazy). */
  .people-tiles .tile__expand { display: flex; }
  .people-tiles .tile__id { grid-column: 1 / -1; grid-row: 1; padding: 14px 48px 12px 14px; }
  /* E-mail zawija sie brzydko przy dlugich adresach - na mobile go chowamy. */
  .people-tiles .tile__sub { display: none; }
  /* Menu „..." wyjete z siatki - wisi w prawym gornym rogu kafla. */
  .people-tiles .more { position: absolute; top: 12px; right: 12px; margin: 0; }
  .people-tiles .tile__main .menu { top: 52px; right: 12px; bottom: auto; }

  /* Metryki schowane; „Więcej" je odslania (2 na rzad, linia miedzy rzedami). */
  .people-tiles .tile__cell { display: none; padding: 11px 14px; gap: 4px; border-top: 1px solid var(--border); }
  .people-tiles .tile.is-open .tile__cell { display: flex; }
  /* E-mail na cala szerokosc rozwinietej sekcji, z lamaniem dlugiego adresu. */
  .people-tiles .tile.is-open .tile__cell--email { grid-column: 1 / -1; }
  .people-tiles .tile__cell--email .tile__v { white-space: normal; overflow-wrap: anywhere; }
}

/* Administrator firmy - ZOLTY pill przy nazwisku (dobrze widoczny) + lekki
   zloty akcent kafelka. */
.tile--admin { border-color: #e6cf7a; background: #fffdf3; }
/* Kafel admina: pill nad wierszem avatar+nazwa, wszystko rowno z lewa. Wiersz
   avatar+nazwa siedzi we wlasnym .tile__idrow, wiec pill go nie rozpycha.
   width:100% jest KLUCZOWE: .tile--admin .tile__id ma align-items:flex-start
   (pill do lewej), przez co wiersz bez tego rozciagalby sie do szerokosci tresci
   (dlugie nazwisko/mail) i wyjezdzal poza kolumne id na sasiednie metryki.
   Z width:100% wiersz trzyma sie szerokosci kolumny, a clamp nazwy i „…" maila
   wreszcie dzialaja. */
.tile__idrow { display: flex; align-items: center; gap: 13px; min-width: 0; width: 100%; }
.tile--admin .tile__id { flex-direction: column; align-items: flex-start; gap: 7px; }
.role-pill {
  display: inline-block; margin: 0; vertical-align: baseline;
  padding: 2px 9px; border-radius: 999px;
  background: var(--highlight); color: #3a2600;
  font: 700 .6rem/1.5 var(--font-head); letter-spacing: .06em; text-transform: uppercase;
}

/* Zakladki w modalu - tuz pod naglowkiem, bez gornego marginesu. Wlasna klasa
   (nie `.tabpane`), zeby nie mieszac sie z zakladkami karty firmy. */
.modal__tabs .tabs { margin-top: 0; }
.modaltab { display: none; }
.modaltab.on { display: block; }

/* ---------- zunifikowany pasek „Wyszukaj" (partial _searchbar) ----------
   Jeden <form> w ramce .ffield: szukanie | Stan | Opiekun | Sortuj | Szukaj.
   Dziedziczy flex + wrap + gap z .ffield; tu tylko rozkladamy elementy: pole
   szukania rosnie, batony filtra trzymaja swoja szerokosc, „Szukaj" i „Wyczysc"
   stoja na koncu. Popovery, batony i opcje maja wlasne klasy (.attr / .pop /
   .fopt) juz zdefiniowane wyzej - nie duplikujemy ich. */
.searchbar { row-gap: 12px; margin-bottom: 20px; }
/* Gdy pod paskiem sa kafle aktywnych filtrow: maly odstep do kafli (naleza do
   wyszukiwania), wiekszy odstep dopiero pod kaflami do listy firm. */
.searchbar:has(+ .fchips) { margin-bottom: 12px; }
/* Pole szukania to jedyny element, ktory rosnie; reszta trzyma szerokosc tresci. */
.searchbar__search { flex: 1 1 240px; min-width: 200px; height: 44px; }
.searchbar__cell { position: relative; flex: 0 1 auto; }
/* W pasku baton nie potrzebuje sztywnego 236px (to trzyma szerokosc gdy stoi sam
   w Filtrach) - dopasowuje sie do tresci, a popover i tak ma wlasne min-width.
   Wyrownujemy wysokosc do pola/przycisku szukania (44px). */
.searchbar .attr-btn { min-width: 150px; height: 44px; }
.searchbar__go { flex: none; display: inline-flex; align-items: center; gap: 7px; }
.searchbar__go svg { flex: none; }
.searchbar__clear { flex: none; align-self: center; }
/* Sort stoi po prawej - jego popover otwieramy od prawej krawedzi, zeby nie
   wyjechal poza ekran. */
.searchbar__cell--sort .pop { left: auto; right: 0; }

/* Kierunek sortu (rosnaco/malejaco) na dole popovera sortu: dwie pigulki-radia,
   natywne kolko schowane, caly label jest przelacznikiem. */
.sortdir {
  display: flex; gap: 6px; margin-top: 6px; padding: 8px 4px 2px;
  border-top: 1px solid var(--border);
}
.sortdir__opt {
  position: relative; flex: 1; margin: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border-strong, #cbd3dd); background: #fff;
  font: 600 .82rem/1 var(--font-body); color: var(--muted);
}
.sortdir__opt input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.sortdir__opt:has(input:checked) {
  background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-mid);
}

/* Kafelki aktywnych filtrow pod paskiem: pigulka z etykieta + „x". Caly kafel
   to link usuwajacy ten jeden filtr - „x" to tylko ozdoba wewnatrz linku. */
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.fchip {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  height: 32px; padding: 0 5px 0 12px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--accent-mid);
  color: var(--accent-dark); font: 600 .82rem/1 var(--font-body);
  transition: border-color .15s ease, background-color .15s ease;
}
.fchip:hover { border-color: var(--accent); }
.fchip__k { color: var(--muted); font-weight: 600; }
.fchip__v { font-weight: 700; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip__x {
  display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 999px;
  background: rgba(0, 0, 0, .06); color: var(--accent-dark); transition: background-color .15s ease, color .15s ease;
}
.fchip:hover .fchip__x { background: var(--accent); color: #fff; }
.fchips__clear {
  margin-left: 4px; padding: 0 6px; text-decoration: none; white-space: nowrap;
  font: 600 .82rem var(--font-body); color: var(--muted);
}
.fchips__clear:hover { color: var(--accent-dark); }

/* Mobile: caly pasek w pionie, kazda sekcja na pelna szerokosc. */
@media (max-width: 640px) {
  .searchbar { flex-direction: column; align-items: stretch; }
  /* ⚠ Kontener jest teraz kolumna, wiec flex-basis liczy sie na WYSOKOSC.
     Desktopowe `flex: 1 1 240px` na polu szukania robiloby z niego pudlo 240px
     WYSOKIE - zerujemy flex, zostaje samo `height: 44px`. */
  .searchbar__search, .searchbar__cell, .searchbar__go { flex: 0 0 auto; width: 100%; }
  .searchbar__search { height: 44px; }
  .searchbar .attr-btn { width: 100%; min-width: 0; }
  .searchbar__go { justify-content: center; }

  /* Dropdown rozwija liste W MIEJSCU (nie nakladka): popover wchodzi w uklad pod
     batonem, pelna szerokosc pola. Kilka moze byc otwartych naraz (fdrop:
     inlineMobile), wiec listy zostaja dostepne. */
  .searchbar .pop {
    position: static; display: none; width: 100%; min-width: 0; max-width: none;
    max-height: none; margin-top: 8px; overflow: visible;
    box-shadow: none; border-color: var(--border);
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .searchbar .attr.open .pop { display: block; }

  /* W akordeonie (mcollapse--search) odstepy daje sam akordeon - zerujemy wlasne
     marginesy paska, a kafle trzymaja tylko maly odstep nad soba. */
  .mcollapse--search .searchbar { margin-bottom: 0; }
  .mcollapse--search .fchips { margin-top: 12px; margin-bottom: 0; }
}

/* ---------- modal "Nowa firma": sekcje bez ramki karty ----------
   .box to normalnie biala karta z obwodka; w bialym oknie modala ta obwodka
   robi karte-w-karcie. W modalu zdejmujemy ramke, tlo i padding, a sekcje
   rozdziela cienka linia - czytelne grupy bez ciezkich pudelek. */
.modal__body .box { border: 0; border-radius: 0; padding: 0; background: none; }
.modal__body .box + .box { margin-top: 0; padding-top: 16px; border-top: 1px solid var(--border); }

/* ==========================================================================
   Moje konto (Panel::Profile). Wymiana awatara + telefon + trigger hasla.
   Przeniesione z panelu AssetLife (assetlife/base.css .avatarpick*), na tokeny
   panelu (whitelabel) - shared nie mial tych klas, bo profil dostawcy powstal
   pozniej niz reszta panelu.
   ========================================================================== */

/* Nazwisko z awatarem w gornym pasku prowadzi do wlasnego konta - ale nie ma
   wygladac jak link w tresci: bez podkreslenia, delikatne tlo na hover. */
a.adm-user { text-decoration: none; color: inherit; padding: 4px 6px; border-radius: 10px; }
a.adm-user:hover { background: rgba(0, 42, 23, .05); }
a.adm-user:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Naglowek konta: awatar obok nazwiska, od gory (bez zdjecia paleta wjezdza
   pod nazwisko i nie ma odpychac awatara w dol). */
.profilehead { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.profilehead__main { flex: 1 1 260px; min-width: 0; }
.profilehead__name { font-family: var(--font-head); font-size: 1.3rem; margin: 0 0 2px; }
.profilehead__meta { color: var(--muted); font-size: .9rem; margin: 0 0 10px; }

.avatarpick { display: block; flex: none; }
.avatarpick__frame { position: relative; width: 104px; height: 104px; border-radius: 50%; }
.avatarpick__mark {
  display: grid; place-content: center;
  width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden;
  font-family: var(--font-head); font-weight: 700; font-size: 2.1rem;
}
.avatarpick__mark--photo img,
.avatarpick__mark img { width: 100%; height: 100%; object-fit: cover; }

/* Szklo: matowa nakladka z akcjami, odslaniana na najechanie i przy fokusie. */
.avatarpick__glass {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .35rem;
  border-radius: 50%;
  background: rgba(0, 42, 23, .58);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .15s ease;
}
.avatarpick__frame:hover .avatarpick__glass,
.avatarpick__glass:focus-within { opacity: 1; }
/* button_to opakowuje przycisk w <form> - niech nie lamie ukladu szkla. */
.avatarpick__glass form { display: contents; margin: 0; }

.avatarpick__act {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6rem;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #fff;
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.avatarpick__act svg { width: 14px; height: 14px; }
.avatarpick__act:hover { background: rgba(255, 255, 255, .28); }
.avatarpick__act--del:hover { background: rgba(161, 48, 48, .85); }
.avatarpick__act:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Prawdziwy input pliku jest niewidoczny - klika go etykieta "Zmien/Dodaj". */
.avatarpick__file {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

.avatarpick__colors { display: grid; gap: .5rem; margin-top: .85rem; }
.avatarpick__colors .hint { margin: 0; }

.swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatch {
  position: relative;
  display: grid; place-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 42, 23, .08);
  transition: transform .1s ease;
}
.swatch:hover { transform: translateY(-1px); }
.swatch.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.swatch__radio {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.swatch__radio:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Telefon i haslo jako podglad z przyciskiem; przycisk odslania formularz. */
.editrow { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.editrow .inline { display: flex; align-items: center; gap: 14px; }
.editrow .inline .field-static { flex: 1 1 auto; min-width: 0; }
.editrow__form { margin-top: .6rem; }
.field-static { display: grid; gap: .25rem; }
.field-static__label { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field-static__value { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.field-static__value--dots { letter-spacing: .12em; font-variant-numeric: normal; }
.editrow > .hint { margin: .5rem 0 0; }

.phoneinput { display: flex; gap: .5rem; max-width: 340px; }
.phoneinput__prefix {
  flex: 0 0 auto;
  font-family: var(--font-body); font-size: .95rem; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: .7rem;
}
.phoneinput__prefix:focus { outline: none; border-color: var(--accent-mid); box-shadow: 0 0 0 4px var(--accent-soft); }
.phoneinput__num { flex: 1 1 auto; min-width: 0; }

/* Olowek "edytuj" tylko z ikona (bez tekstu) - wiersze konta na profilu. */
.pencil--icon { padding: 7px 9px; }
.pencil--icon svg { width: 16px; height: 16px; }

/* ============================================================
   Zakladka Subskrypcja - przeglad (redesign wg makiety)
   Jeden rytm: naglowki jak reszta (.box>h2), tabela na .tbl--card,
   podsumowanie przed szczegolem, kwoty netto + brutto.
   ============================================================ */

/* nota po prawej w naglowku sekcji (np. informacja o VAT) - NIE uppercase */
.boxhead .h-note {
  text-transform: none; letter-spacing: 0; font: 500 .8rem var(--font-body);
  color: var(--muted); display: inline-flex; align-items: center; gap: 7px;
}
.boxhead .h-note__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-mid); flex: none; }

/* trzy liczby na gorze karty "Co zawiera" */
.subsum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 640px) { .subsum { grid-template-columns: 1fr; } }
.subsum__c { border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; background: var(--bg); }
.subsum__l { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.subsum__v { font: 800 1.32rem/1.15 var(--font-head); margin-top: 3px; font-variant-numeric: tabular-nums; }
.subsum__v .u { font-size: .82rem; font-weight: 500; color: var(--muted); }
.subsum__s { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.subsum__s b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.subsum .meter--slim { margin: 9px 0 6px; }

/* cienki pasek zamiast wysokiego bloku "0%" */
.meter--slim { height: 7px; border: 0; border-radius: 999px; background: var(--bg); max-width: none; }
.meter--slim i { border-radius: 999px; }

/* kwoty w OSOBNYCH kolumnach: netto (grubo, to wpisujemy) i brutto (z VAT).
   Zgrupowany naglowek: "Stawka za slot"/"Wartosc" nad para netto|brutto. */
.tbl--pools table.tbl th.grp { text-align: center; border-bottom: 1px solid var(--accent-mid); }
.tbl--pools table.tbl th.sub {
  font-size: .64rem; letter-spacing: .06em; color: var(--accent-dark); padding-top: 4px; padding-bottom: 8px;
}
/* kolumna brutto: lekko wyrozniona, zeby para netto|brutto czytala sie jako jedna */
.tbl--pools table.tbl th.bt,
.tbl--pools table.tbl td.bt { background: color-mix(in srgb, var(--accent-soft) 40%, #fff); }
.tbl--pools table.tbl td.bt { color: var(--muted); }
.tbl--pools table.tbl td.bt b { color: var(--text); }
.avg { color: var(--muted); font-size: .76rem; font-weight: 500; }

/* mini pasek zajetosci w kolumnie "Zajete" */
.occ { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.occ .bar { width: 46px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.occ .bar > i { display: block; height: 100%; background: var(--accent); }

/* stopka sumy w tabeli pul */
.tbl--pools table.tbl tfoot td {
  background: color-mix(in srgb, var(--accent-soft) 55%, #fff);
  border-top: 2px solid var(--accent-mid); font-weight: 700;
}
.tbl--pools table.tbl tfoot .lbl {
  color: var(--muted); font-weight: 500; text-transform: uppercase;
  letter-spacing: .05em; font-size: .74rem;
}

/* rodzina kursu: jeden naglowek, wersje jako osobne pule pod spodem */
.tbl--pools table.tbl tr.fam-row td {
  background: #fff; border-top: 1px solid var(--border);
  padding-top: 13px; padding-bottom: 6px;
}
.tbl--pools table.tbl tr.fam-row:first-child td { border-top: 0; }
.tbl--pools table.tbl tr.fam-row:hover td { background: #fff; }
.tbl--pools table.tbl tr.fam-row + tr.ver-row td { border-top: 0; }
.fam { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 700; font-size: .95rem; }
.fam .pools {
  font: 500 .72rem var(--font-body); color: var(--muted);
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px;
}
.tbl--pools table.tbl tr.ver-row td:first-child { padding-left: 26px; }
.ver-cell b { font-weight: 600; display: block; }
.ver-cell .s { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .8rem; margin-top: 3px; }
.tag-cur, .tag-old {
  font: 600 .68rem var(--font-body); text-transform: uppercase; letter-spacing: .04em;
  border-radius: 5px; padding: 1px 6px; white-space: nowrap;
}
.tag-cur { background: var(--accent-soft); color: var(--accent-dark); }
.tag-old { background: var(--warn-soft); color: var(--warn); }

/* podpis pod tabela - z ikona */
.tbl-cap { display: flex; gap: 8px; font-size: .82rem; color: var(--muted); margin: 10px 2px 0; line-height: 1.5; }
.tbl-cap svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--accent-dark); }

/* ==========================================================================
   KURSY PRACOWNIKA: kolko harmonogramu + kropka + detal uczestnika.
   Kolor = swiatlo (Enrollment#schedule_light): green/yellow/red/grey.
   ========================================================================== */

/* Kolko postepu: pierscien conic wg --p (%), srodek wyciety ::before na kolor
   tla powierzchni. Kolor bierze z tokenow, wiec chodzi z paleta dostawcy. */
.sring {
  --p: 0; --ring-fill: var(--accent); --ring-track: var(--accent-mid); --ring-ink: var(--accent-dark);
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--ring-fill) calc(var(--p) * 1%), var(--ring-track) 0);
}
.sring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
.sring__v {
  position: relative; z-index: 1;
  font: 800 .66rem/1 var(--font-head); font-variant-numeric: tabular-nums; color: var(--ring-ink);
}
.sring--green  { --ring-fill: var(--accent); --ring-track: var(--accent-mid); --ring-ink: var(--accent-dark); }
.sring--yellow { --ring-fill: var(--highlight-dark); --ring-track: var(--warn-soft); --ring-ink: var(--warn); }
.sring--red    { --ring-fill: var(--bad); --ring-track: var(--bad-soft); --ring-ink: var(--bad); background: var(--bad-soft); }
.sring--grey   { --ring-ink: var(--muted); background: var(--bg); }
/* Duze kolko naglowka detalu, z podpisem „postęp" pod procentem. */
.sring--lg { width: 92px; height: 92px; }
.sring--lg::before { inset: 7px; }
.sring--lg .sring__v { font-size: 1.35rem; flex-direction: column; }
.sring--lg .sring__cap {
  position: relative; z-index: 1; display: block; margin-top: 2px;
  font: 700 .52rem/1 var(--font-head); letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}

/* „Kursy N" + jedna kropka najgorszego swiatla. */
.crs-tally { display: inline-flex; align-items: center; gap: 9px; }
.crs-tally__n { font: 700 .97rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--text); }
.kdot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.kdot--green  { background: var(--ok); }
.kdot--yellow { background: var(--highlight-dark); }
.kdot--red    { background: var(--bad); }
.kdot--grey   { background: var(--border); }

/* Kursy leza PLASKO na karcie, oddzielone od naglowka kreskowana linia - bez
   szarego boxa i bez zielonego paska (jak makieta). */
.people-tiles .tile__detail .crs-panel {
  margin: 0 20px 18px; border-top: 1px dashed var(--border); padding-top: 14px;
}
.crs-empty { margin: 4px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }

/* Lista kursow w rozwinieciu kafla: kazdy kurs = klikalny wiersz do detalu. */
.crs-list2 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.crs-item { display: flex; align-items: center; gap: 10px; }
.crs-open2 {
  flex: 1 1 auto; min-width: 0; display: grid; align-items: center; gap: 14px;
  grid-template-columns: 46px minmax(0, 1fr) auto 20px;
  padding: 10px 14px; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  transition: border-color .14s ease, background-color .14s ease;
}
.crs-open2:hover { border-color: var(--accent-mid); background: var(--accent-soft); }
.crs-open2:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crs-open2__body { min-width: 0; }
.crs-open2__nm { display: block; font: 600 .92rem/1.25 var(--font-body); color: var(--text); overflow-wrap: anywhere; }
.crs-open2__sub { display: block; margin-top: 3px; font-size: .76rem; color: var(--muted); }
.crs-open2__meta { display: flex; flex-direction: column; gap: 3px; text-align: right; }
.crs-open2__meta-k { font: 700 .58rem/1 var(--font-head); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.crs-open2__meta-v { font: 700 .9rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--text); }
.crs-open2__chev { color: var(--muted); font-size: 1.3rem; line-height: 1; text-align: center; }
/* Na mobile licznik lekcji schodzi (za ciasno) - zostaje kolko, nazwa, strzalka. */
@media (max-width: 700px) {
  .crs-open2 { grid-template-columns: 46px minmax(0, 1fr) 20px; }
  .crs-open2__meta { display: none; }
}

/* ---------- Detal uczestnika w kursie (panel/enrollments/show) ---------- */
.pcourse { max-width: 940px; }
.pcourse__back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px;
  color: var(--accent-dark); font: 600 .84rem/1 var(--font-body); text-decoration: none;
}
.pcourse__back:hover { text-decoration: underline; }

.pcourse__head {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 22px 24px; border: 1px solid var(--border); border-radius: 14px 14px 0 0;
  border-bottom: 0; background: var(--accent-soft);
}
.pcourse__id { flex: 1 1 260px; min-width: 0; }
.pcourse__title { margin: 0 0 12px; font: 800 1.3rem/1.25 var(--font-head); letter-spacing: -.01em; color: var(--heading); }
.pcourse__who { display: flex; align-items: center; gap: 11px; }
.pcourse__nm { font: 700 .95rem/1 var(--font-body); color: var(--text); }
.pcourse__dz { margin-top: 4px; font-size: .82rem; color: var(--muted); }
.pcourse__head .sring--lg { margin-left: auto; }

.pcourse__tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 0;
}
.ptile { background: var(--surface); padding: 15px 18px; display: flex; flex-direction: column; gap: 6px; }
.ptile__k { font: 700 .6rem/1 var(--font-head); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ptile__v { font: 800 1.25rem/1 var(--font-head); font-variant-numeric: tabular-nums; color: var(--text); }
.ptile__v--bad { color: var(--bad); }
@media (max-width: 640px) { .pcourse__tiles { grid-template-columns: 1fr 1fr; } }

/* Odpiecie kursu - osobna karta na dole widoku wyniku. Aktywne dopoki slot nie
   zuzyty; po rozpoczeciu wyszarzone (nie znika), z tooltipem dlaczego. */
.pcourse__foot {
  margin-top: 14px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.pcourse__foot form { margin: 0; }
.pcourse__rule { flex: 1 1 320px; min-width: 0; }
.pcourse__rule b { display: block; font: 700 .9rem/1.3 var(--font-body); color: var(--text); margin-bottom: 3px; }
.pcourse__rule span { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.pcourse__off {
  margin: 0; flex: none; cursor: pointer; border-radius: 9px; padding: 10px 16px;
  border: 1px solid var(--btn-danger-line); background: var(--btn-danger-hover); color: var(--btn-danger-ink);
  font: 600 .86rem/1 var(--font-body);
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.pcourse__off:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.pcourse__off:focus-visible { outline: 2px solid var(--bad); outline-offset: 2px; }
.pcourse__off--off, .pcourse__off--off:hover {
  cursor: not-allowed; color: var(--muted); background: var(--bg); border-color: var(--border);
}

.plessons {
  list-style: none; margin: 0; padding: 0; counter-reset: none;
  border: 1px solid var(--border); border-top: 0; border-radius: 0 0 14px 14px; overflow: hidden;
}
.plessons__head, .plesson {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 30px minmax(0, 1fr) 78px 64px 120px; padding: 13px 18px;
}
.plessons__head {
  font: 700 .6rem/1 var(--font-head); letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  background: var(--bg);
}
.plesson { border-top: 1px solid var(--border); background: var(--surface); }
.plesson--hard { background: var(--bad-soft); }
.plesson--locked { opacity: .6; }
.plesson__n { font: 700 .82rem/1 var(--font-head); color: var(--muted); text-align: center; }
.plesson__nm { font: 600 .9rem/1.3 var(--font-body); color: var(--text); overflow-wrap: anywhere; }
.plesson__sc, .plesson__at { font: 700 .9rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.plesson__at.warn { color: var(--bad); }
.plesson__lock { font-size: .82rem; color: var(--muted); }
.hard-flag {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: middle;
  padding: 2px 8px; border-radius: 999px; background: var(--bad-soft); color: var(--bad);
  font: 800 .58rem/1.4 var(--font-head); letter-spacing: .04em; text-transform: uppercase;
}
.lchip {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font: 700 .72rem/1.4 var(--font-body);
}
.lchip--done { background: var(--ok-soft); color: var(--ok); }
.lchip--wip  { background: var(--warn-soft); color: var(--warn); }
.lchip--none { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
@media (max-width: 640px) {
  .plessons__head { display: none; }
  .plesson { grid-template-columns: 24px minmax(0, 1fr) auto; row-gap: 6px; }
  .plesson__sc, .plesson__at { display: none; }
  .plesson__lock { grid-column: 2 / -1 !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Edytor lekcji — rewizja UX: baner z metadanymi, widoczny stan,
   edycja tytulu/opisu/quizu przez MODAL, kafel pytania z ikonami
   (przypnij / edytuj / „...") i akcjami w menu zamiast batonow.
   ══════════════════════════════════════════════════════════════════ */

/* baner: metadane pod tytulem wewnatrz zielonego statbara */
/* Biały przycisk tekstowy w banerze (np. „Uruchom pakiet") - kontrast na zieleni,
   ten sam jezyk co .statbar__add. */
.statbar__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 11px;
  background: #fff; color: var(--accent-deep); border: 0; cursor: pointer; text-decoration: none;
  font: 700 .9rem var(--font-body);
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.statbar__btn:hover { background: var(--highlight); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .22); }
.statbar__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.statbar__meta { margin: 10px 0 0; font-size: .86rem; color: rgba(255,255,255,.82); font-variant-numeric: tabular-nums; }
.statbar__meta b { color: #fff; font-weight: 700; }
.statbar--head .statbar__aside { align-self: flex-start; }

/* olowek-ikona w naglowku sekcji (otwiera modal) — bez podpisu */
.pencil--icon { padding: 8px 9px; gap: 0; }
.pencil--icon svg { width: 16px; height: 16px; }

/* czytelnik danych lekcji (tytul/opis/quiz jak dane firmy) */
.les-read .kv { grid-template-columns: 160px 1fr; }
@media (max-width: 640px){
  .les-read .kv { grid-template-columns: 1fr; gap: 3px; }
  .les-read .kv dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
}
.les-note { margin: 14px 0 0; padding: 11px 13px; background: var(--accent-soft); border: 1px solid var(--accent-mid); border-radius: 10px; font-size: .8rem; color: var(--accent-deep); line-height: 1.45; }

/* stan lekcji: meter + checklista */
.les-state { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center; }
@media (max-width: 720px){ .les-state { grid-template-columns: 1fr; gap: 14px; } }
.les-state-cap { margin: 9px 2px 0; font-size: .8rem; color: var(--muted); }
.les-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.les-check li { display: flex; gap: 10px; align-items: center; font-size: .88rem; }
.les-check .mk { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.les-check .mk.on  { background: var(--ok-soft);   color: var(--ok); }
.les-check .mk.off { background: var(--warn-soft); color: var(--warn); }

/* ── kafel pytania: chevron, tresc i ikony w jednym rzedzie ──
   Zwiniety kafel ma jedna linie wysokosci przycisku - ikony pod trescia
   podwajaly wysokosc i bank z 20 pytaniami nie miescil sie na ekranie (AS-0300).
   Za dluga tresc konczy sie „...", pelna widac po rozwinieciu. */
.tile--q .tile__main.tile__main--q { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px; }
@media (min-width: 641px){
  .tile--q .tile__main--q .tile__twist { width: 34px; height: 34px; border-radius: 9px; }
  .tile--q .tile__main--q .tile__twist svg { width: 18px; height: 18px; }
}
.tile--q .tile__qtext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile--q.is-open .tile__qtext, .tile--q.is-editing .tile__qtext { white-space: normal; }
.q-num { display: inline-block; font: 800 .68rem/1 var(--font-head); color: var(--accent-dark); background: var(--accent-soft); border-radius: 6px; padding: 4px 7px; margin-right: 8px; vertical-align: 1px; }

/* Na Web ikony (przypnij / edytuj / „...") stoja przy prawej krawedzi kafla. */
.q-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.q-acts form { margin: 0; display: inline-flex; }

/* jednakowe ikonowe przyciski: przypnij / edytuj / „..." */
.qbtn { width: 34px; height: 34px; flex: none; border-radius: 9px; border: 1px solid var(--border); background: #fff; cursor: pointer; display: inline-grid; place-items: center; color: var(--faint, #8a94a3); padding: 0; }
.qbtn svg { width: 16px; height: 16px; }
.qbtn:hover { border-color: var(--accent); color: var(--accent); }
.qbtn.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.qbtn[disabled] { opacity: .4; cursor: not-allowed; }
.qbtn[disabled]:hover { border-color: var(--border); color: var(--faint, #8a94a3); }

/* menu „..." w kaflu — reuzycie .menu/.menu__item z listy „+" */
.qmore { position: relative; display: inline-flex; }
.qmore .menu { min-width: 200px; }
.qmore .menu__item.danger { color: var(--bad); }
.qmore .menu__item.danger:hover { background: var(--bad-soft); }
/* pozycje menu bywaja button_to (formularz) — forma nie moze rozpychac ukladu */
.qmore .menu form { margin: 0; display: block; }
.qmore .menu form .menu__item { width: 100%; text-align: left; }

/* edycja odpowiedzi wywolywana ikona: rozwiniecie widoczne tez bez chevrona */
.tile--q.is-editing .tile__detail { grid-template-rows: 1fr; }
.tile--q.is-editing .tile__detail > .inner { overflow: visible; }

/* edytor lekcji dziala tez na telefonie (odwrocenie D-B / P10) */
.les-edit .tbl-scroll { overflow-x: auto; }
@media (max-width: 640px){
  .les-edit .vidgrid { grid-template-columns: 1fr; }

  /* ⚠ Na telefonie generyczne reguly kafla (stopka firmy) przenosza
     `.tile__twist` do grid-row:5 i farbuja go na zielono, a tresc pytania
     laduje w kolumnie 44px i lamie sie po slowie. Kafel pytania ma wlasny,
     prosty uklad: chevron + tresc w rzedzie, ikony pod spodem. */
  .tile--q .tile__main.tile__main--q {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px 12px; padding: 12px 14px; align-items: start;
  }
  .tile--q .tile__twist {
    grid-column: 1; grid-row: 1; justify-self: start; margin: 0;
    width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  }
  .tile--q.is-open .tile__twist {
    background: var(--surface); color: var(--accent); border-color: var(--accent-mid);
  }
  .tile--q .tile__qtext { grid-column: 2; grid-row: 1; white-space: normal; padding-top: 8px; }
  /* Na telefonie ikony zostaja POD trescia, przy lewej — tak jak dotad. */
  .tile--q .q-acts { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; padding: 8px 0 4px; }
  /* menu „..." kotwiczy do prawej krawedzi przycisku; kierunek (gora/dol)
     ustawia kontroler klasa .menu--up, wiec nie wymuszamy tu top/bottom. */
  .tile--q .qmore .menu { right: 0; left: auto; }
}

/* ── Zgłoszenie incydentu (Moje konto) ─────────────────────────────────
   Osobny czerwony panel na dole karty konta + solidny czerwony przycisk.
   .btn--danger jest tu, bo panel dostawcy laduje tylko bundle `shared`
   (wersja z assetlife/base.css nalezy do panelu platformy). */
.incident__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.incident__copy { flex: 1 1 auto; min-width: 0; }
.incident__lead { font-weight: 600; color: var(--text); margin: 0 0 3px; }
.incident__hint { color: var(--muted); font-size: .9rem; margin: 0; }

/* Nota w oknie zgloszenia - lekki, informacyjny ton. */
.incidentnote {
  margin: 0; padding: 11px 13px; font-size: .86rem; color: var(--accent-deep);
  background: var(--accent-soft); border: 1px solid var(--accent-mid); border-radius: 8px;
}

.btn.btn--danger {
  background: linear-gradient(180deg, #b8433b 0%, var(--bad) 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(161, 48, 48, .22);
}
.btn.btn--danger:hover {
  background: linear-gradient(180deg, var(--bad) 0%, #7f2525 100%);
  box-shadow: 0 9px 22px rgba(161, 48, 48, .26);
}
.btn.btn--danger:focus-visible { box-shadow: 0 0 0 3px #e6c3c0; }

/* ── Kafel leada ──────────────────────────────────────────────────────────────
   Minimalny naglowek (nazwa + status + zebatka), reszta danych (kontakt, miasto,
   NIP) w .tile__detail pod „Więcej" - na KAZDYM rozmiarze ekranu, jak na koncie
   pracownika. Blok samodzielny, na koncu pliku. */
.tile--lead { grid-column: 1 / -1; }
.tile--lead .tile__main {
  display: grid; grid-template-columns: minmax(200px, 1fr) auto auto;
  align-items: center; gap: 16px 20px; padding: 16px 20px;
}
.tile--lead .tile__acts { justify-self: end; align-self: center; display: flex; }
.tile--lead .tile__expand { display: flex; }

/* Rozwiniecie: rzad etykieta+wartosc oddzielony kreska od naglowka. */
.tile--lead .lead-more {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 24px; padding: 16px 20px;
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  .tile--lead .tile__main { grid-template-columns: 1fr auto; align-items: start; }
  .tile--lead .tile__id   { grid-column: 1; grid-row: 1; }
  .tile--lead .tile__acts { grid-column: 2; grid-row: 1; align-self: start; }
  .tile--lead .tile__cell--status { grid-column: 1 / -1; grid-row: 2; }
}

/* Store payment gateway status card (Sklep -> Zamówienia). Three states:
   ready (ok), enabled-but-unverified (warn), no connector (off). */
.pay-gate {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 4px; padding: 12px 16px;
  border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius);
  background: var(--surface);
}
.pay-gate__ic {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-content: center; font-weight: 700; color: #fff;
}
.pay-gate__body { display: grid; gap: 2px; }
.pay-gate__body strong { font-size: .92rem; }
.pay-gate__body span { font-size: .82rem; color: var(--muted); }
.pay-gate .btn.small, .pay-gate .hint { margin-left: auto; }
.pay-gate--ok { border-left-color: var(--ok); background: var(--ok-soft); }
.pay-gate--ok .pay-gate__ic { background: var(--ok); }
.pay-gate--warn { border-left-color: var(--warn); background: var(--warn-soft); }
.pay-gate--warn .pay-gate__ic { background: var(--warn); }
.pay-gate--off { border-left-color: var(--border); }
.pay-gate--off .pay-gate__ic { background: var(--muted); }
@media (max-width: 560px) { .pay-gate { flex-wrap: wrap; } .pay-gate .btn.small, .pay-gate .hint { margin-left: 0; } }

/* ---------- AL-0100: widok kursu w zakladkach ----------
   Pasek zakladek (tabs_controller ustawia aria-selected i klase .on na panelu).
   Gorny statbar zostaje standardowy - akcje kursu siedza przy wersjach. */
.crs-verbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.crs-verbar form { margin: 0; }

.ctabs-wrap { margin-bottom: 8px; }
.ctabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.ctab {
  flex: none; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 700 .95rem var(--font-head); color: var(--muted);
  padding: 12px 18px 14px; border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.ctab:hover { color: var(--ink); }
.ctab[aria-selected="true"] { color: var(--accent-deep); border-bottom-color: var(--accent); }
.ctab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 6px; }
.ctab-pane { display: none; }
.ctab-pane.on { display: block; }

/* Pusty stan podgladu certyfikatu (zakladka Certyfikat bez wgranego wzoru). */
.certed__stage--empty {
  display: grid; place-items: center; aspect-ratio: 16 / 10; max-width: 520px;
  margin-top: 14px; border: 1.5px dashed var(--border); border-radius: 12px; background: var(--panel-soft, #f5f7f6);
}
.cert-empty { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 24px; color: var(--muted); }
.cert-empty__ic {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.5rem; background: var(--accent-soft); color: var(--accent-deep);
}
.cert-empty b { color: var(--ink); font: 700 1rem var(--font-head); }
.cert-empty span { font-size: .85rem; max-width: 34ch; }

@media (max-width: 620px) {
  .crs-head { flex-direction: column; }
  .crs-head__aside { margin-left: 0; justify-items: start; align-items: flex-start; }
  .crs-head__chips, .crs-head__acts { justify-content: flex-start; }
}

/* Podpis pod tytulem banera listy (jak .mhero__lead w „Moje Kursy"). */
.statbar__main { min-width: 0; flex: 1 1 18rem; }
.statbar__main .statbar__meta { margin: 6px 0 0; max-width: 36rem; font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
@media (max-width: 640px) { .statbar__main .statbar__meta { font-size: .8rem; line-height: 1.55; } }

/* Rejestr sprzedazy i przypisan (AS-0028) */
.setl-register-link { margin-left: 12px; vertical-align: middle; text-transform: none; letter-spacing: 0; }
.register-month { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
#register-sales .boxtitle .btn, #register-assignments .boxtitle .btn { margin-left: 12px; vertical-align: middle; text-transform: none; letter-spacing: 0; }
#register-sales .tbl-wrap + .tbl-wrap { margin-top: 16px; }
/*
 * Dashboardy panelu dostawcy - karta firmy (zakladka "Dashboard") i przeglad.
 * WSZYSTKO na tokenach z base.css, wiec paleta dostawcy (ProviderTheme)
 * podmienia kolory sama. Kolory serii wykresow to osobne tokeny --chart-*,
 * z domyslna, zwalidowana pod daltonizm paleta; --chart-1 idzie za marka.
 */
:root {
  --chart-1: var(--accent);
  --chart-2: #2563c9;
  --chart-3: #d97a00;
  --chart-4: #8b46c9;
}

/* ---- KPI ---- */
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dash-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 15px 16px; box-shadow: var(--shadow); }
.dash-kpi .l { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dash-kpi .v { display: block; font-family: var(--font-head); font-weight: 900; font-size: 2rem; line-height: 1.05; margin-top: 8px; font-variant-numeric: tabular-nums; }
.dash-kpi .v small { font-size: .95rem; color: var(--muted); font-weight: 500; }
.dash-kpi .f { display: block; font-size: .77rem; color: var(--muted); margin-top: 4px; }

.dash-row { display: grid; gap: 14px; margin-top: 14px; }
.dash-row--split { grid-template-columns: 1fr 320px; }
.dash-row--split2 { grid-template-columns: 360px 1fr; }
@media (max-width: 900px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } .dash-row--split, .dash-row--split2 { grid-template-columns: 1fr; } }

.dash-card { padding: 18px 20px; }
.dash-h { margin: 0; font-size: 1rem; font-weight: 700; font-family: var(--font-head); }
.dash-cap { margin: 3px 0 14px; font-size: .8rem; color: var(--muted); }

/* ---- paski: kursy ---- */
.dash-bars { display: flex; flex-direction: column; gap: 16px; }
.dash-bar { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr 120px; gap: 14px; align-items: center; }
@media (max-width: 620px) { .dash-bar { grid-template-columns: 1fr auto; } .dash-bar .dash-track { grid-column: 1 / -1; } }
.dash-bar__label { min-width: 0; }
.dash-bar__label b { display: block; font-size: .88rem; font-weight: 600; }
.dash-bar__label span { font-size: .74rem; color: var(--muted); }
.dash-bar__price { text-align: right; white-space: nowrap; }
.dash-bar__price b { font-family: var(--font-head); font-weight: 900; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.dash-bar__price span { display: block; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-track { position: relative; height: 26px; }
.dash-track__base { position: absolute; inset: 0; background: var(--accent-soft); border-radius: 6px; }
.dash-track__fill { position: absolute; top: 0; bottom: 0; left: 0; min-width: 2px; background: var(--accent); border-radius: 6px; }
.dash-track__val { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); font-size: .78rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-track__val.is-out { right: auto; left: calc(100% + 8px); color: var(--text); }
.dash-track__fill, .dash-seg { transition: opacity .12s, filter .12s; }
.dash-bar:hover .dash-track__fill { filter: brightness(1.05); }

/* ---- kafle finansowe ---- */
.dash-subcol { display: flex; flex-direction: column; gap: 14px; }
.dash-money { background: var(--accent-deep); color: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); }
.dash-money .l { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; opacity: .82; }
.dash-money .price { display: block; font-family: var(--font-head); font-weight: 900; font-size: 1.9rem; margin-top: 6px; font-variant-numeric: tabular-nums; }
.dash-money .price small { font-size: .85rem; font-weight: 500; opacity: .8; }
.dash-money__rows { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; gap: 10px; }
.dash-money .mr { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .84rem; }
.dash-money .mr span { opacity: .85; }
.dash-money .mr b { font-family: var(--font-head); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-money .mr--net { border-top: 1px dashed rgba(255,255,255,.24); padding-top: 10px; }
.dash-money .mr--net b { font-size: 1.15rem; }
.dash-money .note { font-size: .74rem; opacity: .82; margin: 12px 0 0; }
.dash-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 10px; }
.dash-dates .d { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; opacity: .78; }
.dash-dates b { display: block; margin-top: 2px; font-family: var(--font-head); font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
.dash-money__bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; margin-top: 14px; }
.dash-money__bar i { display: block; height: 100%; background: #fff; border-radius: 999px; }

/* ---- donut ---- */
.dash-donut { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dash-donut__svg { display: block; flex: none; }
.dash-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-legend li { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: var(--muted); }
.dash-legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.dash-legend b { color: var(--text); font-variant-numeric: tabular-nums; margin-left: auto; }
.dash-legend--rows li { width: 100%; }
.dash-legend--rows .nm { flex: 1; color: var(--text); }
.dash-legend--rows .ct { margin-left: auto; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.dash-legend--rows .ct b { font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--text); margin: 0; }

/* ---- histogram ----
   Slupki maja WSPOLNA linie bazowa: strefa slupka (.dash-hcol__plot) ma stala
   wysokosc i wyrownuje slupki do dolu, a etykiety siedza w osobnej strefie o
   stalej wysokosci - dzieki temu 1- i 2-liniowe podpisy nie ruszaja slupkow. */
.dash-hist { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.dash-hcol { display: flex; flex-direction: column; align-items: center; }
.dash-hcol__plot { width: 100%; height: 150px; padding-top: 22px; box-sizing: border-box;
  display: flex; align-items: flex-end; justify-content: center; }
.dash-hbar { width: 100%; max-width: 58px; min-height: 3px; background: var(--accent); border-radius: 6px 6px 0 0; position: relative; }
.dash-hbar--faded { background: var(--warn); }
.dash-hbar--done { background: var(--accent-deep); }
.dash-hbar .n { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--text); font-variant-numeric: tabular-nums; }
.dash-hl { height: 34px; margin-top: 6px; font-size: .72rem; color: var(--muted); text-align: center; line-height: 1.2; }

/* ---- puste stany ---- */
.dash-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 34px 18px; min-height: 140px; }
.dash-empty h3 { margin: 0; font-size: .95rem; font-weight: 700; color: var(--text); font-family: var(--font-head); }
.dash-empty p { margin: 0; font-size: .84rem; color: var(--muted); max-width: 300px; }

/* ==== przeglad firm (dashboard operatora) ==== */
.dash-finance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 22px; box-shadow: var(--shadow); }
@media (max-width: 640px) { .dash-finance { grid-template-columns: 1fr; } }
.dash-finance .fc { padding: 16px 20px; background: var(--accent-deep); color: #fff; }
.dash-finance .fc--accent { background: var(--accent); }
.dash-finance .fc .l { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; opacity: .82; }
.dash-finance .fc .v { display: block; font-family: var(--font-head); font-weight: 900; font-size: 2rem; line-height: 1.05; margin-top: 6px; font-variant-numeric: tabular-nums; }
.dash-finance .fc .v small { font-size: .85rem; opacity: .8; font-weight: 500; }
.dash-finance .fc .f { display: block; font-size: .76rem; opacity: .82; margin-top: 4px; }

.dash-ov-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 780px) { .dash-ov-kpis { grid-template-columns: repeat(2, 1fr); } }

/* paski przychodu/abonamentu wspoldziela .dash-bar; wariant 2-kolumnowy */
.dash-bar--2 { grid-template-columns: 300px 1fr; }
@media (max-width: 620px) { .dash-bar--2 { grid-template-columns: 1fr; } }
.dash-track__seg { position: absolute; top: 0; bottom: 0; }

/* uzytkownicy: label | pasek | liczba (bez uciekajacej etykiety) */
.dash-bar--users { grid-template-columns: 260px 1fr 150px; }
@media (max-width: 720px) { .dash-bar--users { grid-template-columns: 1fr auto; } .dash-bar--users .dash-track { grid-column: 1 / -1; order: 3; } }
.dash-bar__count { text-align: right; white-space: nowrap; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-bar__count b { color: var(--text); font-family: var(--font-head); }
.dash-donut__svg .dash-seg { cursor: default; }
.dash-donut__svg .dash-seg.is-dim { opacity: .3; }

/* dymek (Stimulus dash_controller) */
.dash-tip { position: fixed; z-index: 60; pointer-events: none; max-width: 260px;
  background: var(--text); color: var(--surface); padding: 8px 11px; border-radius: 8px;
  font-size: .78rem; line-height: 1.4; box-shadow: 0 6px 24px rgba(0,0,0,.25);
  opacity: 0; transition: opacity .1s; }
.dash-tip.is-on { opacity: 1; }
.dash-tip b { display: block; font-weight: 700; margin-bottom: 2px; }
.dash-tip span { display: block; opacity: .85; }
/*
 * Ankiety i materialy do lekcji (dodatek surveys, AS-0062). Wszystko na tokenach
 * palety dostawcy (whitelabel), prefiks .sx / .smat, zeby nie kolidowac z reszta.
 */

/* ---- Materialy do pobrania (panel + kursant) ---- */
.smat-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.smat {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.smat__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.smat__main b { font-weight: 600; overflow-wrap: anywhere; }
.smat__main span { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.smat .filetag { flex: none; }
.smat-add { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- Boks "Materialy dodatkowe" pod lekcja ---- */
.sx { margin-top: 16px; }
.sx .ctab-pane { padding-top: 16px; }

/* ---- Kreator ankiety (panel) ---- */
.sv-builder .box + .box { margin-top: 16px; }
.sv-conv { font-size: .8rem; color: var(--muted); border: 1px dashed var(--border-strong, var(--border));
  border-radius: 999px; padding: 5px 11px; }
.sv-title__view { display: flex; align-items: center; gap: 14px; }
.sv-title__view .field-static { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sv-title__view .field-static__label { font-size: .78rem; color: var(--muted); font-weight: 600; }
.sv-title__view .field-static__label em { font-style: normal; font-weight: 400; }
.sv-title__view .field-static__value { font-size: 1.05rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.sv-title__empty { color: var(--muted) !important; font-weight: 400 !important; font-style: italic; }
.sv-title__form .fld { margin: 0; }
.sv-title__form .hint { margin: 6px 0 0; }
.sv-mandatory { margin: 14px 0 0; }
.sv-pubbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px;
  padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); }
.sv-pubbar p { margin: 0; font-size: .88rem; }
.sv-pubbar form { margin: 0; }
.sv-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
@media (max-width: 960px) { .sv-wrap { grid-template-columns: 1fr; } }
.sv-builder .sv-wrap > .box + .box { margin-top: 0; }
.sv-seclist h3 { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.sv-prog { height: 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.sv-prog i { display: block; height: 100%; background: var(--accent); }
.sv-prog-n { display: block; font-size: .75rem; color: var(--muted); margin: 4px 0 10px; }
.sv-sec { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid transparent; text-decoration: none; color: inherit; margin-bottom: 4px; }
.sv-sec:hover { background: var(--accent-soft); }
.sv-sec.on { background: var(--accent-soft); border-color: var(--accent); }
.sv-sec .n { width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--bg);
  display: grid; place-items: center; font-weight: 800; font-size: .75rem; color: var(--muted); }
.sv-sec.on .n { background: var(--accent); color: #fff; }
.sv-sec .t { min-width: 0; display: grid; }
.sv-sec .t b { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-sec .t span { font-size: .72rem; color: var(--muted); }
.sv-buildhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sv-buildhead .eyebrow { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.sv-buildhead h2 { margin: 2px 0 0; font-size: 1.1rem; }
.sv-empty { border: 1px dashed var(--border); border-radius: 12px; padding: 24px; text-align: center; color: var(--muted); }
.sv-addbar { border: 1px dashed var(--border); border-radius: 12px; padding: 12px 14px; }
.sv-addbar p { margin: 0 0 8px; font-size: .85rem; color: var(--muted); }
.sv-types { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-type { border: 1px solid var(--border); background: #fff; border-radius: 9px; padding: 8px 12px; cursor: pointer; font: inherit; font-size: .85rem; }
.sv-type:hover { border-color: var(--accent); background: var(--accent-soft); }
.sv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sv-row3 { display: grid; grid-template-columns: 1fr 70px 1fr; gap: 8px; }
@media (max-width: 640px) { .sv-row2, .sv-row3 { grid-template-columns: 1fr; } }
.sv-check { display: flex; align-items: center; gap: 8px; align-self: end; }
.sv-condfld { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px 12px; }
.sv-condfld legend { font-size: .85rem; font-weight: 600; padding: 0 4px; }
.sv-condfld legend em, .fld em { font-weight: 400; color: var(--muted); font-style: normal; }
.sv-tablewrap { overflow-x: auto; }
.sv-grid { border-collapse: collapse; margin-top: 8px; font-size: .85rem; }
.sv-grid th, .sv-grid td { border: 1px solid var(--border); padding: 7px 10px; text-align: center; }
.sv-grid tbody th { text-align: left; background: var(--bg); }
.sv-grid thead th { background: var(--bg); color: var(--muted); }
.sv-cb { display: inline-block; width: 16px; height: 16px; border: 1.5px solid var(--border-strong, #cbd3dd); border-radius: 4px; }
.sv-cb--radio { border-radius: 50%; }
.sv-report { border-color: var(--warn, #8a6800); }
.sv-check input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin: 0; }
.sv-check { flex-direction: row; justify-content: flex-start; }

/* ---- Ankieta pod lekcja (kursant) ---- */
.sx-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85rem; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; margin-bottom: 16px; }
.sx-strip__dot { width: 10px; height: 10px; border-radius: 50%; background: #f5b400; box-shadow: 0 0 0 3px #fff3cc; }
.sx-strip__dot--done { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sx-strip__sep { color: var(--border-strong, #cbd3dd); }
.sx-strip b { color: var(--text); }
.sx-dots { display: flex; gap: 5px; }
.sx-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong, #cbd3dd); }
.sx-dots i.done { background: var(--accent); }
.sx-saved, .sx-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 14px; background: var(--accent-soft); font-size: .88rem; }
.sx-summary { border: 1px solid var(--accent); }
.sx-summary__lock { flex-basis: 100%; color: var(--muted); font-size: .85rem; }
.sx-lock { border: 0; padding: 0; margin: 0; min-width: 0; display: contents; }
.sx-lock:disabled .sx-q { opacity: .75; }
.sx-summary--later { border-style: dashed; background: transparent; color: var(--muted); }
.sx-due { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--accent);
  background: var(--accent-soft); font-size: .9rem; font-weight: 600; }
.sx-form { display: grid; gap: 14px; }
.sx-q { border: 1px solid var(--border); border-radius: 12px; margin: 0; padding: 16px 18px; min-width: 0; background: #fff; }
.sx-q:hover { border-color: var(--border-strong, #cbd3dd); }
/* The floated legend's next sibling clears it, which swallows that sibling's margin-top - the gap below the question lives on the legend. */
.sx-q legend { float: left; width: 100%; margin-bottom: 12px; }
.sx-q legend ~ * { clear: both; }
.sx-q--missing { border-color: var(--bad, #c0392b); box-shadow: 0 0 0 3px var(--bad-soft, #fbeaea); }
.survey-pending { margin: 12px 0; padding: 12px 16px; border: 1px solid var(--warn, #c98a12); border-radius: 12px; background: var(--warn-soft, #fdf3dd); color: var(--text); font-size: .9rem; line-height: 1.5; }
.sx-missing-note { margin: 8px 0 0; color: var(--bad, #c0392b); font-size: .84rem; font-weight: 600; }
.sx-q legend { font-weight: 600; padding: 0; line-height: 1.4; display: flex; gap: 8px; align-items: baseline; }
.sx-num { font-size: .72rem; font-weight: 800; color: var(--accent-deep, var(--accent)); background: var(--accent-soft);
  border: 1px solid var(--accent-mid, var(--border)); border-radius: 6px; padding: 2px 7px; }
.sx-req { color: var(--bad, #a13030); }
.sx-hint { font-size: .88rem; line-height: 1.6; color: var(--muted); margin: 0; }
.sx-hint + .sx-hint { margin-top: 6px; }
.sx-hint p { margin: 0 0 .8em; }
.sx-hint p:last-child { margin-bottom: 0; }
.sx-consent-given { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; font-size: .85rem; color: var(--muted); }
.sx-opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sx-consent { display: flex; width: fit-content; margin-top: 16px; }
.sx-opt { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 13px; cursor: pointer; background: #fff; font-size: .9rem; }
.sx-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.sx-opt input { margin: 0; accent-color: var(--accent); }
.sx-grid input { accent-color: var(--accent); width: 18px; height: 18px; }
.sx-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--border); }
.sx-actions .hint { margin: 0; flex: 1 1 280px; min-width: 0; }
.sx-actions__btns { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sx-actions__btns .btn { min-height: 44px; padding: 10px 20px; font-size: .95rem; white-space: nowrap; }
@media (max-width: 640px) {
  .sx-actions__btns { width: 100%; flex-direction: column-reverse; align-items: stretch; }
  .sx-actions__btns .btn { width: 100%; justify-content: center; }
}

.sx-input { display: block; margin-top: 16px; width: 100%; max-width: none; border: 1px solid var(--border-strong, #cbd3dd);
  border-radius: 8px; padding: 9px 11px; font: inherit; background: #fff; }
.sx-input--long { min-height: 90px; resize: vertical; }
.sx-input--num { width: 140px; }
.sx-input--date { width: 190px; }
.sx-num-in { display: flex; width: fit-content; align-items: center; gap: 8px; margin-top: 16px; }
.sx-num-in .sx-input { margin-top: 0; }
.sx-unit { color: var(--muted); }

/* ---- Karta pytania edytowana w miejscu (makieta AS-0062) ---- */
.sv-builder .buildsub { font-size: .82rem; color: var(--muted); margin: -6px 0 14px; }
.sv-builder .qc { border: 1px solid var(--accent-mid, var(--border)); border-left: 3px solid var(--accent); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 18px rgba(0,0,0,.04); padding: 14px 16px; margin-bottom: 12px;
  background: #fff; scroll-margin-top: 90px; }
.sv-builder .qc:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.sv-builder .qc--draft { border-left-color: var(--warn, #8a6800); }
.sv-builder .qc__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sv-builder .qc__bar .sp, .sv-builder .qc__foot .sp { flex: 1; }
.sv-builder .qc__move { display: inline-flex; gap: 4px; }
.sv-builder .typesel { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong, #cbd3dd);
  border-radius: 8px; padding: 5px 9px; font-weight: 700; font-size: .75rem; color: var(--accent-dark, var(--accent));
  background: var(--accent-soft); }
.sv-builder .typesel--grid { background: var(--warn-soft, #fff6d9); color: var(--warn, #8a6800); border-color: #e6d9a8; }
.sv-builder .qc__state { font-size: .72rem; color: var(--muted); }
.sv-builder .qc__state[data-tone="ok"] { color: var(--ok, #007d44); }
.sv-builder .qc__state[data-tone="bad"] { color: var(--bad, #a13030); }
.sv-builder .qc .req { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); cursor: pointer; }
.sv-builder .qc .live { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; color: var(--warn, #8a6800);
  background: var(--warn-soft, #fff6d9); border-radius: 999px; padding: 4px 10px 4px 6px; cursor: pointer; }
.sv-builder .qc .live--on { color: var(--accent-deep, var(--accent)); background: var(--accent-soft); }
.sv-builder .qc .live:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.sv-builder .miniswitch { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 999px;
  background: var(--border-strong, #cbd3dd); position: relative; cursor: pointer; margin: 0; flex: none; transition: background .15s; }
.sv-builder .miniswitch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: left .15s; }
.sv-builder .miniswitch:checked { background: var(--accent); }
.sv-builder .miniswitch:checked::after { left: 16px; }
.sv-builder .miniswitch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sv-builder .iconbtn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: #fff;
  color: var(--muted); cursor: pointer; display: inline-grid; place-items: center; font-size: 14px; padding: 0; }
.sv-builder .iconbtn:hover { border-color: var(--accent); color: var(--accent); }
.sv-builder .iconbtn.del:hover, .sv-builder .iconbtn.armed { border-color: var(--bad, #a13030); color: var(--bad, #a13030); }
.sv-builder .iconbtn.armed { width: auto; padding: 0 8px; font-size: .75rem; font-weight: 700; }
.sv-builder .qc__q { width: 100%; border: 0; border-bottom: 2px solid var(--border); padding: 6px 2px; font-size: 1.02rem; font-weight: 600; background: transparent; color: var(--text); }
.sv-builder .qc__q:focus-visible { outline: 0; border-bottom-color: var(--accent); }
.sv-builder .qc__hint { width: 100%; border: 0; border-bottom: 1px solid var(--border); padding: 5px 2px; font-size: .82rem;
  color: var(--muted); background: transparent; margin-top: 6px; }
.sv-builder .qc__hint:focus-visible { outline: 0; border-bottom-color: var(--accent); }
.sv-builder .qc__body { margin-top: 12px; }
.sv-builder .qc__problems { margin: 10px 0 0; font-size: .78rem; color: var(--warn, #8a6800); background: var(--warn-soft, #fff6d9);
  border-radius: 8px; padding: 6px 10px; }
.sv-builder .optrow { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.sv-builder .optrow .mk { width: 16px; height: 16px; border: 1.5px solid var(--border-strong, #cbd3dd); border-radius: 4px; flex: none; }
.sv-builder .optrow.radio .mk { border-radius: 50%; }
.sv-builder .optrow input { flex: 1; border: 0; border-bottom: 1px dashed var(--border); padding: 5px 2px; font-size: .9rem; background: transparent; }
.sv-builder .optrow input:focus-visible { outline: 0; border-bottom-style: solid; border-bottom-color: var(--accent); }
.sv-builder .x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.sv-builder .x:hover { color: var(--bad, #a13030); }
.sv-builder .addopt { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--accent-dark, var(--accent));
  font-size: .85rem; cursor: pointer; background: none; border: 0; padding: 4px 0; }
.sv-builder .addopt:hover { text-decoration: underline; }
.sv-builder .fixedopts { display: flex; gap: 8px; flex-wrap: wrap; }
.sv-builder .qc__note { margin: 8px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.sv-builder .fixedopts span { border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: .8rem; color: var(--muted); }
.sv-builder .numrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sv-builder .numrow .fake { flex: 1; max-width: 240px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  display: flex; align-items: center; padding: 0 12px; color: #9aa39d; font-size: .85rem; }
.sv-builder .numrow .fake--long { max-width: 100%; height: 56px; align-items: flex-start; padding-top: 9px; }
.sv-builder .unit { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); }
.sv-builder .unit input { width: 90px; border: 1px solid var(--border-strong, #cbd3dd); border-radius: 8px; padding: 6px 9px; font-size: .85rem; }
.sv-builder .unit--link { flex: 1 1 320px; }
.sv-builder .unit--link input { width: 100%; min-width: 0; }
.sv-builder .prevtag { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }
.sv-builder .scalebtns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sv-builder .scalebtns span { min-width: 38px; height: 38px; padding: 0 8px; border: 1px solid var(--border); border-radius: 9px;
  display: grid; place-items: center; font-weight: 700; color: var(--muted); }
.sv-builder .tabedit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .sv-builder .tabedit { grid-template-columns: 1fr; } }
.sv-builder .tabedit h4 { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.sv-builder .chiprow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sv-builder .valchip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 9px; font-size: .82rem; }
.sv-builder .valchip input { border: 0; background: transparent; font: inherit; width: auto; min-width: 3ch; max-width: 18ch; padding: 0; }
.sv-builder .valchip input:focus-visible { outline: 0; }
.sv-builder .valchip.add { border-style: dashed; color: var(--muted); cursor: pointer; background: transparent; }
.sv-builder .valchip.add:hover { color: var(--accent); border-color: var(--accent); }
.sv-builder .celltype { margin-top: 12px; display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.sv-builder .celltype select { border: 1px solid var(--border-strong, #cbd3dd); border-radius: 8px; padding: 6px 9px; font-size: .85rem; background: #fff; }
.sv-builder .tcb { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .85rem; }
.sv-builder .tcb th, .sv-builder .tcb td { border: 1px solid var(--border); padding: 8px 6px; text-align: center; }
.sv-builder .tcb thead th { background: var(--bg); color: var(--muted); font-weight: 700; font-size: .75rem; }
.sv-builder .tcb tbody th { text-align: left; font-weight: 600; background: var(--bg); padding-left: 12px; }
.sv-builder .tcb .cb { width: 18px; height: 18px; border: 1.5px solid var(--border-strong, #cbd3dd); border-radius: 4px;
  display: inline-block; vertical-align: middle; cursor: pointer; background: #fff; position: relative; }
.sv-builder .tcb .cb.radio { border-radius: 50%; }
.sv-builder .tcb .cb[data-on="1"] { background: var(--accent); border-color: var(--accent); }
.sv-builder .qc__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.sv-builder .keyinput { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; background: var(--bg); }
.sv-builder .keyinput label { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sv-builder .keyinput input { border: 0; background: transparent; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent-deep, var(--text)); width: 140px; padding: 0; }
.sv-builder .keyinput--tags input { font-family: inherit; font-weight: 400; width: 150px; }
.sv-builder .keyinput input:focus-visible { outline: 0; }
.sv-builder .condin { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); flex-wrap: wrap; }
.sv-builder .condin input, .sv-builder .condin select { border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font-size: .8rem; background: #fff; width: 110px; }
.sv-builder .condin select { width: auto; }
.sv-builder .jsonbtn { font-size: .78rem; color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.sv-builder .json { background: var(--accent-deep, #00532e); color: #e8f7ef; border-radius: 8px; padding: 11px 12px;
  font: 500 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 10px 0 0; overflow-x: auto; white-space: pre; }
.sv-builder .addbar { border: 1px dashed var(--border-strong, #cbd3dd); border-radius: 12px; padding: 12px 14px; margin-top: 4px; }
.sv-builder .addbar .lead { font-weight: 700; font-size: .85rem; color: var(--muted); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.sv-builder .addbar .plus { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.sv-builder .types { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-builder .type { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 12px; background: #fff; cursor: pointer; font: inherit; font-size: .85rem; color: var(--text); }
.sv-builder .type:hover { border-color: var(--accent); background: var(--accent-soft); }
.sv-builder .type:disabled { opacity: .6; cursor: progress; }
.sv-builder .type .ci { width: 24px; height: 24px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-dark, var(--accent));
  display: grid; place-items: center; font-size: 13px; flex: none; }
.sv-builder .type--grid .ci { background: var(--warn-soft, #fff6d9); color: var(--warn, #8a6800); }
.sv-builder .celltype select, .sv-builder .condin select { width: auto; min-width: 0; }
.sv-builder .valchip input { field-sizing: content; }
.sv-builder .condin input { width: 120px; }

/* ---- Zaawansowane + warunki (AS-0062) ---- */
.sv-builder .qc__adv { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.sv-builder .qc__adv > summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--muted); list-style: none; display: flex; gap: 10px; align-items: baseline; }
.sv-builder .qc__adv > summary::before { content: "▸"; transition: transform .15s; }
.sv-builder .qc__adv[open] > summary::before { transform: rotate(90deg); }
.sv-builder .qc__adv-sum { font-weight: 400; color: var(--warn, #8a6800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-builder .qc__adv .qc__foot { border-top: 0; padding-top: 0; margin-top: 10px; }
.sv-builder .cond { margin-top: 12px; }
.sv-builder .cond__head { margin: 0 0 8px; font-size: .82rem; font-weight: 600; }
.sv-builder .cond__head span { font-weight: 400; color: var(--muted); }
.sv-builder .cond__group { border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 6px; background: #fff; }
.sv-builder .cond__group--d1 { border: 0; padding: 0; background: transparent; }
.sv-builder .cond__group--d2 { background: var(--bg); }
.sv-builder .cond__ghead { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.sv-builder .cond__rule { display: grid; grid-template-columns: minmax(0, 2fr) 64px minmax(0, 1fr) 24px; gap: 6px; align-items: center; }
@media (max-width: 640px) { .sv-builder .cond__rule { grid-template-columns: 1fr 64px; } }
.sv-builder .cond select, .sv-builder .cond input { border: 1px solid var(--border-strong, #cbd3dd); border-radius: 8px;
  padding: 6px 8px; font-size: .8rem; background: #fff; width: 100%; min-width: 0; }
.sv-builder .cond__ghead span { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sv-builder .cond__join { display: flex; align-items: center; gap: 8px; }
.sv-builder .cond__join::before, .sv-builder .cond__join::after { content: ""; flex: 1; border-top: 1px dashed var(--border); }
.sv-builder .cond__join select { width: auto; font-weight: 800; color: var(--accent); letter-spacing: .06em; }
.sv-builder .cond__preview { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--accent-soft);
  font-size: .85rem; color: var(--text); }
.sv-builder .cond__acts { display: flex; gap: 14px; }

/* ---- Zakladka „Ankieta" karty kursu (panel) ---- */
.svo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .svo { grid-template-columns: 1fr; } }
.svo__main, .svo__side { display: grid; gap: 14px; min-width: 0; }
.svo .box { margin: 0; }
.svo-tag { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-deep, var(--accent)); background: var(--accent-soft); border: 1px solid var(--accent-mid, var(--border)); border-radius: 6px; padding: 4px 8px; }
.svo-state { font-size: .75rem; font-weight: 700; border-radius: 6px; padding: 4px 9px; }
.svo-state--live { background: var(--ok-soft, #e8f7ef); color: var(--ok, #007d44); }
.svo-state--draft { background: var(--warn-soft, #fff6d9); color: var(--warn, #8a6800); }
.svo-card__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.svo-meta { font-size: .8rem; color: var(--muted); }
.svo-title { font-size: 1.45rem; margin: 14px 0 0; letter-spacing: -.01em; }
.svo-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
@media (max-width: 760px) { .svo-kpis { grid-template-columns: 1fr 1fr; } }
.svo-kpi { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 2px; min-width: 0; }
.svo-kpi span { font-size: .75rem; color: var(--muted); }
.svo-kpi b { font-size: 1.3rem; color: var(--text); }
.svo-kpi b.svo-kpi__small { font-size: .9rem; line-height: 1.3; }
.svo-kpi em { font-style: normal; font-size: .72rem; color: var(--muted); overflow-wrap: anywhere; }
.svo-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.svo-acts form { margin: 0; }
.svo-listhead { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.svo-listhead h3 { margin: 0; font-size: 1rem; }
.svo-add, .svo-edit { font-size: .82rem; font-weight: 700; color: var(--accent); text-decoration: none; }
.svo-add:hover, .svo-edit:hover { text-decoration: underline; }
.svo-lesson { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: .9rem; }
.svo-lesson__n { width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: .75rem; font-weight: 800; }
.svo-lesson__count { color: var(--muted); font-size: .8rem; }
.svo-q { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 16px; }
.svo-q--draft { border-left: 3px solid var(--warn, #8a6800); }
.svo-q__n { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-deep, var(--accent)); display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.svo-q__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.svo-chip { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 5px; padding: 3px 7px;
  background: var(--accent-soft); color: var(--accent-deep, var(--accent)); border: 1px solid var(--accent-mid, var(--border)); }
.svo-chip--req { background: #fdecef; color: #a1263c; border-color: #f5c2cc; }
.svo-chip--opt { background: var(--bg); color: var(--muted); border-color: var(--border); }
.svo-chip--draft { background: var(--warn-soft, #fff6d9); color: var(--warn, #8a6800); border-color: #e6d9a8; text-transform: none; letter-spacing: 0; }
.svo-key { font-size: .7rem; color: var(--muted); }
.svo-q h4 { margin: 8px 0 2px; font-size: 1rem; }
.svo-q__hint { margin: 0; font-size: .8rem; color: var(--muted); }
.svo-q__cond { margin: 4px 0 0; font-size: .78rem; color: var(--warn, #8a6800); }
.svo-q__preview { margin-top: 10px; }
.svo-fake { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px dashed var(--border-strong, #cbd3dd);
  border-radius: 8px; background: var(--bg); color: var(--muted); font-size: .8rem; min-width: 240px; }
.svo-fake--long { min-height: 52px; min-width: min(420px, 100%); }
.svo-tiles { display: inline-flex; gap: 4px; padding: 4px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); }
.svo-tiles span { width: 30px; height: 30px; border-radius: 6px; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.svo-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.svo-opts span { font-size: .8rem; border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.svo-addbig { display: block; text-align: center; padding: 16px; border: 2px dashed var(--border-strong, #cbd3dd); border-radius: 12px;
  font-weight: 700; color: var(--muted); text-decoration: none; }
.svo-addbig:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.svo-side h3 { margin: 0 0 8px; font-size: .95rem; }
.svo-side__big { margin: 0 0 6px; font-size: .9rem; color: var(--muted); }
.svo-side__big b { font-size: 1.6rem; color: var(--text); }
.svo-side--meta { display: grid; gap: 8px; font-size: .8rem; }
.svo-side--meta div { display: flex; justify-content: space-between; gap: 10px; }
.svo-side--meta span { color: var(--muted); }
.svo-empty { text-align: left; }
.svo-empty h2 { margin: 12px 0 6px; }
.svo-empty p { color: var(--muted); max-width: 70ch; }
.ctab__count { margin-left: 6px; font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep, var(--accent)); }
.svo .box > h2.svo-title, .svo .svo-title { font: 800 1.45rem/1.25 var(--font-head, inherit); text-transform: none; letter-spacing: -.01em;
  color: var(--text); margin: 14px 0 0; }
.svo-empty.box > h2 { font: 800 1.2rem/1.3 var(--font-head, inherit); text-transform: none; letter-spacing: 0; color: var(--text); }

/* Closed surveys - withdrawing consents (AS-0269) */
.sv-unlock-item { border-top: 1px solid var(--border); padding: 12px 0; }
.sv-unlock-item p { margin: 0 0 8px; }
.sv-unlock-deps { margin: 10px 0 0; padding-left: 18px; }
.sv-unlock-deps li { margin: 0 0 6px; }
.sv-unlock-ops { margin: 8px 0 12px; padding-left: 18px; }
/*
 * Widok lekcji kursanta (AS-0062): naglowek lekcji, karta z nagraniem i zakladkami
 * „Materialy dodatkowe" pod nim, przyklejony pasek akcji. Odtwarzacz (.player,
 * Bunny / R2) zostaje jak byl - tu tylko jego miejsce. Wszystko na tokenach palety.
 */
.lsn { display: grid; gap: 16px; padding-bottom: 8px; width: 100%; max-width: 1080px; margin: 0 auto; }

.lsn-head { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; }
.lsn-head__main { min-width: 0; flex: 1 1 420px; display: grid; gap: 4px; }
.lsn-head__meta { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); }
.lsn-chip { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep, var(--accent));
  background: var(--accent-soft); border-radius: 6px; padding: 3px 8px; }
.lsn-head .lesson-h { margin: 2px 0; font: 800 1.5rem/1.25 var(--font-head, inherit); letter-spacing: -.01em; color: var(--text); text-transform: none; }
.lsn-head .lesson-lead { margin: 0; color: var(--muted); font-size: .92rem; max-width: 75ch; text-transform: none; letter-spacing: 0; font-weight: 400; }
.lsn-head .lesson-lead b { color: var(--text); }
.lsn-head .mylesson-quiz { margin-top: 6px; }
.lsn-back, .lsn-bar__back { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--text);
  text-decoration: none; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; white-space: nowrap;
  text-transform: none; letter-spacing: 0; }
.lsn-back::before, .lsn-bar__back::before { content: "←"; color: var(--muted); }
.lsn-back:hover, .lsn-bar__back:hover { border-color: var(--accent); color: var(--accent); }

.lsn-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.lsn-player { background: #0a0f14; }
.lsn-player .player { max-width: none; margin: 0; border-radius: 0; }
.lsn-newer { padding: 12px 20px; margin: 0 !important; border-bottom: 1px solid var(--border); background: var(--warn-soft, #fff6d9); }

.lsn-bar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px 14px; box-shadow: 0 -4px 18px rgba(0,0,0,.06); }
.lsn-bar__right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.lsn-bar__right form { margin: 0; }
.lsn-bar__next { display: grid; justify-items: end; gap: 2px; text-align: right; }
.lsn-bar__label { font-size: .72rem; color: var(--muted); }
.lsn-bar__note { margin: 0; font-size: .78rem; }
.lsn-bar__note.hint { color: var(--warn, #8a6800); background: var(--warn-soft, #fff6d9); border-radius: 6px; padding: 2px 8px; }
.lsn-bar__acts { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .lsn-bar__next { justify-items: start; text-align: left; }
  .lsn-bar__right { margin-left: 0; justify-content: flex-start; }
}

/* Zakladki pod nagraniem */
.sx--embedded { margin: 0; scroll-margin-top: 80px; }
.sx-tabbar { display: flex; gap: 22px; padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--bg); overflow-x: auto; }
.sx-tab { appearance: none; border: 0; background: transparent; padding: 13px 0; font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; display: inline-flex; align-items: center;
  gap: 8px; white-space: nowrap; }
.sx-tab:hover { color: var(--text); }
.sx-tab[aria-selected="true"] { color: var(--accent-deep, var(--accent)); border-bottom-color: var(--accent); font-weight: 800; }
.sx-tab__badge { font-size: .68rem; font-weight: 800; background: var(--accent-soft); color: var(--accent-deep, var(--accent));
  border-radius: 999px; padding: 2px 8px; }
.sx-tab__count { font-size: .78rem; font-weight: 400; color: var(--muted); }
.sx-pane { padding: 20px; }
.box.sx .sx-tabbar { padding: 0; background: transparent; }
.box.sx .sx-pane { padding: 16px 0 0; }

/* ---- AS-0062: zakladki z blokada, test w zakladce, nawigacja lekcji, powitanie ---- */
.lsn-done { font-weight: 700; color: var(--ok, #007d44); }
.sx-tab--locked { color: var(--muted); }
.sx-lock { font-size: .8rem; }
.sx-locked { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 36px 20px;
  border: 1px dashed var(--border-strong, #cbd3dd); border-radius: 14px; background: var(--bg); }
.sx-locked__ic { font-size: 1.6rem; }
.sx-locked b { font-size: 1rem; }
.sx-locked span { color: var(--muted); font-size: .88rem; max-width: 46ch; }
.lsn-watchnote { margin: 0; padding: 10px 20px; font-size: .85rem; color: var(--warn, #8a6800); background: var(--warn-soft, #fff6d9); }
.lsn-watchnote.allgood { color: var(--ok, #007d44); background: var(--ok-soft, #e8f7ef); }
.quiz--inline { border: 0; padding: 0; box-shadow: none; background: transparent; }
.sx-test-lead { margin: 14px 0 0; }
.sx-test-acts { margin-top: 18px; }
.sx-coursedone { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent); }
.sx-files-intro { margin: 0 0 12px; color: var(--muted); font-size: .88rem; }
.lsn-bar__mid { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lsn-nav { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.lsn-nav--prev { color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; }
.lsn-nav--prev::before { content: "‹"; font-size: 1.1rem; color: var(--muted); }
.lsn-nav--prev:hover { border-color: var(--accent); color: var(--accent); }
.lsn-nav--next::after { content: "›"; font-size: 1.1rem; }
.lsn-nav--off { position: relative; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 14px; cursor: not-allowed; }
.lsn-nav--off::before { content: "🔒"; font-size: .8rem; }
.lsn-nav--off:hover::after, .lsn-nav--off:focus::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 8px);
  width: max-content; max-width: 280px; white-space: normal; font-weight: 500; font-size: .8rem; color: #fff; background: #1c2430;
  padding: 8px 10px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.lsn-bar { justify-content: space-between; }
/* Ankieta - pominiecia */
.sx-q legend { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sx-qlabel { flex: 1; min-width: 0; }
.sx-skip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 500; color: var(--muted); cursor: pointer; }
.sx-skip input { margin: 0; accent-color: var(--accent); }
.sx-skipped-note { display: none; margin: 8px 0 0; font-size: .82rem; color: var(--muted); font-style: italic; }
.sx-q--skipped { background: var(--bg); }
.sx-q--skipped .sx-skipped-note { display: block; }
.sx-q--skipped .sx-opts, .sx-q--skipped .sx-input, .sx-q--skipped .sv-tablewrap, .sx-q--skipped .sx-num-in, .sx-q--skipped .sx-hint { display: none; }
.sx-q--skipped .sx-qlabel { color: var(--muted); text-decoration: line-through; }
.sx-saved--skip { background: var(--warn-soft, #fff6d9); }
/* Powitanie kursu (makieta AS-0062): karta z jednym CTA, kroki jako kafelki, na telefonie CTA na dole */
.welcome { display: grid; gap: 22px; }
.welcome-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: #fff; border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -20px rgba(0,0,0,.18); }
.welcome-hero__main { padding: 30px 32px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.welcome-hero__badge { margin: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-deep, var(--accent)); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.welcome-hero__badge b { font-weight: 800; letter-spacing: .08em; }
.welcome-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; animation: welcome-pulse 2s ease-in-out infinite; }
@keyframes welcome-pulse { 50% { opacity: .35; } }
.welcome-hero__h { margin: 0; font: 800 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 var(--font-head, inherit); letter-spacing: -.02em; color: var(--text); text-transform: none; }
.welcome-hero__h span { color: var(--accent-deep, var(--accent)); }
.welcome-hero__lead { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.6; max-width: 62ch; }
.welcome-hero__facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.welcome-hero__facts li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg, #f7f8fa); font-size: .86rem; font-weight: 600; color: var(--text); }
.welcome-hero__facts .icon { color: var(--accent); }
.welcome-hero__facts .k { color: var(--muted); font-weight: 500; }
.welcome-hero__go { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.welcome-hero__form { margin: 0; }
.welcome-hero__btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; font-size: 1rem; font-weight: 800; border-radius: 14px;
  box-shadow: 0 10px 22px -12px var(--accent); }
.welcome-hero__note { margin: 0; color: var(--muted); font-size: .84rem; flex: 1 1 220px; }
.welcome-hero__art { position: relative; min-height: 260px; display: grid; place-items: center; padding: 24px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 10%, rgba(255,255,255,.22), transparent 55%),
              linear-gradient(140deg, var(--accent-deep, var(--accent)), var(--accent)); }
.welcome-hero__art::before { content: ""; position: absolute; inset: 0; opacity: .14;
  background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 28px 28px; }
.welcome-hero__art--cover::before { display: none; }
.welcome-hero__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* AS-0170: covers are 16:9 - shown whole, centred on the brand colour, instead of
   being stretched to the height of the text column and cut at the sides. */
.welcome-hero__art--cover { padding: 0; min-height: 0; align-content: center; background: var(--accent-night, var(--accent-deep, #111)); }
.welcome-hero__art--cover > img { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; }
.welcome-hero__art--cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55)); }
.welcome-hero__mark { position: relative; width: 112px; height: 112px; border-radius: 28px; display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(4px); box-shadow: 0 18px 40px -16px rgba(0,0,0,.4); }
.welcome-hero__ribbon { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 12px 20px; display: flex; justify-content: space-between;
  gap: 12px; font-size: .78rem; font-weight: 600; background: rgba(0,0,0,.16); }
.welcome-hero__ready { display: inline-flex; align-items: center; gap: 6px; }
.welcome-hero__ready .welcome-hero__dot { background: #fff; }

.welcome-steps { display: grid; gap: 14px; }
.welcome-steps__head h2 { margin: 0; display: flex; align-items: center; gap: 10px; font: 800 1.2rem/1.3 var(--font-head, inherit); color: var(--text);
  text-transform: none; letter-spacing: 0; }
.welcome-steps__head p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.welcome-steps__count { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent-deep, var(--accent)); }
.welcome-steps__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.welcome-step { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s, box-shadow .15s; }
.welcome-step:hover { border-color: var(--accent); box-shadow: 0 10px 24px -18px var(--accent); }
.welcome-step__top { display: flex; align-items: center; justify-content: space-between; }
.welcome-step__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep, var(--accent)); }
.welcome-step__n { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.welcome-step h3 { margin: 4px 0 0; font-size: 1rem; font-weight: 800; color: var(--text); text-transform: none; letter-spacing: 0; }
.welcome-step__tag { align-self: flex-start; margin-top: -2px; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--bg, #f3f5f7); color: var(--muted); white-space: nowrap; }
.welcome-step p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.welcome-step--final { grid-column: span var(--span, 1); background: linear-gradient(135deg, var(--accent-soft), #fff 70%); border-color: var(--accent); }
.welcome-step--final .welcome-step__icon { background: var(--accent); color: #fff; }
.welcome-plan { padding: 24px 26px; display: grid; gap: 20px; }
.welcome-plan__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.welcome-plan__head > div { min-width: 0; flex: 1 1 320px; }
.welcome-plan__head h2 { margin: 0; display: flex; align-items: center; gap: 10px; font: 800 1.2rem/1.3 var(--font-head, inherit); color: var(--text); text-transform: none; letter-spacing: 0; }
.welcome-plan__head p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; max-width: 62ch; }
.welcome-plan__span { margin: 0; display: flex; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.welcome-plan__span div { padding: 8px 14px; }
.welcome-plan__span div + div { border-left: 1px solid var(--border); }
.welcome-plan__span dt { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.welcome-plan__span dd { margin: 2px 0 0; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

.welcome-plan__feature { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent); }
.welcome-plan__feature.is-wait { background: var(--warn-soft, #fdf3dd); border-color: var(--warn, #c98a12); }
.welcome-plan__feature-icon { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.welcome-plan__feature.is-wait .welcome-plan__feature-icon { background: var(--warn, #c98a12); }
.welcome-plan__feature-body { flex: 1 1 auto; min-width: 0; }
.welcome-plan__eyebrow { margin: 0; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep, var(--accent)); }
.welcome-plan__feature.is-wait .welcome-plan__eyebrow { color: var(--warn, #8a5a00); }
.welcome-plan__feature-title { margin: 2px 0 0; font-weight: 800; font-size: 1.02rem; color: var(--text); }
.welcome-plan__feature-meta { margin: 2px 0 0; font-size: .84rem; color: var(--muted); }
.welcome-plan__count { margin: 0; text-align: right; display: grid; gap: 2px; flex: none; }
.welcome-plan__count b { font-size: 1.15rem; font-weight: 900; color: var(--text); }
.welcome-plan__count span { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.welcome-plan__line { list-style: none; margin: 0; padding: 0; display: grid; position: relative; --rail: 15px; }
.welcome-plan--dated .welcome-plan__line { --rail: 79px; }
.welcome-plan__line::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: var(--rail); width: 2px; background: var(--border); }
.welcome-plan__line:has(> :only-child)::before { display: none; }
.welcome-plan__node { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; padding: 6px 0; }
.welcome-plan--dated .welcome-plan__node { grid-template-columns: 50px 32px minmax(0, 1fr); }
.welcome-plan__date { padding-top: 6px; text-align: right; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); line-height: 1.1; }
.welcome-plan__date b { display: block; font-size: 1.25rem; font-weight: 900; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.welcome-plan__dot { position: relative; z-index: 1; margin-top: 6px; justify-self: center; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--border); color: #fff; }
.welcome-plan__node.is-open .welcome-plan__dot { background: var(--accent); border-color: var(--accent); }
.welcome-plan__node.is-date .welcome-plan__dot { border-color: var(--warn, #c98a12); }
.welcome-plan__node.is-masked .welcome-plan__dot { border-style: dashed; }
.welcome-plan__card { min-width: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid transparent; transition: border-color .15s, background .15s; }
.welcome-plan__node.is-featured .welcome-plan__card { border-color: var(--border); background: var(--bg, #f6f7f9); }
.welcome-plan__no { margin: 0; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.welcome-plan__title { margin: 2px 0 0; font-weight: 800; color: var(--text); }
.welcome-plan__node.is-masked .welcome-plan__title { color: var(--muted); font-weight: 600; }
.welcome-plan__meta { margin: 2px 0 0; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.welcome-plan__node.is-open .welcome-plan__meta { color: var(--accent-deep, var(--accent)); font-weight: 700; }
.welcome-plan__today { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.welcome-plan__today::before { content: ""; flex: 1; height: 2px; background: var(--accent); order: 2; }
.welcome-plan__today span { order: 1; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.welcome-files { padding: 22px 24px; }
.welcome-files h2 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.welcome-files h2 .icon { color: var(--accent); }

@media (max-width: 900px) {
  .welcome-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome-step--final { grid-column: 1 / -1; }
  .welcome-plan { padding: 18px 16px; }
  .welcome-plan__feature { flex-wrap: wrap; }
  .welcome-plan__count { text-align: left; flex-basis: 100%; padding-left: 62px; }
  .welcome-plan__span { width: 100%; }
  .welcome-plan__span div { flex: 1; padding: 8px 10px; }
}
/* Telefon: karta staje się zielonym banerem (bez grafiki), fakty w siatce, CTA przyklejone do dołu */
@media (max-width: 720px) {
  .welcome { padding-bottom: 96px; gap: 16px; }
  .welcome-hero { grid-template-columns: 1fr; border: 0; color: #fff;
    background: radial-gradient(120% 80% at 90% 0%, rgba(255,255,255,.2), transparent 55%), linear-gradient(150deg, var(--accent-deep, var(--accent)), var(--accent)); }
  .welcome-hero__main { padding: 22px 20px; gap: 12px; }
  .welcome-hero__art { display: none; }
  .welcome-hero__badge { background: rgba(255,255,255,.16); color: #fff; font-size: .64rem; gap: 6px; white-space: nowrap; max-width: 100%; }
  .welcome-hero__dot { background: #fff; }
  .welcome-hero__h, .welcome-hero__h span { color: #fff; }
  .welcome-hero__h span { display: block; opacity: .85; }
  .welcome-hero__lead { color: rgba(255,255,255,.85); font-size: .92rem; }
  .welcome-hero__facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.2); }
  .welcome-hero__facts li { flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 8px; background: none; border: 0; border-radius: 0; color: #fff; }
  .welcome-hero__facts li + li { border-left: 1px solid rgba(255,255,255,.2); }
  .welcome-hero__facts:has(li:nth-child(4)) .f-lessons { display: none; }
  .welcome-hero__facts .icon { display: none; }
  .welcome-hero__facts .k { color: rgba(255,255,255,.7); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
  .welcome-hero__facts .v { font-size: .95rem; font-weight: 800; }
  .welcome-hero__go { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); border-top: 1px solid var(--border); backdrop-filter: blur(8px); box-shadow: 0 -8px 24px -16px rgba(0,0,0,.3); }
  .welcome-hero__form, .welcome-hero__btn { width: 100%; justify-content: center; }
  .welcome-hero__note { display: none; }
  .welcome-steps__grid { grid-template-columns: 1fr; gap: 10px; }
  .welcome-step { padding: 14px 16px; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; row-gap: 4px; }
  .welcome-step__top { grid-row: span 3; align-items: flex-start; }
  .welcome-step__n { display: none; }
  .welcome-step__icon { width: 40px; height: 40px; }
  .welcome-step h3 { margin: 0; font-size: .95rem; }
  .welcome-step h3, .welcome-step p, .welcome-step__tag { grid-column: 2; }
}
.course-hints { display: grid; gap: 14px; margin-bottom: 16px; }
.course-hints__row { display: grid; gap: 6px; }
.course-hints__row > span { color: var(--muted); font-size: .88rem; }
.course-hints__summary { margin-bottom: 0; }
.lsn-head .lesson-lead { line-height: 1.55; }
/* Gratulujemy ukończenia kursu (AS-0258): ta sama karta co powitanie, pod nią nagrody i wyniki */
.finish-hero .welcome-hero__go { gap: 12px; }
.finish-hero .welcome-hero__dot { animation: none; }
.finish-hero__more { padding: 14px 22px; border-radius: 14px; }
.finish-rewards .cert, .finish-rewards .sx-summary, .finish-rewards .allgood, .finish-rewards .cert-hint { margin: 0; }
.finish-survey { display: grid; gap: 8px; }
.finish-survey__view { justify-self: start; font-size: .88rem; font-weight: 600; }
.finish-results { padding: 24px 26px; display: grid; gap: 18px; }
.finish-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.finish-stats li { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg, #f7f8fa); }
.finish-stats .k { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.finish-stats .v { font: 800 1.4rem/1.1 var(--font-head, inherit); color: var(--text); }
.finish-stats li:first-child { background: linear-gradient(135deg, var(--accent-soft), #fff 80%); border-color: var(--accent); }
.finish-stats li:first-child .v { color: var(--accent-deep, var(--accent)); }
.finish-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.finish-lesson { display: grid; grid-template-columns: 40px minmax(0, 1fr) 180px; align-items: center; gap: 14px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.finish-lesson__n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft);
  color: var(--accent-deep, var(--accent)); font-weight: 800; font-size: .9rem; }
.finish-lesson__t { margin: 0; font-weight: 700; color: var(--text); }
.finish-lesson__t a { color: inherit; text-decoration: none; }
.finish-lesson__t a:hover { text-decoration: underline; }
.finish-lesson__meta { margin: 2px 0 0; color: var(--muted); font-size: .82rem; }
.finish-lesson__score { display: flex; align-items: center; gap: 10px; }
.finish-lesson__bar { flex: 1; height: 8px; border-radius: 999px; background: var(--bg, #eef0f3); overflow: hidden; }
.finish-lesson__bar i { display: block; height: 100%; width: calc(var(--p) * 1%); background: var(--accent); border-radius: inherit; }
.finish-lesson__score b { min-width: 44px; text-align: right; font-weight: 800; color: var(--text); }
@media (max-width: 720px) {
  .finish { padding-bottom: 0; }
  .finish-hero .welcome-hero__go { position: static; background: none; border-top: 1px solid rgba(255,255,255,.2); box-shadow: none; padding: 14px 0 0; }
  .finish-hero__more { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
  .finish-results { padding: 18px 16px; }
  .finish-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finish-lesson { grid-template-columns: 36px minmax(0, 1fr); }
  .finish-lesson__score { grid-column: 2; }
}
/* AS-0081: edytor z podgladem na zywo (panel/shared/_live_editor). AS-0090: jasne
   studio na tokenach panelu (paleta dostawcy), jak reszta panelu. */
.live-editor {
  --le-bg: var(--surface); --le-bar: var(--surface); --le-pane: var(--surface); --le-input: var(--bg);
  --le-card: var(--bg); --le-line: var(--border); --le-line-2: color-mix(in srgb, var(--border) 60%, var(--muted));
  --le-text: var(--text); --le-muted: var(--muted); --le-code: var(--text); --le-var: var(--accent-deep);
  --le-ok: var(--accent); --le-busy: #e08a1e; --le-bad: var(--bad);
  --le-stage: color-mix(in srgb, var(--bg) 70%, var(--border));
  --le-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
html.live-editor-open { overflow: hidden; }
.live-editor__veil { position: fixed; inset: 0; z-index: 120; background: rgba(15, 23, 20, .45); backdrop-filter: blur(4px); }
.live-editor__dialog {
  position: fixed; z-index: 121; inset: max(12px, 2.5vh) max(12px, 2vw);
  max-width: 1580px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden;
  background: var(--le-bg); color: var(--le-text); border: 1px solid var(--le-line); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(15, 23, 20, .25); font-size: .92rem;
}
.live-editor__dialog[hidden], .live-editor__veil[hidden] { display: none; }

.live-editor__bar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 14px 20px; background: var(--le-bar); border-bottom: 1px solid var(--le-line); }
.live-editor__x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--le-muted); cursor: pointer; }
.live-editor__x:hover { color: var(--le-text); background: var(--le-card); border-color: var(--le-line); }
.live-editor__title { margin: 0; font-size: 1.12rem; font-weight: 700; color: var(--heading, var(--le-text)); }
.live-editor__badge { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; padding: 4px 11px; border-radius: 99px; background: #e6ebf7; color: #3151a3; border: 1px solid #cdd7ef; }
.live-editor__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.live-editor__badge.is-own { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-mid); }
.live-editor__sp { flex: 1; }
.live-editor__switch { display: inline-flex; padding: 3px; gap: 2px; background: var(--le-card); border: 1px solid var(--le-line); border-radius: 10px; }
.live-editor__switch button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--le-muted); font: 600 .8rem/1 inherit; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.live-editor__switch button:hover { color: var(--le-text); }
.live-editor__switch button[aria-pressed="true"] { background: var(--surface); color: var(--le-text); box-shadow: 0 1px 2px rgba(15, 23, 20, .08); }
.live-editor__tabs { display: none; }
.live-editor__status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 8px; background: var(--le-card); border: 1px solid var(--le-line); color: var(--le-muted); font-size: .78rem; font-weight: 500; }
.live-editor__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--le-ok); box-shadow: 0 0 0 3px var(--accent-soft); }
.live-editor__status[data-state="busy"]::before { background: var(--le-busy); box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.live-editor__status[data-state="error"] { color: var(--le-bad); }
.live-editor__status[data-state="error"]::before { background: var(--le-bad); box-shadow: 0 0 0 3px rgba(248, 113, 113, .18); }
.live-editor__bar form { display: inline; margin: 0; }

.live-editor__confirm, .live-editor__flash { flex: none; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 20px; font-size: .86rem; border-bottom: 1px solid var(--le-line); }
.live-editor__confirm { background: var(--warn-soft); color: var(--warn); }
.live-editor__confirm span { flex: 1; }
.live-editor__flash { background: var(--ok-soft); color: var(--ok); }
.live-editor__flash.is-bad { background: var(--bad-soft); color: var(--bad); }
.live-editor__confirm[hidden], .live-editor__flash[hidden] { display: none; }

.live-editor__split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.live-editor__pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.live-editor__pane--edit { background: var(--le-pane); border-right: 1px solid var(--le-line); }
.live-editor__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.live-editor__foot { flex: none; margin: 0; padding: 12px 24px; background: var(--surface); border-top: 1px solid var(--le-line); color: var(--le-muted); font-size: .8rem; line-height: 1.5; }
.live-editor__foot code { color: var(--warn); background: var(--warn-soft); padding: 1px 5px; border-radius: 4px; }

.live-editor .le-field { display: flex; flex-direction: column; gap: 8px; }
.live-editor .le-label { display: flex; justify-content: space-between; gap: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--le-muted); }
.live-editor .le-label em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; font-family: var(--le-mono); }
.live-editor .le-input { width: 100%; box-sizing: border-box; background: var(--surface); color: var(--le-code); border: 1px solid var(--le-line-2); border-radius: 10px; padding: 11px 14px; font: .84rem/1.55 var(--le-mono); }
.live-editor textarea.le-input { min-height: 320px; resize: vertical; line-height: 1.65; tab-size: 2; }
.live-editor textarea.le-input.le-short { min-height: 80px; }
.live-editor .le-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.live-editor .le-input[readonly] { background: var(--le-input); color: var(--le-muted); cursor: default; }
.live-editor .le-hint { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--le-muted); }
.live-editor .le-hint b { color: var(--le-text); }
.live-editor .le-hint.is-bad { color: var(--le-bad); }
.live-editor .le-hint a { color: var(--le-var); }
.live-editor .le-section { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--le-line); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--le-text); }
.live-editor .le-section em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--le-muted); }
.live-editor .le-info { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-mid); font-size: .84rem; line-height: 1.5; color: var(--le-muted); }
.live-editor .le-info b { color: var(--le-text); }
.live-editor .le-info svg { flex: none; color: var(--accent-deep); margin-top: 1px; }
.live-editor .le-box { border: 1px solid var(--le-line-2); border-radius: 12px; overflow: hidden; background: var(--le-input); }
.live-editor .le-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.live-editor .le-box .le-input { border: 0; border-radius: 0; background: var(--le-input); box-shadow: none; }
.live-editor .le-toolbar { display: flex; align-items: center; gap: 2px; padding: 5px 8px; border-bottom: 1px solid var(--le-line); background: color-mix(in srgb, var(--le-input) 60%, var(--border)); }
.live-editor .le-toolbar button { border: 0; background: none; border-radius: 6px; padding: 3px 8px; font: 600 .74rem/1.4 var(--le-mono); color: var(--le-text); cursor: pointer; }
.live-editor .le-toolbar button:hover { background: var(--surface); }
.live-editor .le-toolbar span { margin-left: auto; font-size: .7rem; color: var(--le-muted); }

.live-editor__vars { padding-top: 18px; border-top: 1px solid var(--le-line); }
.live-editor__varshead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 10px; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--le-text); }
.live-editor__varshead em { margin-left: auto; font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent-deep); }
.live-editor__pill { font-size: .68rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 3px 8px; border-radius: 6px; background: var(--le-card); color: var(--le-muted); border: 1px solid var(--le-line); }
.live-editor__pill.is-bad { color: var(--le-bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: var(--bad-soft); }
.live-editor__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.live-editor__chip { font: .76rem/1 var(--le-mono); padding: 6px 10px; border-radius: 7px; background: var(--le-card); color: var(--le-text); border: 1px solid var(--le-line); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.live-editor__chip:hover { background: var(--accent-soft); border-color: var(--accent-mid); color: var(--accent-deep); }
.live-editor__chip.is-required { border-color: var(--accent-mid); }
.live-editor__chip.is-missing, .live-editor__chip.is-bad { color: var(--le-bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: var(--bad-soft); }

.live-editor__pane--preview { background: var(--le-stage); }
.live-editor__meta { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--le-line); font-size: .8rem; color: var(--le-muted); }
.live-editor__subject { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--le-code); }
.live-editor__subject b { color: var(--le-var); font-weight: 500; }
.live-editor__tagline { flex: none; display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: .76rem; font-weight: 500; padding: 4px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--le-line); color: var(--le-muted); }
.live-editor__tagline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.live-editor__tagline:empty { display: none; }
.live-editor__stage { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 18px; overflow: auto; }
.live-editor__device { width: 100%; max-width: 100%; display: flex; transition: max-width .25s ease; }
.live-editor[data-device="mobile"] .live-editor__device { max-width: 390px; }
.live-editor__frame { flex: 1; width: 100%; min-height: 480px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 20, .06), 0 18px 40px rgba(15, 23, 20, .12); }
.live-editor__text { flex: none; padding: 10px 22px 14px; border-top: 1px solid var(--le-line); font-size: .8rem; color: var(--le-muted); }
.live-editor__text summary { cursor: pointer; }
.live-editor__text pre { max-height: 180px; overflow: auto; white-space: pre-wrap; margin: 8px 0 0; color: var(--le-code); font-size: .78rem; }

.live-editor button:focus-visible, .live-editor .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .live-editor__device { transition: none; } }

@media (max-width: 760px) {
  .live-editor__dialog { inset: 0; border-radius: 0; }
  .live-editor__bar { padding: 10px 12px; }
  .live-editor__tabs { display: inline-flex; }
  .live-editor__devices { display: none; }
  .live-editor__split { grid-template-columns: minmax(0, 1fr); }
  .live-editor__pane--edit { border-right: 0; }
  .live-editor[data-tab="edit"] .live-editor__pane--preview, .live-editor[data-tab="preview"] .live-editor__pane--edit { display: none; }
  .live-editor__scroll { padding: 16px; }
  .live-editor__stage { padding: 10px; }
}
/*
 * ⚠ WIDOK ASSETLIFE WEWNATRZ PANELU DOSTAWCY - nasza skorka, nie dostawcy.
 *
 * Ekran `panel/settlements#show` (trasa `assetlife`) to jedyne miejsce w panelu
 * dostawcy, ktore ma wygladac jak PLATFORMA ASSETLIFE (/admin), a nie jak reszta
 * jego whitelabelu: "to wam my dostarczamy, nie wy". Reszta panelu zostaje w
 * palecie dostawcy.
 *
 * Jak to dziala: caly ekran jest owiniety w `.al-view`, a ten scope NADPISUJE
 * tokeny palety dostawcy wartosciami marki AssetLife (te same hexy co
 * assetlife/base.css :root - niebieski #3151A3, zloty #F0B139, Manrope /
 * Space Grotesk). Komponenty panelu (`.box`, `.tbl`, `.setl-*`, `.chip-*`)
 * czytaja kolor z tokenow, wiec przefarbowuja sie same - bez dublowania regul.
 * Nic stad nie wychodzi poza `.al-view`, wiec palety sie nie mieszaja.
 *
 * Kolory zyja TYLKO tutaj (blok `.al-view { --... }`). Chcesz zmienic barwy
 * naszego widoku u dostawcy - ruszasz ten jeden blok, reszta pliku to ksztalt.
 */

/* ============================ PALETA (tylko tu) ============================ */
.al-view {
  /* Tla i linie */
  --bg: #f5f8fc;          /* paper-soft */
  --surface: #ffffff;     /* paper */
  --surface-2: #fbfcff;
  --border: #e1e9f4;      /* line */
  --text: #16203a;        /* ink */
  --muted: #4c5a70;       /* ink-soft */
  --heading: #061a38;     /* blue-deep */

  /* Marka: niebieski wiedzie, zloty jest akcentem (prowizja, karty pieniedzy) */
  --accent: #3151a3;      /* blue */
  --accent-dark: #0c447c; /* blue-dark */
  --accent-deep: #061a38; /* blue-deep */
  --accent-night: #061a38;
  --accent-soft: #e9f1fa; /* ice */
  --accent-mid: #9dbee4;  /* ice-mid */

  --highlight: #f0b139;      /* gold */
  --highlight-dark: #8a5a08; /* gold-deep */

  /* The --btn-* tokens are var(--accent) resolved on :root - to the provider
     green - so they must be re-pointed here, or buttons stay green. */
  --btn-primary-1: var(--accent);
  --btn-primary-2: var(--accent-dark);
  --btn-primary-shadow: rgba(49, 81, 163, .28);
  --btn-secondary-line: var(--accent-mid);
  --btn-secondary-ink: var(--accent-dark);
  --btn-secondary-hover: var(--accent-soft);
  --btn-focus-ring: var(--accent-mid);

  /* Statusy - te same co na platformie */
  --ok: #1d9e75;
  --ok-soft: rgba(29, 158, 117, .12);
  --warn: #8a5a08;                        /* prowizja / oczekuje = zloty */
  --warn-soft: rgba(240, 177, 57, .16);
  --bad: #c0392b;
  --bad-soft: rgba(192, 57, 43, .09);

  /* Typografia i ksztalt platformy */
  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(6, 26, 56, .10);

  font-family: var(--font-body);
  color: var(--text);
}

/* ============================== KSZTALT ==================================== */

/* Pas marki: jasny, z ORYGINALNYM logo AssetLife - logo jest swiete, nie
   przefarbowujemy go ani nie wybijamy filtrem. Marke znaczy zlota nitka u dolu
   i miekki cien, nie kolor tla. */
.al-view .statbar--al {
  background: linear-gradient(180deg, #fff 0%, var(--accent-soft) 100%);
  border: 1px solid var(--border);
  border-bottom: 3px solid var(--highlight);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 26px;
}
.al-view .statbar--al .statbar__logo {
  height: 40px;
}

/* Karty: wieksze zaokraglenie i miekki niebieski cien platformy. */
.al-view .box {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}
.al-view .box + .box { margin-top: 18px; }
.al-view .boxtitle,
.al-view .box > h2 {
  font-family: var(--font-head);
  color: var(--heading);
}

/* Karta subskrypcji to karta PIENIEDZY - dostaje zloty akcent u gory, jak
   `.tile--accent` na platformie. */
.al-view .setl-hero {
  border-top: 3px solid var(--highlight);
  box-shadow: 0 10px 30px rgba(240, 177, 57, .13);
}
.al-view .setl-hero__big {
  font-family: var(--font-head);
  color: var(--accent-deep);
}
.al-view .setl-hero--bad .setl-hero__big { color: var(--bad); }
.al-view .setl-hero__big small { font-family: var(--font-body); font-size: .4em; font-weight: 600; color: var(--muted); }
/* Brutto pod kwota netto: drugorzedne, ale czytelne - to samo, z VAT. */
.al-view .setl-hero__gross {
  margin: 2px 0 0;
  font-family: var(--font-head);
  color: var(--accent-deep);
}
.al-view .setl-hero__gross span { font-family: var(--font-body); font-size: .8rem; color: var(--muted); }

/* Netto -> brutto: waska tabelka obok stanu pieniedzy. */
.al-view .setl-vat {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: .92rem;
}
.al-view .setl-vat th,
.al-view .setl-vat td { padding: 8px 12px; border-bottom: 1px solid var(--accent-mid); text-align: left; }
.al-view .setl-vat th { font-family: var(--font-head); color: var(--accent-dark); background: var(--accent-soft); }
.al-view .setl-vat th span { font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--muted); }
.al-view .setl-vat .num { text-align: right; }
.al-view .setl-vat td.num { font-family: var(--font-head); color: var(--accent-deep); }
.al-view .setl-vat tr:last-child td { border-bottom: none; }
.al-view .setl-vat--bad td { color: var(--bad); }

/* Chipy warunkow umowy [#64]: niebieskie klocki marki AssetLife ze ZLOTYMI
   liczbami - mocniejsze niz dawne lodowe kafelki, ktore "wialy bieda". */
.al-view .setl-chip {
  background: linear-gradient(165deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(6, 26, 56, .18);
}
.al-view .setl-chip b { font-family: var(--font-head); color: var(--highlight); }
.al-view .setl-chip span { color: rgba(255, 255, 255, .82); }
.al-view .setl-chip__addon { color: var(--highlight); }

/* KPI: liczba w Space Grotesk, granatowa. */
.al-view .setl-kpi b { font-family: var(--font-head); color: var(--accent-deep); }
.al-view .setl-kpi--ok b { color: var(--ok); }
.al-view .setl-kpi--warn b { color: var(--warn); }
.al-view .setl-kpi--bad b { color: var(--bad); }

/* Pasek proporcji: abonament niebieski, prowizja zlota - marka AssetLife. */
.al-view .setl-split__fee,
.al-view .setl-dot--fee { background: var(--accent); }
.al-view .setl-split__com,
.al-view .setl-dot--com { background: var(--highlight); }

/* Tabele: obudowa jak karta, naglowek w lodowym blekicie z granatowym napisem. */
.al-view .tbl-wrap {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.al-view table.tbl thead th {
  font-family: var(--font-head);
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-bottom-color: var(--accent-mid);
}
.al-view table.tbl tbody tr:hover { background: var(--accent-soft); }

/* Kolumna kwoty: kwota NAD statusem, nie obok - inaczej czyta sie jak dwie
   osobne kolumny. Blokowy <strong> spycha chip do nowej linii, a text-align:right
   dosuwa oba do prawej. */
.al-view table.tbl td.num strong { display: block; }
.al-view table.tbl td.num .chip { display: inline-block; margin-top: 6px; }

/* Licznik przy tytule - granatowy. */
.al-view .pillcount {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* Rozwijacz: wiekszy cel, wysrodkowany w kolumnie - drobna strzalka w rogu
   wygladala jak przypadek. Caly wiersz i tak jest klikalny. */
.al-view td.chev { text-align: center; padding-left: 0; padding-right: 0; }
.al-view .chev-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  color: var(--accent);
  background: var(--accent-soft);
}
.al-view .chev-btn:hover { background: var(--accent-mid); color: var(--accent-deep); }
.al-view tr.row-main { cursor: pointer; }

/* Rozwiniecie: symetryczne powietrze, bez wielkiego wciecia z lewej. */
.al-view tr.row-detail.is-open .detail-box > .detail-inner { padding: 14px 18px 18px; }

/* Rozbicie prowizji na firmy - jako czytelna karta, nie goła tabela na tle. */
.al-view .al-brk__cap {
  margin: 0 0 8px;
  font: 700 .7rem/1 var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.al-view .al-brk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.al-view .al-brk {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.al-view .al-brk th {
  font: 700 .68rem/1.2 var(--font-head);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  text-align: left;
  padding: 11px 16px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-mid);
}
.al-view .al-brk td { padding: 11px 16px; border-top: 1px solid var(--border); }
.al-view .al-brk tbody tr:first-child td { border-top: 0; }
.al-view .al-brk tbody tr:hover td { background: var(--accent-soft); }
.al-view .al-brk .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.al-view .al-brk td:first-child { font-weight: 500; color: var(--text); }
.al-view .al-brk tfoot td {
  border-top: 2px solid var(--accent-mid);
  background: var(--bg);
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--accent-deep);
}

/* ── Sklep dodatkow (panel dostawcy, self-service) ───────────────────────────
   Zwarte kafle na siatce: reuse .box jako powierzchnia, ale z mniejszym
   promieniem, paddingiem i cieniem niz duze karty tego widoku - kafelek ma byc
   karta, nie sekcja. Akcje pod ".more" (kebab z panel.css). Stany kolorami
   tokenow al-view. */
.al-view .shop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
  justify-content: start;
  gap: 16px;
  /* Siatka nie jest .box, wiec regula .box + .box jej nie dotyczy - domykamy
     odstep od naglowka "Dodatki" recznie, tym samym rytmem co miedzy boksami. */
  margin-top: 18px;
}
/* .box doklada margin-top kazdemu kolejnemu boxowi - w siatce rozjezdza kafle. */
.al-view .shop .box + .box { margin-top: 0; }
.al-view .shopcard {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: 0 4px 16px rgba(6, 26, 56, .06);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Zaznaczony/podswietlony dodatek: ramka w kolorze wskaznika (--addon-color). */
.al-view .shopcard.is-selected {
  border-color: var(--addon-color, var(--highlight));
  box-shadow: 0 4px 16px rgba(6, 26, 56, .06),
              0 0 0 3px color-mix(in srgb, var(--addon-color, var(--highlight)) 22%, transparent);
}
/* Wejscie z "Ulepsz do Pro": jednorazowe mrugniecie, zeby zwrocic uwage. */
@keyframes shopcard-flash {
  0%, 100% { box-shadow: 0 4px 16px rgba(6, 26, 56, .06), 0 0 0 3px color-mix(in srgb, var(--addon-color, var(--highlight)) 22%, transparent); }
  50%      { box-shadow: 0 4px 16px rgba(6, 26, 56, .06), 0 0 0 7px color-mix(in srgb, var(--addon-color, var(--highlight)) 34%, transparent); }
}
.al-view .shopcard.is-flash { animation: shopcard-flash .7s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .al-view .shopcard.is-flash { animation: none; } }
.al-view .shopcard__top { display: flex; align-items: flex-start; gap: 12px; }
.al-view .shopcard__ic {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
}
.al-view .shopcard__ic svg { display: block; }

/* Podglad dodatku („Zobacz"): film + prezentacja. Placeholder, gdy filmu nie ma. */
.al-view .addon-view { display: grid; gap: 1rem; }
/* Wideo mniejsze, zeby razem z prezentacja zmiescilo sie w oknie bez scrolla. */
.al-view .addon-view__vid { width: 100%; max-height: clamp(180px, 32vh, 330px); border-radius: 10px; background: #000; display: block; }
.al-view iframe.addon-view__vid { border: 0; aspect-ratio: 16 / 9; height: auto; }
.al-view .addon-view__ph {
  padding: 3rem 1rem; text-align: center; color: var(--muted);
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: 10px;
}
.al-view .addon-view__desc { margin: 0; color: var(--text); line-height: 1.55; }

/* ---- Prezentacja dodatku pod wideo (wstrzykiwany HTML, per dodatek) ---- */
.al-view .ap {
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  display: flex; flex-direction: column; gap: 1.35rem;
  margin-top: .2rem; padding-top: 1.1rem; border-top: 1px dashed var(--accent-mid);
}
.al-view .ap__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.al-view .ap__lede p { margin: .7rem 0 0; color: var(--muted); font-size: .98rem; line-height: 1.6; max-width: 62ch; }

/* Jak to dziala */
.al-view .ap__flow { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.al-view .ap__rail {
  position: absolute; top: 27px; left: 14%; right: 14%; height: 2px; border-radius: 2px;
  background: var(--accent-mid); opacity: .5; overflow: hidden;
}
.al-view .ap__rail::after {
  content: ""; position: absolute; top: -1px; left: -35%; height: 4px; width: 35%; border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: apRun 3.2s linear infinite;
}
@keyframes apRun { to { left: 130%; } }
.al-view .ap__step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 0 8px; }
.al-view .ap__dot {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  background: var(--surface); border: 1.5px solid var(--accent-mid); color: var(--accent);
  position: relative; z-index: 1; box-shadow: 0 8px 18px -10px rgba(47, 79, 176, .5);
}
.al-view .ap__n { font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; color: var(--muted); }
.al-view .ap__step h3 { font-family: var(--font-head); font-size: .92rem; font-weight: 600; color: var(--heading); }
.al-view .ap__step p { margin: 0; font-size: .8rem; color: var(--muted); max-width: 25ch; line-height: 1.5; }

/* Korzysci + podglad formularza */
.al-view .ap__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.al-view .ap__cols--one { grid-template-columns: 1fr; max-width: 60ch; }
.al-view .ap__benefits h4 {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .7rem; font-weight: 600;
}
.al-view .ap__benefit { display: flex; gap: 12px; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.al-view .ap__benefit:last-child { border-bottom: 0; }
.al-view .ap__bic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.al-view .ap__benefit > span { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.al-view .ap__benefit b { display: block; font-size: .88rem; color: var(--text); font-weight: 700; }

/* „Screenshot" formularza — zbudowany w CSS */
.al-view .ap__shot { border: 1px solid var(--border); border-radius: 13px; overflow: hidden; background: var(--surface); box-shadow: 0 18px 40px -26px rgba(6, 26, 56, .5); }
.al-view .ap__shotbar { display: flex; align-items: center; gap: 7px; padding: .65rem .85rem; background: var(--accent-soft); border-bottom: 1px solid var(--border); }
.al-view .ap__shotbar i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-mid); }
.al-view .ap__shoturl { margin-left: 8px; font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.al-view .ap__shotbody { padding: .95rem; display: flex; flex-direction: column; gap: .7rem; }
.al-view .ap__shoth { font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--heading); }
.al-view .ap__fld { display: flex; flex-direction: column; gap: 5px; }
.al-view .ap__fld label { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.al-view .ap__box { border: 1px solid var(--border); border-radius: 8px; padding: .55rem .7rem; font-size: .82rem; color: var(--text); background: var(--surface-2); }
.al-view .ap__box--sel { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); }
.al-view .ap__box--area { min-height: 46px; color: var(--muted); }
.al-view .ap__sev { font-family: var(--mono); font-size: .66rem; font-weight: 600; color: var(--warn); background: var(--warn-soft); padding: 2px 8px; border-radius: 999px; }
.al-view .ap__send {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: #fff; border-radius: 9px; padding: .55rem 1rem;
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
}

/* Stopka: zgodnosc + CTA */
.al-view .ap__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; flex-wrap: wrap;
  padding: 1.1rem 1.2rem; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent-dark) 100%); color: #fff;
}
.al-view .ap__footl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.al-view .ap__chips { display: flex; gap: 7px; flex-wrap: wrap; }
.al-view .ap__chips span {
  font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .03em;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  padding: 3px 9px; border-radius: 999px; color: #dfe6f4;
}
.al-view .ap__footl p { margin: 0; font-size: .82rem; color: #c4cee2; max-width: 46ch; }
.al-view .ap__cta { display: flex; align-items: center; gap: 10px; }
.al-view .ap__cta form { margin: 0; }
.al-view .ap__have { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; color: #eaf1ff; }
.al-view .ap__btn {
  border: 0; border-radius: 10px; font-family: var(--font-head); font-weight: 600; font-size: .86rem;
  padding: .7rem 1.15rem; cursor: pointer; white-space: nowrap;
}
.al-view .ap__btn--primary { background: #fff; color: var(--accent-deep); }
.al-view .ap__btn--primary:hover { background: #eef3fb; }
.al-view .ap__btn--ghost { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
.al-view .ap__btn--ghost:hover { background: rgba(255, 255, 255, .18); }

@media (max-width: 720px) {
  .al-view .ap__flow { grid-template-columns: 1fr; gap: 1.1rem; }
  .al-view .ap__rail { display: none; }
  .al-view .ap__cols { grid-template-columns: 1fr; }
  .al-view .ap__foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .al-view .ap__rail::after { animation: none; } }

/* Mini-avatar dodatku w tabeli (ten sam znak co na kaflu, mniejszy). */
.al-view .tbl-ic {
  display: inline-grid; place-items: center; vertical-align: middle; margin-right: 8px;
  width: 28px; height: 28px; border-radius: 8px; color: #fff; font: 700 .8rem/1 var(--font-head);
}
.al-view .tbl-ic svg { display: block; width: 16px; height: 16px; }
/* Nazwa centruje sie do ikony; kebab zostaje przypiety do gornego rogu. */
.al-view .shopcard__name {
  align-self: center; min-width: 0;
  font-family: var(--font-head); font-size: 1rem; font-weight: 700; line-height: 1.3;
}
.al-view .shopcard__more { margin-left: auto; position: relative; }
/* flex:1 spycha stopke na dol kafla - stopki w rzedzie trzymaja pion. */
.al-view .shopcard__desc { flex: 1; margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.al-view .shopcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.al-view .shopcard__foot .hint { margin: 0; font-size: .78rem; }
.al-view .shopcard__price { font-family: var(--font-head); font-weight: 700; white-space: nowrap; }
.al-view .shopcard__price small { font-weight: 400; color: var(--muted); }
.al-view .shopcard__price.nego { color: var(--highlight-dark); font-size: .92rem; }

.al-view .apill {
  display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700;
  letter-spacing: .03em; padding: .3rem .7rem; border-radius: 999px; white-space: nowrap;
}
.al-view .apill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.al-view .apill--on { background: var(--ok-soft); color: #14614a; }
.al-view .apill--trial { background: var(--accent-soft); color: var(--accent-dark); }
.al-view .apill--pending { background: var(--warn-soft); color: var(--warn); }
.al-view .apill--free { background: var(--ok-soft); color: #14614a; }
.al-view .apill--bad { background: var(--bad-soft); color: var(--bad); }

/* AS-0248: "Dodatki i konektory" - one table, a group row per kind. */
.al-view .tbl-group th {
  padding-top: 1rem; background: var(--surface-2); color: var(--muted);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left;
}
/* "Zawieś" is the less inviting action - gold, so it does not look like "Aktywuj". */
.al-view .btn.btn--suspend { background: #fbecc9; border-color: var(--highlight); color: var(--highlight-dark); box-shadow: none; }
.al-view .btn.btn--suspend:hover { background: var(--highlight); border-color: var(--highlight); color: var(--accent-deep); }

/* Connectors: the "how to connect" block shown once enabled (card and kebab are
   shared with addons). */
.al-view .conn-setup { margin-top: 12px; padding: .85rem .9rem; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }
.al-view .conn-setup__title { margin: 0 0 .4rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.al-view .conn-setup__body { font-size: .86rem; }
.al-view .conn-setup__body p { margin: 0 0 .4rem; }

/* Connector presentation inside the "Zobacz" modal. */
.conn-pres { display: grid; gap: 18px; }
.conn-pres__hero { }
.conn-pres__badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-dark, #007d44); background: var(--accent-soft, #e8f7ef); padding: .25rem .6rem; border-radius: 999px; }
.conn-pres__title { margin: .5rem 0 .3rem; font-size: 1.5rem; line-height: 1.2; }
.conn-pres__lead { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.5; }
.conn-pres__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.conn-pres__feat { display: grid; gap: 4px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.conn-pres__feat .conn-pres__ic { font-size: 1.6rem; }
.conn-pres__feat strong { font-size: .92rem; }
.conn-pres__feat span:last-child { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.conn-pres__steps { padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.conn-pres__steps h4 { margin: 0 0 .6rem; font-size: .95rem; }
.conn-pres__steps ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 8px; }
.conn-pres__steps li { line-height: 1.45; }
.conn-pres__cta { display: flex; justify-content: flex-end; }
@media (max-width: 640px) { .conn-pres__grid { grid-template-columns: 1fr; } }

/* Connector configurator: form + guide side by side. */
/* margin-top like `.box + .box` - .conn-config is a <div>, so that rule misses it
   and the grid would tuck under the header box (overlapping the banner). */
.al-view .conn-config { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: start; margin-top: 18px; }
/* The columns are adjacent .box siblings - without this the second (guide) would
   catch `.box + .box` margin-top and sit 18px lower (crooked). */
.al-view .conn-config > .box + .box { margin-top: 0; }
.al-view .conn-config__h { margin: 0 0 .8rem; font-size: 1.05rem; }
.al-view .conn-config__status { margin: .4rem 0 1rem; }
.al-view .conn-guide { background: var(--surface); }
.al-view .conn-guide__steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; }
.al-view .conn-guide__steps li { position: relative; padding-left: 40px; display: grid; gap: 3px; }
.al-view .conn-guide__steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 26px; height: 26px;
  display: grid; place-content: center; border-radius: 50%;
  background: var(--accent, #00a65b); color: #fff; font-weight: 700; font-size: .85rem;
}
.al-view .conn-guide__steps li strong { font-size: .92rem; }
.al-view .conn-guide__steps li span { font-size: .84rem; color: var(--muted); line-height: 1.45; }
.al-view .conn-guide code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: .05rem .3rem; font-size: .8rem; }
.al-view .conn-config__danger { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.al-view .conn-config__danger .hint { margin: 0; }
.al-view .conn-config__wipe { color: var(--bad); background: none; border: 1px solid var(--bad); padding: .35rem .7rem; border-radius: var(--radius); font-size: .82rem; cursor: pointer; }
.al-view .conn-config__wipe:hover { background: var(--bad); color: #fff; }
@media (max-width: 860px) { .al-view .conn-config { grid-template-columns: 1fr; } }

@media (max-width: 720px) { .al-view .shop { grid-template-columns: 1fr; } }
/*
 * Password strength meter. Shared by both worlds (provider panel via shared.css,
 * AssetLife /admin via application.css), so it styles only through --pw-* tokens
 * that each base sheet defines in its own palette. No hardcoded colours here.
 */

.pwm { margin: 10px 0 2px; }

.pwm__bars { display: flex; gap: 5px; }
.pwm__seg {
  flex: 1; height: 7px; border-radius: 4px;
  background: var(--pw-track);
  transition: background .25s ease;
}

.pwm__head { margin-top: 9px; }
.pwm__verdict {
  font: 700 .9rem/1.2 var(--pw-font-head, inherit);
  color: var(--pw-muted);
  transition: color .25s;
}

.pwm__tip {
  font-size: .8rem; color: var(--pw-muted);
  margin: 6px 0 0; min-height: 1.05em;
}
.pwm__tip b { color: var(--pw-ink); font-weight: 600; }

.pwm__rules {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; gap: 7px;
}
.pwm__rules li {
  display: flex; align-items: center; gap: 9px;
  font-size: .84rem; color: var(--pw-muted);
  transition: color .2s;
}
.pwm__ic {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--pw-line); position: relative;
  transition: background .2s, border-color .2s;
}
.pwm__ic::after {
  content: ""; position: absolute; left: 5px; top: 8px;
  width: 4px; height: 7px; border: solid transparent;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
  transition: border-color .2s;
}
.pwm__rules li.is-ok { color: var(--pw-ink); }
.pwm__rules li.is-ok .pwm__ic { background: var(--pw-strong); border-color: var(--pw-strong); }
.pwm__rules li.is-ok .pwm__ic::after { border-color: #fff; }

.pwm__soft { color: var(--pw-faint, var(--pw-muted)); }
.pwm__soft.is-ok { color: var(--pw-warn, var(--pw-ink)); }
.pwm__soft.is-ok .pwm__ic { background: var(--pw-accent, var(--pw-good)); border-color: var(--pw-accent, var(--pw-good)); }
.pwm__tag {
  margin-left: auto;
  font: 700 .6rem/1 var(--pw-font-head, inherit);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pw-faint, var(--pw-muted));
  padding: 3px 6px; border: 1px solid var(--pw-line); border-radius: 4px;
}

.pwm__match {
  display: none; align-items: center; gap: 6px;
  margin-top: 8px; font-size: .82rem;
}
.pwm__match.is-yes, .pwm__match.is-no { display: flex; }
.pwm__match.is-yes { color: var(--pw-strong); }
.pwm__match.is-no { color: var(--pw-weak); }
/* AS-0140: warning before the staff idle sign-out (shared/_idle_logout). */
.idle-logout { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .55); }
.idle-logout[hidden] { display: none; }
.idle-logout__box { max-width: 420px; margin: 16px; padding: 22px 24px; border-radius: 12px; background: #fff; color: #0f172a; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); text-align: center; }
.idle-logout__box strong { display: block; font-size: 1.05rem; line-height: 1.4; }
.idle-logout__box p { margin: 8px 0 16px; color: #475569; font-size: .9rem; }
/* Personal notification bell (shared/_bell.html.erb), one look for AssetLife
   (/admin) and every provider/client panel. Only tokens differ: the provider
   brand comes from --accent (whitelabel), the platform falls back to --blue. */
.bell {
  --bell-accent: var(--accent, var(--blue, #3151a3));
  --bell-soft: var(--accent-soft, var(--ice, #eef3ff));
  --bell-text: var(--text, var(--ink, #0f172a));
  --bell-muted: var(--muted, #64748b);
  --bell-line: var(--border, var(--line, #e2e8f0));
  --bell-bad: var(--bad, #dc2626);
  --bell-surface: var(--surface, var(--paper, #fff));
  position: relative;
}
.bell > summary { list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; color: var(--bell-text); position: relative; }
.bell > summary::-webkit-details-marker { display: none; }
.bell > summary::marker { content: ""; }
.bell > summary:hover { background: var(--bell-soft); }
.bell[open] > summary { box-shadow: 0 0 0 2px var(--bell-accent); }
.bell__badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: var(--bell-bad); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }

.bell__menu { right: 0; left: auto; width: 440px; max-width: calc(100vw - 1.5rem);
  max-height: min(75vh, 640px); padding: 0; display: flex; flex-direction: column;
  overflow: hidden; border-radius: 16px; background: var(--bell-surface);
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .12), 0 8px 10px -6px rgba(15, 23, 42, .06); }
.bell__menu form { margin: 0; }

/* Head and tabs must not shrink: with a full list (15) the column squeezed them flat. */
.bell__head, .bell__tabs { flex: none; }
/* Wraps instead of overflowing: "N nowe" + "Oznacz wszystkie" ran past the right edge (AS-0275). */
.bell__head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem; padding: 14px 16px 10px; }
.bell__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 10px; background: var(--bell-soft); color: var(--bell-accent); }
.bell__heading { font-size: 17px; font-weight: 700; color: var(--bell-text); }
.bell__new { padding: 2px 9px; border-radius: 999px; background: var(--bell-accent); color: #fff;
  font-size: 11px; font-weight: 700; white-space: nowrap; }
.bell__readall-form { margin-left: auto !important; }
.bell__readall { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0;
  padding: 6px 4px; color: var(--bell-accent); cursor: pointer; font: inherit; font-size: 13px;
  font-weight: 600; white-space: nowrap; border-radius: 8px; }
.bell__readall:hover { background: var(--bell-soft); }

.bell__tabs { display: flex; gap: 2px; margin: 0 12px 10px; padding: 3px; border-radius: 10px;
  background: color-mix(in srgb, var(--bell-line) 55%, transparent); overflow-x: auto; scrollbar-width: none; }
.bell__radio { position: absolute; opacity: 0; pointer-events: none; }
.bell__tab { display: inline-flex; align-items: center; gap: .35rem; flex: 1 0 auto; justify-content: center;
  padding: 6px 10px; border-radius: 8px; cursor: pointer; color: var(--bell-muted);
  font-size: 13px; font-weight: 600; white-space: nowrap; }
.bell__radio:checked + .bell__tab { background: var(--bell-surface); color: var(--bell-accent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
.bell__radio:focus-visible + .bell__tab { outline: 2px solid var(--bell-accent); outline-offset: 1px; }
.bell__count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--bell-soft);
  color: var(--bell-text); font-size: 11px; line-height: 17px; text-align: center; }
.bell__count--strong { background: var(--bell-accent); color: #fff; }

.bell__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; border-top: 1px solid var(--bell-line); overscroll-behavior: contain; }
.bell__item { position: relative; display: flex; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--bell-line); padding: 14px 16px 14px 20px;
  cursor: pointer; font: inherit; color: var(--bell-text); }
.bell__item:hover { background: color-mix(in srgb, var(--bell-soft) 60%, transparent); }
.bell__item--unread::before { content: ""; position: absolute; left: 8px; top: 20px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--bell-accent); }
.bell__item--alert { background: color-mix(in srgb, var(--bell-bad) 6%, transparent); }
.bell__item--alert.bell__item--unread::before { background: var(--bell-bad); }

.bell__avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: var(--bell-soft); color: var(--bell-accent); font-size: 14px; font-weight: 700; }
.bell__item--unread .bell__avatar { background: var(--bell-accent); color: #fff; }
.bell__item--alert .bell__avatar { background: var(--bell-bad); color: #fff; }

.bell__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.bell__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--bell-muted); }
.bell__who { font-weight: 700; color: var(--bell-text); font-size: 13px; }
.bell__flag { padding: 0 6px; border-radius: 4px; background: color-mix(in srgb, var(--bell-bad) 12%, transparent);
  color: var(--bell-bad); font-size: 11px; font-weight: 600; }
.bell__code { padding: 1px 6px; border-radius: 4px; background: var(--bell-soft); color: var(--bell-accent);
  font: 600 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace; }
.bell__time { margin-left: auto; white-space: nowrap; font-size: 11px; }
.bell__item--alert .bell__time { color: var(--bell-bad); }
.bell__title { font-size: 14px; line-height: 20px; color: var(--bell-text); font-weight: 600; }
.bell__item:not(.bell__item--unread) .bell__title { font-weight: 500; }
.bell__detail { padding: 2px 0 2px 10px; border-left: 2px solid var(--bell-accent); font-size: 13px; line-height: 18px;
  color: var(--bell-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bell__item--alert .bell__detail { border-left-color: var(--bell-bad); }
.bell__item:not(.bell__item--unread) .bell__detail { border-left-color: var(--bell-line); }

.bell__empty { padding: 28px 16px; color: var(--bell-muted); font-size: 13px; text-align: center; margin: 0; }
.bell__empty--filtered { display: none; }
.bell__menu:has(.bell__radio[value="unread"]:checked) .bell__item:not(.bell__item--unread),
.bell__menu:has(.bell__radio[value="alert"]:checked) .bell__item:not(.bell__item--alert) { display: none; }
.bell__menu:has(.bell__radio[value="unread"]:checked):not(:has(.bell__item--unread)) .bell__empty--filtered { display: block; }

/* Phone: the bell sits next to the avatar, so a menu anchored to its right edge
   ran off the left of the screen - pin it to the viewport as a sheet instead. */
@media (max-width: 640px) {
  .bell__menu { position: fixed; left: .5rem; right: .5rem; top: 4.25rem; width: auto; max-width: none;
    max-height: calc(100dvh - 5rem); }
  .bell__head { padding: 12px 14px 10px; }
  .bell__icon { display: none; }
  .bell__readall { min-height: 44px; }
  .bell__tab { min-height: 36px; }
  .bell__item { padding: 14px 14px 14px 18px; gap: 10px; }
  .bell__avatar { width: 36px; height: 36px; }
}
/*
 * ⚠ WSPOLNY ARKUSZ WSZYSTKICH DOSTAWCOW (+ panel klienta) - whitelabel. Laduja
 * go panele na hoscie dostawcy; AssetLife (/admin) ma swoj osobny application.css
 * i te dwa swiaty sie NIE mieszaja. Nic tu nie jest specyficzne dla jednego
 * dostawcy - wyglad jest wspolny, a kolory kazdy wstrzykuje swoje (ProviderTheme,
 * docelowo z pliku na R2). Domyslna paleta to zielen w shared/base.css :root.
 *
 * Trzy pliki pod shared/ sa przepisane z makiety, bo SA deliverablem projektu:
 *
 *   base.css  <- cyber-mvp/assets/style.css      tokeny w :root, komponenty bazowe
 *   v2.css    <- cyber-mvp/v3/assets/v2.css      dodatki V2/V3
 *   panel.css <- cyber-mvp/v3/assets/admin.css   cala skorka panelu
 *
 * ⚠ Makieta busta cache przez ?v=NNN w kazdym HTML-u. Ta konwencja tu nie
 * wchodzi - sprockets fingerprintuje pliki sam (PLAN-V3 10).
 *












 */

/* ==========================================================================
   Logowanie. Layout tego ekranu siedzial w <style> w v3/logowanie.html, wiec
   nie ma go w zadnym z trzech arkuszy - stad tutaj, przepisany 1:1.
   ========================================================================== */

.v2-wrap {
  min-height: calc(100vh - 129px);
  display: grid;
  place-items: center;
  padding: 44px 20px 60px;
}

.v2-cols {
  display: grid;
  grid-template-columns: 430px 320px;
  gap: 26px;
  align-items: start;
  width: 100%;
  max-width: 800px;
}

.v2-cols--single { grid-template-columns: 1fr; max-width: 430px; }

@media (max-width: 830px) {
  .v2-cols { grid-template-columns: 1fr; max-width: 430px; }
}

/* --- kroki logowania --- */
.steps-dots { display: flex; gap: 6px; align-items: center; margin-bottom: 16px; }

.steps-dots i {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  display: block;
}

.steps-dots i.done { background: var(--accent-mid); }
.steps-dots i.now { background: var(--accent); }
.steps-dots span { font-size: .75rem; color: var(--muted); margin-left: 6px; }

/* --- kod jednorazowy: szesc pol --- */
.otp { display: flex; gap: 8px; margin: 4px 0 2px; }

.otp input {
  width: 100%;
  aspect-ratio: 1 / 1.15;
  text-align: center;
  padding: 0;
  font: 700 1.28rem var(--font-head);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.otp input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.otp input.filled { border-color: var(--accent); background: var(--accent-soft); }

.who-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-mid);
  border-radius: var(--radius);
  font-size: .875rem;
  margin-bottom: 16px;
}

.who-line .av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font: 700 .72rem var(--font-head);
}

.who-line b { font-weight: 600; }
.who-line a { margin-left: auto; font-size: .82rem; }

.btn-wide { width: 100%; justify-content: center; }
.link-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: .85rem; }

/* --- panel skrotow: TYLKO W DEVELOPMENT ---
   Ten panel nie istnieje na produkcji. Nie jest ukryty - trasy, ktora obsluguje,
   po prostu tam nie ma (config/routes.rb). Zolta ramka i podpis mowia wprost,
   ze to nie jest czesc produktu - dokladnie jak .mock-panel w makiecie. */
.dev-panel {
  position: relative;
  background: #fffdf4;
  border: 1px dashed var(--highlight-dark);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.dev-panel::before {
  content: "tylko lokalnie";
  position: absolute;
  top: -10px;
  left: 14px;
  background: var(--highlight);
  color: #1c211e;
  font: 700 .66rem/1 var(--font-head);
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 4px;
}

.dev-panel h2 { font-size: 1rem; margin: 6px 0 4px; }
.dev-panel .why { font-size: .82rem; color: var(--muted); margin-bottom: 14px; }
.dev-panel .role { background: var(--surface); width: 100%; }
.dev-panel form { margin: 0 0 8px; }
.dev-panel .grp {
  font: 700 .68rem/1 var(--font-head);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--warn);
  display: block;
  margin: 14px 0 9px;
  border-top: 1px dashed var(--highlight-dark);
  padding-top: 13px;
}

.dev-panel .grp:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.dev-hint { font-size: .78rem; color: var(--muted); margin: 14px 0 0; }

/* ==========================================================================
   Drobiazgi, ktorych makieta nie miala, bo robila je JS-em albo w ogole.
   ========================================================================== */

/* Wylogowanie musi byc formularzem (DELETE), a ma czytac sie jak pozycja menu. */
.adm-side .side-foot form { margin: 0; }

.adm-side .linkbtn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: .92rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.adm-side .linkbtn:hover { background: var(--bad-soft); color: var(--bad); }
.adm-side .linkbtn:hover .ic { color: var(--bad); }
.adm-side .linkbtn .ic { width: 18px; flex: none; display: grid; place-items: center; color: var(--muted); }

/* Marka w pasku: dopoki dostawca nie ma wgranego logo, stoi jego nazwa. */
.adm-top .brand strong { font: 700 1.05rem/1 var(--font-head); white-space: nowrap; }

/* ==========================================================================
   Komponenty, ktorych makieta nie ma — bo powstaly przy przenoszeniu ekranow
   na Railsy. Stylizowane TOKENAMI MAKIETY, wiec wygladaja jak v3, nawet
   jesli nazwa klasy jest nasza.
   ========================================================================== */

/* ⚠ NAGLOWEK PUDELKA MA REGULE W MAKIECIE - DWIE. `.box > h2` siega naglowka
   stojacego wprost w pudelku, `.boxhead h2` tego w naglowku z akcjami
   (panel.css:400 i :970). Oba mowia: 700 .72rem, uppercase, letter-spacing
   .1em. Stala tu moja wersja z font-size .82rem i nadpisywala oba, wiec KAZDY
   tytul w aplikacji byl o 0.1rem wiekszy niz we wzorcu. Zostaje tylko to,
   czego makieta nie ma: napis pomocniczy obok tytulu. */
.boxhead .note { font-size: .82rem; color: var(--muted); }

.box--muted { background: var(--bg); }

/* Prosba firmy czeka w zoltej ramce (PLAN-V3 4.7). */
.box--ask { border-color: var(--highlight-dark); background: #fffdf4; }

/* ==========================================================================
   Prosba o zmiane subskrypcji - uklad "prowadzony" (wariant B). Duzy naglowek
   z liczba slotow, kurs po kursie, potem decyzja jako ponumerowane kroki.
   Klasy wlasne (makieta ich nie ma), na tokenach skorki.
   ========================================================================== */
.reqhero {
  text-align: center;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--border);
  margin: 4px 0 0;
}
.reqhero__eyebrow {
  display: block;
  font: 700 .82rem var(--font-head);
  color: var(--muted);
  margin-bottom: 6px;
}
.reqhero__big {
  display: block;
  font: 900 2.4rem/1 var(--font-head);
  color: var(--accent-dark);
  letter-spacing: -.01em;
}
.reqhero__sub { display: block; margin-top: 10px; font-size: .9rem; color: var(--text); }
.reqhero__sub strong { font-weight: 600; }
.reqhero__arrow { color: #9aa39e; padding: 0 2px; }

.reqcourses { margin: 4px 0 0; }
.reqcourse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.reqcourse:last-child { border-bottom: 0; }
.reqcourse__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.reqcourse__who strong { font-weight: 600; }
.reqcourse--on .reqcourse__who strong { color: var(--accent-deep); }
.reqcourse__num { flex: none; display: flex; align-items: baseline; gap: 8px; font: 700 1.05rem var(--font-head); }
.reqcourse__from { color: var(--muted); }
.reqcourse__delta {
  font: 700 .72rem var(--font-head);
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 7px;
}

.reqnote {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  padding: 11px 12px;
  background: var(--warn-soft);
  border: 1px solid #f0e6bf;
  border-radius: var(--radius);
  font-size: .82rem;
  color: #6b5300;
  line-height: 1.45;
}
.reqnote svg { flex: none; margin-top: 1px; color: var(--warn); }
.reqnote strong { color: #4a3900; }

.reqstep { display: flex; gap: 12px; margin-top: 20px; }
.reqstep__n {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: 700 .8rem var(--font-head);
  display: grid;
  place-items: center;
}
.reqstep__body { flex: 1; min-width: 0; }
.reqstep__title { font: 700 .98rem var(--font-head); margin: 2px 0 12px; }

.reqresult {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding: 13px 15px;
  background: var(--bg);
  border-radius: var(--radius);
}
.reqresult > span { font-size: .82rem; color: var(--muted); }
.reqresult b { font: 900 1.05rem var(--font-head); }
.reqresult__after { color: var(--accent-dark); }
.reqresult__delta { font-size: .8rem; font-weight: 700; color: var(--accent-dark); }
/* Prawa strona wyniku: kwoty i liczba slotow razem, zeby space-between trzymal
   podpis po lewej, a caly rachunek po prawej. */
.reqresult__figures { display: inline-flex; align-items: baseline; gap: 10px; text-align: right; }
.reqresult__per { font-style: normal; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }
.reqresult__slots { font-size: .8rem; color: var(--muted); font-weight: 600; }
/* Lekcja jeszcze niewypuszczona przez harmonogram — kłódka zamiast akcji. */
.lcard__locked { font-size: .82rem; color: var(--muted); font-weight: 600; }
.field input:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }

/* Placeholder ma wygladac jak podpowiedz, nie jak wpisany tekst: wyraznie
   wyszarzony i nigdy kursywa (AL-0100, dotyczy calej aplikacji). */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; font-style: normal; }

.reqdoc { margin-left: auto; font-size: .78rem; color: var(--muted); align-self: center; }
@media (max-width: 620px) {
  .reqdoc { margin-left: 0; flex-basis: 100%; }
}

/* Kwoty prosby ustala dostawca, wiec formularz kwoty stoi w tej samej ramce,
   oddzielony linia od porownania "teraz -> po zmianie" (PLAN-V3 4.7). */
.askprice {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--highlight-dark);
}

/* Trzy pola zamiast czterech: imie, nazwisko, telefon. Makieta ustawia te
   siatke inline w samym HTML-u (v3/admin/zespol.html openAdd), wiec tutaj jest
   to WARIANT klasy makiety, a nie jej powtorzenie. */
.addline--staff { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 180px; }
@media (max-width: 900px) { .addline--staff { grid-template-columns: 1fr; } }

.empty2__title { font: 700 1.15rem/1.3 var(--font-head); margin: 0 0 8px; }
.empty2__lead { margin: 0 auto 16px; max-width: 52ch; color: var(--muted); font-size: .9rem; }

/* Lista wierszy w pudelku. Wiersz ma znacznik, tresc i kolumny po prawej. */
.rows { display: grid; }

/* ⚠ NIE DOROBIAC TU WARIANTOW .lrow. W makiecie `.lrow` jest wierszem listy
   LEKCJI (v3/assets/admin.css:984) i ma tylko `__play` i `__main`. Stalo tu
   moje `__mark`/`__side`/`__num` i tym samym wierszem szly historia zdarzen,
   historia decyzji, faktury przed wplata i dashboard klienta - cztery rozne
   rzeczy w siatce dla piatej. Historia idzie na `.hrow`/`.hic`/`.hbody`/
   `.hwho`, listy z kwotami na `table.tbl`. */

/* ⚠ LICZNIK NA PRZYCISKU FILTROW NIE POKAZYWAL SIE NIGDY. W arkuszu makiety
   `.fbtn .cnt` ma `display: none`, bo tam odslania go JS, ustawiajac styl
   wprost na elemencie (v3/assets/filterdrop.js:53). U nas ten span wchodzi
   tylko wtedy, gdy cos jest zaznaczone - wiec o widocznosci mowi stan
   przycisku, nie skrypt. Osobny selektor, nie druga deklaracja tego samego. */
.fbtn[data-active="true"] .cnt { display: inline-grid; }

/* X w narozniku menu filtrow - makieta go nie ma, bo tam menu zamykalo sie po
   kazdym wyborze. U nas zostaje otwarte (multiselekt), wiec musi byc czym je
   zamknac palcem. Stoi w naroznniku, nad pierwsza grupa. */
.fclose {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer;
  font: 400 .82rem/1 var(--font-body);
}
.fclose:hover { background: var(--bg); color: var(--text); }
.fmenu .fgrp:first-of-type { padding-right: 28px; }

/* Nazwa bez drugiej linii stoi w SRODKU wiersza. `table.tbl td` w makiecie ma
   `vertical-align: top`, bo kolumny obok maja przypis pod wartoscia ("brak
   puli", "czeka na pakiet") - ale w kolumnie nazwy przypisu nie ma, gdy firma
   nie ma jeszcze NIP-u ani miasta, i nazwa wisiala u gory nad pusta linia.
   Osobny selektor, nie druga deklaracja `.cell-main`. */
/* ⚠ `:has()` W `:has()` JEST NIEDOZWOLONE - selektor
   `tr:has(td.cell-main:not(:has(span)))` nie dziala w zadnej przegladarce
   i strzalka zostawala 13 px nad nazwa. O tym, ze wiersz jest jednolinijkowy,
   mowi wiec serwer: klasa na <tr>. */
table.tbl tr.row-main--solo td { vertical-align: middle; }

/* Kafle kwotowe. Makieta rysuje kwote na `.money .m b`, a nasze widoki maja
   tam <strong> - wiec tu stoi TA SAMA regula pod nasza nazwa, nie druga.
   Etykieta (`.money .m span`) ma juz swoja regule w makiecie i nie ruszamy
   jej: byla u nas mniejsza (.74rem) i pisana kapitalikami, czego wzorzec nie
   robi. */
.money .m strong,
.money .m .mvalue { display: block; font: 900 1.25rem/1 var(--font-head); letter-spacing: -.02em; }
.money .m .mlabel { font-size: .78rem; color: var(--muted); }
.money .m .mhint { display: block; font-size: .78rem; color: var(--muted); }

/* Naglowek subskrypcji. */
.lic-name { font: 700 1.2rem/1.3 var(--font-head); margin: 0 0 4px; }
.lic-meta { margin: 0; font-size: .86rem; color: var(--muted); }
.lic-v { display: block; font: 700 1.35rem/1.2 var(--font-head); }
.lic-l { display: block; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* Pary klucz-wartosc. */
/* ⚠ Wiersz etykieta/wartosc ma regule w panel.css (150px + dt/dd). Stala tu
   moja wersja - 220 px i spany .k/.v - i nadpisywala makiete, przez co odstepy
   w kartach rozjezdzaly sie wzgledem wzorca. Widoki uzywaja teraz <dt>/<dd>. */

/* Tablica trzech kolumn u kursanta. */
.lane-h { font: 700 .72rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
/* Numer lekcji jako plakietka (jak tag kartki na kanbanie), nie goly tekst. */
.lcard__no {
  display: inline-block; margin: 0 0 9px; padding: 3px 8px; border-radius: 6px;
  font: 700 .68rem/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-dark); background: var(--accent-soft);
}
.lcard__title { margin: 0 0 6px; font: 700 .96rem/1.3 var(--font-body); }
.lcard__meta { margin: 0 0 12px; font-size: .78rem; color: var(--muted); }

/* Zaslepka: kafel-zapowiedz lekcji jeszcze niedodanej. Przygaszona i z
   przerywana ramka, zeby na pierwszy rzut oka roznila sie od realnej lekcji. */
/* Zaslepka u kursanta to normalna karta (biale tlo, ta sama ramka) - rozni sie
   tylko subtelnie: szary numer i wyszarzony tytul. Zadnego przygaszania tla. */
.lcard--blank .lcard__no { color: var(--muted); background: var(--border); }
.lcard--blank .lcard__title { color: var(--muted); font-weight: 600; }

/* ---------- Ustawienia kursu: karta „Dostawa kursu" z podgladem na zywo ---------- */
.deliver { margin: 22px 0 4px; border: 1.5px solid var(--accent-soft); border-radius: 14px; overflow: hidden; }
.deliver__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 18px; background: var(--accent-soft); }
.deliver__title { font: 700 .95rem/1.2 var(--font-head); letter-spacing: -.01em; color: var(--accent-deep); }
.deliver__scope { margin-left: auto; font-size: .74rem; color: var(--accent-dark); font-weight: 600; }
.deliver__grid { display: grid; grid-template-columns: 1.1fr .9fr; }
@media (max-width: 760px) { .deliver__grid { grid-template-columns: 1fr; } }
.deliver__form { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
/* Dwa tryby obok siebie, zeby forma nie byla waska i wysoka; zawija sie na wask. */
.deliver__modes { display: flex; gap: 20px 24px; flex-wrap: wrap; }
.deliver__modes .fgroup { flex: 1 1 220px; }
.deliver__preview { border-left: 1px solid var(--line); background: var(--bg); padding: 16px; }
@media (max-width: 760px) { .deliver__preview { border-left: none; border-top: 1px solid var(--line); } }
.fgroup__k { display: block; font: 700 .8rem/1 var(--font-body); margin-bottom: 8px; }
.deliver__blankopts { margin-top: 12px; padding: 13px 14px; border: 1px dashed var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 12px; }
.deliver__blankopts[hidden] { display: none; }
.deliver__pvlab { margin: 0 0 12px; font: 700 .68rem/1.3 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.deliver__pvlab .u { font-family: ui-monospace, monospace; font-size: .62rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.deliver__board { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.deliver__pvnote { margin: 12px 0 0; font-size: .78rem; color: var(--muted); text-align: center; }

/* Segmentowany przelacznik: radia jako pigulki. */
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.seg label { position: relative; display: inline-flex; align-items: center; font: 600 .82rem/1 var(--font-body); color: var(--accent-dark); background: var(--accent-soft); padding: 8px 13px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.seg label:hover:not(:has(input:checked)) { background: var(--accent-mid); }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--accent); color: #fff; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent-dark); outline-offset: 2px; }

/* Kafel podgladu - osobne klasy, zeby nie kolidowac z .lcard panelu. */
.pvcard { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 11px 12px; }
.pvcard__no { display: inline-block; font: 800 .6rem/1 var(--font-head); letter-spacing: .07em; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-soft); padding: 2px 7px; border-radius: 999px; }
.pvcard__title { margin: 8px 0 3px; font: 700 .84rem/1.25 var(--font-body); }
.pvcard__meta { margin: 0; font-size: .72rem; color: var(--muted); }
.pvcard__btn { margin-top: 10px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font: 700 .76rem/1 var(--font-body); padding: 8px 12px; cursor: default; }
.pvcard__lock { margin: 9px 0 0; font: 700 .74rem/1 var(--font-body); color: var(--warn); }
.pvcard--blank .pvcard__no { color: var(--muted); background: var(--border); }
.pvcard--blank .pvcard__title { color: var(--muted); font-weight: 600; }

/* Switch on/off - okragly suwak w kolorze akcentu. */
.blkswitch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.blkswitch input { position: absolute; opacity: 0; width: 0; height: 0; }
.blkswitch__track { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: #c2ccc6; transition: background .15s; }
.blkswitch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.blkswitch input:checked + .blkswitch__track { background: var(--accent); }
.blkswitch input:checked + .blkswitch__track::after { transform: translateX(18px); }
.blkswitch input:focus-visible + .blkswitch__track { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.lcard__score { margin: 0 0 8px; font-size: .84rem; }
.lcard__score strong { font-size: 1.1rem; }

/* Naglowek kursu z pierscieniem postepu (wariant B). */
.cprog { display: flex; align-items: center; gap: 18px; margin: 2px 0 4px; }
.cprog__name { margin: 0; font: 900 1.25rem/1.1 var(--font-head); letter-spacing: -.01em; }
.cprog__sub { margin: 4px 0 0; font-size: .9rem; color: var(--muted); }
.cprog__sub strong { color: var(--text); }

.ring { position: relative; width: 72px; height: 72px; flex: none; }
.ring svg { display: block; width: 100%; height: 100%; }
/* Track WIDOCZNY, nie bladziutki mint - przy 0% to on niesie caly pierscien,
   wiec musi byc realnym koltem, a nie duchem. Zielone wypelnienie na nim wybija. */
.ring__track { stroke: #dbe6e0; }
.ring__fill { stroke: var(--accent); transition: stroke-dashoffset .5s ease; }
/* "0%" jako JEDNA calosc w srodku: cyfra i "%" na tej samej linii bazowej,
   procent mniejszy i lekko przygaszony - nie osobno rozrzucone. */
.ring__n {
  /* Centrowanie przez translate na SRODKU pierscienia - `inset:0` + flex
     baseline sadzalo "0%" u gory z lewej, nie w srodku kolka. */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: baseline; gap: 1px;
  font: 900 1.2rem/1 var(--font-head); color: var(--accent-dark);
}
.ring__n i { font-style: normal; font-size: .58em; color: var(--muted); font-weight: 800; }

/* Wynik quizu — kolor po progu (PLAN-V3 7.3). */
.result { text-align: center; }
.score--mid { color: var(--warn); }
.score-l { margin: 4px 0 18px; font-size: .84rem; color: var(--muted); }
.result .form-bar { justify-content: center; border-top: 0; }

.dhead { margin: 14px 0 8px; font-size: .96rem; }
.lesson-video { width: 100%; max-height: 62vh; border-radius: 10px; background: #000; }
.lesson-video--none { display: grid; place-items: center; min-height: 220px; border: 1px dashed var(--border); border-radius: 10px; }

/* Szacunek kosztu przy prosbie o sloty - liczony na zywo, opisany jako szacunek. */
.ask-estimate {
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-dark, var(--text));
  font-size: .88rem;
  line-height: 1.45;
}

/* Ekran edycyjny na waskim oknie mowi, ze wymaga wiekszego (decyzja D-B). */
.desktop-only { display: none; }

@media (max-width: 760px) {
  .needs-desktop { display: none; }
  .desktop-only { display: block; }
}

/* Zakladki karty firmy. */

.tabs .tab {
  border: 0;
  background: none;
  padding: 11px 15px;
  cursor: pointer;
  font: 600 .88rem var(--font-body);
  color: var(--muted);
  border-bottom: 2px solid transparent;
  display: flex;
  gap: 8px;
  align-items: center;
}

.tabs .tab[aria-selected="true"] { color: var(--accent-deep); border-bottom-color: var(--accent); }
.tabpane[hidden] { display: none; }

/* Wiersz przypisania kursu w tabeli pracownikow. */
.assign { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; font-size: .86rem; }
.assign form { margin: 0; display: flex; gap: 8px; align-items: center; }

/* Pasek sortowania — makieta ma go jako przyciski w naglowku tabeli, u nas
   stoi obok filtrow, bo sortowanie idzie po adresie, nie po kliknieciu w JS. */
.sortbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -8px 0 16px; }

.filterbar__label {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Naglowek, po ktorym sie sortuje, jest w makiecie <button class="sortbtn">;
   u nas to link, zeby stan siedzial w adresie. Strzalke dokleja panel.css
   (.sortbtn::after), wiec tutaj zostaje tylko zdjecie podkreslenia linku. */
a.sortbtn { color: inherit; text-decoration: none; }
a.sortbtn:hover { color: var(--accent); }

/* Druga linia w kolumnie Sloty. W makiecie to <span style="font-size:.78rem">
   wprost w HTML (v3/admin/firmy.html:235-238) - u nas nazwana klasa, zeby nie
   trzymac stylu w widoku. */
td.slots .tiny { font-size: .78rem; }

/* ---------- Arkusz zamowienia do druku — v3/admin/dokument.html mial to inline ---------- */
.sheetpage { background: #e8ebe9; }

.sheetbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #10221a;
}

.sheet {
  background: #fff;
  color: #1c211e;
  max-width: 210mm;
  margin: 26px auto;
  padding: 22mm 20mm;
  box-shadow: 0 4px 26px rgba(0, 42, 23, .13);
  font-size: 11pt;
  line-height: 1.55;
}

.sheet h1 { font-size: 20pt; margin: 0 0 2mm; }
.sheet__top { display: flex; justify-content: space-between; gap: 12mm; align-items: flex-start; }
.sheet__who { font-size: 9.5pt; color: #5c6661; margin: 0 0 4mm; }
.sheet__brand { font-weight: 700; font-size: 13pt; margin: 0; }

.sheet__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin: 12mm 0 8mm; }

.sheet__parties h3 {
  font-size: 8pt;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #5c6661;
  margin: 0 0 3mm;
}

.sheet__parties p { margin: 0; font-size: 10pt; }
.sheet__parties strong { display: block; }

.sheet__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; margin: 8mm 0; font-size: 10pt; }

.sheet__meta span {
  display: block;
  font-size: 8pt;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #5c6661;
  margin-bottom: 1.5mm;
}

.sheet__table { width: 100%; border-collapse: collapse; margin: 8mm 0; font-size: 10pt; }

.sheet__table th {
  text-align: left;
  padding: 3mm 2mm;
  border-bottom: 1.5px solid #1c211e;
  font-size: 8pt;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sheet__table td { padding: 3mm 2mm; border-bottom: 1px solid #e3e6e4; vertical-align: top; }

/* Numeric columns shrink to their content; the name column takes the rest and
   wraps, so a long course title never pushes the table past the sheet edge. */
.sheet__table .num { width: 1%; white-space: nowrap; }
.sheet__table th:first-child,
.sheet__table td:first-child { overflow-wrap: anywhere; }

.sheet__table .sub2 { display: block; margin-top: 1mm; color: #5c6661; }
.sheet__note { font-size: 9.5pt; color: #5c6661; margin: -4mm 0 6mm; }

.sheet__sum { margin-left: auto; width: 78mm; font-size: 10pt; }
.sheet__sum > div { display: flex; justify-content: space-between; padding: 2mm 0; }

.sheet__total {
  border-top: 1.5px solid #1c211e;
  margin-top: 2mm;
  padding-top: 3mm;
  font-weight: 700;
  font-size: 12pt;
}

.sheet__foot {
  margin-top: 14mm;
  font-size: 9pt;
  color: #5c6661;
  border-top: 1px solid #e3e6e4;
  padding-top: 4mm;
}

.stamp { display: inline-block; padding: 2mm 4mm; border-radius: 2mm; font-weight: 700; font-size: 9pt; }
.stamp--paid { background: #e8f7ef; color: #007d44; }
.stamp--pending { background: #fff6d9; color: #8a6800; }
.stamp--overdue { background: #fbeaea; color: #a13030; }

@media print {
  .sheetbar { display: none !important; }
  .sheetpage { background: #fff; }
  .sheet { box-shadow: none; margin: 0; max-width: none; padding: 16mm 14mm; }
  @page { size: A4; margin: 0; }
}

/* ==========================================================================
   Ostatnie brakujace drobiazgi.
   ========================================================================== */

/* ⚠ `display` Z KLASY BIJE ATRYBUT `hidden`. Przegladarka chowa go regula
   `[hidden] { display: none }` z arkusza domyslnego, a kazda klasa z `display`
   ma wyzsza wage - stad ponizej dwa lataniny na `.tabpane[hidden]`
   i `.qblock[hidden]`. Ten wiersz zalatwia to raz. */
[hidden] { display: none !important; }

/* Komunikaty. Wspolny partial z panelem AssetLife, wiec styl musi byc i tutaj.
   ⚠ To nie jest pasek w tresci, tylko chwilowa odpowiedz na klikniecie: wsuwa
   sie w rogu i znika sam (toast_controller.js). */
.toasts {
  /* Gora-srodek ekranu, nad wszystkim. Pasek nie zabiera rzedu w tresci
     (position: fixed), wiec strona sie nie rozpycha przy walidacji. */
  position: fixed; z-index: 1000; top: 14px; left: 50%; transform: translateX(-50%);
  display: grid; gap: 8px; width: min(520px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1px solid; border-radius: var(--radius);
  box-shadow: var(--shadow); background: #fff; font-size: .88rem; line-height: 1.45;
  opacity: 1; pointer-events: auto; animation: toastIn .18s ease-out;
}

.toast--out { opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
.toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast__x {
  flex: none; border: 0; background: none; color: inherit; opacity: .55;
  font-size: .9rem; line-height: 1; padding: 2px; cursor: pointer;
}
.toast__x:hover { opacity: 1; }

.toast--ok { background: var(--ok-soft); border-color: var(--accent-mid); color: var(--ok); }
.toast--warn { background: var(--bad-soft); border-color: #edc7c7; color: var(--bad); }
/* Informacja o stanie, nie odmowa - patrz shared/_flash.html.erb. */
.toast--info { background: var(--accent-soft); border-color: var(--accent-mid); color: var(--accent-dark); }

@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast--out { transition: none; }
}

@media (max-width: 600px) {
  .toasts { left: 10px; right: 10px; transform: none; width: auto; }
}

/* Makieta ma .grid-2; formularze panelu maja miejscami trzy kolumny. */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.grid-3 > .field + .field { margin-top: 0; }

@media (max-width: 820px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-3 > .field + .field { margin-top: 14px; }
}

/* Wiersz wyboru bez wolnego slotu — widoczny, ale nie do zaznaczenia. */
.pickrow.is-off:hover { border-color: var(--border); background: #fff; }

/* Tabela pozycji przy nadaniu subskrypcji: arytmetyka slotow liczona na zywo.
   Makieta ma tu szukajke kursu (combobox.js); przy pieciu kursach tabela czyta
   sie lepiej, bo widac 3 x 4 = 12 slotow przy kazdej pozycji. */
.itemtable { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: .9rem; }
.itemtable th,
.itemtable td { padding: 10px 12px; text-align: left; vertical-align: top; }

.itemtable thead th {
  font: 700 .7rem/1.2 var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.itemtable tbody tr { border-bottom: 1px solid var(--border); }
.itemtable__row--on { background: var(--accent-soft); }
.itemtable td.num, .itemtable th.num { text-align: right; white-space: nowrap; }
.itemtable__act { width: 1%; text-align: center; white-space: nowrap; }
.iconbtn--del:hover:not([disabled]) { border-color: var(--bad); color: var(--bad); }
.iconbtn--del svg { width: 16px; height: 16px; }

/* Wybor kursu w wierszu umowy: lista zamiast checkboxa, na cala szerokosc
   kolumny. Meta kursu (wersja, lekcje, prog) idzie pod lista i wstawia ja JS. */
.cellsel {
  width: 100%; min-width: 180px; padding: 7px 9px; font: inherit; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: 7px; cursor: pointer;
}
.cellsel:focus { outline: none; border-color: var(--accent); }
.itemcourse__meta { display: block; color: var(--muted); font-size: .74rem; margin-top: 4px; }
.itemcourse__meta:empty { display: none; }
.itemtable__foot { margin: 0 0 12px; }

/* Opcje filtra w rozwijanym menu. */
.fopt__label { font-weight: 600; font-size: .88rem; }
.fopt__hint { grid-column: 1; font-size: .74rem; color: var(--muted); }
.fopt__count { grid-row: 1 / span 2; font-variant-numeric: tabular-nums; color: var(--muted); }

/* Quiz: podpis podejscia i blok pytania. */
.quiz-head .qatt { margin-left: auto; }
.qblock[hidden] { display: none; }
.qsum-t { flex: 1; font-size: .9rem; }

/* Oba znaczki siedza w kazdej odpowiedzi, zeby ksztalt ikony nie wydawal
   poprawnej przed odpowiedzia. Klasa stanu, nadana po odpowiedzi serwera,
   decyduje ktory widac (PLAN-V3 7.3). */
.qa .qa-ic-ok,
.qa .qa-ic-bad { display: none; }
.qa.is-right .qa-ic-ok { display: inline; }
.qa.is-wrong .qa-ic-bad { display: inline; }

/* Wiersz w trybie edycji. Formularz zajmuje calą szerokość tabeli, a tlo mowi,
   ze to ten sam wiersz, tylko otwarty (DO-ZROBIENIA 2). */
.tbl tr.is-edit > td {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 16px 14px;
}
.tbl tr.is-edit .form-bar { margin-top: 12px; }
.tbl tr.is-edit .note { color: var(--muted); font-size: .82rem; }

/* Pasek realizacji w wierszu listy firm. Makieta stawia go w <div>, u nas
   wiersz jest ze <span>-ow, wiec pasek trzeba wprost zrobic blokiem. */
span.mini-bar { display: block; }

/* Raport zgodnosci. Skorka makiety (panel.css) celuje w <b>, bo makieta
   sklejala HTML stringami; nasze widoki uzywaja <strong>, wiec te same reguly
   trzeba powtorzyc na nim. Wartosci sa te same, tylko selektor inny. */
.rep .rep-by strong { display: block; font: 700 .92rem var(--font-head); }
.repbar-lab strong { color: var(--text); }
.cell-main strong { font-weight: 600; display: block; }
.tbl tr.is-picked > td { background: var(--accent-soft); }
.tbl th.srt a { color: inherit; text-decoration: none; display: inline-block; }
.tbl td .mini-bar { margin-left: auto; }

/* Kolumna "Realizacja" w tabeli dzialow: pasek i procent w jednej linii,
   wyrownane do lewej. Bez tego "0%" spadal pod pasek dosuniety do prawej
   (`.tbl td .mini-bar { margin-left:auto }`) i wiersz sie rozjezdzal. */
.realz { display: flex; align-items: center; gap: 10px; }
.tbl td .realz .mini-bar { margin: 0; flex: 0 0 120px; }
.realz__pct { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; min-width: 34px; }
/* Zerowa realizacja: pusty track ma byc widoczny jako miarka, nie ledwie widmo. */
.mini-bar.is-zero { background: var(--border); }

/* Notka pod raportem — podstawa prawna, drobnym drukiem. */

/* Wydruk raportu: zostaje sama tresc. Filtry, paginator i przyciski na papierze
   sa balastem, a nawigacja panelu zjada pol strony. */
@media print {
  .no-print,
  .adm-top,
  .adm-side,
  .tabs,
  .pager,
  .filterbar { display: none !important; }

  .adm-main { padding: 0; }
  .box { border: none; box-shadow: none; padding: 0 0 18px; }
  .tabpane[hidden] { display: none; }
}

/* Zaplanowane rozszerzenie - zolta ramka jak prosba firmy, bo w obu wypadkach
   chodzi o to samo: to nie jest stan obecny (PLAN-V3 4.5). */
.box--pending {
  border-color: var(--highlight-dark);
  background: #fffdf4;
}

/* Pozycje zaplanowanej zmiany, jedna obok drugiej. */

/* ⚠ `.flink` ("Wyczysc") jest w arkuszu makiety display:none, bo tam pokazuje
   go JavaScript, gdy filtry sa wlaczone. U nas ten link RENDERUJE SIE tylko
   przy wlaczonych filtrach, wiec musi byc widoczny zawsze, kiedy jest w HTML -
   inaczej nie pojawia sie nigdy. */
.filterbar .flink { display: inline; }

/* Pasek zakladek: w makiecie to <button>, u nas LINK, bo kazda zakladka ma
   swoj adres i swoj request. Reguly z panel.css celuja w `button`, wiec te
   same wartosci trzeba powtorzyc na `a` (v3/assets/admin.css .tabs). */
.tabs a.tab {
  background: none;
  cursor: pointer;
  white-space: nowrap;
  padding: 11px 16px;
  font: 600 .92rem/1 var(--font-body);
  color: var(--muted);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.tabs a.tab:hover { color: var(--text); background: var(--accent-soft); }
.tabs a.tab[aria-selected="true"] {
  background: var(--surface);
  border-color: var(--border);
  color: var(--accent-deep);
  box-shadow: inset 0 3px 0 var(--accent);
}
.tabs a.tab .b {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--bg); color: var(--muted);
  display: inline-grid; place-items: center;
  font: 700 .74rem/1 var(--font-head); font-variant-numeric: tabular-nums;
}
.tabs a.tab[aria-selected="true"] .b { background: var(--accent-soft); color: var(--accent-deep); }

/* Opcja filtra. Makieta ma tu <label> z prawdziwym checkboxem i regulami na
   `:has(input:checked)`; u nas to LINK, bo stan filtra siedzi w adresie - wiec
   kwadrat zaznaczenia rysuje CSS, a stan nosi klasa `.fopt--on`. Siatka,
   odstepy i rozmiary sa te same (v3/assets/admin.css:504-517). */
a.fopt { color: inherit; text-decoration: none; }

.fopt .fbox {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-strong, #cbd3dd);
  border-radius: 4px;
  background: #fff;
  position: relative;
}

.fopt--on .fbox { background: var(--accent); border-color: var(--accent); }

.fopt--on .fbox::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(40deg);
}

.fopt--on { background: var(--accent-soft); }
.fopt--on .c { color: var(--accent-deep); }
.fopt--on .l b { color: var(--accent-dark); font-weight: 700; }

/* Wersja kursu na wlasnej, waskiej kolumnie. Makieta trzyma ja przy tytule,
   ale tam gubila sie miedzy nazwa i opisem. */
table.tbl th.ver, table.tbl td.ver { width: 150px; white-space: nowrap; }
table.tbl td.ver .chip + .chip { margin-top: 4px; }

/* ⚠ SIATKA `.kdet` NALEZY DO MAKIETY (panel.css:274) i ma tam wypisany powod:
   program dostaje cala reszte szerokosci, liczby staly slup 260 px. Moje
   `3fr 2fr` dawalo liczbom 40% ekranu - dokladnie ten blad, ktory wzorzec
   opisuje jako naprawiony ("dziura po prawej, lista lekcji na jedna trzecia").
   Nie deklarujemy tego u siebie. */

/* Rozwiniecie kursu przeprojektowane: zamiast listy lekcji + karty faktow po
   prawej (dziura przy jednej lekcji) - zwarty rzad faktow na cala szerokosc.
   Ilosc lekcji wystarczy; pelny program jest na karcie kursu. */
.kexp { display: flex; flex-direction: column; gap: 16px; }
.kfacts { display: flex; flex-wrap: wrap; gap: 14px 44px; margin: 0; }
.kfacts > div { min-width: 0; }
.kfacts dt { font: 700 .66rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.kfacts dd { margin: 0; font: 600 1.02rem/1.2 var(--font-body); color: var(--text); }
.kfacts .sub2 { color: var(--muted); font-weight: 400; font-size: .8rem; }
.kexp__warn .k { display: block; font: 700 .66rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--warn); margin-bottom: 5px; }
.kexp__warn span:last-child { font-size: .86rem; color: var(--text); line-height: 1.5; }

/* ---------- zaslepka bledu (403 / 404 / 422 / 500) ----------
   Numer jest duzy i cichy, bo nie on jest wiadomoscia - wiadomoscia jest
   zdanie pod nim. Uklad wspolny dla obu skorek, tresc i wyjscie osobne
   (ErrorScreen). */

/* Karta stoi WYSOKO, nie na srodku pustego okna: `.v2-wrap` z logowania
   centruje w pionie i zaslepka ladowala w polowie niczego. */
.errpage { max-width: 430px; margin: 0 auto; padding: 9vh 20px 60px; }
.errpage__foot {
  margin: 16px 0 0;
  text-align: center;
  font-size: .8rem;
  color: var(--muted);
}

.err { text-align: center; }
.err__code {
  font: 700 3.4rem/1 var(--font-head);
  color: var(--border);
  margin: 0 0 4px;
  letter-spacing: -.02em;
}
.err__title { font: 700 1.35rem/1.3 var(--font-head); margin: 0 0 10px; }
.err__lead {
  margin: 0 auto 20px;
  max-width: 46ch;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}

/* Ten sam znacznik co zolta ramka skrotow (.dev-panel::before) - jedno
   oznaczenie rzeczy, ktorej na produkcji nie ma. */
.localonly {
  display: inline-block;
  background: var(--highlight);
  color: #1c211e;
  font: 700 .66rem/1 var(--font-head);
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 4px;
  vertical-align: middle;
}

/* Zamknięty wiersz zostaje w DOM, ale zwija się do zera przez `grid-template-rows`
   (patrz `.detail-box` w panel.css). Gdyby był `display:none`, zwijanie skakałoby -
   `display` nie animuje - więc wiersz jest zawsze table-row, a wysokość robi grid. */
table.tbl tbody tr.team-detail > td { padding: 0; }

/* Przy braku kursu makieta zostawia "bez kursu" i podpowiedz w jednej linii -
   `.crs-open__hint` jest inline-block, a nad nim nie ma zadnego bloku, wiec
   czyta sie to jak jedno slowo ("bez kursuprzypisz"). Wlasna linia, ale
   szerokosc wlasnej tresci: przy `display: block` kreska pod spodem ciagnela
   sie przez cala komorke. */
.crs-open.is-empty .crs-open__hint,
.crs-open.is-empty .is-blocked { display: block; width: fit-content; }

/* Akcja bez mozliwosci powodzenia: widoczna, wyszarzona, powod pod kursorem
   (SubscriptionGate). Arkusz makiety ma to dla `.btn[disabled]`; tu chodzi
   takze o podpowiedzi w tabeli, ktore przyciskiem nie sa.

   ⚠ Wyszarzenie kolorem, NIE `opacity`: dymek jest dzieckiem tego elementu,
   wiec przezroczystosc rodzica zabralaby go razem z napisem. */
.is-blocked {
  color: var(--muted);
  cursor: not-allowed;
  text-decoration: none;
  border-bottom: 0;
}

/* Dymek. Natywny `title` ma opoznienie przegladarki i jej wyglad, ktorego CSS
   nie dotyka - dlatego wlasny. To prawdziwy element, nie `::after` z `attr()`:
   ma tytul i opis, czyli dwie linie.

   ⚠ `position: fixed`, bo tabela go przycina: `.tbl-scroll` ma
   `overflow-x: auto`, a CSS nie pozwala miec jednej osi przewijanej i drugiej
   widocznej. Wspolrzedne liczy `tip_controller`. */
.tip { position: relative; }

/* Maly znacznik „?" obok etykiety - chwyt dla tooltipa (np. prog zaliczenia). */
.tip__mark {
  display: inline-grid; place-items: center; width: 15px; height: 15px;
  border-radius: 50%; background: var(--muted); color: #fff;
  font: 700 .62rem/1 var(--font-body); vertical-align: middle; cursor: help;
}

.tip__box {
  position: fixed;
  z-index: 80;
  display: grid;
  gap: 3px;
  width: max-content;
  max-width: 280px;
  padding: 9px 12px 10px;
  background: #fff;
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(2, 32, 18, .13);
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease-out;
}

.tip__box b { font: 600 .84rem/1.3 var(--font-body); color: var(--text); }
.tip__box > span { font: 400 .78rem/1.45 var(--font-body); color: var(--muted); }

.tip__box.is-on { opacity: 1; visibility: visible; }

/* Podpowiedz "Co dalej", ktora da sie wykonac: ten sam wyglad co plakietka,
   ale to przycisk - kolumna mowi, co zrobic, wiec ma dac to zrobic. */
button.risk--go {
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  text-align: left;
}

button.risk--go:hover { filter: brightness(.97); }

/* Stopka wewnatrz panelu zakladki, nie na dole okna: kazda zakladka modala ma
   swoj formularz, wiec i swoj przycisk. */
.modal__foot--inline { margin: 14px -22px -6px; border-radius: 0; }

/* Podpis listy w swojej linii, pasek narzedzi pod nim. Wszystko w jednym
   rzedzie sklejalo "ZESPOL - 4 z 4" z szukajka. */
.boxhead--stack { display: block; }
.boxhead--stack h2 { margin-bottom: 12px; }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Akcja nieodwracalna to D1 - obrys czerwieni bez cienia (patrz panel.css).
   Zerujemy tu cien z bazowego `.btn:hover`, zeby nie wracal przy najechaniu. */
.btn.btn-danger:hover { box-shadow: none; }

.acts--gap { margin-top: 16px; }

/* Pinezka jest przyciskiem w formularzu (button_to), a makieta rysuje ja jako
   goly <button> - formularz nie moze wiec dodawac wlasnego pudelka. */
.qpin-form { display: contents; }

/* Blad zapisu pytania stoi w formularzu, przy polach, ktore go wywolaly.
   Makieta ma tu #qerr z kolorem wpisanym w atrybut, wiec klasa jest nasza. */
.qerr { color: var(--bad); font-weight: 600; }

/* Radio wyboru rodzaju pytania. `.kindpick` siedzi w `.fld`, a `.fld input`
   z arkusza makiety daje kazdemu polu `width: 100%` i `min-height: 44px` -
   wiec kolko rozpychalo sie na cala kolumne i wypychalo opis poza ramke.
   Makieta ma ten sam blad; `.ansrow` obok radzi sobie z tym tak samo. */
.kindopt input[type=radio] { width: 17px; height: 17px; min-height: 0; }

/* Przycisk w pasku akcji zrobiony przez button_to niesie ze soba formularz.
   Bez tego formularz staje sie elementem siatki i rozpycha rzad. Ta sama
   sztuczka co przy `.qpin-form`. */
.acts__inline { display: contents; }

/* ⚠ NAKLADKA PRZECHWYTYWALA KLIKNIECIA W ODTWARZACZ. `.poster__frame::after`
   rysuje przyciemnienie nad klatka tytulowa, a `--live` mial je zdejmowac -
   tylko ze w arkuszu makiety `--live::after` (linia 1262) stoi PRZED
   `.poster__frame::after` (1272), przy tej samej wadze. Wygrywala pozniejsza,
   wiec nad wideo lezal przezroczysty prostokat: kontrolki bylo widac, ale
   klikniecie w nie nie dochodzilo. `elementFromPoint` zwracal ramke. */
.poster__frame--live::after { content: none; }

/* Nagranie i formularz po polowie. Makieta ma tu `1fr 300px`, co na naszej
   szerokosci zostawialo podglad przyklejony do prawej krawedzi, z pustka
   miedzy nim a formularzem. */
.vidgrid { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .vidgrid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Moje Kursy - kursy kupione w sklepie [D10/D11]. Siatka kart z okladka
   (jak w sklepie); cala karta jest jednym linkiem do kursu. Klasy wlasne, na tokenach.
   ========================================================================== */
.mycourses { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.mycourse {
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; color: inherit; text-decoration: none; box-shadow: var(--shadow);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, border-color .25s ease;
}
.mycourse[hidden] { display: none; }
.mycourse:hover, .mycourse:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 28px -6px rgba(0, 0, 0, .12), 0 8px 12px -4px rgba(0, 0, 0, .06); border-color: var(--accent-mid); }
.mycourse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mycourse__cov {
  position: relative; display: grid; place-items: center; align-content: center; gap: 4px;
  aspect-ratio: 16 / 9; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent-night, var(--accent-deep)));
}
.mycourse__cov.g1::before, .mycourse__cov.g2::before, .mycourse__cov.g3::before {
  content: ""; position: absolute; inset: 0; opacity: .15;
  background: radial-gradient(#fff 1px, transparent 1px) 0 0 / 16px 16px;
}
.mycourse__cov.g2 { background: linear-gradient(135deg, var(--accent-night, var(--accent-deep)), var(--accent-deep)); }
.mycourse__cov.g3 { background: linear-gradient(135deg, var(--accent-dark), var(--accent-deep)); }
.mycourse__cov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mycourse__cov .n { position: relative; font: 800 3rem/1 var(--font-head); letter-spacing: -.02em; color: rgba(255, 255, 255, .95); }
.mycourse__cov-cap { position: relative; font: 700 .72rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-mid); }
.mycourse__chip {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 6px; font: 700 .7rem/1 var(--font-body); color: #fff;
  background: rgba(255, 255, 255, .2); backdrop-filter: blur(8px);
}
.mycourse__chip svg { width: 12px; height: 12px; color: var(--accent-mid); }
.mycourse__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* Pasek FIRMY u gory kafelka - ma go tylko kurs z firmy, kupiony jest bez paska. */
.mycourse__label {
  display: flex; align-items: center; gap: .45rem; padding: .55rem 16px;
  font: 700 .74rem/1.2 var(--font-body);
  color: var(--accent-deep); background: var(--accent-soft); border-bottom: 1px solid var(--accent-mid);
  overflow-wrap: anywhere;
}
.mycourse__label-dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; background: var(--accent); }
.mycourse__kicker { margin: 0; font: 700 .75rem/1 var(--font-body); color: var(--accent-dark); }
.mycourse__title { margin: 0; font: 700 1.05rem/1.35 var(--font-head); color: var(--text); }
.mycourse:hover .mycourse__title { color: var(--accent-deep); }
.mycourse__meta { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--muted); }
.mycourse__fact { display: inline-flex; align-items: center; gap: 6px; }
.mycourse__fact svg { width: 16px; height: 16px; flex: none; opacity: .7; }
.mycourse__progress { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.mycourse__progress-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .8rem; color: var(--muted); }
.mycourse__progress-row b { color: var(--text); }
.mycourse__state { display: inline-block; flex: none; font-weight: 700; font-size: .75rem; padding: 3px 8px; border-radius: 5px; color: var(--warn); background: var(--warn-soft); }
.mycourse__state::first-letter { text-transform: uppercase; }
.mycourse[data-state=in_progress] .mycourse__state { color: var(--accent-dark); background: var(--accent-soft); }
.mycourse[data-state=completed] .mycourse__state { color: var(--ok); background: var(--ok-soft); }
.mycourse__bar { height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.mycourse__bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.mycourse__until { margin: 0; font-size: .8rem; color: var(--muted); }
.mycourse__until b { color: var(--text); }
.mycourses-none { text-align: center; color: var(--muted); }
/* One course: a wide horizontal card (cover | details) instead of a lone tile
   with an empty middle (AS-0170). The company bar spans both columns. */
@media (min-width: 900px) {
  .mycourses:has(> .mycourse:only-child) { grid-template-columns: 1fr; }
  .mycourses > .mycourse:only-child { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
  .mycourses > .mycourse:only-child > .mycourse__label { grid-column: 1 / -1; }
  .mycourses > .mycourse:only-child > .mycourse__cov { align-self: center; }
  .mycourses > .mycourse:only-child > .mycourse__body { padding: 22px 24px; }
}

/* Naglowek „Moje Kursy": ciemny baner marki z liczbami po prawej. */
.mhero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 24px; padding: 28px 32px; border-radius: 16px; color: #fff;
  background: linear-gradient(90deg, var(--accent-night, var(--accent-deep)), var(--accent-deep), var(--accent-night, var(--accent-deep)));
}
.mhero::after {
  content: ""; position: absolute; right: -40px; top: 50%; width: 300px; height: 300px; transform: translateY(-50%);
  border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .12); pointer-events: none;
  box-shadow: inset 0 0 0 50px transparent, inset 0 0 0 52px rgba(255, 255, 255, .08);
}
.mhero__main { position: relative; min-width: 0; }
.mhero__chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 10px; border-radius: 6px;
  font-size: .78rem; font-weight: 500; color: var(--accent-mid);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15);
}
.mhero__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: mhero-pulse 2s ease-in-out infinite; }
@keyframes mhero-pulse { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .mhero__pulse { animation: none; } }
.mhero__title { margin: 0; font: 800 2rem/1.15 var(--font-head); letter-spacing: -.01em; color: #fff; }
.mhero__lead { margin: 6px 0 0; max-width: 36rem; font-size: .9rem; color: rgba(255, 255, 255, .78); }
.mhero__stats {
  position: relative; display: flex; align-items: center; flex: none; padding: 14px 8px; border-radius: 12px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); backdrop-filter: blur(10px);
}
.mhero__stat { display: grid; gap: 4px; padding: 0 22px; text-align: center; }
.mhero__stat + .mhero__stat { border-left: 1px solid rgba(255, 255, 255, .2); }
.mhero__stat b { font: 700 1.6rem/1 var(--font-head); font-variant-numeric: tabular-nums; }
.mhero__stat span { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-mid); }

/* The panel card shares the .cert name with the printable diploma (base.css):
   drop the diploma's centred text and inner frame on it. */
.cert:has(> .cert__seal) { text-align: left; box-shadow: none; }
.cert:has(> .cert__seal)::after { content: none; }
/* Ukonczony kurs bez wzoru certyfikatu - ta sama karta co .cert, w tonie ostrzezenia. */
.cert--missing { border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: linear-gradient(115deg, var(--warn-soft) 0%, var(--surface, #fff) 72%); }
.cert--missing .cert__seal { background: var(--warn); box-shadow: none; }
.cert--missing .cert__title { color: var(--warn); }
.cert--missing .cert__sub b { color: var(--text); overflow-wrap: anywhere; }

/* Zakladka „Wyglad" kursu w panelu dostawcy: karty ustawien po lewej,
   przyklejony podglad kursanta po prawej (placeholder-preview). */
.lookset { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr); gap: 24px; align-items: start; }
@media (max-width: 1100px) { .lookset { grid-template-columns: 1fr; } }
.lookset__main, .lookset__form { display: grid; gap: 20px; min-width: 0; }
/* Pasek zapisu przyklejony nad kartami - widoczny bez przewijania; przycisk
   wlacza sie dopiero po zmianie (dirtyform). */
.lookset__bar {
  position: sticky; top: calc(var(--topbar-h, 60px) + 8px); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.lookset__state { font-size: .8rem; font-weight: 600; color: var(--muted); }
.lookset__state::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--border); vertical-align: 0; }
.lookset__form.is-dirty .lookset__bar { border-color: var(--accent-mid); background: var(--accent-soft); }
.lookset__form.is-dirty .lookset__state { color: var(--accent-deep); }
.lookset__form.is-dirty .lookset__state::before { background: var(--highlight, var(--accent)); }
.lookset__bar .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.lookcard { padding: 22px 24px; border-radius: 16px; background: var(--surface, #fff); border: 1px solid var(--border); box-shadow: var(--shadow); }
.lookcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lookcard__title { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 .92rem/1.3 var(--font-head); letter-spacing: 0; text-transform: none; color: var(--text); }
.lookcard__title svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.lookcard__lead { margin: 4px 0 16px; font-size: .8rem; color: var(--muted); }
.lookcard__head .lookcard__lead { margin-bottom: 0; }
.lookcard__note { margin: 12px 0 0; font-size: .76rem; color: var(--muted); }
.lookcard__opts { display: grid; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.lookcard__opts[hidden] { display: none; }
.lookcard__opts .field { margin: 0; }
.unitfield { position: relative; display: block; max-width: 20rem; }
.unitfield input { width: 100%; box-sizing: border-box; padding-right: 4.5rem; font-weight: 600; }
.unitfield__unit { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); font-size: .8rem; color: var(--muted); pointer-events: none; }
.lookcard__count { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 0; font-size: .78rem; font-weight: 500; color: var(--muted); }
.lookcard__count i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
.lookcard__count strong { color: var(--text); }
/* Okladka nad ustawieniami, na cala szerokosc zakladki. */
.ctab-pane > .lookcard { margin-bottom: 24px; }
.ctab-pane > .lookcard .coverset__preview { flex-basis: 16rem; }
.lookcard__opts .hint { margin: 6px 0 0; }
.lookcard__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .lookcard__pair { grid-template-columns: 1fr; } .lookcard { padding: 18px; } }
.lookcard .blkswitch { flex: none; }

/* Tryb dostepu jako trzy kafle do wyboru - radio schowane, stan z :has(). */
.modepick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .modepick { grid-template-columns: 1fr; } }
.modepick__opt {
  position: relative; display: grid; gap: 4px; align-content: start; padding: 14px 16px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #fff);
  transition: border-color .15s ease, background .15s ease;
}
.modepick__opt:hover { border-color: var(--accent-mid); }
.modepick__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.modepick__opt:has(.modepick__radio:checked) { border: 2px solid var(--accent); padding: 13px 15px; background: var(--accent-soft); }
.modepick__opt:has(.modepick__radio:checked)::after {
  content: "✓"; position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; font: 700 .66rem/1 var(--font-body); color: #fff; background: var(--accent);
}
.modepick__opt:has(.modepick__radio:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.modepick__ico { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 6px; border-radius: 8px; color: var(--muted); background: var(--bg); }
.modepick__ico svg { width: 18px; height: 18px; }
.modepick__opt:has(.modepick__radio:checked) .modepick__ico { color: var(--accent-deep); background: var(--accent-mid); }
.modepick__name { font-weight: 700; font-size: .84rem; color: var(--text); }
.modepick__desc { font-size: .74rem; line-height: 1.4; color: var(--muted); }

/* Wyswietlanie kart jako przelacznik segmentowy. */
.segpick { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); }
.segpick label { position: relative; cursor: pointer; }
.segpick input { position: absolute; opacity: 0; width: 0; height: 0; }
.segpick span { display: block; padding: 8px 16px; border-radius: 9px; font-size: .8rem; font-weight: 600; color: var(--muted); transition: background .15s ease, color .15s ease; }
.segpick input:checked + span { color: var(--text); background: var(--surface, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.segpick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Podglad kursanta: przyklejony do gory, kafle w stylu tablicy lekcji. */
.lookset__preview {
  position: sticky; top: calc(var(--topbar-h, 60px) + 16px); display: grid; gap: 14px; padding: 18px;
  border-radius: 16px; background: var(--bg); border: 1px solid var(--border);
}
@media (max-width: 1100px) { .lookset__preview { position: static; } }
.lookset__pvhead { margin: 0; font-size: .78rem; font-weight: 700; color: var(--text); }
.lookset__pvhead span { display: inline-flex; align-items: center; gap: 8px; }
.lookset__pvhead i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.lookset__preview .deliver__board { max-height: 32rem; gap: 10px; }
.lookset__preview .deliver__pvnote { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: .74rem; }
.pvcard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pvcard__open { font-size: .7rem; font-weight: 700; color: var(--accent-dark); }
.pvcard__open::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.pvcard__head .pvcard__lock { margin: 0; font-size: .7rem; font-weight: 600; color: var(--muted); }
.pvcard__soon { font-size: .68rem; font-weight: 600; padding: 2px 7px; border-radius: 5px; color: var(--warn); background: var(--warn-soft); }
.lookset .pvcard { padding: 14px 16px; border-radius: 12px; border-color: var(--border); }
.lookset .pvcard--locked .pvcard__no { color: var(--muted); background: var(--bg); }
.lookset .pvcard--blank { background: rgba(255, 255, 255, .7); border: 2px dashed var(--border); }

/* Okladka kursu w panelu dostawcy: podglad w proporcji kafelka + pole pliku. */
.coverset { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.coverset__preview {
  flex: 0 0 14rem; max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--accent-deep), var(--accent-night, var(--accent-deep)));
}
.coverset__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coverset__empty { display: grid; gap: 6px; padding: 12px 16px; text-align: center; font-size: .78rem; color: rgba(255, 255, 255, .8); }
.coverset__empty small { font: 500 .66rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent-mid); }
.coverset__form { flex: 1 1 16rem; display: grid; gap: 10px; align-content: start; }
.coverset__form .hint { margin: 0; }

/* Numer wersji kursu przy tytule (pula firmy = jedna wersja), jak .cpick__ver w oknie przypisania. */
.vertag {
  display: inline-block; margin-left: 4px; padding: 2px 6px; border-radius: 5px; vertical-align: 2px;
  font: 700 .68rem/1.2 var(--font-body); letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: var(--muted); background: var(--bg); border: 1px solid var(--border); white-space: nowrap;
}

/* Zakladki + wyszukiwarka w jednym pasku. */
.mtoolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.mtoolbar__count { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.mtoolbar__count b { font-weight: 600; }
.mtoolbar__tools { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; }
.msearch { position: relative; display: block; }
.msearch svg { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.msearch input, .mselect {
  height: 2.2rem; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface, #fff); color: var(--text); font: 400 .82rem var(--font-body);
}
.msearch input { width: 15rem; max-width: 100%; padding: 0 12px 0 32px; }
.mselect { width: auto; padding: 0 28px 0 10px; }
.msearch input:focus, .mselect:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* The status filter becomes the panel's own list (dropdowns.js, 44px) - the
   search box matches it, or the two sit at different heights side by side. */
.mtoolbar__tools .msearch input, .mtoolbar__tools .drop__btn { height: 44px; min-height: 44px; box-sizing: border-box; border-radius: 12px; }
.mtoolbar__tools .drop__btn { padding-block: 0; }

/* Siatka kursow (2/3) + kolumna statusu (1/3). */
.mlayout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.mlayout__main { display: grid; gap: 24px; min-width: 0; }
.mlayout__side { display: grid; gap: 24px; }
@media (max-width: 1100px) { .mlayout { grid-template-columns: 1fr; } }
/* Telefon: jedna kolumna na cala szerokosc, nizsza okladka, statystyki w pasku pod opisem. */
@media (max-width: 640px) {
  .mhero { display: block; padding: 20px; margin-bottom: 20px; }
  .mhero::after { right: -90px; top: auto; bottom: -120px; transform: none; }
  .mhero__chip { font-size: .72rem; border-radius: 999px; padding: 4px 12px; }
  .mhero__title { font-size: 1.5rem; }
  .mhero__lead { font-size: .8rem; line-height: 1.55; }
  .mhero__stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; padding: 14px 0; background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .1); }
  .mhero__stat { padding: 0 8px; }
  .mhero__stat + .mhero__stat b { color: var(--accent-mid); }
  .mhero__stat span { font-size: .62rem; }

  .mtoolbar { display: grid; justify-content: stretch; gap: 14px; border-bottom: 0; margin-bottom: 16px; }
  .mtoolbar__tools { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 0; }
  .msearch { grid-column: 1 / -1; }
  .msearch input { width: 100%; height: 44px; border-radius: 12px; font-size: .9rem; }
  .mselect { height: 44px; border-radius: 12px; font-size: .78rem; font-weight: 500; }
  .mtoolbar__count { justify-self: end; }

  .mycourses { grid-template-columns: 1fr; gap: 16px; }
  /* A real cover keeps its 16:9 (AS-0170); only the numbered gradient is shorter. */
  .mycourse__cov:not(:has(img)) { aspect-ratio: auto; height: 11rem; }
  .mycourse__cov .n { font-size: 2.8rem; }
  .mycourse__label { padding: .6rem 16px; font-size: .7rem; }
  .mycourse__body { padding: 16px; }
  .mycourse__kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
  .mycourse__title { font-size: 1rem; }
  .mycourse__meta { font-size: .75rem; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
  .mycourse__progress { margin-top: 0; padding-top: 0; border-top: 0; }
  .mycourse__cta { padding-block: .85rem; }
}
.mside { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); }
.mside__title { margin: 0; font: 700 .95rem/1.3 var(--font-head); }
.mside__facts { margin: 16px 0 0; display: grid; gap: 10px; }
.mside__facts div { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; }
.mside__facts dt { color: var(--muted); }
.mside__facts dd { margin: 0; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mside__tip { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.mside__tip-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--accent-deep); background: var(--accent-soft); }
.mside__tip-ico svg { width: 20px; height: 20px; }
.mside__tip p { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--muted); }
.mside__tip b { display: block; margin-bottom: 2px; color: var(--text); }
.mcert {
  position: relative; overflow: hidden; display: block; padding: 20px; border-radius: 16px; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #1e2533, #2b3445);
}
.mcert::after {
  content: "★"; position: absolute; right: -6px; bottom: -34px; font-size: 8rem; line-height: 1; color: rgba(255, 255, 255, .07); pointer-events: none;
}
.mcert:hover .mcert__more { text-decoration: underline; }
.mcert__kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 .72rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-mid); }
.mcert__kicker svg { width: 16px; height: 16px; }
.mcert__title { margin: 0 0 6px; font: 700 .95rem/1.3 var(--font-head); color: #fff; }
.mcert__lead { margin: 0 0 16px; font-size: .8rem; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.mcert__more { margin: 0; font-size: .75rem; font-weight: 600; color: var(--accent-mid); }
/* Naglowek tablicy kursu (kupiony i z firmy): pierscien, tytul z plakietkami, data po prawej. */
.chero {
  margin-bottom: 24px; padding: 24px 28px; border-radius: 16px;
  background: var(--surface, #fff); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.chero__row { display: flex; align-items: center; justify-content: space-between; gap: 20px 24px; flex-wrap: wrap; }
.chero__main { display: flex; align-items: center; gap: 20px; flex: 1 1 20rem; min-width: 0; margin: 0; }
.chero__main .ring { width: 80px; height: 80px; }
.chero__txt { min-width: 0; display: grid; gap: 6px; }
.chero__titlerow { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.chero .chero__title { margin: 0; font: 800 1.75rem/1.2 var(--font-head); letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; }
.chero__chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font: 600 .72rem/1.3 var(--font-body); color: var(--muted); background: var(--bg); border: 1px solid var(--border);
}
.chero__chip svg { width: 14px; height: 14px; }
.chero__chip--accent { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent-mid); }
.chero .chero__sub { margin: 0; font-size: .9rem; color: var(--muted); }
.chero__sub strong { color: var(--text); }
.chero__aside { display: grid; justify-items: end; gap: 8px; flex: none; }
.chero__aside-label { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.chero__aside-label svg { width: 16px; height: 16px; }
.chero__aside-row { display: flex; align-items: center; gap: 8px; }
.chero__date {
  padding: 4px 10px; border-radius: 6px; font: 600 .8rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text); background: var(--bg); border: 1px solid var(--border);
}
.chero__left { padding: 3px 8px; border-radius: 5px; font-size: .75rem; font-weight: 600; color: var(--ok); background: var(--ok-soft); border: 1px solid var(--accent-mid); }
.chero__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
}
.chero__lead { margin: 0; max-width: 48rem; font-size: .84rem; line-height: 1.55; color: var(--muted); }
.chero__cert { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: .78rem; font-weight: 600; color: var(--text); }
.chero__cert svg { width: 16px; height: 16px; color: var(--accent); }
@media (max-width: 700px) {
  .chero { padding: 18px; }
  .chero__aside { justify-items: start; }
  .chero .chero__title { font-size: 1.3rem; }
  .chero__main { gap: 14px; align-items: flex-start; }
  .chero__main .ring { width: 60px; height: 60px; }
}

/* Tablica lekcji kursu: trzy kolumny z kropka statusu, puste kolumny z podpowiedzia. */
.cboard { display: grid; gap: 16px; }
.cboard > .allgood, .cboard > .hint { margin: 0; }
.cboard__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cboard__title { margin: 0; font: 700 1.1rem/1.3 var(--font-head); color: var(--text); }
.cboard__hint { font-size: .78rem; color: var(--muted); }
.cboard .lanes { gap: 20px; margin-top: 0; align-items: start; }
.cboard .lane {
  min-height: 22rem; padding: 16px; border-radius: 16px; gap: 12px; grid-template-rows: auto; align-content: start;
  background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.cboard .lane--doing { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.cboard .lane--done { background: var(--ok-soft); border-color: var(--accent-mid); }
.cboard .lane-h {
  margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--border);
  font: 700 .74rem/1 var(--font-head); letter-spacing: .08em; color: var(--text);
}
.cboard .lane-h .pillcount { margin-left: auto; min-width: 24px; text-align: center; padding: 4px 8px; background: var(--surface, #fff); color: var(--text); }
.lane-h__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--warn); }
.lane--doing .lane-h__dot { background: var(--highlight); }
.lane--done .lane-h__dot { background: var(--accent); }
.lanes--single .lane-h__dot { background: var(--accent); }
.lane-blank {
  display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 15rem; padding: 24px;
  text-align: center; border: 2px dashed var(--border); border-radius: 12px; background: rgba(255, 255, 255, .5);
}
.lane--doing .lane-blank { border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.lane--done .lane-blank { border-color: var(--accent-mid); }
.lane-blank__ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; color: var(--muted); background: var(--surface, #fff); }
.lane--doing .lane-blank__ico { color: var(--warn); }
.lane--done .lane-blank__ico { color: var(--accent-dark); }
.lane-blank__ico svg { width: 24px; height: 24px; }
.lane-blank__title { margin: 0; font-weight: 700; font-size: .88rem; color: var(--text); }
.lane-blank__lead { margin: 0; max-width: 14rem; font-size: .8rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 640px) {
  .cboard .lane { min-height: 0; }
  .lane-blank { min-height: 9rem; padding: 18px; }
}

/* Kafel lekcji: plakietka numeru i status w jednym wierszu. */
.lcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.lcard__top .lcard__no { margin: 0; }
.lcard__status { font-size: .72rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.lcard__status--open { color: var(--accent-dark); }
.lcard__status--ok { color: var(--ok); }
.cboard .lcard {
  padding: 16px; border-radius: 12px; background: var(--surface, #fff);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.cboard .lcard:hover { border-color: var(--accent-mid); box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .08); }
.cboard .lcard__title { font: 700 1.05rem/1.35 var(--font-head); margin-bottom: 8px; }
.cboard .lcard__meta { margin-bottom: 14px; font-size: .8rem; }
/* Glowna akcja kafla na cala szerokosc, oddzielona kreska jak w makiecie. */
.cboard .lcard > .btn:last-child, .cboard .lcard__acts {
  width: 100%; box-sizing: border-box; justify-content: center; margin-top: 4px;
}
.cboard .lcard > .btn:last-child { display: flex; padding-block: .7rem; border-radius: 10px; }
.cboard .lcard__acts .btn { flex: 1; justify-content: center; }

/* Zrodlo kursu na liscie certyfikatow: kupiony w sklepie albo z firmy. */
.mycourse__src {
  justify-self: start; font: 700 .68rem/1 var(--font-head); letter-spacing: .02em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 9px; border: 1px solid transparent; max-width: 100%; overflow-wrap: anywhere;
}
.mycourse__src--bought { color: var(--accent-deep); background: var(--accent-soft); }
.mycourse__src--company { color: var(--muted); background: #fff; border-color: var(--border); }
/* Certyfikaty (05 §4): siatka kart - zielona pieczec u gory, tytul i data, dwie akcje u dolu. */
.certgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.certrow {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.certrow[hidden] { display: none; }
.certrow:hover { border-color: var(--accent-mid); box-shadow: 0 12px 28px -6px rgba(0, 0, 0, .12); }
.certrow__seal {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 16px 16px 0; padding: 18px 16px; border-radius: 12px; color: #fff;
  background: linear-gradient(45deg, var(--accent-dark), var(--accent));
}
.certrow__seal::before {
  content: ""; position: absolute; inset: 0; opacity: .2; pointer-events: none;
  background: radial-gradient(#fff .75px, transparent .75px) 0 0 / 12px 12px;
}
.certrow__kicker { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; font: 700 .7rem/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.certrow__kicker-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, .15); }
.certrow__kicker-ico svg { width: 18px; height: 18px; }
.certrow__pdf { position: relative; font: 800 .6rem/1 var(--font-body); padding: 4px 6px; border-radius: 4px; background: rgba(0, 0, 0, .25); }
.certrow__body { flex: 1; display: grid; gap: 10px; align-content: start; padding: 16px 20px; min-width: 0; }
.certrow__title { margin: 0; font: 700 1.02rem/1.35 var(--font-head); color: var(--text); overflow-wrap: anywhere; }
.certrow__meta { margin: 0; font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.certrow__date { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--muted); }
.certrow__date b { font-weight: 600; color: var(--text); }
.certrow__actions { display: flex; gap: 8px; padding: 14px 16px; background: var(--bg); border-top: 1px solid var(--border); }
.certrow__actions .btn { flex: 1; justify-content: center; }
.certrow__actions svg { width: 15px; height: 15px; }
/* Kursy w toku pod certyfikatami - co jeszcze zostalo do zdobycia. */
.toearn { display: grid; gap: 12px; }
.toearn__title { margin: 0; font: 700 .74rem/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); }
.toearn__row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px;
  border: 1.5px dashed var(--border); border-radius: 16px; background: rgba(255, 255, 255, .7);
}
.toearn__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); }
.toearn__ico svg { width: 20px; height: 20px; }
.toearn__body { flex: 1 1 16rem; min-width: 0; display: grid; gap: 6px; }
.toearn__name { margin: 0; font: 700 .92rem/1.35 var(--font-head); color: var(--text); }
.toearn__state { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 5px; font: 700 .7rem/1.4 var(--font-body); color: var(--warn); background: var(--warn-soft); vertical-align: 2px; }
.toearn__state--in_progress { color: var(--accent-dark); background: var(--accent-soft); }
.toearn__state--completed { color: var(--ok); background: var(--ok-soft); }
.toearn__go--wait { color: var(--muted); border-color: var(--border); }
.toearn__lead { margin: 0 0 4px; font-size: .8rem; color: var(--muted); }
.toearn__go { flex: none; }
@media (max-width: 640px) {
  .certgrid { grid-template-columns: 1fr; gap: 16px; }
  .certrow { border-radius: 14px; }
  .certrow__seal { margin: 0; padding: 10px 16px; border-radius: 0; }
  .certrow__kicker { font-size: .64rem; }
  .certrow__kicker-ico { width: 26px; height: 26px; background: none; }
  .certrow__body { padding: 14px 16px 4px; }
  .certrow__actions { padding: 12px 16px 16px; background: none; border-top: 0; }
  .toearn__row { align-items: flex-start; padding: 16px; }
  .toearn__state { display: table; margin: 4px 0 0; }
  .toearn__go { width: 100%; justify-content: center; }
}
/* Etykieta listy nad siatka (zastapila zakladki Moje Kursy | Certyfikaty). */
.mtoolbar__label { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 8px; font: 700 .74rem/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); }
.mtoolbar__pill { padding: 3px 9px; border-radius: 999px; font-size: .72rem; letter-spacing: 0; color: var(--accent-deep); background: var(--accent-soft); }
/* Licznik przy pozycji menu panelu klienta (Moje Kursy / Certyfikaty). */
.adm-side a .side-count {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px;
  font: 700 .72rem/22px var(--font-head); text-align: center; color: var(--accent-deep); background: var(--accent-soft);
}
.adm-side a[aria-current="page"] .side-count { color: #fff; background: var(--accent-dark); }
/* Wizualny przycisk w linku-karcie, na CALA szerokosc i przypiety do dolu:
   hover dostaje z karty, sam nie unosi sie osobno. */
.mycourse__cta { pointer-events: none; width: 100%; justify-content: center; margin-top: 8px; box-sizing: border-box; border-radius: 12px; }
.mycourses-expired { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mycourses-expired li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }

/* AS-0058: materialy do pobrania na „Moich kursach". */
.mdownloads { display: grid; gap: 12px; margin-bottom: 18px; }
.mdownloads__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mdownload { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #fff); }
.mdownload.is-expired { opacity: .7; }
.mdownload__head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.mdownload__title { font-weight: 600; }
.mdownload__files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mdownload__files li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 8px 10px; border-radius: 8px; background: var(--bg); }
.mdownload__ext { font: 700 .7rem/1 ui-monospace, Menlo, monospace; padding: 5px 6px; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent-dark, var(--accent)); }
.mdownload__name { overflow-wrap: anywhere; font-size: .9rem; }
.mdownload__size { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .mdownload__files li { grid-template-columns: auto minmax(0, 1fr) auto; } .mdownload__size { display: none; } }

/* Akcje kafelka lekcji kupionego kursu (tablica 3 kolumn): „Ogladaj" obok wejscia w test. */
.lcard__acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Stan testu na stronie lekcji kupujacego: zaliczona / do zrobienia / bez testu (P14a). */
.mylesson__meta { margin: 0; font-size: .78rem; color: var(--muted); }
.mylesson__state {
  display: inline-block; font: 700 .68rem/1 var(--font-head); letter-spacing: .02em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 9px; margin-right: 6px; border: 1px solid transparent;
}
.mylesson__state.is-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, #fff); border-color: color-mix(in srgb, var(--ok) 30%, #fff); }
.mylesson__state.is-todo { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, #fff); border-color: color-mix(in srgb, var(--warn) 30%, #fff); }
.mylesson__state.is-none { color: var(--muted); background: #fff; border-color: var(--border); }
.mylesson-quiz { margin-top: 14px; }

/* AS-0011: a switch that needs another one on (presence check needs the seek-lock). */
.dep-switch.is-off { opacity: .55; }
.dep-switch.is-off .blkswitch { cursor: not-allowed; }

/* AS-0049 / A8: stopka sprzedawcy w panelu kupujacego i na logowaniu.
   Na szerokosc tresci i wyrownana do kart - nie wisi na srodku jak osobny pasek. */
.legal-foot { margin-top: 44px; padding: 16px 0 6px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 28px;
  font-size: .8rem; line-height: 1.5; color: var(--muted); }
.legal-foot__seller b { color: var(--text); font-weight: 600; }
.legal-foot__sep { opacity: .6; margin: 0 2px; }
.legal-foot__nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.legal-foot__nav a { color: var(--muted); text-decoration: none; }
.legal-foot__nav a:hover, .legal-foot__nav a:focus-visible { color: var(--accent-deep, var(--text)); text-decoration: underline; text-underline-offset: 2px; }
/* Na logowaniu stopka stoi pod waska karta - jedna kolumna. */
.v2-wrap .legal-foot { flex-direction: column; align-items: flex-start; margin-top: 24px; }

/* Client panel: the way to the provider's store, set apart from the menu. */
.adm-side a.side-store {
  margin-top: 14px; border: 1px solid var(--accent); background: var(--accent-soft, transparent);
  color: var(--accent-dark, var(--accent)); font-weight: 700;
}
.adm-side a.side-store small { display: block; font-weight: 500; font-size: .72rem; opacity: .8; }
.adm-side a.side-store:hover { background: var(--accent); color: #fff; }

/* AS-0071: login reached from the store - back link and step in one row, order context, then the form. */
.sl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line, #e5e7eb); }
.sl-back { display: inline-flex; align-items: center; gap: 6px; margin-left: -8px; padding: 6px 9px; border-radius: 9px; font-size: .88rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.sl-back:hover { color: var(--accent-dark, var(--accent)); background: var(--accent-soft); }
.sl-back svg { width: 16px; height: 16px; }
.sl-top .sl-steps { margin: 0; }
.sl-context { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 20px; padding: 13px 15px; border-radius: 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.sl-context svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.sl-context p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--muted); }
.sl-context strong { color: var(--text); }
.sl-kicker { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-dark, var(--accent)); font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.sl-title { margin: 8px 0 4px; font-size: 1.65rem; letter-spacing: -.01em; }
.sl-lead { margin: 0 0 20px; color: var(--muted); font-size: .9rem; }
.sl-form label { font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.sl-req { color: var(--accent); }
.sl-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sl-label-row a { font-size: .8rem; font-weight: 700; color: var(--accent-dark, var(--accent)); }
.sl-pass { position: relative; }
.sl-pass input { padding-right: 44px; }
.sl-eye { position: absolute; top: 0; right: 0; bottom: 0; width: 42px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--muted); cursor: pointer; }
.sl-eye svg { width: 18px; height: 18px; }
.sl-eye:hover, .sl-eye.is-on { color: var(--accent); }
.sl-form label.sl-remember { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; font-size: .88rem; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; }
.sl-remember input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.sl-help { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--muted) 7%, transparent); border: 1px solid var(--line, #e5e7eb); font-size: .82rem; line-height: 1.55; color: var(--muted); }
.sl-help strong { display: block; color: var(--text); margin-bottom: 2px; }
.sl-help p { margin: 0; }
.sl-submit { margin-top: 20px; height: 48px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.sl-submit svg { width: 16px; height: 16px; }
.sl-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line, #e5e7eb); font-size: .8rem; color: var(--muted); }
.sl-foot svg { width: 15px; height: 15px; color: var(--accent); }

/* iOS Safari zooms the whole page when a field under 16px gets focus (AS-0195);
   !important beats the per-component 14px sizes. */
@media (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea { font-size: max(16px, 1em) !important; }
}