/* ============================================================
   egzaminylotnicze.pl — style stron wewnątrz aplikacji
   (dashboard, przedmioty, testy — wspólna podstawa dla wszystkich)
   ============================================================ */

:root {
	--navy-950: #0b1420;
	--navy-900: #101e30;
	--navy-800: #17293f;
	--navy-700: #223a54;
	--paper: #e8e6dd;
	--paper-dim: #dedbce;
	--paper-line: #c9c6b8;
	--ink: #14202c;
	--ink-soft: #4b5a68;
	--amber: #d98e2b;
	--amber-dark: #b87418;
	--teal: #3fa796;
	--danger: #c1443b;
	--font-head: 'Space Grotesk', sans-serif;
	--font-body: 'IBM Plex Sans', sans-serif;
}
* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	padding: 0;
	max-width: 100%;
	overflow-x: hidden;
}
body {
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--bg, var(--paper));
	min-height: 100vh;
}
a {
	color: inherit;
}
button {
	font-family: inherit;
	cursor: pointer;
}

/* ---------- topbar ---------- */
.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 32px;
	background: var(--navy-950);
	color: var(--paper);
	border-bottom: 1px solid var(--navy-700);
}
.wordmark {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 17px;
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: var(--paper);
}
.wordmark .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--amber);
	box-shadow: 0 0 8px var(--amber);
}
.user-menu {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	color: #dedbce;
}
.user-menu .avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--navy-700);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-head);
	font-size: 12px;
	color: var(--paper);
	flex-shrink: 0;
}
.user-menu a {
	color: #dedbce;
	text-decoration: none;
}
.user-menu a:hover {
	color: var(--paper);
}
.admin-link {
	font-size: 12px;
	color: var(--amber);
	text-decoration: none;
	font-weight: 600;
	border: 1px solid var(--amber-dark);
	padding: 5px 10px;
}
.admin-link:hover {
	background: var(--amber);
	color: #241704;
}

/* ---------- layout shell ---------- */
.page {
	padding: 40px 32px 100px;
}
.wrap {
	max-width: 920px;
	margin: 0 auto;
	width: 100%;
}
h1.page-title {
	font-family: var(--font-head);
	font-size: 26px;
	font-weight: 600;
	margin: 0 0 6px 0;
}
p.page-sub {
	color: var(--ink-soft);
	font-size: 14.5px;
	margin: 0 0 32px 0;
}
.section-label {
	font-family: var(--font-head);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 14px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--paper-line);
}

/* ---------- buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 8px;
	border: none;
	font-size: 14.5px;
	font-weight: 600;
	font-family: var(--font-body);
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(11, 20, 32, 0.08);
	transition:
		box-shadow 0.15s,
		transform 0.1s;
}
.btn:active {
	transform: translateY(1px);
}
.btn-primary {
	background: var(--solid, var(--navy-950));
	color: var(--paper);
}
.btn-primary:hover {
	background: var(--solid-hover, var(--navy-800));
}
.btn-amber {
	background: var(--amber);
	color: #241704;
	box-shadow: 0 2px 6px rgba(217, 142, 43, 0.35);
}
.btn-amber:hover {
	background: var(--amber-dark);
	color: #fff;
	box-shadow: 0 3px 10px rgba(184, 116, 24, 0.4);
}
.btn-ghost {
	background: none;
	color: var(--ink-soft);
	border: 1px solid var(--paper-line);
}
.btn-ghost:hover {
	border-color: var(--navy-700);
	color: var(--ink);
}
.btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ---------- course cards ---------- */
.course-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 40px;
}
.course-card {
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	padding: 22px;
	position: relative;
	transition: border-color 0.15s;
}
.course-card.selectable {
	cursor: pointer;
}
.course-card.selectable:hover {
	border-color: var(--navy-700);
}
.course-card.selected {
	border: 1.5px solid var(--amber-dark);
	background: var(--tint-amber, #fbf6ec);
}
.course-card.disabled {
	cursor: default;
	opacity: 0.55;
	background: repeating-linear-gradient(135deg, var(--surface, #fff), var(--surface, #fff) 10px, var(--surface-2, #f3f1e9) 10px, var(--surface-2, #f3f1e9) 20px);
}
.course-card .code {
	font-family: var(--font-head);
	font-size: 21px;
	font-weight: 700;
	color: var(--strong, var(--navy-950));
}
.course-card .name {
	font-size: 13px;
	color: var(--ink-soft);
	margin-top: 2px;
}
.course-card .meta {
	display: flex;
	gap: 14px;
	margin-top: 16px;
	font-size: 11.5px;
	color: var(--ink-soft);
	border-top: 1px solid var(--paper-line);
	padding-top: 12px;
	flex-wrap: wrap;
}
.soon-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--ink-soft);
	background: var(--paper-dim);
	padding: 3px 8px;
}
.access-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--ink-teal, #1f5b4e);
	background: var(--tint-teal-2, #dff3ec);
	padding: 3px 8px;
}
.course-card .enter-link {
	display: inline-block;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--strong, var(--navy-950));
	text-decoration: none;
}
.course-card .enter-link:hover {
	color: var(--amber-dark);
}

/* ---------- plan cards ---------- */
.plan-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 24px;
}
.plan-card {
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	padding: 20px;
	cursor: pointer;
}
.plan-card.selected {
	border: 1.5px solid var(--teal);
	background: var(--tint-teal, #f1faf7);
}
.plan-card.featured {
	position: relative;
	border: 1.5px solid var(--amber-dark);
	background: var(--surface, #fff);
}
.plan-card .featured-tag {
	position: absolute;
	top: -11px;
	left: 24px;
	background: var(--amber);
	color: #241704;
	font-size: 10.5px;
	font-weight: 700;
	padding: 3px 10px;
}
.plan-card .len {
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 600;
}
.plan-card .price {
	font-size: 13px;
	color: var(--ink-soft);
	margin-top: 4px;
}

/* ---------- buy bar (fixed) ---------- */
.buy-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--navy-950);
	color: var(--paper);
	padding: 18px 32px;
	transform: translateY(100%);
	transition: transform 0.18s ease;
}
.buy-bar.visible {
	transform: translateY(0);
}
.buy-bar .summary {
	font-size: 13.5px;
	color: #9fb0c1;
}
.buy-bar .summary b {
	color: var(--paper);
	font-weight: 600;
}

