/**
 * Panel kursanta MathByPanFran.
 * Wszystko pod .mbpf, żeby nie kolidowało z motywem, Elementorem ani stylami Tutora.
 */

.mbpf {
	/*
	 * Zieleń, tusz i kreska są **te same co w sklepie** — panel wchodzi teraz w jego ramę,
	 * a dwie różne zielenie na jednej stronie od razu rzucały się w oczy. Wartości powtarzamy
	 * u siebie zamiast liczyć na dziedziczenie: bez wtyczki nowego frontu panel dalej ma
	 * komplet kolorów i wygląda poprawnie.
	 *
	 * Odcienie 600/400/50/100 policzone od nowej bazy #3b5d56 — gdyby zostały stare, jasne
	 * tła przestałyby pasować do przyciemnionej zieleni.
	 */
	--mbpf-green:      #3b5d56;
	--mbpf-green-600:  #2f4a45;
	--mbpf-green-400:  #7bbfb0;
	--mbpf-green-50:   #f0f4f3;
	--mbpf-green-100:  #dfeae7;

	--mbpf-ink:        #1a1a1a;
	--mbpf-ink-2:      #4b5563;
	--mbpf-ink-3:      #6b7280;
	--mbpf-ink-4:      #9ca3af;

	--mbpf-bg:         #f6f7f9;
	--mbpf-card:       #ffffff;
	--mbpf-line:       rgba(59, 93, 86, .14);
	--mbpf-line-2:     #f1f3f6;
	--mbpf-track:      #eef0f4;

	/*
	 * Kształt zostaje własny — sklep ma inne zaokrąglenie i inny cień, a kafelki panelu
	 * są większe i płaskie. Nazwy z przedrostkiem `p`, żeby nie zderzały się z tokenami
	 * sklepu na tej samej stronie.
	 */
	--mbpf-p-radius:   16px;
	--mbpf-radius-sm:  12px;
	--mbpf-p-shadow:   0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px -18px rgba(17, 24, 39, .25);

	/* paleta modułów: kolor akcentu + tło kafelka */
	--mbpf-mod-green:   #16a34a;  --mbpf-mod-green-bg:  #dcfce7;
	--mbpf-mod-violet:  #7c5cd6;  --mbpf-mod-violet-bg: #ede9fe;
	--mbpf-mod-orange:  #f97316;  --mbpf-mod-orange-bg: #ffedd5;
	--mbpf-mod-pink:    #ec4899;  --mbpf-mod-pink-bg:   #fce7f3;
	--mbpf-mod-blue:    #3b82f6;  --mbpf-mod-blue-bg:   #dbeafe;
	--mbpf-mod-teal:    #14b8a6;  --mbpf-mod-teal-bg:   #ccfbf1;
	--mbpf-mod-amber:   #f59e0b;  --mbpf-mod-amber-bg:  #fef3c7;
	--mbpf-mod-indigo:  #6366f1;  --mbpf-mod-indigo-bg: #e0e7ff;

	/**
	 * Pomarańcz wezwania do działania.
	 * Świadomie ciemniejszy od żywego #f97316: biały napis na tamtym daje kontrast
	 * 2,8:1, czyli poniżej progu czytelności. Ten daje 4,6:1 i przechodzi WCAG AA
	 * także dla drobnego podpisu pod głównym napisem.
	 */
	--mbpf-orange:     #cc4a08;
	--mbpf-orange-600: #a83a06;

	--mbpf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	font-family: var(--mbpf-font);
	color: var(--mbpf-ink);
	background: var(--mbpf-bg);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.mbpf *,
.mbpf *::before,
.mbpf *::after { box-sizing: border-box; }

.mbpf img { max-width: 100%; height: auto; display: block; }
.mbpf a { color: inherit; text-decoration: none; }
.mbpf :focus-visible { outline: 2px solid var(--mbpf-green); outline-offset: 2px; border-radius: 4px; }

/**
 * Reset przycisków.
 * Motyw i Elementor nadają globalne style elementom <button> (m.in. zielone tło),
 * a nasze przyciski pełnią tu funkcję wierszy układu. Neutralizujemy je u źródła,
 * z !important, bo reguły motywu bywają bardziej szczegółowe niż jakikolwiek
 * sensowny selektor po naszej stronie.
 */
.mbpf button[class*="mbpf-"] {
	font: inherit;
	color: inherit;
	background-color: transparent !important;
	background-image: none !important;
	border-color: transparent;
	box-shadow: none !important;
	text-transform: none !important;
	text-shadow: none;
	letter-spacing: normal;
	line-height: inherit;
	min-height: 0;
	min-width: 0;
}

/*
 * Przyciski Tutora wewnątrz panelu (m.in. „Oznacz jako ukończone" w nagłówku modułu).
 * Motyw nadpisuje im tło na białe — przy białym napisie przycisk znika.
 */
.mbpf .tutor-btn-primary { background-color: var(--mbpf-green) !important; color: #fff !important; }
.mbpf .tutor-btn-primary:hover { background-color: var(--mbpf-green-600) !important; color: #fff !important; }

/* …a tam, gdzie przycisk ma wyglądać jak przycisk, przywracamy tło. */
.mbpf button.mbpf-pbtn--primary { background-color: var(--mbpf-green) !important; color: #fff; }
.mbpf button.mbpf-pbtn--primary:hover { background-color: var(--mbpf-green-600) !important; }
.mbpf button.mbpf-pbtn--ghost { background-color: #fff !important; border-color: var(--mbpf-line); }
.mbpf button.mbpf-pbtn--ghost:hover { background-color: var(--mbpf-green-50) !important; border-color: var(--mbpf-green); color: var(--mbpf-green); }
.mbpf button.mbpf-pbtn--soft { background-color: var(--mbpf-green-50) !important; }
.mbpf button.mbpf-side-mod__row:hover { background-color: var(--mbpf-green-50) !important; }
.mbpf .mbpf-side-mod.is-current button.mbpf-side-mod__row { background-color: var(--mbpf-green-50) !important; }
.mbpf button.mbpf-toggle-all:hover { background-color: var(--mbpf-green-50) !important; color: var(--mbpf-green); }
.mbpf button.mbpf-tab:hover { background-color: var(--mbpf-green-50) !important; color: var(--mbpf-green); }
.mbpf button.mbpf-star:hover, .mbpf button.mbpf-star.is-on { color: #f59e0b; }

/* Geometria naszych przycisków musi wygrać z globalnymi paddingami motywu. */
.mbpf button.mbpf-module__main { width: auto; padding: 14px 16px; margin: 0; border-radius: 0; }
.mbpf button.mbpf-module__chev { width: 28px; padding: 0; margin: 0; border-radius: 50%; }
.mbpf button.mbpf-side-mod__row { width: 100%; padding: 13px 14px; margin: 0; border-radius: 0; }
.mbpf button.mbpf-toggle-all   { padding: 6px 8px; margin: 0; width: auto; border-radius: 8px; }
.mbpf button.mbpf-pbtn          { padding: 13px 22px; margin: 0; width: auto; border-radius: 11px; }
.mbpf button.mbpf-pbtn--block   { width: 100%; }
.mbpf button.mbpf-star         { padding: 3px; margin: 0; width: auto; }
.mbpf button.mbpf-tab          { padding: 12px 16px; margin: 0; width: auto; border-radius: 0; }

/* Motyw potrafi też przemalować linki-przyciski. */
.mbpf a.mbpf-pbtn--primary { background-color: var(--mbpf-green); color: #fff; }
.mbpf a.mbpf-pbtn--primary:hover { background-color: var(--mbpf-green-600); color: #fff; }

/**
 * Przycisk „Oznacz jako ukończone" pochodzi z Tutora i niesie własną logikę
 * (formularz, nonce, odświeżenie postępu). Nie podmieniamy go — ubieramy.
 */
.mbpf .tutor-course-complete-form,
.mbpf .tutor-lesson-complete-form { margin: 0; }
.mbpf .tutor-btn,
.mbpf button.tutor-btn,
.mbpf input[type="submit"].tutor-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 12px 20px; border-radius: 11px; font-weight: 600; font-size: 14.5px;
	background-color: #fff; color: var(--mbpf-green);
	border: 1px solid var(--mbpf-line); box-shadow: none; text-transform: none;
	cursor: pointer; white-space: nowrap;
}
.mbpf .tutor-btn:hover,
.mbpf button.tutor-btn:hover { border-color: var(--mbpf-green); background-color: var(--mbpf-green-50); color: var(--mbpf-green); }
.mbpf .tutor-btn i, .mbpf .tutor-btn [class^="tutor-icon-"] { color: currentColor; }

.mbpf-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.mbpf-num { font-variant-numeric: tabular-nums; }

/* ============================ pasek górny ============================ */

/**
 * Podpasek panelu.
 * Logo zostaje wyłącznie w nagłówku serwisu — tutaj sama nawigacja.
 * Przykleja się pod nagłówkiem: `--mbpf-header-h` ustawia skrypt, mierząc
 * dolną krawędź przyklejonego nagłówka na bieżąco.
 */
.mbpf-subbar {
	position: sticky;
	top: var(--mbpf-header-h, 0px);
	z-index: 40;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--mbpf-line);
}
/* Wysokość z zapasem na awatar (46 px) — przy sztywnych 52 px zostawały mu
   3 px luzu i zlewał się z krawędzią paska oraz tłem strony pod nim. */
.mbpf-subbar__in {
	max-width: 1180px; margin: 0 auto; padding: 9px 20px;
	display: flex; align-items: center; gap: 20px; min-height: 64px;
}

.mbpf-pnav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.mbpf-pnav a {
	padding: 7px 13px; border-radius: 8px; font-size: 14px; color: var(--mbpf-ink-2);
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
	transition: background .14s, color .14s;
}
.mbpf-pnav a:hover { background: var(--mbpf-green-50); color: var(--mbpf-green); }
.mbpf-pnav a.is-active { color: var(--mbpf-green); font-weight: 600; background: var(--mbpf-green-50); }

.mbpf-subbar__right { margin-left: auto; display: flex; align-items: center; gap: 18px; flex: none; }

/*
 * Seria i postęp stoją obok awatara (46 px), więc skala jest tu podciągnięta do jego:
 * pismo 15 px jak w przycisku konta, ikona płomienia 21 px, pierścień 44 px.
 * Przy 13 px i pierścieniu 34 px cała trójka wyglądała jak przypis do awatara.
 */
/*
 * Seria dni jako plakietka — ten sam duet barw co komunikat motywujący w kafelku postępu.
 * `line-height: 1` jest tu konieczne: przy interlinii 1,55 pudełko wiersza jest wyższe
 * od wersalika, więc płomień siadał 0,6 px poniżej środka napisu.
 */
.mbpf-streak-mini {
	display: inline-flex; align-items: center; gap: 6px; line-height: 1;
	/* Napis „1 dzień" ma wydłużenia górne, a nie ma dolnych, więc przy równym
	   wypełnieniu siedzi 1 px nad środkiem plakietki — stąd 8 px u góry, 6 px u dołu. */
	padding: 8px 11px 6px; border-radius: 10px; font-size: 15px;
	background: var(--mbpf-mod-orange-bg); color: #b5490c;
}
.mbpf-streak-mini b { font-weight: 600; }
/*
 * Płomień jest narysowany w górnej części swojego pola (y 3–17 z 24), więc samo
 * wyśrodkowanie pudełka zostawia go 1,75 px nad środkiem. Zsuwamy go do osi napisu.
 */
.mbpf-streak-mini .mbpf-i { color: var(--mbpf-mod-orange); transform: translateY(.75px); }

/**
 * Inicjały zajmują ok. 43% średnicy kółka — przy 35% ginęły w plamie koloru.
 * `line-height: 1` jest tu istotna: bez niej pudełko wiersza (interlinia 1,55)
 * jest wyższe od wersalika i litera siada poniżej środka kółka.
 */
.mbpf-avatar {
	border-radius: 50%; background: var(--mbpf-green); color: #fff; overflow: hidden;
	display: grid; place-items: center; flex: none;
	font-weight: 800; line-height: 1; letter-spacing: .01em;
	width: 32px; height: 32px; font-size: 14px;
}
.mbpf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mbpf-avatar--lg { width: 46px; height: 46px; font-size: 20px; }
.mbpf-avatar--xl { width: 56px; height: 56px; font-size: 24px; }

/* ---- menu konta ---- */
.mbpf-account { position: relative; }
/* Bez tła przy najechaniu — sygnałem jest sama strzałka. */
.mbpf-account__btn {
	display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
	padding: 0; border: 0; background: none;
}
.mbpf-account__chev { color: var(--mbpf-ink-3); display: grid; place-items: center; transition: transform .18s ease, color .14s; }
.mbpf-account__btn:hover .mbpf-account__chev { color: var(--mbpf-green); }
.mbpf-account.is-open .mbpf-account__chev { transform: rotate(180deg); }

.mbpf-account__menu {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
	width: 320px; max-width: calc(100vw - 28px);
	background: #fff; border: 1px solid var(--mbpf-line); border-radius: 14px;
	box-shadow: 0 4px 10px -6px rgba(17,24,39,.15), 0 22px 40px -22px rgba(17,24,39,.45);
	padding: 8px; overflow: hidden;
}
.mbpf-account__menu[hidden] { display: none; }

.mbpf-account__head { display: flex; align-items: center; gap: 14px; padding: 12px 12px 14px; }
.mbpf-account__name { display: block; font-weight: 700; font-size: 15px; line-height: 1.3;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbpf-account__mail { display: block; font-size: 13px; color: var(--mbpf-ink-3); line-height: 1.35;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mbpf-account__hint {
	display: flex; align-items: center; gap: 9px; margin: 0 4px 8px;
	padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
	background: var(--mbpf-green-50); color: var(--mbpf-green);
}
.mbpf .a.mbpf-account__hint, .mbpf a.mbpf-account__hint { color: var(--mbpf-green); }
.mbpf-account__hint:hover { background: var(--mbpf-green-100); }

.mbpf-account__list { display: flex; flex-direction: column; border-top: 1px solid var(--mbpf-line-2); padding-top: 6px; }
.mbpf-account__list a,
.mbpf-account__out {
	display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
	transition: background .14s, color .14s;
}
.mbpf-account__list a:hover { background: var(--mbpf-green-50); }
.mbpf-account__ico { color: var(--mbpf-ink-3); display: grid; place-items: center; flex: none; }
.mbpf-account__list a:hover .mbpf-account__ico,
.mbpf .mbpf-account__list a:hover .mbpf-account__label,
.mbpf .mbpf-account__list a:hover .mbpf-account__desc { color: var(--mbpf-green); }
.mbpf-account__label { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.mbpf-account__desc { display: block; font-size: 12.5px; color: var(--mbpf-ink-3); line-height: 1.35;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mbpf-account__out {
	margin-top: 6px; border-top: 1px solid var(--mbpf-line-2); border-radius: 0 0 10px 10px;
	padding-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--mbpf-bad, #99372e);
}
.mbpf-account__out .mbpf-account__ico { color: inherit; }
.mbpf-account__out:hover { background: #fdf1f0; }
.mbpf a.mbpf-account__out, .mbpf a.mbpf-account__out:hover { color: #99372e; }

.mbpf-topprog { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--mbpf-ink-3); }
/* Domyślne 26% średnicy dawało przy tym pierścieniu 11 px — za mało, żeby odczytać procent. */
.mbpf-topprog .mbpf-ring__label { font-size: calc(var(--mbpf-ring-size) * .28); color: var(--mbpf-ink); }
/* Sprawdzone: „100%" ma przy tej skali 29 px, a światło w pierścieniu 34 px — mieści się. */

/* ============================ elementy wspólne ============================ */

.mbpf-card {
	background: var(--mbpf-card);
	border: 1px solid var(--mbpf-line);
	border-radius: var(--mbpf-p-radius);
	box-shadow: var(--mbpf-p-shadow);
}
.mbpf-card__pad { padding: 22px 24px; }

.mbpf-h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.mbpf-h3 { font-size: 16px; font-weight: 700; margin: 0; }
.mbpf-muted { color: var(--mbpf-ink-3); }
.mbpf-small { font-size: 13px; }

.mbpf-pbtn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 13px 22px; border-radius: 11px; border: 1px solid transparent;
	font-weight: 600; font-size: 15px; cursor: pointer; text-align: left;
	transition: background .15s, border-color .15s, transform .05s;
}
.mbpf-pbtn:active { transform: translateY(1px); }
.mbpf-pbtn--primary { background: var(--mbpf-green); color: #fff; }
.mbpf-pbtn--primary:hover { background: var(--mbpf-green-600); }
.mbpf-pbtn--ghost { background: #fff; color: var(--mbpf-green); border-color: var(--mbpf-line); }
.mbpf-pbtn--ghost:hover { border-color: var(--mbpf-green); background: var(--mbpf-green-50); color: var(--mbpf-green); }
.mbpf-pbtn--soft { background: var(--mbpf-green-50); color: var(--mbpf-green); }
.mbpf-pbtn--soft:hover { background: var(--mbpf-green-100); }
.mbpf-pbtn--block { width: 100%; }
.mbpf-pbtn__sub { display: block; font-weight: 400; font-size: 12.5px; opacity: .85; margin-top: 1px; }
.mbpf-pbtn__stack { display: flex; flex-direction: column; line-height: 1.25; }

.mbpf-pchip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px; border-radius: 7px; font-size: 11px; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase;
	background: var(--mbpf-bg); color: var(--mbpf-ink-3);
}
.mbpf-pchip--course { background: var(--mbpf-green-50); color: var(--mbpf-green); }
.mbpf-pchip--violet { background: var(--mbpf-mod-violet-bg); color: var(--mbpf-mod-violet); }

.mbpf-bar { height: 8px; border-radius: 99px; background: var(--mbpf-track); overflow: hidden; }
.mbpf-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--mbpf-green-400); transition: width .35s ease; }
.mbpf-bar--slim { height: 6px; }

.mbpf-ring { position: relative; width: var(--mbpf-ring-size); height: var(--mbpf-ring-size); display: grid; place-items: center; }
.mbpf-ring svg { position: absolute; inset: 0; }
.mbpf-ring__bar { transition: stroke-dashoffset .5s ease; }
.mbpf-ring__label { font-weight: 700; font-size: calc(var(--mbpf-ring-size) * .26); letter-spacing: -.02em; }

@media (prefers-reduced-motion: reduce) {
	.mbpf-bar > i, .mbpf-ring__bar { transition: none; }
}

/* symbol modułu */
.mbpf-mod-icon {
	width: 52px; height: 52px; border-radius: 12px; flex: none;
	display: grid; place-items: center; font-weight: 700; font-size: 18px; letter-spacing: -.02em;
}
.mbpf-mod-glyph { display: inline-flex; align-items: center; line-height: 1; }
.mbpf-mod-glyph--sm { font-size: 14px; }
.mbpf-mod-glyph--emoji { font-size: 22px; }

/* własna ikona wgrana przez administratora */
.mbpf-mod-glyph--file { width: 60%; height: 60%; max-width: 34px; max-height: 34px; object-fit: contain; }
.mbpf-modhead__ico .mbpf-mod-glyph--file { max-width: 38px; max-height: 38px; }
.mbpf-recent__ico .mbpf-mod-glyph--file { max-width: 30px; max-height: 30px; }
.mbpf-mod-glyph sup { font-size: .62em; vertical-align: super; }
.mbpf-root { border-top: 1.5px solid currentColor; padding: 0 2px; margin-left: -1px; }
.mbpf-frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-size: 13px; }
.mbpf-frac b { display: block; }
.mbpf-frac i { display: block; border-top: 1.6px solid currentColor; font-style: normal; padding-top: 1px; margin-top: 1px; }

.mbpf-mod--green  { background: var(--mbpf-mod-green-bg);  color: var(--mbpf-mod-green); }
.mbpf-mod--violet { background: var(--mbpf-mod-violet-bg); color: var(--mbpf-mod-violet); }
.mbpf-mod--orange { background: var(--mbpf-mod-orange-bg); color: var(--mbpf-mod-orange); }
.mbpf-mod--pink   { background: var(--mbpf-mod-pink-bg);   color: var(--mbpf-mod-pink); }
.mbpf-mod--blue   { background: var(--mbpf-mod-blue-bg);   color: var(--mbpf-mod-blue); }
.mbpf-mod--teal   { background: var(--mbpf-mod-teal-bg);   color: var(--mbpf-mod-teal); }
.mbpf-mod--amber  { background: var(--mbpf-mod-amber-bg);  color: var(--mbpf-mod-amber); }
.mbpf-mod--indigo { background: var(--mbpf-mod-indigo-bg); color: var(--mbpf-mod-indigo); }

/* moduł jako pełne wypełnienie (nagłówek w odtwarzaczu) */
.mbpf-mod-icon--solid.mbpf-mod--green  { background: var(--mbpf-mod-green);  color: #fff; }
.mbpf-mod-icon--solid.mbpf-mod--violet { background: var(--mbpf-mod-violet); color: #fff; }
.mbpf-mod-icon--solid.mbpf-mod--orange { background: var(--mbpf-mod-orange); color: #fff; }
.mbpf-mod-icon--solid.mbpf-mod--pink   { background: var(--mbpf-mod-pink);   color: #fff; }
.mbpf-mod-icon--solid.mbpf-mod--blue   { background: var(--mbpf-mod-blue);   color: #fff; }
.mbpf-mod-icon--solid.mbpf-mod--teal   { background: var(--mbpf-mod-teal);   color: #fff; }
.mbpf-mod-icon--solid.mbpf-mod--amber  { background: var(--mbpf-mod-amber);  color: #fff; }
.mbpf-mod-icon--solid.mbpf-mod--indigo { background: var(--mbpf-mod-indigo); color: #fff; }

/* ============================ EKRAN 1: dashboard ============================ */

.mbpf-ppage { padding: 26px 0 60px; min-height: 60vh; }
.mbpf-stack { display: flex; flex-direction: column; gap: 20px; }

/**
 * Proporcje kolumn dobrane tak, żeby zmieściły się dwie rzeczy naraz:
 * przycisk „Kontynuuj naukę" (min. 380 px) w kolumnie środkowej
 * i nagłówek postępu z komunikatem motywującym w jednej linii w kolumnie prawej.
 * Kolumna z grafiką oddaje część miejsca — przy skalowaniu z zachowaniem
 * proporcji okładka i tak nie traci na tym kadru.
 */
.mbpf-phero { display: grid; grid-template-columns: .85fr 1.25fr 1.15fr; gap: 0; overflow: hidden; }
/**
 * Grafika kursu w całości, nie przycięta.
 * `cover` obcinało boki okładek (napis „kurs 8-klasisty" tracił początek),
 * więc skalujemy z zachowaniem proporcji i wyśrodkowujemy w polu z zapasem.
 */
.mbpf-phero__media {
	background: linear-gradient(135deg, #f4f7f5, #eef2f6);
	position: relative; min-height: 210px;
	display: grid; place-items: center; padding: 14px;
}
.mbpf-phero__media img {
	width: 100%; height: 100%;
	object-fit: contain; object-position: center;
	border-radius: 10px;
}
.mbpf-phero__media--empty { background: linear-gradient(135deg, var(--mbpf-green-50), #eef2f6); }
.mbpf-phero__ph { color: var(--mbpf-green); opacity: .45; }
.mbpf-phero__body { padding: 26px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; justify-content: center; }
/* Bez tego plakietka „KURS" rozciągałaby się na całą szerokość kolumny. */
.mbpf-phero__body > * { max-width: 100%; }
.mbpf-phero__title { font-size: 27px; font-weight: 700; line-height: 1.18; letter-spacing: -.02em; margin: 0; }
.mbpf-phero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 14px; color: var(--mbpf-ink-3); }

/**
 * Ikona równo z tekstem.
 * `align-items: center` zrównuje ŚRODKI PUDEŁEK, a pudełko wiersza (interlinia 1,55)
 * jest wyższe od samych liter — przez co ikona siedziała 0,9 px pod optycznym
 * środkiem tekstu i wyglądała na przekrzywioną. Interlinia 1 zaciska pudełko
 * do wysokości glifów, więc oba środki się pokrywają.
 */
.mbpf-phero__mi { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.mbpf-phero__mi > * { line-height: 1; }
.mbpf-phero__mi .mbpf-i { color: var(--mbpf-ink-4); flex: none; display: block; }
/* Gwiazdka oceny zostaje złota — pozostałe ikony są tylko podpowiedzią, nie akcentem. */
.mbpf-phero__mi .mbpf-i--star { color: #f59e0b; }
.mbpf-phero__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mbpf-ink-4); }
.mbpf-phero__cta { margin-top: 6px; align-self: flex-start; }

/**
 * Główne wezwanie do działania: pomarańczowe, szersze od pozostałych przycisków
 * i z wyraźną ikoną odtwarzania w jasnym kółku — ma być pierwszą rzeczą,
 * w którą kursant klika po wejściu.
 */
.mbpf-pcta {
	background: var(--mbpf-orange);
	color: #fff;
	/* Treść przy lewej krawędzi — bazowy .mbpf-pbtn wyśrodkowuje, tutaj tego nie chcemy. */
	justify-content: flex-start;
	text-align: left;
	min-width: min(100%, 380px);
	padding: 16px 28px 16px 18px;
	gap: 16px;
	border-radius: 14px;
	box-shadow: 0 8px 20px -10px rgba(204, 74, 8, .65);
}
.mbpf-pcta:hover { background: var(--mbpf-orange-600); color: #fff; box-shadow: 0 10px 22px -10px rgba(204, 74, 8, .75); }
.mbpf-pcta__play {
	width: 46px; height: 46px; flex: none; border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	display: grid; place-items: center;
	transition: background .14s;
}
.mbpf-pcta:hover .mbpf-pcta__play { background: rgba(255, 255, 255, .3); }
.mbpf-pcta__play .mbpf-i { margin-left: 3px; }

.mbpf-pcta .mbpf-pbtn__stack { min-width: 0; align-items: flex-start; }
.mbpf-pcta__t { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }

/**
 * Nazwa działu jako podpis.
 * Wersaliki z rozstrzeleniem, bo w bazie część działów jest zapisana wielkimi
 * literami, a część nie — bez tego ten sam element wyglądałby raz tak, raz tak.
 * Skrócenie wielokropkiem chroni przed rozjechaniem przy długich nazwach.
 */
.mbpf-pcta .mbpf-pbtn__sub {
	font-size: 13px; font-weight: 500; letter-spacing: .075em; text-transform: uppercase;
	opacity: .86; margin-top: 4px; max-width: 100%;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Waga podniesiona — Elementor przemalowuje kolor każdego <a> przy najechaniu. */
.mbpf a.mbpf-pcta,
.mbpf a.mbpf-pcta:hover,
.mbpf a.mbpf-pcta:hover .mbpf-pbtn__sub,
.mbpf a.mbpf-pcta:hover .mbpf-pcta__t { color: #fff; }
.mbpf a.mbpf-pcta { background-color: var(--mbpf-orange); }
.mbpf a.mbpf-pcta:hover { background-color: var(--mbpf-orange-600); }
.mbpf-phero__side {
	border-left: 1px solid var(--mbpf-line); padding: 24px;
	display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.mbpf-phero__side .mbpf-h3 { margin: 0; }

/*
 * Nagłówek postępu i komunikat motywujący w jednej linii, rozepchnięte do krawędzi
 * kafelka: „Twój postęp" przy lewej, plakietka z płomieniem przy prawej.
 */
.mbpf-phero__sidehead {
	width: 100%; display: flex; flex-direction: row; align-items: center;
	justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.mbpf-phero__sidehead .mbpf-h3 { flex: none; white-space: nowrap; }

.mbpf-mot {
	display: inline-flex; align-items: center; gap: 7px; line-height: 1.3;
	padding: 7px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
	text-align: center; min-width: 0;
}
.mbpf-mot .mbpf-i { flex: none; }
.mbpf-mot--blue   { background: var(--mbpf-mod-blue-bg);   color: var(--mbpf-mod-blue); }
.mbpf-mot--orange { background: var(--mbpf-mod-orange-bg); color: #b5490c; }
.mbpf-mot--violet { background: var(--mbpf-mod-violet-bg); color: var(--mbpf-mod-violet); }
.mbpf-mot--teal   { background: var(--mbpf-mod-teal-bg);   color: #0d7a70; }
.mbpf-mot--green  { background: var(--mbpf-green-50);      color: var(--mbpf-green); }
.mbpf-mot--amber  { background: var(--mbpf-mod-amber-bg);  color: #96620a; }
.mbpf-phero__sidefoot { width: 100%; display: flex; flex-direction: column; gap: 8px; }

/* Licznik dni do egzaminu — ikona i tekst jako jedna wyśrodkowana linia. */
.mbpf-examline {
	margin: 6px 0 0; display: flex; align-items: center; justify-content: center;
	gap: 7px; line-height: 1;
}

.mbpf-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mbpf-tile { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.mbpf-tile__ico { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; }
.mbpf-tile__ico--book  { background: #ede9fe; color: #7c5cd6; }
.mbpf-tile__ico--clock { background: var(--mbpf-green-50); color: var(--mbpf-green); }
.mbpf-tile__ico--flame { background: #ffedd5; color: #f97316; }
.mbpf-tile__ico--cup   { background: #fef3c7; color: #f59e0b; }
.mbpf-tile__k { font-size: 13px; color: var(--mbpf-ink-3); }
.mbpf-tile__v { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
/* Rzeczownik przy liczbie — mniejszy, żeby sama liczba dalej niosła kafelek. */
.mbpf-tile__unit { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.mbpf-tile__s { font-size: 12.5px; color: var(--mbpf-ink-4); }

.mbpf-duo { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; }

.mbpf-recent { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--mbpf-line); border-radius: var(--mbpf-radius-sm); }
.mbpf-recent__ico { width: 54px; height: 54px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--mbpf-green-50); color: var(--mbpf-green); }
.mbpf-recent__body { flex: 1; min-width: 0; }
.mbpf-recent__title { font-weight: 600; font-size: 15.5px; margin-bottom: 2px; }
.mbpf-recent__bar { margin-top: 8px; max-width: 260px; }

.mbpf-plan { display: flex; gap: 18px; align-items: flex-start; }
.mbpf-plan__art { width: 120px; flex: none; opacity: .95; }

.mbpf-banner {
	display: flex; align-items: center; gap: 18px; padding: 20px 24px;
	background: var(--mbpf-green-50); border: 1px solid var(--mbpf-green-100); border-radius: var(--mbpf-p-radius);
}
.mbpf-banner__ico { width: 68px; height: 68px; flex: none; display: grid; place-items: center; color: #f59e0b; }
.mbpf-banner__body { flex: 1; min-width: 0; }
.mbpf-banner__title { font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; color: var(--mbpf-ink); }
/**
 * Odstęp celowo mały: nagłówek ma już interlinię 1,2, która sama tworzy prześwit
 * pod nim. Te dwa napisy mają czytać się jako jedna para, nie dwa osobne akapity.
 */
.mbpf-banner__sub { margin-top: 4px; font-size: 15.5px; line-height: 1.45; color: var(--mbpf-ink-2); }

/* ---- program kursu ---- */
.mbpf-curric__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.mbpf-toggle-all { background: none; border: 0; cursor: pointer; color: var(--mbpf-ink-3); font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; }
.mbpf-toggle-all:hover { background: var(--mbpf-green-50); color: var(--mbpf-green); }

.mbpf-modules { display: flex; flex-direction: column; gap: 10px; }
.mbpf-module { border: 1px solid var(--mbpf-line); border-radius: var(--mbpf-radius-sm); overflow: hidden; background: #fff; }
/**
 * Wiersz modułu składa się z dwóch części:
 *   – przycisku rozwijającego listę lekcji (ikona, nazwa, pasek, procent),
 *   – osobnego odnośnika „Start" / „Kontynuuj", który prowadzi wprost do lekcji.
 * Odnośnik nie może być zagnieżdżony w przycisku, stąd wiersz jest kontenerem.
 */
.mbpf-module__row { display: flex; align-items: center; padding-right: 16px; }
.mbpf-module__row:hover { background: var(--mbpf-green-50); }

.mbpf-module__main {
	display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(120px, 240px) auto;
	align-items: center; gap: 16px; padding: 14px 16px;
	flex: 1; min-width: 0;
	background: none; border: 0; cursor: pointer; text-align: left;
}
.mbpf-module__name { font-weight: 600; font-size: 15px; letter-spacing: -.005em; }
.mbpf-module__sub { font-size: 12.5px; color: var(--mbpf-ink-4); }
.mbpf-module__pct { font-size: 13.5px; color: var(--mbpf-ink-3); min-width: 42px; text-align: right; }
.mbpf-module__act { display: flex; align-items: center; gap: 10px; flex: none; }
.mbpf-module__chev {
	width: 28px; height: 28px; flex: none; display: grid; place-items: center;
	color: var(--mbpf-ink-4); cursor: pointer; background: none; border: 0;
	transition: transform .18s ease, color .14s;
}
/* Etykieta strzałki pojawia się dopiero na mobile — na desktopie zostaje sama ikona. */
.mbpf-module__chevtxt { display: none; }
.mbpf-module.is-open .mbpf-module__chev { transform: rotate(180deg); }
.mbpf-module__row:hover .mbpf-module__chev { color: var(--mbpf-green); }
.mbpf-done {
	width: 30px; height: 30px; border-radius: 50%; background: var(--mbpf-green-400); color: #fff;
	display: grid; place-items: center; flex: none;
}

/**
 * Plakietki akcji modułu.
 * „Kontynuuj" dotyczy jednego, rozpoczętego modułu — może być głośne (fiolet).
 * „Start" dotyczy wszystkich nietkniętych, więc jest cichsze: obrys zamiast plamy koloru.
 * Dziesięć wypełnionych plakietek pod rząd zamieniłoby listę w szum.
 */
.mbpf-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 600;
	white-space: nowrap; border: 1px solid transparent;
	transition: background .14s, color .14s, border-color .14s;
}
/* Waga podniesiona (.mbpf a.klasa), bo plakietki to odnośniki, a Elementor
   nadpisuje kolor każdego <a> regułą o wadze (0,2,1). */
.mbpf a.mbpf-pill--go { background: var(--mbpf-mod-violet-bg); color: var(--mbpf-mod-violet); }
.mbpf a.mbpf-pill--start { background: #fff; color: var(--mbpf-green); border-color: var(--mbpf-line); }

.mbpf .mbpf-module__row:hover a.mbpf-pill--go { background: var(--mbpf-green-100); color: var(--mbpf-green); }
.mbpf .mbpf-module__row:hover a.mbpf-pill--start { border-color: var(--mbpf-green); color: var(--mbpf-green); }

/* Najechanie wprost na plakietkę: wypełnienie zielenią, napis biały. */
.mbpf .mbpf-module__row a.mbpf-pill:hover,
.mbpf a.mbpf-pill:hover {
	background: var(--mbpf-green); color: #fff; border-color: var(--mbpf-green);
}

.mbpf-module__panel { display: none; border-top: 1px solid var(--mbpf-line-2); padding: 6px 16px 12px; }
.mbpf-module.is-open .mbpf-module__panel { display: block; }
.mbpf-module__goal { font-size: 13.5px; color: var(--mbpf-ink-3); padding: 10px 0 4px; }

.mbpf-lessons { display: flex; flex-direction: column; }
.mbpf-lesson-row {
	display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 9px;
	font-size: 14px; color: var(--mbpf-ink-2);
}
.mbpf-lesson-row:hover { background: var(--mbpf-green-50); color: var(--mbpf-green); }
.mbpf-lesson-row__ico { color: var(--mbpf-ink-4); flex: none; display: grid; place-items: center; width: 22px; }
.mbpf-lesson-row.is-done .mbpf-lesson-row__ico { color: var(--mbpf-green-400); }
.mbpf-lesson-row__title { flex: 1; min-width: 0; }
.mbpf-lesson-row__time { font-size: 12.5px; color: var(--mbpf-ink-4); }

.mbpf-empty { padding: 40px 20px; text-align: center; color: var(--mbpf-ink-3); }
.mbpf-empty__t { font-weight: 600; color: var(--mbpf-ink); margin-bottom: 4px; }

/* ---- wybierak kursu ---- */

/**
 * Nagłówek jest na tyle duży, że musi stać nad listą, a nie w jednej linii z nią —
 * dlatego ten sam układ na wąskim i szerokim ekranie:
 *   Wybierz zakupiony kurs .......... ‹ ›
 *   [============ lista kursów ============]
 */
.mbpf-picker {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-areas:
		"label prev next"
		"track track track";
	align-items: center; row-gap: 14px; column-gap: 8px; min-width: 0;
}
.mbpf-picker__label {
	grid-area: label; margin: 0;
	font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em;
	color: var(--mbpf-ink);
}
.mbpf-picker__arrow--prev { grid-area: prev; }
.mbpf-picker__arrow--next { grid-area: next; }
.mbpf-picker__track { grid-area: track; }

.mbpf-picker__track {
	display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth;
	min-width: 0; padding: 2px 0;
	scrollbar-width: none; -ms-overflow-style: none;
	overscroll-behavior-x: contain;
}
.mbpf-picker__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .mbpf-picker__track { scroll-behavior: auto; } }

/**
 * Strzałki zostają na miejscu i wygaszają się, gdy nie ma dokąd przewijać.
 * Znikanie przesuwałoby cały pasek przy każdym dojechaniu do krańca.
 */
.mbpf-picker__arrow {
	width: 32px; height: 32px; border-radius: 50%;
	display: grid; place-items: center; cursor: pointer;
	border: 1px solid var(--mbpf-line); color: var(--mbpf-ink-2); background: #fff;
	transition: border-color .14s, color .14s, background .14s, opacity .14s;
}
.mbpf-picker__arrow:disabled { opacity: .35; cursor: default; }
.mbpf-picker__arrow:not(:disabled):hover { border-color: var(--mbpf-green); color: var(--mbpf-green); background: var(--mbpf-green-50); }

.mbpf button.mbpf-picker__arrow { padding: 0; margin: 0; width: 32px; border-radius: 50%; background-color: #fff !important; border-color: var(--mbpf-line); }
.mbpf button.mbpf-picker__arrow:not(:disabled):hover { background-color: var(--mbpf-green-50) !important; border-color: var(--mbpf-green); color: var(--mbpf-green); }

.mbpf-course-chip {
	display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; flex: none;
	border: 1px solid var(--mbpf-line); border-radius: 10px; background: #fff; font-size: 14px;
	white-space: nowrap; transition: background .14s, color .14s, border-color .14s;
}
/**
 * Najechanie wygląda jak kurs aktywny — miętowe tło, zielony napis.
 * Bez zmiany grubości pisma: kafelki mają stałą szerokość, więc pogrubienie
 * przy najechaniu przesuwałoby całą listę. Pogrubiony zostaje tylko wybrany kurs.
 */
.mbpf-course-chip:hover,
.mbpf-course-chip:focus-visible {
	border-color: var(--mbpf-green); background: var(--mbpf-green-50); color: var(--mbpf-green);
}
.mbpf-course-chip:hover small,
.mbpf-course-chip:focus-visible small { color: var(--mbpf-green); }
.mbpf-course-chip.is-active { border-color: var(--mbpf-green); background: var(--mbpf-green-50); color: var(--mbpf-green); font-weight: 600; }
.mbpf-course-chip.is-active small { color: var(--mbpf-green); }
.mbpf-course-chip small { color: var(--mbpf-ink-4); font-weight: 400; }

/* ============================ EKRAN 2: odtwarzacz ============================ */

.mbpf-player { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px 0 60px; }

/* Pasek boczny przykleja się poniżej nagłówka serwisu i podpaska panelu. */
.mbpf-side {
	position: sticky;
	top: calc(var(--mbpf-header-h, 0px) + 80px);
	display: flex; flex-direction: column; gap: 14px;
	max-height: calc(100vh - var(--mbpf-header-h, 0px) - 100px);
}
.mbpf-side__back { display: inline-flex; align-items: center; gap: 8px; color: var(--mbpf-green); font-weight: 600; font-size: 14px; padding: 2px 0; }
.mbpf-side__course { display: flex; gap: 12px; padding: 12px; }
.mbpf-side__thumb { width: 84px; height: 58px; border-radius: 9px; overflow: hidden; flex: none; background: var(--mbpf-bg); }
.mbpf-side__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mbpf-side__ct { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.mbpf-side__scroll { overflow-y: auto; overscroll-behavior: contain; flex: 1; }

.mbpf-side-mod { border-bottom: 1px solid var(--mbpf-line-2); }
.mbpf-side-mod:last-child { border-bottom: 0; }
.mbpf-side-mod__row {
	display: grid; grid-template-columns: 30px minmax(0,1fr) auto auto; align-items: center; gap: 10px;
	width: 100%; padding: 13px 14px; background: none; border: 0; cursor: pointer; text-align: left; font-size: 13.5px;
}
.mbpf-side-mod__row:hover { background: var(--mbpf-green-50); }
.mbpf-side-mod__no { color: var(--mbpf-ink-4); font-weight: 600; }
.mbpf-side-mod__name { font-weight: 600; text-transform: uppercase; font-size: 12.5px; letter-spacing: .02em; }
.mbpf-side-mod__cnt { color: var(--mbpf-ink-4); font-size: 12.5px; }
.mbpf-side-mod__chev { color: var(--mbpf-ink-4); transition: transform .18s ease; }
.mbpf-side-mod.is-open .mbpf-side-mod__chev { transform: rotate(180deg); }
.mbpf-side-mod.is-current .mbpf-side-mod__row { background: var(--mbpf-green-50); }
.mbpf-side-mod__list { display: none; padding: 0 8px 10px; }
.mbpf-side-mod.is-open .mbpf-side-mod__list { display: block; }

.mbpf-sl {
	display: grid; grid-template-columns: 22px minmax(0,1fr) auto 16px; align-items: center; gap: 10px;
	padding: 9px 10px; border-radius: 9px; font-size: 13px; color: var(--mbpf-ink-2); line-height: 1.35;
}
.mbpf-sl:hover { background: var(--mbpf-green-50); color: var(--mbpf-green); }
.mbpf-sl__ico { color: var(--mbpf-ink-4); display: grid; place-items: center; }
.mbpf-sl__time { font-size: 12px; color: var(--mbpf-ink-4); }
.mbpf-sl__state { width: 16px; height: 16px; border-radius: 50%; border: 1.6px solid var(--mbpf-line); }
.mbpf-sl.is-done .mbpf-sl__state { background: var(--mbpf-green-400); border-color: var(--mbpf-green-400); }
.mbpf-sl.is-done .mbpf-sl__ico { color: var(--mbpf-green-400); }
.mbpf-sl.is-current { background: var(--mbpf-green-50); color: var(--mbpf-green); font-weight: 600; box-shadow: inset 3px 0 0 var(--mbpf-green); }
.mbpf-sl.is-current .mbpf-sl__ico { color: var(--mbpf-green); }

.mbpf-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.mbpf-modhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mbpf-modhead__ico { width: 58px; height: 58px; border-radius: 13px; font-size: 20px; }
.mbpf-modhead__t { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0; text-transform: uppercase; }
.mbpf-modhead__meta { font-size: 13.5px; color: var(--mbpf-ink-3); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mbpf-modhead__act { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Skróty do edycji — widzi je tylko prowadzący, więc mają być dyskretne. */
.mbpf-pbtn--sm { padding: 9px 14px; font-size: 13.5px; border-radius: 9px; }
.mbpf a.mbpf-pbtn--ghost { color: var(--mbpf-green); }

.mbpf-goal {
	display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center;
	padding: 18px 22px; border: 1px solid var(--mbpf-mod-violet-bg); background: #faf9ff; border-radius: var(--mbpf-p-radius);
}
.mbpf-goal__left { display: flex; gap: 14px; align-items: flex-start; }
.mbpf-goal__ico { width: 42px; height: 42px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--mbpf-mod-violet-bg); color: var(--mbpf-mod-violet); }
.mbpf-goal__k { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.mbpf-goal__right { display: flex; flex-direction: column; gap: 7px; }
.mbpf-goal__rowtop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mbpf-goal__pct { color: var(--mbpf-mod-violet); }
.mbpf-goal .mbpf-bar > i { background: var(--mbpf-mod-violet); }

/* Moduł zrobiony w całości — procent i pasek przechodzą na zieleń ukończenia. */
.mbpf-goal.is-full .mbpf-goal__pct { color: var(--mbpf-green); }
.mbpf-goal.is-full .mbpf-bar > i { background: var(--mbpf-green); }

.mbpf-video { border-radius: var(--mbpf-p-radius); overflow: hidden; background: #000; position: relative; aspect-ratio: 16 / 9; }
.mbpf-video iframe, .mbpf-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mbpf-video__none { display: grid; place-items: center; height: 100%; color: #9ca3af; font-size: 14px; background: #111827; }

/* treść lekcji z edytora — filmy, obrazki i podpisy wstawione w treści wpisu */
.mbpf-lessonbody { font-size: 15px; line-height: 1.6; color: var(--mbpf-ink-2); }
.mbpf-lessonbody > :first-child { margin-top: 0; }
.mbpf-lessonbody > :last-child { margin-bottom: 0; }
.mbpf-lessonbody p { margin: 0 0 14px; }
.mbpf-lessonbody strong, .mbpf-lessonbody b { color: var(--mbpf-ink); }
.mbpf-lessonbody h1, .mbpf-lessonbody h2, .mbpf-lessonbody h3, .mbpf-lessonbody h4 {
	color: var(--mbpf-ink); line-height: 1.3; margin: 26px 0 10px;
}
.mbpf-lessonbody a { color: var(--mbpf-green); }
.mbpf-lessonbody img { max-width: 100%; height: auto; border-radius: 12px; }
.mbpf-lessonbody .mbpf-embed {
	position: relative; width: 100%; max-width: 640px; margin: 0 auto 22px;
	border-radius: 12px; overflow: hidden; background: #000;
}
.mbpf-lessonbody .mbpf-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mbpf-lessonbody .wpview-wrap { margin: 0 0 22px; }
.mbpf-lessonbody .mce-shim, .mbpf-lessonbody .wpview-end { display: none; }

.mbpf-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--mbpf-line); }
.mbpf-tab {
	padding: 12px 16px; background: none; border: 0; border-bottom: 2px solid transparent;
	cursor: pointer; font-size: 14.5px; color: var(--mbpf-ink-3); font-weight: 500;
}
.mbpf-tab:hover { color: var(--mbpf-green); background: var(--mbpf-green-50); }
.mbpf-tab.is-active { color: var(--mbpf-green); border-bottom-color: var(--mbpf-green); font-weight: 600; }
/*
 * Reset przycisków panelu (`.mbpf button[class*="mbpf-"]`) ma wagę 0,2,1 i wygrywał
 * z regułami zakładek — przez to aktywna zakładka nigdzie się nie wyróżniała. Powtarzamy
 * je z nazwą elementu, żeby wagi się zrównały.
 */
.mbpf button.mbpf-tab { color: var(--mbpf-ink-3); font-weight: 500; }
.mbpf button.mbpf-tab:hover { color: var(--mbpf-green); background: var(--mbpf-green-50); }
.mbpf button.mbpf-tab.is-active { color: var(--mbpf-green); font-weight: 600; border-bottom-color: var(--mbpf-green); }

.mbpf-tabpanel { display: none; }
.mbpf-tabpanel.is-active { display: block; }

/**
 * Karta „O lekcji”.
 *
 * Dwie kolumny — opis i lista efektów — ale `auto-fit` zwija kolumnę bez zawartości.
 * Efektów nie ma prawie żadna lekcja (pole da się wypełnić tylko na klasycznym ekranie
 * edycji), więc sztywne `1fr 1fr` zostawiało pustą połowę karty, a opis łamał się po
 * ~30 znakach w wierszu. Przy `auto-fit` sam opis dostaje całą szerokość karty.
 * To samo zachowanie zastępuje dawną regułę z zapytania medialnego dla wąskich ekranów.
 */
.mbpf-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px 36px; align-items: start; }
.mbpf-about__k { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.mbpf-about__k .mbpf-i { color: var(--mbpf-mod-violet); }
.mbpf-outcomes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mbpf-outcomes li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--mbpf-ink-2); }
.mbpf-outcomes .mbpf-i { color: var(--mbpf-green-400); flex: none; margin-top: 2px; }

/**
 * Tekst ciągły opisu.
 *
 * Wcześniej szedł jako `.mbpf-small .mbpf-muted` — 13 px w przygaszonej szarości, bez
 * odstępu między akapitami. To jest treść do czytania, nie podpis, więc dostaje wielkość
 * i interlinię jak treść lekcji (`.mbpf-lessonbody`).
 *
 * `max-width` pilnuje miary wiersza: powyżej ~70 znaków oko gubi początek następnej linii,
 * więc opis nie rozciąga się na całą szerokość karty, choćby miejsce było.
 */
.mbpf-prose { font-size: 15px; line-height: 1.7; color: var(--mbpf-ink-2); max-width: 62ch; }
.mbpf-prose > :first-child { margin-top: 0; }
.mbpf-prose > :last-child { margin-bottom: 0; }
.mbpf-prose p { margin: 0 0 13px; }
.mbpf-prose strong, .mbpf-prose b { color: var(--mbpf-ink); }
.mbpf-prose ul { list-style: none; margin: 0 0 13px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mbpf-prose li { position: relative; padding-left: 19px; }
/* Kropka na wysokości środka pierwszego wiersza: pół interlinii minus pół kropki. */
.mbpf-prose li::before {
	content: ""; position: absolute; left: 4px; top: calc(.85em - 2.5px);
	width: 5px; height: 5px; border-radius: 50%; background: var(--mbpf-green-400);
}

.mbpf-next { background: var(--mbpf-green-50); border-color: var(--mbpf-green-100); }
.mbpf-next__k { font-size: 13px; color: var(--mbpf-green); font-weight: 700; margin-bottom: 6px; }
.mbpf-next__t { font-weight: 600; font-size: 15px; line-height: 1.35; margin-bottom: 14px; }
.mbpf-next--wide { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ---- quiz ---- */
.mbpf-quizbox__head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--mbpf-line-2); margin-bottom: 18px; }
.mbpf-quizbox__ico { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--mbpf-mod-violet-bg); color: var(--mbpf-mod-violet); }

/**
 * Quiz renderuje Tutor własnym znacznikiem. Nie przejmujemy nad nim kontroli —
 * jedynie zdejmujemy jego ramkę i tło, żeby wtopił się w naszą kartę.
 */
.mbpf-quizbox__body .tutor-quiz-wrapper,
.mbpf-quizbox__body > .tutor-card,
.mbpf-quizbox__body .tutor-quiz-single-wrapper {
	background: none; border: 0; box-shadow: none; padding: 0; margin: 0;
}
.mbpf-quizbox__body .tutor-quiz-attempt-details,
.mbpf-quizbox__body .tutor-quiz-question-wrapper { max-width: 100%; }
.mbpf-quizbox__body img { display: inline-block; }

/* Przyciski quizu (start, dalej, zakończ) w naszej stylistyce. */
.mbpf-quizbox__body .tutor-btn-primary,
.mbpf-quizbox__body button.tutor-btn-primary,
.mbpf-quizbox__body input[type="submit"].tutor-btn-primary {
	background-color: var(--mbpf-green); border-color: var(--mbpf-green); color: #fff;
	border-radius: 11px; font-weight: 600;
}
.mbpf-quizbox__body .tutor-btn-primary:hover { background-color: var(--mbpf-green-600); border-color: var(--mbpf-green-600); }

.mbpf-files { display: flex; flex-direction: column; gap: 8px; }
.mbpf-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--mbpf-line); border-radius: 11px; font-size: 14px; }
.mbpf-file:hover { border-color: var(--mbpf-green); background: var(--mbpf-green-50); color: var(--mbpf-green); }
.mbpf-file__ico { color: var(--mbpf-ink-3); flex: none; }
.mbpf-file__name { flex: 1; min-width: 0; word-break: break-word; }
.mbpf-file__size { font-size: 12.5px; color: var(--mbpf-ink-4); }

.mbpf-noteboard textarea {
	width: 100%; min-height: 150px; resize: vertical; padding: 14px 16px; font: inherit; font-size: 14px;
	border: 1px solid var(--mbpf-line); border-radius: 11px; color: var(--mbpf-ink); background: #fff;
}
.mbpf-noteboard textarea:focus { border-color: var(--mbpf-green); outline: none; }
.mbpf-noteboard__foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.mbpf-saved { font-size: 13px; color: var(--mbpf-green); opacity: 0; transition: opacity .2s; }
.mbpf-saved.is-on { opacity: 1; }

.mbpf-rate { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0 4px; font-size: 14px; color: var(--mbpf-ink-3); }
.mbpf-pstars { display: inline-flex; gap: 3px; }
.mbpf-star { background: none; border: 0; cursor: pointer; padding: 3px; color: #d8dce3; line-height: 0; }
.mbpf-star:hover, .mbpf-star.is-on { color: #f59e0b; }
.mbpf-star.is-on .mbpf-i { fill: currentColor; }

/* ============================ stany hover i aktywny ============================ */

/**
 * Jedna zasada dla całego panelu: najechanie i stan aktywny mają miętowe tło
 * i napis w kolorze --mbpf-green (#16794a).
 *
 * UWAGA na wagę selektorów. Elementor nadpisuje kolor KAŻDEGO linku przy najechaniu
 * regułą `.elementor-kit-7 a:hover` o wadze (0,2,1). Nasze stany na elementach <a>
 * muszą ją przebić, stąd prefiks `.mbpf` i wskazanie typu elementu — to daje (0,3,1).
 * Bez tego zielony kolor po prostu nie dochodzi do skutku, choć reguła istnieje.
 *
 * Elementy podrzędne trzeba wymienić z nazwy, bo mają własne przygaszone kolory
 * (podpisy, procenty, czasy) i same z siebie nie odziedziczyłyby zieleni.
 * Świadomie pominięte: .mbpf-mod-icon (zachowuje kolor modułu) oraz .mbpf-done
 * (biały znacznik na zielonym kółku).
 */

/* --- linki: waga musi przebić Elementora --- */
.mbpf a.mbpf-course-chip:hover,
.mbpf a.mbpf-course-chip:hover small,
.mbpf a.mbpf-course-chip.is-active,
.mbpf a.mbpf-course-chip.is-active small,
.mbpf a.mbpf-lesson-row:hover,
.mbpf a.mbpf-lesson-row:hover .mbpf-lesson-row__time,
.mbpf a.mbpf-lesson-row:hover .mbpf-lesson-row__ico,
.mbpf a.mbpf-sl:hover,
.mbpf a.mbpf-sl:hover .mbpf-sl__time,
.mbpf a.mbpf-sl.is-current,
.mbpf a.mbpf-sl.is-current .mbpf-sl__time,
.mbpf a.mbpf-file:hover,
.mbpf a.mbpf-file:hover .mbpf-file__size,
.mbpf a.mbpf-file:hover .mbpf-file__ico,
.mbpf a.mbpf-pbtn--ghost:hover,
.mbpf a.mbpf-side__back:hover,
.mbpf .mbpf-pnav a:hover,
.mbpf .mbpf-pnav a.is-active { color: var(--mbpf-green); }

/* Przycisk główny zostaje biały na ciemnej zieleni — zielony byłby nieczytelny. */
.mbpf a.mbpf-pbtn--primary:hover,
.mbpf a.mbpf-pbtn--primary:hover .mbpf-pbtn__sub { color: #fff; }

/* --- pozostałe elementy --- */
.mbpf-module__row:hover,
.mbpf-module__row:hover .mbpf-module__name,
.mbpf-module__row:hover .mbpf-module__sub,
.mbpf-module__row:hover .mbpf-module__pct,
.mbpf-module__row:hover .mbpf-module__chev,

.mbpf-side-mod__row:hover,
.mbpf-side-mod__row:hover .mbpf-side-mod__no,
.mbpf-side-mod__row:hover .mbpf-side-mod__name,
.mbpf-side-mod__row:hover .mbpf-side-mod__cnt,
.mbpf-side-mod__row:hover .mbpf-side-mod__chev,

.mbpf-side-mod.is-current .mbpf-side-mod__row,
.mbpf-side-mod.is-current .mbpf-side-mod__no,
.mbpf-side-mod.is-current .mbpf-side-mod__name,
.mbpf-side-mod.is-current .mbpf-side-mod__cnt,

.mbpf-sl:hover,
.mbpf-sl:hover .mbpf-sl__time,
.mbpf-sl.is-current,
.mbpf-sl.is-current .mbpf-sl__time,

.mbpf-lesson-row:hover,
.mbpf-lesson-row:hover .mbpf-lesson-row__time,
.mbpf-lesson-row:hover .mbpf-lesson-row__ico,

.mbpf-file:hover,
.mbpf-file:hover .mbpf-file__size,
.mbpf-file:hover .mbpf-file__ico,

.mbpf-course-chip:hover,
.mbpf-course-chip:hover small,
.mbpf-course-chip.is-active,
.mbpf-course-chip.is-active small,

.mbpf-pnav a:hover,
.mbpf-pnav a.is-active,
.mbpf-tab:hover,
.mbpf-tab.is-active,
.mbpf-toggle-all:hover,
.mbpf-pbtn--ghost:hover,
.mbpf-picker__arrow:not(:disabled):hover { color: var(--mbpf-green); }

/* To samo dla przycisków, które muszą przebić globalne style motywu. */
.mbpf button.mbpf-side-mod__row:hover,
.mbpf .mbpf-side-mod.is-current button.mbpf-side-mod__row,
.mbpf button.mbpf-toggle-all:hover,
.mbpf button.mbpf-tab:hover,
.mbpf button.mbpf-pbtn--ghost:hover,
.mbpf button.mbpf-picker__arrow:not(:disabled):hover { color: var(--mbpf-green); }

/* ============================ podstrony Tutora w naszej ramce ============================ */

/**
 * Ustawienia konta, historia zamówień i subskrypcje renderuje Tutor.
 * Zdejmujemy z jego kontenerów własne tło i ramkę, żeby wtopiły się w naszą kartę,
 * ale nie ruszamy samych formularzy — mają działającą logikę i walidację.
 */
.mbpf-tutorpage .tutor-dashboard-content { background: none; border: 0; padding: 0; box-shadow: none; }
.mbpf-tutorpage .tutor-card,
.mbpf-tutorpage .tutor-dashboard-content-inner { background: none; border: 0; box-shadow: none; padding: 0; }
.mbpf-tutorpage .tutor-nav { border-bottom: 1px solid var(--mbpf-line); margin-bottom: 20px; }
.mbpf-tutorpage .tutor-nav-link { padding: 12px 16px; font-size: 14.5px; }
.mbpf-tutorpage .tutor-nav-link.is-active { color: var(--mbpf-green); border-bottom-color: var(--mbpf-green); }
.mbpf-tutorpage .tutor-form-control:focus { border-color: var(--mbpf-green); box-shadow: none; }
.mbpf-tutorpage table { font-size: 14px; }

/* ============================ podstrony panelu ============================ */

/* wykres słupkowy czasu nauki */
.mbpf-spark { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.mbpf-spark__col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.mbpf-spark__col > i {
	display: block; width: 100%; border-radius: 3px 3px 0 0;
	background: var(--mbpf-green-400); min-height: 2px;
}
.mbpf-spark__col:hover > i { background: var(--mbpf-green); }
.mbpf-spark__axis { display: flex; justify-content: space-between; margin-top: 8px; }

/* odznaki */
.mbpf-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.mbpf-pbadge { display: flex; align-items: center; gap: 14px; padding: 16px 18px; opacity: .55; }
.mbpf-pbadge.is-on { opacity: 1; }
.mbpf-pbadge__ico { width: 48px; height: 48px; border-radius: 13px; flex: none; display: grid; place-items: center; }
.mbpf-pbadge:not(.is-on) .mbpf-pbadge__ico { background: var(--mbpf-track); color: var(--mbpf-ink-4); }
.mbpf-pbadge__t { font-weight: 700; font-size: 15px; }
.mbpf-pbadge__when { color: var(--mbpf-green); margin-top: 3px; }
.mbpf-pbadge__lock { color: var(--mbpf-ink-4); flex: none; }

/* treść notatki */
.mbpf-note-body { font-size: 14.5px; color: var(--mbpf-ink-2); }
.mbpf-note-body p { margin: 0 0 10px; }
.mbpf-note-body p:last-child { margin-bottom: 0; }

/* ============================ dolna nawigacja (mobile) ============================ */

.mbpf-tabbar { display: none; }

@media (max-width: 900px) {
	/*
	 * Dolny pasek zakładek jest przyklejony do krawędzi ekranu, a od premiery pod treścią
	 * panelu stoi jeszcze stopka sklepu — bez tego zapasu pasek przykrywałby jej ostatni
	 * wiersz. Wysokość paska (~59 px) plus margines bezpieczeństwa telefonu.
	 */
	.mbpf-ppage-shell {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}

	.mbpf-tabbar {
		display: grid; grid-template-columns: repeat(5, 1fr);
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
		background: #fff; border-top: 1px solid var(--mbpf-line);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.mbpf-tabbar a {
		display: flex; flex-direction: column; align-items: center; gap: 3px;
		padding: 9px 4px 8px; font-size: 10.5px; color: var(--mbpf-ink-3); text-align: center;
	}
	.mbpf-tabbar a.is-active { color: var(--mbpf-green); font-weight: 600; }
	.mbpf-ppage, .mbpf-player { padding-bottom: 86px; }
}

/* ============================ responsywność ============================ */

@media (max-width: 1100px) {
	.mbpf-phero { grid-template-columns: 1fr 1fr; }
	.mbpf-phero__side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--mbpf-line); flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; text-align: left; }
	/*
	 * Tu kafelek jest szerokim wierszem, więc treść wraca do lewej krawędzi.
	 * Nagłówek MUSI zgubić `width: 100%` z układu kolumnowego — inaczej zabiera cały
	 * wiersz i między „Dobrze zaczynasz, dasz radę!" a pierścieniem zieje kilkaset pikseli
	 * pustki, a podpis z paskiem postępu zostaje ściśnięty do kilkudziesięciu pikseli.
	 */
	.mbpf-phero__sidehead { width: auto; flex: none; justify-content: flex-start; }
	.mbpf-mot { text-align: left; }
	.mbpf-examline { justify-content: flex-start; }
	/* Podpis z paskiem dobiera resztę wiersza, żeby pustka nie została na prawej krawędzi. */
	.mbpf-phero__sidefoot { width: auto; flex: 1 1 auto; max-width: none; }
	.mbpf-player { grid-template-columns: 1fr; }
	.mbpf-side { position: static; max-height: none; order: 2; }
	.mbpf-main { order: 1; }
}

@media (max-width: 900px) {
	/* Nawigację przejmuje dolny pasek zakładek — podpasek byłby jej kopią. */
	.mbpf-subbar { display: none; }
	.mbpf-tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.mbpf-duo { grid-template-columns: 1fr; }
	.mbpf-goal { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 720px) {
	.mbpf { font-size: 14.5px; }
	.mbpf-wrap { padding: 0 14px; }

	/* Układ zostaje ten sam; na wąskim ekranie tylko nieco mniejszy nagłówek. */
	.mbpf-picker { row-gap: 12px; column-gap: 10px; }
	.mbpf-picker__label { font-size: 20px; }

	/* Palec potrzebuje większego celu niż kursor — 44 px to minimum dla dotyku. */
	.mbpf-picker__arrow { width: 44px; height: 44px; }
	.mbpf-picker__arrow .mbpf-i { width: 22px; height: 22px; }
	.mbpf button.mbpf-picker__arrow { width: 44px; }
	.mbpf-banner__title { font-size: 20px; }
	.mbpf-banner__sub { font-size: 14.5px; margin-top: 3px; }
	.mbpf-pcta { min-width: 100%; padding: 14px 20px 14px 16px; }
	.mbpf-pcta__t { font-size: 17px; }
	.mbpf-phero { grid-template-columns: 1fr; }
	.mbpf-phero__media { min-height: 0; aspect-ratio: 16 / 9; }
	.mbpf-phero__body { padding: 18px 18px 20px; }
	.mbpf-phero__title { font-size: 21px; }
	/* Kolumna wraca — „center", nie „stretch", inaczej pierścień siada przy lewej krawędzi. */
	.mbpf-phero__side { flex-direction: column; align-items: center; text-align: center; }
	.mbpf-phero__sidehead { justify-content: center; }
	/* Na wąskim ekranie „Twój postęp" jest tytułem sekcji, nie podpisem — stąd skala nagłówka. */
	.mbpf-phero__side .mbpf-h3 { font-size: 22px; letter-spacing: -.01em; }
	.mbpf-mot { text-align: center; }
	.mbpf-examline { justify-content: center; }
	.mbpf-phero__sidefoot { width: 100%; max-width: none; }
	.mbpf-card__pad { padding: 16px 16px; }
	.mbpf-tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
	/**
	 * Moduł na mobile rozkłada się na trzy piętra:
	 *   ikona · tytuł · odznaka procentów
	 *   liczba lekcji
	 *   „Pokaż materiały edukacyjne" ————— „Start" / „Kontynuuj"
	 * `display: contents` na opakowaniu tekstu wypuszcza tytuł i licznik
	 * prosto do siatki, więc licznik może zająć całą szerokość wiersza.
	 */
	.mbpf-module__row { display: flex; flex-direction: column; align-items: stretch; padding-right: 0; }
	.mbpf-module__main {
		grid-template-columns: 44px minmax(0,1fr) auto;
		grid-template-areas:
			"ikona tytul  procent"
			"licznik licznik licznik";
		gap: 4px 12px;
	}
	/* Reset geometrii przycisków (0,2,1) bije samą klasę — stąd ten sam zapis tutaj. */
	.mbpf button.mbpf-module__main { padding: 12px; }
	.mbpf-module__main .mbpf-mod-icon { grid-area: ikona; }
	.mbpf-module__txt  { display: contents; }
	.mbpf-module__name { grid-area: tytul; }
	.mbpf-module__sub  { grid-area: licznik; }
	.mbpf-module__bar  { display: none; }

	/* Procent staje się odznaką; komplet modułu dostaje zieleń. */
	.mbpf-module__pct {
		grid-area: procent; min-width: 0; padding: 4px 9px; border-radius: 99px;
		background: var(--mbpf-track); color: var(--mbpf-ink-3);
		font-size: 12px; font-weight: 700; line-height: 1;
	}
	.mbpf-module__pct.is-full { background: var(--mbpf-green-50); color: var(--mbpf-green); }

	/* Trzecie piętro: etykieta po lewej, odnośnik do lekcji po prawej. */
	.mbpf-module__act { padding: 0 12px 12px; gap: 10px; justify-content: space-between; }
	.mbpf-module__chev { order: -1; }
	.mbpf button.mbpf-module__chev {
		width: auto; min-width: 0; padding: 0; border-radius: 0;
		grid-auto-flow: column; gap: 6px; justify-content: start;
		font-size: 12.5px; font-weight: 600; color: var(--mbpf-green); text-align: left;
	}
	.mbpf-module__chevtxt { display: inline; }
	.mbpf-module:not(.is-open) .mbpf-module__chevtxt--hide { display: none; }
	.mbpf-module.is-open .mbpf-module__chevtxt--show { display: none; }
	/* Obrót przenosimy z przycisku na samą ikonę — inaczej odwróciłby się też napis. */
	.mbpf-module.is-open .mbpf-module__chev { transform: none; }
	.mbpf-module.is-open .mbpf-module__chev .mbpf-i { transform: rotate(180deg); }
	.mbpf-mod-icon { width: 44px; height: 44px; font-size: 16px; }
	.mbpf-modhead__t { font-size: 19px; }
	.mbpf-modhead__act { margin-left: 0; width: 100%; }
	.mbpf-modhead__act .mbpf-pbtn { width: 100%; }
	/* Skróty do edycji zostają wąskie — na telefonie nie one są tu główną akcją. */
	.mbpf-modhead__act .mbpf-pbtn--sm { width: auto; flex: 1 1 auto; }
	.mbpf-banner { flex-direction: column; text-align: center; }
	.mbpf-plan__art { display: none; }
	/* Kolejność na wąskim ekranie: ikona + tytuł, pod spodem licznik i pasek,
	   na końcu przycisk. `display: contents` wypuszcza dzieci __body prosto
	   do siatki rodzica, żeby licznik i pasek nie były wcięte o szerokość ikony. */
	.mbpf-recent {
		display: grid; grid-template-columns: auto minmax(0, 1fr);
		gap: 8px 14px; align-items: center;
	}
	.mbpf-recent__body { display: contents; }
	.mbpf-recent__ico { grid-column: 1; grid-row: 1; }
	.mbpf-recent__title { grid-column: 2; grid-row: 1; margin-bottom: 0; }
	.mbpf-recent__meta { grid-column: 1 / -1; }
	.mbpf-recent__bar { grid-column: 1 / -1; margin-top: 0; max-width: none; }
	.mbpf-recent__cta { grid-column: 1 / -1; margin-top: 6px; }
}

/* ============================================================ scena lekcji: film albo quiz */

/*
 * Scena to miejsce, w którym dotąd stał wyłącznie odtwarzacz. Quiz jest tu równorzędny:
 * przy teście działu to on jest materiałem lekcji. Gdy lekcja ma jedno i drugie, nad sceną
 * pojawiają się zakładki i wtedy sama scena nie potrzebuje już własnego marginesu.
 */
.mbpf-stage { display: grid; gap: 12px; }
.mbpf-stage__tabs { margin-bottom: 2px; }

/* Quiz sam ustala wysokość (proporcje 16/9 obowiązują film) i sam niesie ramkę — dokładanie
   drugiej dawało podwójną krawędź wokół karty. */
.mbpf-stage__quiz { display: none; }
.mbpf-stage__quiz.is-active { display: block; }

/* ============================================================ quiz w barwach panelu */

/*
 * Wtyczka quizów wystawia własne zmienne na `.mbpf-quiz-root` (turkus #1f7a8c i żółty akcent).
 * Przestawiamy je na paletę panelu — bez przebudowy paczki React, bo cały wygląd quizu
 * wisi na tych siedmiu wartościach. Arkusz wchodzi tylko za bramką nowego panelu, więc
 * kursanci na starym układzie Tutora widzą quiz po staremu.
 */
.mbpf-quiz-root {
	--mbpf-primary: var(--mbpf-green);
	--mbpf-accent:  var(--mbpf-mod-amber, #d97706);
	--mbpf-correct: var(--mbpf-mod-green, #16a34a);
	--mbpf-wrong:   #dc2626;
	--mbpf-ink:     #111827;
	--mbpf-soft:    var(--mbpf-bg);
	--mbpf-line:    var(--mbpf-line-2);
	margin: 0 auto;
	max-width: none;
	font-family: inherit;
}

.mbpf-stage__quiz .mbpf-quiz-root { margin: 0; }

/*
 * Kolizja nazw: `.mbpf-card`, `.mbpf-pbtn` i warianty są zdefiniowane w obu arkuszach,
 * a panelowy ładuje się później i wygrywa — dlatego quiz wyglądał w połowie po swojemu.
 * Poniżej ustawiamy je wprost w kontekście quizu, żeby przestały się przeciągać.
 */
.mbpf-quiz-root .mbpf-card {
	background: var(--mbpf-card, #fff);
	border: 1px solid var(--mbpf-line);
	border-radius: var(--mbpf-p-radius);
	box-shadow: var(--mbpf-p-shadow);
	overflow: hidden;
}

.mbpf-quiz-root .mbpf-card__header {
	background: var(--mbpf-green);
	color: #fff;
}

.mbpf-quiz-root .mbpf-card__title,
.mbpf-quiz-root .mbpf-card__meta { color: #fff; }

.mbpf-quiz-root .mbpf-pbtn {
	border-radius: 11px;
	font-weight: 600;
	font-size: 15px;
	padding: 12px 20px;
}

.mbpf-quiz-root .mbpf-pbtn--primary { background: var(--mbpf-green); border-color: var(--mbpf-green); color: #fff; }
.mbpf-quiz-root .mbpf-pbtn--primary:hover { background: var(--mbpf-green-600); border-color: var(--mbpf-green-600); }
.mbpf-quiz-root .mbpf-pbtn--ghost { background: #fff; color: var(--mbpf-green); border-color: var(--mbpf-line); }
.mbpf-quiz-root .mbpf-pbtn--ghost:hover { background: var(--mbpf-green-50); border-color: var(--mbpf-green); }
.mbpf-quiz-root .mbpf-pbtn--accent { background: var(--mbpf-green-50); color: var(--mbpf-green); border-color: var(--mbpf-green-100); }

/* Pasek postępu, odpowiedzi i wybory — te same promienie i linie, co reszta panelu. */
.mbpf-quiz-root .mbpf-progress { background: var(--mbpf-track); }
.mbpf-quiz-root .mbpf-progress-fill { background: var(--mbpf-green-400); }
.mbpf-quiz-root .mbpf-choice { border-radius: var(--mbpf-radius-sm); border-color: var(--mbpf-line); }
.mbpf-quiz-root .mbpf-choice:hover { border-color: var(--mbpf-green); background: var(--mbpf-green-50); }
.mbpf-quiz-root .mbpf-input,
.mbpf-quiz-root .mbpf-mathfield { border-radius: var(--mbpf-radius-sm); border-color: var(--mbpf-line); }
.mbpf-quiz-root .mbpf-franek__bubble { border-radius: var(--mbpf-radius-sm); }

/* Komunikaty wtyczki (brak quizu, bramka dla niezapisanych) w stylu kart panelu. */
.mbpf-quiz-root.mbpf-quiz-notice,
.mbpf-quiz-notice,
.mbpf-quiz-gate {
	background: var(--mbpf-card);
	border: 1px solid var(--mbpf-line);
	border-radius: var(--mbpf-p-radius);
	color: var(--mbpf-ink-2);
	padding: 18px 20px;
}

/*
 * Temat wewnątrz modułu jako zwijana sekcja. Dział matury ma do 27 lekcji w pięciu
 * tematach — po rozwinięciu działu sypało się wszystko naraz. Teraz widać pięć
 * wierszy z licznikiem, a lekcje pokazuje dopiero kliknięcie w temat.
 */
.mbpf-lgroup { border-top: 1px solid var(--mbpf-line-2); }
.mbpf-lgroup:first-child { border-top: 0; }

.mbpf-lgroup__head {
	display: flex; align-items: center; gap: 10px; padding: 11px 8px; cursor: pointer;
	font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--mbpf-ink-4); border-radius: 9px; list-style: none;
}

/* Domyślny trójkącik podmieniamy na własny znak — w obu rodzinach przeglądarek. */
.mbpf-lgroup__head::-webkit-details-marker { display: none; }
.mbpf-lgroup__head::marker { content: ""; }

.mbpf-lgroup__head:hover { background: var(--mbpf-green-50); color: var(--mbpf-green); }
.mbpf-lgroup__name { min-width: 0; }
.mbpf-lgroup__count { margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.mbpf-lgroup__chev { display: flex; line-height: 0; transition: transform .15s ease; }
.mbpf-lgroup[open] .mbpf-lgroup__chev { transform: rotate(180deg); }
.mbpf-lgroup__body { padding-bottom: 6px; }

/*
 * Ten sam temat w pasku bocznym lekcji. Węższa kolumna (320 px), więc ciaśniejsze
 * wypełnienie, a zamiast „21 lekcji" licznik „ukończone / wszystkie" — czyta się
 * tak samo jak licznik działu w wierszu wyżej.
 */
.mbpf-lgroup--side { border-top-color: transparent; }
.mbpf-lgroup--side .mbpf-lgroup__head { padding: 9px 10px; gap: 8px; border-radius: 9px; }
.mbpf-lgroup--side .mbpf-lgroup__name { overflow-wrap: anywhere; }
.mbpf-lgroup--side .mbpf-lgroup__count { color: var(--mbpf-ink-4); font-size: 12px; flex: none; }
.mbpf-lgroup--side .mbpf-lgroup__body { padding-bottom: 2px; }

/* Licznik ma własny, przygaszony kolor, więc zieleni po najechaniu nie odziedziczy. */
.mbpf-lgroup--side .mbpf-lgroup__head:hover .mbpf-lgroup__count { color: var(--mbpf-green); }


/* ============================ logowanie do strefy ucznia ============================ */

/*
 * Ekran logowania przejęty od Tutora: jego formularz, nasza oprawa. Dwie kolumny —
 * po lewej logowanie, po prawej zaproszenie dla tych, którzy konta jeszcze nie mają.
 */
.mbpf-plogin {
	padding: 40px 0 72px;
	background: var(--mbpf-bg);
}

.mbpf-plogin__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	align-items: start;
	gap: 24px;
	max-width: 980px;
}

.mbpf-plogin__card,
.mbpf-plogin__side {
	padding: 32px;
}

.mbpf-plogin__title {
	margin: 0 0 8px;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--mbpf-ink);
}

.mbpf-plogin__lead {
	margin: 0 0 24px;
	color: var(--mbpf-ink-3);
}

/* Formularz Tutora dostaje nasze pola — jego własny arkusz zostaje, my tylko poprawiamy rytm. */
.mbpf-plogin__form input[type="text"],
.mbpf-plogin__form input[type="email"],
.mbpf-plogin__form input[type="password"] {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--mbpf-line);
	border-radius: var(--mbpf-radius-sm);
	background: #fff;
	font: inherit;
	color: var(--mbpf-ink);
}

.mbpf-plogin__form input:focus-visible {
	outline: 2px solid var(--mbpf-green);
	outline-offset: 1px;
}

.mbpf-plogin__side {
	background: var(--mbpf-green-50);
	border-color: var(--mbpf-green-100);
}

.mbpf-plogin__ico {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 13px;
	background: #fff;
	color: var(--mbpf-green);
}

.mbpf-plogin__side-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--mbpf-ink);
}

.mbpf-plogin__side-lead {
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--mbpf-ink-2);
}

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