/* ---------- empty state ---------- */
.empty-note {
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	padding: 24px;
	text-align: center;
	color: var(--ink-soft);
	font-size: 14px;
}

/* ---------- subject list ---------- */
.subject-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--paper-line);
}
.passed-subject-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--paper-line);
}
.passed-subject-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 4px;
	border-bottom: 1px solid var(--paper-line);
	flex-wrap: wrap;
}
.passed-subject-name {
	font-size: 14px;
}
.subject-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 6px;
	border-bottom: 1px solid var(--paper-line);
	background: none;
	border-left: none;
	border-right: none;
	border-top: none;
	width: 100%;
	text-align: left;
	font-size: 15px;
	color: var(--ink);
	text-decoration: none;
}
.subject-row:hover {
	background: var(--hover-row, #dedbce55);
}
.subject-row .left {
	display: flex;
	align-items: center;
	gap: 14px;
}
.subject-row .idx {
	font-family: var(--font-head);
	font-size: 12px;
	color: var(--ink-soft);
	width: 22px;
	flex-shrink: 0;
}
.subject-row .subject-name {
	font-weight: 500;
}
.subject-row .subject-count {
	font-size: 12px;
	color: var(--ink-soft);
	display: block;
	margin-top: 2px;
}
.subject-row .right-meta {
	display: flex;
	align-items: center;
	gap: 14px;
}
.progress-mini {
	font-size: 12px;
	color: var(--ink-soft);
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
.progress-mini .bar {
	width: 70px;
	height: 4px;
	background: var(--paper-line);
	position: relative;
	flex-shrink: 0;
}
.progress-mini .bar span {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: var(--teal);
}
.chevron {
	color: var(--ink-soft);
	font-size: 18px;
}
.back-link {
	font-size: 13px;
	color: var(--ink-soft);
	text-decoration: none;
	display: inline-block;
	margin-bottom: 18px;
}
.back-link:hover {
	color: var(--ink);
}

/* ---------- source + mode selection (quiz-setup) ---------- */
.source-choice {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	max-width: 820px;
	margin-bottom: 32px;
}
.source-card {
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	padding: 20px;
	cursor: pointer;
}
.source-card.selected {
	border: 1.5px solid var(--amber-dark);
	background: var(--tint-amber, #fbf6ec);
}
.source-card.disabled {
	cursor: not-allowed;
	opacity: 0.5;
}
.source-card .tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	color: var(--strong, var(--navy-900));
	background: var(--paper-dim);
	padding: 3px 8px;
	margin-bottom: 10px;
}
.source-card.selected .tag {
	background: var(--amber);
	color: #241704;
}
.source-card .name {
	font-family: var(--font-head);
	font-size: 15.5px;
	font-weight: 600;
	margin-bottom: 5px;
}
.source-card .desc {
	font-size: 12.5px;
	color: var(--ink-soft);
	line-height: 1.5;
	margin-bottom: 10px;
}
.source-card .count {
	font-size: 12px;
	color: var(--ink-soft);
	font-weight: 600;
}

.mode-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	max-width: 820px;
	margin-bottom: 16px;
}
.mode-card {
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	padding: 20px;
	cursor: pointer;
}
.mode-card.selected {
	border: 1.5px solid var(--strong, var(--navy-950));
}
.mode-card.disabled {
	cursor: not-allowed;
	opacity: 0.5;
}
.mode-card .name {
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 6px;
}
.mode-card .desc {
	font-size: 12.5px;
	color: var(--ink-soft);
	line-height: 1.5;
}
.mode-card .resume-note {
	margin-top: 10px;
	font-size: 12px;
	color: var(--amber-dark);
	font-weight: 600;
}

.mode-options {
	max-width: 820px;
	margin-bottom: 28px;
	padding: 18px 20px;
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	display: none;
}
.mode-options.visible {
	display: block;
}
.mode-options .label {
	font-size: 12.5px;
	color: var(--ink-soft);
	margin-bottom: 10px;
}
.count-row {
	display: flex;
	gap: 10px;
}
.count-btn {
	padding: 9px 18px;
	border: 1px solid var(--paper-line);
	background: var(--bg, var(--paper));
	font-size: 14px;
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--ink-soft);
}
.count-btn.selected {
	background: var(--solid, var(--navy-950));
	color: var(--paper);
	border-color: var(--solid, var(--navy-950));
}
.count-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}
.exam-info {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
}
.exam-info .stat {
	font-family: var(--font-head);
}
.exam-info .stat .n {
	font-size: 20px;
	font-weight: 700;
	color: var(--strong, var(--navy-950));
}
.exam-info .stat .l {
	font-size: 11px;
	color: var(--ink-soft);
	font-family: var(--font-body);
}

/* ---------- quiz: badge trybu/źródła ---------- */
.quiz-meta {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}
.quiz-badge {
	font-size: 11.5px;
	font-weight: 600;
	padding: 4px 10px;
	background: var(--paper-dim);
	color: var(--ink-soft);
}
.quiz-badge.mode-exam {
	background: var(--solid, var(--navy-950));
	color: var(--paper);
}

/* ---------- quiz: pasek nawigacji numerków pytań ---------- */
/* ===== ZNACZNIK-TEST-QNAV-WRAP-v1 ===== jeśli widzisz to w pliku, dobra wersja się wgrała */
.qnav-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 24px;
}
.qnav {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	overflow-x: auto;
	padding: 4px 2px;
	scrollbar-width: thin;
}
.qnav-wrap.expanded {
	align-items: flex-start;
}
.qnav-wrap.expanded .qnav {
	flex-wrap: wrap;
	max-height: 210px;
	overflow-x: hidden;
	overflow-y: auto;
}
.qnav-toggle {
	flex-shrink: 0;
	background: none;
	border: 1px solid var(--paper-line);
	border-radius: 6px;
	padding: 8px 12px;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-soft);
	cursor: pointer;
	white-space: nowrap;
}
.qnav-toggle:hover {
	color: var(--ink);
	border-color: var(--navy-700);
}
.qnav-item {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-family: var(--font-head);
	font-size: 12.5px;
	font-weight: 700;
	background: var(--surface, #fff);
	color: var(--ink-soft);
	border: 1px solid var(--paper-line);
	border-radius: 8px;
	text-decoration: none;
	transition:
		box-shadow 0.12s,
		transform 0.1s;
	position: relative;
}
.qnav-item:hover {
	border-color: var(--navy-700);
	transform: translateY(-1px);
}
.qnav-item.answered {
	background: var(--solid, var(--navy-800));
	color: var(--paper);
	border-color: var(--solid, var(--navy-800));
}
.qnav-item.correct {
	background: var(--teal);
	color: #fff;
	border-color: var(--teal);
}
.qnav-item.incorrect {
	background: var(--danger);
	color: #fff;
	border-color: var(--danger);
}
.qnav-item.earlier-ok {
	background: color-mix(in srgb, var(--teal) 18%, var(--surface, #fff));
	color: var(--ink);
	border-color: var(--teal);
}
.qnav-item.earlier-bad {
	background: color-mix(in srgb, var(--danger) 16%, var(--surface, #fff));
	color: var(--ink);
	border-color: var(--danger);
}
.qnav-item.current {
	background: var(--amber);
	color: #241704;
	border-color: var(--amber-dark);
	box-shadow: 0 2px 8px rgba(217, 142, 43, 0.4);
}
/* ===== ZNACZNIK-TEST-OZNACZONE-v2 ===== jeśli widzisz to w pliku, dobra wersja się wgrała */
.qnav-item.flagged {
	border: 2px solid var(--amber-dark);
}
.qnav-item.flagged::after {
	content: '';
	position: absolute;
	top: -4px;
	right: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--amber-dark);
	border: 2px solid var(--paper);
}

/* ---------- quiz: licznik czasu egzaminu ---------- */
.exam-timer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 700;
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	border-radius: 8px;
	padding: 10px 18px;
	margin-bottom: 20px;
	color: var(--ink);
}
.exam-timer.exam-timer-warn {
	border-color: var(--amber-dark);
	color: var(--amber-dark);
	background: var(--tint-amber, #fbf6ec);
}
.exam-timer.exam-timer-danger {
	border-color: var(--danger);
	color: var(--danger);
	background: var(--tint-red, #fcf1f0);
	animation: examPulse 1s infinite;
}
@keyframes examPulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.55;
	}
}

/* ---------- quiz: karta pytania ---------- */
.question-card {
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	border-radius: 10px;
	padding: 36px 32px;
	margin-bottom: 24px;
	box-shadow: 0 2px 10px rgba(11, 20, 32, 0.05);
}
.question-progress-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.question-progress {
	font-family: var(--font-head);
	font-size: 12px;
	color: var(--ink-soft);
	letter-spacing: 0.02em;
}
.flag-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-soft);
	cursor: pointer;
	font-family: var(--font-body);
	transition: all 0.12s;
}
.flag-btn:hover {
	border-color: var(--amber-dark);
	color: var(--amber-dark);
	background: var(--tint-amber, #fbf6ec);
}
.flag-btn.active {
	background: var(--amber);
	border-color: var(--amber-dark);
	color: #241704;
	box-shadow: 0 2px 6px rgba(217, 142, 43, 0.35);
}
.question-text {
	font-family: var(--font-head);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
	margin-bottom: 30px;
}
.question-code {
	font-family: var(--font-head);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ink-soft);
	letter-spacing: 0.03em;
	margin-bottom: 6px;
}

.answer-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.answer-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	background: var(--bg, var(--paper));
	border: 1.5px solid var(--paper-line);
	border-radius: 8px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	transition:
		border-color 0.12s,
		box-shadow 0.12s,
		background 0.12s;
}
.answer-item:hover {
	border-color: var(--navy-700);
	box-shadow: 0 2px 8px rgba(11, 20, 32, 0.06);
}
.answer-item:has(input:checked) {
	border-color: var(--strong, var(--navy-950));
	background: var(--surface, #fff);
	box-shadow: 0 2px 8px rgba(11, 20, 32, 0.08);
}
.answer-item input[type='radio'] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--strong, var(--navy-950));
}
.answer-item .letter {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 6px;
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-head);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink-soft);
}
.answer-item.chosen {
	border-color: var(--strong, var(--navy-950));
	background: var(--surface, #fff);
}
.answer-item.correct {
	border-color: var(--teal);
	background: var(--tint-teal, #f1faf7);
	font-weight: 600;
	color: var(--ink-teal, #1f5b4e);
}
.answer-item.correct .letter {
	background: var(--teal);
	border-color: var(--teal);
	color: #fff;
}
.answer-item.wrong {
	border-color: var(--danger);
	background: var(--tint-red, #fcf1f0);
	color: var(--ink-red, #8a2e27);
}
.answer-item.wrong .letter {
	background: var(--danger);
	border-color: var(--danger);
	color: #fff;
}
.answer-item.static {
	cursor: default;
}
.answer-item .mark {
	margin-left: auto;
	font-weight: 700;
	font-size: 15px;
}

.exam-hint {
	font-size: 12.5px;
	color: var(--ink-soft);
	margin-top: 12px;
}
.result-line {
	margin-top: 20px;
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 700;
}
.result-line.pass {
	color: var(--teal);
}
.result-line.fail {
	color: var(--danger);
}
.explanation-box {
	margin-top: 14px;
	padding: 14px 16px;
	background: var(--bg, var(--paper));
	border-left: 3px solid var(--amber);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink);
}
.explanation-box strong {
	font-family: var(--font-head);
	color: var(--ink-soft);
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	display: block;
	margin-bottom: 6px;
}
.explanation-box p {
	margin: 0 0 10px 0;
}
.explanation-box p:last-child {
	margin-bottom: 0;
}
.explanation-box p strong {
	display: inline;
	text-transform: none;
	letter-spacing: normal;
	font-size: inherit;
	color: inherit;
	font-weight: 600;
}
.explanation-box sub,
.explanation-box sup {
	font-size: 0.7em;
}

/* ---------- quiz: pasek prev/next ---------- */
.quiz-controls {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
.quiz-controls .spacer {
	flex: 1;
}

/* ---------- quiz: podsumowanie sesji ---------- */
.summary-card {
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	border-radius: 10px;
	padding: 40px 32px;
	text-align: center;
	box-shadow: 0 2px 10px rgba(11, 20, 32, 0.05);
}
.summary-pct {
	font-family: var(--font-head);
	font-size: 44px;
	font-weight: 700;
	margin: 6px 0;
}
.summary-row {
	font-size: 14px;
	color: var(--ink-soft);
	margin: 4px 0;
}
.summary-verdict {
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 700;
	margin: 18px 0;
}
.summary-verdict.pass {
	color: var(--teal);
}
.summary-verdict.fail {
	color: var(--danger);
}
.summary-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 22px;
	flex-wrap: wrap;
}

/* ---------- dashboard: kafelki statystyk ---------- */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}
.stat-tile {
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	padding: 18px 20px;
}
.stat-tile-value {
	font-family: var(--font-head);
	font-size: 28px;
	font-weight: 700;
	color: var(--ink);
}
.stat-tile-label {
	font-size: 12px;
	color: var(--ink-soft);
	margin-top: 4px;
}
.stat-tile.stat-streak .stat-tile-value {
	color: var(--amber-dark);
}
.stat-tile.stat-accuracy .stat-tile-value {
	color: var(--ink-teal, #1f5b4e);
}
.stat-tile.stat-warn {
	background: var(--tint-amber, #fbf6ec);
	border-color: var(--amber-dark);
}
.stat-tile.stat-warn .stat-tile-value {
	color: var(--amber-dark);
}

.weakest-subject-banner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	border-left: 3px solid var(--danger);
	padding: 14px 18px;
	margin-bottom: 24px;
	text-decoration: none;
	color: inherit;
}
.weakest-subject-banner:hover {
	border-color: var(--danger);
}
.weakest-label {
	font-size: 11px;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 3px;
}
.weakest-name {
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}
.weakest-cta {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 600;
	color: var(--danger);
	white-space: nowrap;
}

/* "Powtórki na dziś" w karcie planu nauki (dashboard.php) - pytania, którym minął termin powtórki */
.pn-review {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px 18px;
	flex-wrap: wrap;
	background: var(--tint-teal, #f1faf7);
	border: 1px solid var(--paper-line);
	border-left: 3px solid var(--teal);
	padding: 12px 16px;
	margin-bottom: 20px;
}
.pn-review-main {
	flex: 1;
	min-width: 200px;
}
.pn-review-title {
	font-weight: 600;
	font-size: 13.5px;
	color: var(--ink);
}
.pn-review-icon {
	color: var(--ink-teal, #1f5b4e);
	font-weight: 700;
	margin-right: 2px;
}
.review-subjects {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}
.review-subjects a {
	font-size: 12px;
	color: var(--ink-soft);
	text-decoration: none;
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	border-radius: 999px;
	padding: 2px 10px;
}
.review-subjects a b {
	color: var(--ink);
	font-weight: 600;
	margin-left: 2px;
}
.review-subjects a:hover {
	border-color: var(--teal);
	color: var(--ink);
}
.pn-review-done {
	font-size: 13px;
	padding: 10px 16px;
}
.pn-review-check {
	color: var(--ink-teal, #1f5b4e);
	font-weight: 700;
}

/* Gotowość do egzaminu w karcie planu nauki (dashboard.php) */
.pn-ready {
	border-top: 1px solid var(--paper-line);
	margin-top: 20px;
	padding-top: 18px;
}
.pn-ready-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
}
.pn-ready-total {
	font-size: 12.5px;
	color: var(--ink-soft);
}
.pn-ready-total b {
	font-family: var(--font-head);
	font-size: 18px;
	color: var(--ink);
	margin-right: 2px;
}
.pn-verdict {
	font-size: 12.5px;
	line-height: 1.5;
	padding: 9px 12px;
	margin-bottom: 14px;
	background: var(--surface-2, #f6f4ee);
	border: 1px solid var(--paper-line);
	color: var(--ink);
}
.pn-verdict a {
	color: inherit;
	text-decoration: underline;
}
.pn-verdict-ok {
	background: var(--tint-teal, #f1faf7);
	border-color: var(--teal);
	color: var(--ink-teal, #1f5b4e);
}
.pn-verdict-late {
	background: var(--tint-red, #fcf1f0);
	border-color: var(--danger);
	color: var(--danger);
}
.pn-ready-list {
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.pn-ready-label {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 5px;
}
.pn-ready-num {
	font-weight: 400;
	color: var(--ink-soft);
	white-space: nowrap;
}
.pn-ready-num b {
	color: var(--ink);
	margin-left: 4px;
}
.pn-ready-bar {
	display: flex;
	height: 8px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--bg, var(--paper));
}
.seg-m {
	background: var(--teal);
}
.seg-l {
	background: var(--amber);
	opacity: 0.55;
}
.pn-ready-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-top: 12px;
	font-size: 11.5px;
	color: var(--ink-soft);
}
.pn-ready-legend i {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	margin-right: 5px;
	vertical-align: -1px;
	background: var(--bg, var(--paper));
	border: 1px solid var(--paper-line);
}
.pn-ready-legend i.seg-m {
	background: var(--teal);
	border-color: transparent;
}
.pn-ready-legend i.seg-l {
	background: var(--amber);
	border-color: transparent;
}
.pn-ready-hint {
	flex-basis: 100%;
	font-style: italic;
}

/* "Wróci za 7 dni" pod wynikiem odpowiedzi (quiz.php) */
.result-next {
	font-size: 12.5px;
	color: var(--ink-soft);
	margin: 4px 0 0;
}

/* "Powodzenia!" na panelu - egzamin z planu nauki za 0-3 dni (dashboard.php). Granatowa w obu trybach. */
.goodluck {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	background: linear-gradient(120deg, #0b1420 0%, #17293f 100%);
	border: 1px solid #223a54;
	border-left: 3px solid var(--amber);
	color: #e8e6dd;
	padding: 16px 20px;
	margin-bottom: 24px;
}
.goodluck-icon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(217, 142, 43, 0.15);
	color: var(--amber);
	font-size: 20px;
}
.goodluck-main {
	flex: 1;
	min-width: 220px;
}
.goodluck-title {
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}
.goodluck-fingers {
	color: var(--amber);
	white-space: nowrap;
}
.goodluck-tip {
	font-size: 13px;
	color: #b9c2cc;
	margin-top: 3px;
	line-height: 1.5;
}
.goodluck-link {
	flex: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--amber);
	text-decoration: none;
	white-space: nowrap;
}
.goodluck-link:hover {
	text-decoration: underline;
}

/* "Pomoże też:" - przewodnik i narzędzia do najsłabszego przedmiotu, doklejone pod banerem */
.weakest-helpers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: -24px 0 24px;
	padding: 10px 18px 11px;
	background: var(--surface-2, #f6f4ee);
	border: 1px solid var(--paper-line);
	border-top: 0;
	border-left: 3px solid var(--danger);
	font-size: 13px;
}
.weakest-helpers-label {
	color: var(--ink-soft);
	margin-right: 2px;
}
.weakest-helpers a {
	color: var(--ink);
	text-decoration: none;
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	border-radius: 999px;
	padding: 3px 11px;
	font-weight: 500;
}
.weakest-helpers a:hover {
	border-color: var(--amber-dark);
	color: var(--amber-dark);
}

/* ---------- formularze (contribute i inne) ---------- */
.expiry-banner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--tint-amber, #fbf6ec);
	border: 1px solid var(--amber-dark);
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: 13.5px;
}
.field {
	margin-bottom: 16px;
}
.field label {
	display: block;
	font-size: 12.5px;
	color: var(--ink-soft);
	margin-bottom: 6px;
}
.field input[type='text'],
.field input[type='email'],
.field textarea,
.field select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--paper-line);
	font-size: 14px;
	font-family: inherit;
	background: var(--surface, #fff);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
	outline: 2px solid var(--amber-dark);
	outline-offset: 1px;
}

/* ---------- contribute: dodawanie pytania ---------- */
.contribute-note {
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	border-left: 3px solid var(--amber);
	padding: 14px 16px;
	font-size: 13px;
	color: var(--ink-soft);
	margin-bottom: 28px;
	line-height: 1.6;
}
.answer-input-row {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 10px;
}
.answer-input-row input[type='radio'] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--teal);
}
.answer-input-row input[type='text'] {
	flex: 1;
}
.answer-input-row .letter {
	width: 22px;
	font-family: var(--font-head);
	font-size: 12px;
	color: var(--ink-soft);
	flex-shrink: 0;
	text-align: center;
}
.field-error-msg {
	font-size: 12px;
	color: var(--danger);
	margin-top: 5px;
}

@media (max-width: 680px) {
	.topbar {
		padding: 14px 18px;
		flex-wrap: wrap;
		row-gap: 10px;
	}
	.wordmark {
		font-size: 15px;
	}
	.user-menu {
		gap: 10px;
		flex-wrap: wrap;
		font-size: 12.5px;
	}
	.page {
		padding: 28px 18px 100px;
	}
}

@media (max-width: 420px) {
	.user-menu > span {
		display: none;
	}
}

/* ---- "Zgłoś błąd w pytaniu" (quiz.php) ---- */
.report-box {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px dashed var(--paper-line);
	font-size: 13px;
}
.report-details summary {
	cursor: pointer;
	color: var(--ink-soft);
	font-size: 12.5px;
	list-style: none;
	display: inline-block;
}
.report-details summary::-webkit-details-marker {
	display: none;
}
.report-details summary:hover {
	color: var(--danger);
}
.report-details[open] summary {
	color: var(--ink);
	font-weight: 600;
	margin-bottom: 10px;
}
.report-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 520px;
}
.report-form label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-soft);
}
.report-form select,
.report-form textarea {
	font-family: var(--font-body);
	font-size: 13.5px;
	padding: 8px 10px;
	border: 1px solid var(--paper-line);
	background: var(--surface, #fff);
	width: 100%;
}
.report-form button {
	align-self: flex-start;
	margin-top: 4px;
}
.report-hint {
	font-size: 12px;
	color: var(--ink-soft);
}
.report-flash {
	padding: 8px 12px;
	margin-bottom: 10px;
	font-size: 13px;
	border-left: 3px solid var(--teal);
	background: var(--tint-teal, #f1faf7);
	color: var(--ink-teal, #1f5b4e);
}
.report-flash.err {
	border-left-color: var(--danger);
	background: var(--tint-red, #fbeeed);
	color: var(--danger);
}

/* ---------- stopka panelu (renderAppFooter w app/includes/tresci/public_layout.php) ---------- */
.app-footer {
	background: var(--navy-950);
	border-top: 1px solid var(--navy-700);
	padding: 40px 32px 0;
}
.app-footer-grid {
	max-width: 920px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}
.app-footer-col h4 {
	font-family: var(--font-head);
	color: var(--paper);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 14px;
}
.app-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.app-footer-col a {
	color: #8a9bad;
	font-size: 13.5px;
	text-decoration: none;
}
.app-footer-col a:hover {
	color: var(--paper);
}
.app-footer-bottom {
	max-width: 920px;
	margin: 32px auto 0;
	border-top: 1px solid #1d2d40;
	padding: 18px 0 22px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
	color: #56687b;
	font-size: 12px;
}
@media (max-width: 760px) {
	.app-footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 420px) {
	.app-footer {
		padding: 32px 20px 0;
	}
	.app-footer-bottom {
		flex-direction: column;
	}
}

/* ---------- aplikacja na telefon (app/includes/tresci/pwa.php, assets/js/pwa.js) ---------- */
[data-pwa] [hidden],
.pwa-banner[hidden] {
	display: none !important;
}
.pwa-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	border-left: 3px solid var(--amber);
	padding: 12px 40px 12px 14px;
	margin: 0 0 24px;
	position: relative;
}
.pwa-banner img {
	flex: none;
	border-radius: 9px;
}
.pwa-banner-text {
	flex: 1;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink-soft);
}
.pwa-banner-text strong {
	display: block;
	margin-bottom: 2px;
	font-family: var(--font-head);
	font-size: 14px;
	color: var(--ink);
}
.pwa-install-btn {
	flex: none;
	padding: 8px 14px;
	font-size: 13px;
}
.pwa-close {
	position: absolute;
	top: 8px;
	right: 8px;
	background: none;
	border: 0;
	padding: 0 4px;
	font-size: 22px;
	line-height: 1;
	color: var(--ink-soft);
	cursor: pointer;
}
.pwa-close:hover {
	color: var(--ink);
}
.pwa-share {
	width: 15px;
	height: 15px;
	vertical-align: -2px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pwa-account-lead {
	color: var(--ink-soft);
	font-size: 13.5px;
	margin-bottom: 12px;
}
.pwa-account-note {
	margin: 0;
	font-size: 13.5px;
	color: var(--ink-soft);
}
.pwa-account-note.pwa-ok {
	color: var(--ink-teal, #1f5b4e);
	font-weight: 600;
}
@media (max-width: 420px) {
	.pwa-banner {
		flex-wrap: wrap;
	}
	.pwa-banner-text {
		flex-basis: calc(100% - 54px);
	}
	.pwa-install-btn {
		margin-left: 54px;
	}
}

/* ---------- plan nauki: "Plan na dziś zrobiony" - co dalej (panel i koniec sesji planu, study_plan.php::renderPlanDoneBelt) ---------- */
.pn-done {
	border: 1px solid var(--teal);
	background: var(--tint-teal, #f1faf7);
	padding: 16px 18px;
	margin: 4px 0 18px;
	text-align: left;
}
.pn-done-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 6px 12px;
	flex-wrap: wrap;
}
.pn-done-title {
	font-weight: 700;
	font-size: 15px;
	color: var(--ink-teal, #1f5b4e);
}
.pn-done-title span {
	font-weight: 400;
	font-size: 13px;
}
.pn-done-next {
	font-size: 12.5px;
	color: var(--ink-soft);
}
.pn-done-text {
	font-size: 13px;
	color: var(--ink);
	margin: 6px 0 14px;
}
.pn-done-opts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
}
.pn-done-opt {
	display: block;
	background: var(--surface, #fff);
	border: 1px solid var(--paper-line);
	color: var(--ink);
	text-decoration: none;
	padding: 12px 14px;
}
.pn-done-opt b {
	display: block;
	font-size: 14px;
}
.pn-done-opt span {
	display: block;
	font-size: 12px;
	margin-top: 3px;
	color: var(--ink-soft);
}
.pn-done-opt:hover {
	border-color: var(--teal);
}
.pn-done-opt.main {
	background: var(--amber);
	border-color: var(--amber);
	color: #241704;
}
.pn-done-opt.main span {
	color: #241704;
}
.pn-done-opt.main:hover {
	background: var(--amber-dark);
	border-color: var(--amber-dark);
}
.summary-card .pn-done {
	margin: 18px 0 0;
}
.pn-done-hint {
	font-size: 12px;
	color: var(--ink-soft);
	margin: -14px 0 16px;
}

/* karta wyniku: przycisk pod zdanym egzaminem próbnym (quiz.php -> /wynik.php) */
.summary-share {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding: 12px 14px;
	border: 1px solid var(--paper-line);
	border-left: 4px solid var(--teal);
	background: var(--surface, #fff);
	font-size: 13.5px;
	color: var(--ink-soft);
}
.summary-share .btn {
	padding: 9px 16px;
	font-size: 13.5px;
}

/* skróty klawiszowe w nauce (quiz.php) - podpowiedź tylko przy myszce i klawiaturze */
.kbd-hint { display: none; margin: 14px 0 0; font-size: 12px; color: var(--ink-soft); text-align: right; }
.kbd-hint kbd { font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 1px 5px; border: 1px solid var(--paper-line); border-bottom-width: 2px; background: var(--surface, #fff); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .kbd-hint { display: block; } }

/* terminy FCL.025 na panelu (dashboard.php) */
.fcl-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--surface, #fff); border: 1px solid var(--paper-line); border-left: 3px solid var(--teal, #3fa796); padding: 12px 16px; margin: 0 0 24px; font-size: 13px; }
.fcl-bar.mid { border-left-color: var(--amber, #d98e2b); }
.fcl-bar.bad { border-left-color: #c0392b; }
.fcl-bar a { color: var(--amber-dark); font-size: 12.5px; white-space: nowrap; }


/* ---- Tematy pytań: lista tematów w ustawieniach, podsumowanie dnia na panelu (topics.php); linia pod pytaniem i rysunki - tematy.css ---- */
.topic-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--paper-line); }
.topic-list li { border-bottom: 1px solid var(--paper-line); }
.topic-row { display: grid; grid-template-columns: minmax(0, 1fr) 58px 120px 82px 104px; align-items: center; gap: 12px; padding: 10px 4px; color: var(--ink); text-decoration: none; font-size: 13px; }
.topic-row:hover { background: var(--bg, var(--paper)); }
.topic-row-name { font-weight: 600; }
.topic-row-n, .topic-row-stat, .topic-row-acc { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.topic-row-acc { text-align: right; }
.topic-row-bar { height: 6px; background: var(--bg, var(--paper)); border: 1px solid var(--paper-line); }
.topic-row-bar i { display: block; height: 100%; background: var(--teal); }
.topic-row.low .topic-row-acc { color: var(--danger); font-weight: 600; }
.topic-weak-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--danger); color: var(--danger); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; vertical-align: 1px; }
@media (max-width: 640px) {
  .topic-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .topic-row-name { grid-column: 1 / -1; }
  .topic-row-bar { grid-column: 1 / -1; }
  .topic-row-n { display: none; }
}

.day-card { max-width: 820px; margin: 0 0 16px; padding: 18px 20px; background: var(--surface, #fff); border: 1px solid var(--paper-line); }
.day-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 4px; }
.day-card-label { font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.day-card-sum { font-size: 13px; color: var(--ink-soft); }
.day-card-sum b { color: var(--ink); }
.day-card-sub { display: block; margin: 14px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.day-topics { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--paper-line); }
.day-topics li { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--paper-line); font-size: 13px; }
.day-topic-name { font-weight: 600; }
.day-topic-name span { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.day-topic-n { color: var(--ink-soft); font-size: 12.5px; }
.day-topic-n b { color: var(--danger); }
.day-topic-links { display: flex; gap: 14px; white-space: nowrap; }
.day-topic-links a, .day-card-weak a { font-weight: 600; font-size: 12.5px; color: var(--amber-text, #85500e); text-decoration: none; }
.day-topic-links a:hover, .day-card-weak a:hover { text-decoration: underline; }
.day-card-more, .day-card-note { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }
.day-card-weak { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.day-card-weak .day-card-sub { flex-basis: 100%; margin-bottom: 0; }
.day-card-weak b { color: var(--danger); }
.day-card-weak a span { margin-left: 6px; font-weight: 400; font-size: 11.5px; color: var(--ink-soft); }
[data-theme="dark"] .day-topic-links a, [data-theme="dark"] .day-card-weak a { color: var(--amber); }
@media (max-width: 640px) {
  .day-topics li { grid-template-columns: minmax(0, 1fr) auto; }
  .day-topic-links { grid-column: 1 / -1; }
}

/* Panel: „Na czym się dziś skupić” - dzisiejsze błędy i słabe punkty w jednej karcie (zastępuje day-card i baner najsłabszego przedmiotu) */
.focus-card { margin: 0 0 16px; background: var(--surface, #fff); border: 1px solid var(--paper-line); }
.focus-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding: 18px 22px; border-bottom: 1px solid var(--paper-line); }
.focus-label { font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.focus-sum { margin-top: 3px; font-size: 13px; color: var(--ink-soft); }
.focus-sum b { color: var(--ink); }
.focus-cta { white-space: nowrap; }
.focus-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.focus-col { padding: 16px 22px 18px; min-width: 0; }
.focus-col + .focus-col { border-left: 1px solid var(--paper-line); }
.focus-sub { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.focus-list { list-style: none; margin: 0; padding: 0; }
.focus-list li { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--paper-line); }
.focus-list li:last-child { border-bottom: 0; }
.focus-topic { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 52px 44px; align-items: center; gap: 12px; padding: 9px 0; color: var(--ink); text-decoration: none; font-size: 13px; }
.focus-topic:hover .focus-name { text-decoration: underline; }
.focus-name { font-weight: 600; line-height: 1.3; }
.focus-name small { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.focus-list-ok .focus-topic { grid-template-columns: minmax(0, 1fr) 52px 80px; }
.focus-bar { height: 6px; background: var(--paper-line); overflow: hidden; }
.focus-bar i { display: block; height: 100%; }
.focus-bar-bad i { background: var(--danger, #c0392b); }
.focus-bar-ok i { background: var(--amber, #d98e2b); }
.focus-n { font-size: 12.5px; color: var(--ink-soft); text-align: right; white-space: nowrap; }
.focus-bar-bad + .focus-n b { color: var(--danger, #c0392b); }
.focus-more { font-size: 12px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.focus-more:hover { color: var(--ink); }
.focus-rest { margin-top: 2px; }
.focus-rest summary { cursor: pointer; padding: 8px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--amber-text, #85500e); }
.focus-rest[open] summary { border-bottom: 1px solid var(--paper-line); }
.focus-note { margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); }
.focus-ok { color: var(--teal-dark, #23806f); font-weight: 600; }
.focus-subject { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; margin: 0 0 6px; padding: 10px 12px; border-left: 3px solid var(--danger, #c0392b); background: rgba(192, 57, 43, .06); color: var(--ink); text-decoration: none; }
.focus-subject > span:first-child { font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.focus-subject small { display: block; font-family: var(--font-body, inherit); font-weight: 600; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.focus-subject-pct { font-size: 13px; color: var(--ink-soft); text-align: right; }
.focus-subject-pct b { color: var(--danger, #c0392b); font-size: 15px; }
.focus-subject-cta { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; color: var(--danger, #c0392b); }
.focus-subject:hover .focus-subject-cta { text-decoration: underline; }
.focus-help { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: 12px; color: var(--ink-soft); }
.focus-help a { padding: 3px 10px; border: 1px solid var(--paper-line); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; }
.focus-help a:hover { border-color: var(--ink-soft); }
[data-theme="dark"] .focus-subject { background: rgba(232, 107, 90, .10); }
[data-theme="dark"] .focus-rest summary { color: var(--amber); }
@media (max-width: 760px) {
  .focus-cols { grid-template-columns: 1fr; }
  .focus-col + .focus-col { border-left: 0; border-top: 1px solid var(--paper-line); }
  .focus-head, .focus-col { padding-left: 16px; padding-right: 16px; }
  .focus-cta { width: 100%; text-align: center; }
  .focus-topic { grid-template-columns: minmax(0, 1fr) 40px 40px; gap: 8px; }
  .focus-list-ok .focus-topic { grid-template-columns: minmax(0, 1fr) 40px 76px; }
}

/* Ikony liniowe (icons.php) */
.ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.goodluck-icon .ico { width: 22px; height: 22px; vertical-align: 0; }
.pn-review-check .ico, .pn-verdict .ico, .focus-note .ico, .expiry-banner .ico { vertical-align: -0.18em; }

/* ---------- Dashboard: układ dwukolumnowy (statystyki u góry, plan + fokus obok siebie) ---------- */
@media (min-width: 1000px) {
	.dash-wrap { display: flex; flex-direction: column; max-width: 1180px; }
	.dash-wrap > * { order: 5; }
	.dash-wrap > .page-title, .dash-wrap > .page-sub { order: 0; }
	.dash-wrap > .goodluck, .dash-wrap > .expiry-banner, .dash-wrap > .pwa-banner { order: 1; }
	.dash-wrap > .stats-grid { order: 2; margin-bottom: 24px; }
	.dash-wrap > [id^="plan-nauki-"] { order: 3; }
	.dash-wrap > .focus-card { order: 4; }
	/* Dwie kolumny tylko, gdy jest aktywny plan nauki (karta z paskiem postępu) - bez planu fokus i paski idą w jednej kolumnie */
	.dash-wrap:has(> [id^="plan-nauki-"] .pn-progress) {
		display: grid;
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		column-gap: 24px;
		align-items: start;
		grid-auto-rows: min-content;
	}
	.dash-wrap:has(> [id^="plan-nauki-"] .pn-progress) > * { grid-column: 1 / -1; }
	.dash-wrap:has(> [id^="plan-nauki-"] .pn-progress) > [id^="plan-nauki-"] { order: 3; grid-column: 1; grid-row: span 4; margin-bottom: 0; }
	.dash-wrap:has(> [id^="plan-nauki-"] .pn-progress) > [id^="plan-nauki-"] ~ [id^="plan-nauki-"] { grid-column: 1 / -1; grid-row: auto; margin-bottom: 24px; }
	.dash-wrap:has(> [id^="plan-nauki-"] .pn-progress) > .focus-card { order: 3; grid-column: 2; margin: 0; }
	.dash-wrap:has(> [id^="plan-nauki-"] .pn-progress) > .dash-ulc,
	.dash-wrap:has(> [id^="plan-nauki-"] .pn-progress) > .fcl-bar { order: 4; grid-column: 2; margin: 12px 0 0 !important; }
	.dash-wrap:has(> [id^="plan-nauki-"] .pn-progress) .focus-cols { grid-template-columns: 1fr; }
	.dash-wrap:has(> [id^="plan-nauki-"] .pn-progress) .focus-cols > * { border-left: 0; }
}
.pn-verdict-late {
	background: transparent;
	border-color: transparent;
	border-left: 3px solid var(--amber);
	color: var(--ink);
}
.pn-verdict-late .ico { color: var(--amber); }
.stat-tile { padding: 14px 18px; }

/* Licencje jeszcze niedostępne: jedna linia zamiast kafli */
.course-soon { margin: -24px 0 40px; font-size: 12.5px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
.course-soon-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.course-soon-item strong { color: var(--ink); font-family: var(--font-head); font-weight: 600; }

/* Zakup: wybór okresu dostępu (dashboard) */
.course-card.selectable.selected::after { content: "Wybrano"; position: absolute; top: 14px; right: 14px; padding: 3px 8px 3px 24px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241704' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat 6px center / 12px; color: #241704; }
.plan-card { position: relative; padding: 20px; transition: border-color .15s, background .15s, box-shadow .15s; }
.plan-card:hover { border-color: var(--navy-700); }
.plan-card.selected, .plan-card.featured.selected { border: 2px solid var(--amber-dark); padding: 19px; background: var(--tint-amber, #fbf6ec); box-shadow: 0 6px 18px rgba(217, 142, 43, 0.18); }
.plan-card.selected .len { color: var(--amber-dark); }
.plan-card .price { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.plan-card .plan-note { font-size: 12px; color: var(--ink-soft); margin-top: 6px; line-height: 1.45; }
.buy-inline { display: none; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 40px; padding: 16px 20px; background: var(--navy-950); color: var(--paper); }
.buy-inline-summary { font-size: 14px; color: #9fb0c1; }
.buy-inline-summary b { color: var(--paper); font-weight: 600; }
@media (min-width: 900px) {
	.buy-inline { display: flex; }
	.buy-bar { display: none; }
}
.plan-card.featured:not(.selected) { border: 1px solid var(--paper-line); }