/*
 * Alex Permis Academy — front-end design system.
 * Scoped under .apa / .apa-body so it never overrides Elementor or theme styles.
 * Breakpoints: mobile ≤767 · tablet 768–1023 · laptop 1024–1199 · desktop ≥1200.
 */

/* ===================================================================== tokens */
.apa,
.apa-body {
	--apa-ink: #080808;
	--apa-ink-2: #111111;
	--apa-surface: #f5f5f5;
	--apa-white: #ffffff;
	--apa-text: #080808;
	--apa-muted: #6b6b6b;
	--apa-border: #e6e6e6;
	--apa-input: #d9d9d9;
	--apa-c1: #ff3b18;
	--apa-c2: #4653ce;
	--apa-c3: #6d921c;
	--apa-c4: #ff9800;
	--apa-success: #1f9254;
	--apa-danger: #d12f12;
	--apa-warning: #b56b00;
	--apa-gradient: linear-gradient(120deg, var(--apa-c1), var(--apa-c4));
	--apa-radius: 14px;
	--apa-radius-sm: 10px;
	--apa-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px -12px rgb(0 0 0 / 10%);
	--apa-shadow-cta: 0 10px 24px -10px rgb(255 59 24 / 60%);
	--apa-font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--apa-focus: 0 0 0 3px rgb(255 59 24 / 35%);
	font-family: var(--apa-font);
	color: var(--apa-text);
	-webkit-font-smoothing: antialiased;
}

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

:where(.apa) :is(h1, h2, h3, h4) {
	font-family: var(--apa-font);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--apa-text);
	margin: 0;
}

:where(.apa) p {
	margin: 0;
}

:where(.apa) a {
	color: inherit;
}

:where(.apa) img {
	max-width: 100%;
	height: auto;
}

.apa :focus-visible {
	outline: none;
	box-shadow: var(--apa-focus);
	border-radius: 6px;
}

.apa-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
.apa-icon--sm { width: 16px; height: 16px; }
.apa-icon--xs { width: 13px; height: 13px; }

.apa .screen-reader-text,
.apa-body .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ===================================================================== utilities */
.apa [hidden],
.apa-body [hidden] { display: none !important; } /* the hidden attribute must beat component display rules */

.apa-h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2rem); }
.apa-h2 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem); }
.apa-h3 { font-size: 1.1rem; }
.apa-h4 { font-size: 0.95rem; }
.apa-muted { color: var(--apa-muted); }
.apa-small { font-size: 0.82rem; }
.apa-strong { font-weight: 600; }
.apa-ink { color: var(--apa-ink); }
.apa-center { text-align: center; }
.apa-grow { flex: 1 1 auto; min-width: 0; }
.apa-pad { padding: 20px; }
.apa-pad-x { padding: 20px 20px 0; }
.apa-text-c1 { color: var(--apa-c1); }
.apa-text-c4 { color: var(--apa-warning); }
.apa-text-success { color: var(--apa-success); }
.apa-text-muted { color: var(--apa-muted); }
.apa-with-icon { display: flex; align-items: center; gap: 8px; }
.apa .apa-link,
.apa-link { color: var(--apa-c1); font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }
.apa .apa-link:hover { text-decoration: underline; }
.apa-stack > * + * { margin-top: 16px; }
.apa-stack--lg > * + * { margin-top: 28px; }
.apa-section + .apa-section { margin-top: 16px; }
.apa-code { background: var(--apa-surface); padding: 2px 8px; border-radius: 6px; letter-spacing: 0.04em; }
.apa-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--apa-c1); }
.apa-eyebrow--muted { color: var(--apa-muted); }
.apa-back { display: inline-block; margin-bottom: 16px; font-size: 0.875rem; font-weight: 600; color: var(--apa-muted); text-decoration: none; }
.apa-back:hover { color: var(--apa-ink); }
.apa-hide-sm { display: none; }
@media (min-width: 768px) { .apa-hide-sm { display: inline-grid; } }
.apa-no-scroll { overflow: hidden; }

.apa-skip {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 100;
	background: var(--apa-ink, #080808);
	color: #fff;
	padding: 8px 14px;
	border-radius: 8px;
}
.apa-skip:focus { left: 8px; }

/* ===================================================================== card */
.apa-card {
	background: var(--apa-white);
	border: 1px solid var(--apa-border);
	border-radius: var(--apa-radius);
	box-shadow: var(--apa-shadow);
	min-width: 0;
}
a.apa-card {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.apa-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(0 0 0 / 4%), 0 14px 30px -14px rgb(0 0 0 / 18%); }

/* ===================================================================== buttons */
.apa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: var(--apa-radius-sm);
	border: 1px solid transparent;
	font: 600 0.9rem/1.2 var(--apa-font);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: filter 0.2s, background 0.2s, border-color 0.2s, transform 0.1s;
	background: var(--apa-c1);
	color: #fff;
}
:is(.apa, .apa-body) .apa-btn--primary { color: #fff; }
.apa-btn:active { transform: translateY(1px); }
.apa-btn[disabled],
.apa-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.apa-btn .apa-icon { width: 18px; height: 18px; }
:is(.apa, .apa-body) .apa-btn--cta { background-image: var(--apa-gradient); color: #fff; box-shadow: var(--apa-shadow-cta); }
:is(.apa, .apa-body) .apa-btn--cta:hover,
:is(.apa, .apa-body) .apa-btn--primary:hover { filter: brightness(1.08); color: #fff; }
:is(.apa, .apa-body) .apa-btn--ink { background: var(--apa-ink); color: #fff; }
:is(.apa, .apa-body) .apa-btn--ink:hover { background: var(--apa-ink-2); color: #fff; }
:is(.apa, .apa-body) .apa-btn--outline { background: var(--apa-white); color: var(--apa-ink); border-color: var(--apa-input); }
:is(.apa, .apa-body) .apa-btn--outline:hover { border-color: var(--apa-ink); background: var(--apa-surface); }
.apa-btn--outline[aria-pressed="true"] { border-color: var(--apa-ink); background: var(--apa-surface); }
.apa-btn--outline[aria-pressed="true"][data-apa-bookmark="favorite"] .apa-icon { fill: var(--apa-c4); color: var(--apa-c4); }
.apa-btn--outline[aria-pressed="true"][data-apa-bookmark="review"] .apa-icon { color: var(--apa-c1); }
:is(.apa, .apa-body) .apa-btn--ghost { background: transparent; color: var(--apa-ink); }
:is(.apa, .apa-body) .apa-btn--ghost:hover { background: var(--apa-surface); }
:is(.apa, .apa-body) .apa-btn--ghost-light { background: transparent; color: #fff; border-color: rgb(255 255 255 / 40%); }
:is(.apa, .apa-body) .apa-btn--ghost-light:hover { background: rgb(255 255 255 / 10%); color: #fff; }
:is(.apa, .apa-body) .apa-btn--outline-light { background: rgb(255 255 255 / 92%); color: var(--apa-ink); }
.apa-btn--sm { min-height: 36px; padding: 0 12px; font-size: 0.8rem; }
.apa-btn--lg { min-height: 50px; padding: 0 26px; font-size: 1rem; }
.apa-btn--xl { min-height: 56px; padding: 0 30px; font-size: 1rem; }
.apa-btn--block { width: 100%; }
.apa-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.apa-actions--center { justify-content: center; }

/* ===================================================================== badges & chips */
.apa-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 600;
	white-space: nowrap;
	background: var(--apa-surface);
	color: var(--apa-muted);
}
.apa-badge--progress { background: rgb(255 152 0 / 16%); color: #7a4a00; }
.apa-badge--review { background: rgb(255 59 24 / 12%); color: #b52a0e; }
.apa-badge--done { background: rgb(31 146 84 / 14%); color: #17703f; }
.apa-badge--info { background: rgb(70 83 206 / 12%); color: var(--apa-c2); }

.apa-chip {
	--apa-c: var(--apa-c1);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 600;
	background: color-mix(in srgb, var(--apa-c) 12%, transparent);
	color: color-mix(in srgb, var(--apa-c) 82%, #000);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.apa-comp-icon {
	--apa-c: var(--apa-c1);
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	flex-shrink: 0;
	background: color-mix(in srgb, var(--apa-c) 12%, transparent);
	color: var(--apa-c);
}
.apa-comp-icon--sm { width: 36px; height: 36px; border-radius: 10px; }
.apa-comp-icon--sm .apa-icon { width: 17px; height: 17px; }
.apa-comp-icon--white { background: var(--apa-white); }

/* ===================================================================== progress */
.apa-progress {
	--apa-c: var(--apa-c1);
	width: 100%;
	height: 10px;
	background: #e8e8e8;
	border-radius: 999px;
	overflow: hidden;
}
.apa-progress--thin { height: 6px; }
.apa-progress__bar {
	display: block;
	height: 100%;
	background: var(--apa-c);
	border-radius: inherit;
	transition: width 0.7s ease;
}
.apa-progress--success .apa-progress__bar { background: var(--apa-success); }

.apa-meter { display: block; flex: 1; height: 8px; border-radius: 999px; background: #e8e8e8; overflow: hidden; }
.apa-meter > span { display: block; height: 100%; border-radius: inherit; background: #cfcfcf; }
.apa-meter--progress > span { background: var(--apa-c4); }
.apa-meter--review > span { background: var(--apa-c1); }
.apa-meter--done > span { background: var(--apa-success); }

/* ===================================================================== notices */
.apa-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 0.9rem;
	border: 1px solid rgb(70 83 206 / 25%);
	background: rgb(70 83 206 / 8%);
}
.apa-notice > .apa-icon { color: var(--apa-c2); }
.apa-notice__text { flex: 1 1 220px; }
.apa-notice--warning { border-color: rgb(255 152 0 / 40%); background: rgb(255 152 0 / 10%); }
.apa-notice--warning > .apa-icon { color: var(--apa-warning); }
.apa-notice--danger { border-color: rgb(255 59 24 / 35%); background: rgb(255 59 24 / 8%); }
.apa-notice--danger > .apa-icon { color: var(--apa-c1); }
.apa-notice--success { border-color: rgb(31 146 84 / 30%); background: rgb(31 146 84 / 8%); }
.apa-notice--success > .apa-icon { color: var(--apa-success); }
.apa-notice a { font-weight: 600; }

.apa-callout { background: rgb(255 59 24 / 8%); border-radius: 12px; padding: 14px 16px; }
.apa-success-line { display: flex; align-items: center; gap: 6px; color: var(--apa-success); font-weight: 600; font-size: 0.9rem; margin-top: 12px; }
.apa-success-line[hidden] { display: none; }
.apa-success-line .apa-icon { animation: apa-pop 0.5s ease-out both; }

@keyframes apa-pop {
	0% { transform: scale(0.4); opacity: 0; }
	70% { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); }
}

/* ===================================================================== grids */
.apa-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.apa-grid--2,
	.apa-grid--comps,
	.apa-grid--lessons,
	.apa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
	.apa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.apa-grid--lessons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.apa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.apa-grid--comps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.apa-grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.apa-grid--stats .apa-stat--wide { grid-column: 1 / -1; }
@media (min-width: 1024px) {
	.apa-grid--stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
	.apa-grid--stats .apa-stat--wide { grid-column: auto; }
}

/* ===================================================================== stat */
.apa-stat { padding: 16px; }
.apa-stat__label { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 500; color: var(--apa-muted); }
.apa-stat__value { margin: 6px 0 2px; font-size: 1.55rem; font-weight: 700; line-height: 1.2; }
.apa-stat__hint { font-size: 0.75rem; color: var(--apa-muted); }
.apa-stat .apa-progress { margin-top: 8px; }

/* ===================================================================== empty */
.apa-empty { padding: 40px 20px; text-align: center; }
.apa-empty__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--apa-surface); color: var(--apa-muted); }
.apa-empty h3 { margin-top: 14px; font-size: 1.1rem; }
.apa-empty p { margin: 6px auto 0; max-width: 360px; font-size: 0.9rem; color: var(--apa-muted); }
.apa-empty__action { margin-top: 18px; }

/* ===================================================================== page head */
.apa-page-head { margin-bottom: 20px; }
.apa-page-head p { margin-top: 6px; }
.apa-page-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.apa-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

/* ===================================================================== competency card */
.apa-comp-card {
	--apa-c: var(--apa-c1);
	display: flex;
	flex-direction: column;
	padding: 20px;
	border-top: 4px solid var(--apa-c);
}
.apa-comp-card__head { display: flex; justify-content: space-between; align-items: flex-start; }
.apa-comp-card__num { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--apa-c); opacity: 0.25; }
.apa-comp-card__title { margin-top: 16px; font-size: 1rem; line-height: 1.3; }
.apa-comp-card__modules { list-style: none; margin: 12px 0 0; padding: 0; font-size: 0.86rem; color: var(--apa-muted); flex: 1; }
.apa-comp-card__modules li { position: relative; padding-left: 14px; margin: 6px 0; }
.apa-comp-card__modules li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--apa-c); }
.apa-comp-card__meta { display: flex; justify-content: space-between; margin: 18px 0 6px; font-size: 0.75rem; font-weight: 500; color: var(--apa-muted); }
.apa-comp-card__meta strong { color: var(--apa-ink); }
.apa-comp-card__status { margin-top: 10px; }
.apa-comp-card__cta { margin-top: 14px; font-size: 0.88rem; font-weight: 600; color: var(--apa-c); }
.apa-comp-card:hover .apa-comp-card__cta span { display: inline-block; transform: translateX(4px); transition: transform 0.2s; }

/* ===================================================================== lesson card */
.apa-lesson-card { --apa-c: var(--apa-c1); overflow: hidden; display: flex; flex-direction: column; }
.apa-lesson-card__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--apa-ink); overflow: hidden; }
.apa-lesson-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apa-lesson-card.is-locked .apa-lesson-card__media img { filter: grayscale(1); opacity: 0.6; }
.apa-lesson-card__duration { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: rgb(255 255 255 / 92%); font-size: 0.72rem; font-weight: 600; color: var(--apa-ink); }
.apa-lesson-card__play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgb(255 255 255 / 95%); color: var(--apa-c1); box-shadow: 0 8px 20px rgb(0 0 0 / 25%); }
.apa-lesson-card__play .apa-icon { width: 20px; height: 20px; }
.apa-lesson-card.is-locked .apa-lesson-card__play { color: var(--apa-ink); }
.apa-lesson-card.is-done .apa-lesson-card__play { color: var(--apa-success); }
.apa-lesson-card__free { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 6px; background: var(--apa-success); color: #fff; font-size: 0.72rem; font-weight: 700; }
.apa-lesson-card__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.apa-lesson-card__title { font-weight: 600; font-size: 0.9rem; line-height: 1.35; min-height: 2.7em; }
.apa-lesson-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: auto; font-size: 0.75rem; color: var(--apa-muted); }
.apa-lesson-card__meta > span { display: inline-flex; gap: 4px; align-items: center; }

/* ===================================================================== continue */
.apa-continue { --apa-c: var(--apa-c2); padding: 20px; border-left: 4px solid var(--apa-c); }
.apa-continue__row { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.apa-continue__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.apa-continue__title { margin-top: 8px; font-size: 1.2rem; }
.apa-continue__body .apa-progress { margin-top: 10px; max-width: 380px; }
.apa-continue .apa-btn { width: 100%; }
@media (min-width: 768px) {
	.apa-continue { padding: 24px; }
	.apa-continue__row { flex-direction: row; align-items: center; gap: 20px; }
	.apa-continue__media { flex: 0 0 200px; }
	.apa-continue__body { flex: 1; min-width: 0; }
	.apa-continue .apa-btn { width: auto; }
}

/* ===================================================================== rows & lists */
.apa-rows { list-style: none; margin: 14px 0 0; padding: 0; }
.apa-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--apa-border); }
.apa-row:first-child { border-top: 0; }
.apa-rows--compact .apa-row { padding: 8px 0; border-top: 0; }
.apa-row__main { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.apa-row__title { font-weight: 600; font-size: 0.9rem; text-decoration: none; }
a.apa-row__title:hover { color: var(--apa-c1); }
.apa-list { margin: 12px 0 0; padding-left: 18px; color: var(--apa-muted); font-size: 0.9rem; }
.apa-list li { margin: 6px 0; }
.apa-checklist { list-style: none; margin: 16px 0; padding: 0; }
.apa-checklist li { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 0.9rem; }
.apa-checklist .apa-icon { color: var(--apa-success); margin-top: 1px; }
.apa-checklist--inline { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.apa-checklist--inline li { margin: 4px 0; }
.apa-meta-list { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 14px 0; padding: 0; font-size: 0.86rem; color: var(--apa-muted); }
.apa-meta-list li { display: flex; align-items: center; gap: 6px; }
.apa-meta-list--col { flex-direction: column; gap: 8px; flex: 1; }
.apa-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 12px 0; }
@media (min-width: 768px) { .apa-dl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.apa-dl dt { font-size: 0.75rem; color: var(--apa-muted); }
.apa-dl dd { margin: 2px 0 0; font-weight: 600; }

/* ===================================================================== dashboard extras */
.apa-streak { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border-radius: 12px; background: rgb(255 59 24 / 10%); }
.apa-streak > .apa-icon { color: var(--apa-c1); }
.apa-streak.is-off { background: var(--apa-surface); }
.apa-streak.is-off > .apa-icon { color: var(--apa-muted); }
.apa-streak__title { font-weight: 700; }
.apa-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.apa-badge-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; background: var(--apa-surface); font-size: 0.7rem; font-weight: 600; text-align: center; opacity: 0.45; }
.apa-badge-tile.is-earned { opacity: 1; }
.apa-badge-tile.is-earned .apa-icon { color: var(--apa-c4); }
.apa-state-panel { padding: 32px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.apa-state-panel .apa-progress { max-width: 420px; }
.apa-state-panel__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--apa-surface); color: var(--apa-muted); }
.apa-state-panel__icon .apa-icon { width: 30px; height: 30px; }
.apa-state-panel__icon--gold { background: rgb(255 152 0 / 15%); color: var(--apa-c4); }
.apa-state-panel__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 420px; }

/* ===================================================================== segmented, pills, tabs */
.apa-segmented { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 20px; border: 1px solid var(--apa-border); border-radius: 12px; background: var(--apa-white); max-width: 100%; }
.apa-segmented--scroll { display: flex; overflow-x: auto; scrollbar-width: none; }
.apa-segmented--scroll::-webkit-scrollbar { display: none; }
.apa-segmented a { flex-shrink: 0; padding: 8px 14px; border-radius: 9px; font-size: 0.86rem; font-weight: 600; text-decoration: none; color: var(--apa-muted); white-space: nowrap; }
.apa-segmented a[aria-selected="true"],
.apa-segmented a[aria-current="page"] { background: var(--apa-ink); color: #fff; }
.apa-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 10px; background: rgb(0 0 0 / 8%); font-size: 0.7rem; }
[aria-selected="true"] > .apa-count { background: rgb(255 255 255 / 20%); }

.apa-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin: 0 -4px 12px; padding-left: 4px; scrollbar-width: thin; }
.apa-pill { --apa-c: var(--apa-c1); flex-shrink: 0; padding: 9px 16px; border: 1px solid var(--apa-input); border-radius: 999px; background: var(--apa-white); font-size: 0.86rem; font-weight: 600; text-decoration: none; color: var(--apa-ink); }
.apa-pill:hover { border-color: var(--apa-ink); }
.apa-pill[aria-selected="true"] { background: var(--apa-c); border-color: transparent; color: #fff; }

.apa-tabs { padding: 8px 20px 20px; }
.apa-tabs__list { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--apa-border); margin: 0 -20px; padding: 0 16px; scrollbar-width: none; }
.apa-tabs__list::-webkit-scrollbar { display: none; }
.apa-tabs__list [role="tab"] { flex-shrink: 0; padding: 12px 10px; border: 0; border-bottom: 2px solid transparent; background: none; font: 600 0.86rem var(--apa-font); color: var(--apa-muted); cursor: pointer; }
.apa-tabs__list [role="tab"][aria-selected="true"] { color: var(--apa-ink); border-bottom-color: var(--apa-c1); }
.apa-tabs__panel { padding-top: 16px; font-size: 0.92rem; line-height: 1.65; color: #3a3a3a; }
.apa-tabs__panel ul { margin: 0; padding-left: 20px; }
.apa-tabs__panel li { margin: 6px 0; }
.apa-tabs__panel p + p { margin-top: 10px; }
.apa-prose img { border-radius: 10px; }

/* ===================================================================== forms */
.apa-form { display: flex; flex-direction: column; gap: 16px; }
.apa-form--wide { max-width: none; }
.apa-form--sep { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--apa-border); }
.apa-form__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .apa-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.apa-form__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.apa-field { display: flex; flex-direction: column; gap: 6px; }
.apa-field label { font-size: 0.86rem; font-weight: 600; }
.apa :is(.apa-field, .apa-input-group) :is(input, select, textarea) {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--apa-input);
	border-radius: 10px;
	background: var(--apa-white);
	font: 400 1rem var(--apa-font);
	color: var(--apa-ink);
}
.apa :is(.apa-field, .apa-input-group) :is(input, select, textarea):focus { outline: none; border-color: var(--apa-ink); box-shadow: var(--apa-focus); }
.apa .apa-field input:disabled { background: var(--apa-surface); color: var(--apa-muted); }
.apa-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; line-height: 1.45; cursor: pointer; }
.apa-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--apa-c1); flex-shrink: 0; }
.apa-hp { position: absolute; left: -9999px; }
.apa-input-group { display: flex; gap: 8px; }
.apa-input-group input { flex: 1; }
.apa-switch-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--apa-border); cursor: pointer; }
.apa-switch-row > span { display: flex; flex-direction: column; }
.apa-switch { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 44px; height: 26px; border-radius: 999px; background: #cfcfcf; position: relative; cursor: pointer; transition: background 0.2s; }
.apa-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 30%); transition: transform 0.2s; }
.apa-switch:checked { background: var(--apa-success); }
.apa-switch:checked::after { transform: translateX(18px); }
.apa-profile-head { display: flex; align-items: center; gap: 14px; }

/* ===================================================================== tables */
.apa-table-wrap { overflow-x: auto; }
.apa-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.apa-table th { text-align: left; padding: 12px 16px; background: var(--apa-surface); font-size: 0.75rem; font-weight: 600; color: var(--apa-muted); }
.apa-table td { padding: 12px 16px; border-top: 1px solid var(--apa-border); vertical-align: middle; }
.apa-table__actions { text-align: right; white-space: nowrap; }
@media (max-width: 767px) {
	.apa-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.apa-table tr { display: block; padding: 10px 16px; border-top: 1px solid var(--apa-border); }
	.apa-table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
	.apa-table td::before { content: attr(data-label); font-weight: 600; color: var(--apa-muted); text-align: left; }
	.apa-table td.apa-table__actions { justify-content: flex-end; }
	.apa-table td.apa-table__actions::before { content: none; }
}

/* ===================================================================== grid (évaluation) */
.apa-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; font-size: 0.75rem; }
.apa-legend li { display: flex; align-items: center; gap: 6px; }
.apa-legend__dot { width: 12px; height: 12px; border-radius: 3px; background: #cfcfcf; }
.apa-legend__dot--progress { background: var(--apa-c4); }
.apa-legend__dot--review { background: var(--apa-c1); }
.apa-legend__dot--done { background: var(--apa-success); }
.apa-grid-sheet { margin-top: 24px; }
.apa-gridcomp { --apa-c: var(--apa-c1); overflow: hidden; }
.apa-gridcomp__head { display: flex; align-items: center; gap: 14px; padding: 16px; background: color-mix(in srgb, var(--apa-c) 10%, #fff); border-bottom: 1px solid var(--apa-border); }
.apa-gridcomp__num { font-size: 0.75rem; font-weight: 700; color: var(--apa-c); }
.apa-gridcomp__title { font-size: 1rem; line-height: 1.3; }
.apa-gridcomp__title a { text-decoration: none; }
.apa-gridcomp__percent { font-size: 1.5rem; font-weight: 800; }
.apa-gridtable { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.apa-gridtable thead { display: none; }
.apa-gridtable tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px 16px; border-top: 1px solid var(--apa-border); }
.apa-gridtable tbody tr:first-child { border-top: 0; }
.apa-gridtable th[scope="row"] { grid-column: 1 / -1; text-align: left; font-weight: 600; }
.apa-gridtable th[scope="row"] a { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; }
.apa-gridtable td { padding: 0; }
.apa-gridtable td[data-label="Progression"] { grid-column: 1 / -1; }
.apa-gridtable td[data-label="Vidéos"],
.apa-gridtable td[data-label="Quiz"] { font-size: 0.78rem; color: var(--apa-muted); display: flex; align-items: center; gap: 4px; }
.apa-gridtable td[data-label="Statut"] { grid-column: 1 / -1; }
.apa-gridtable__bar { display: flex; align-items: center; gap: 8px; }
.apa-gridtable__bar b { width: 40px; text-align: right; font-size: 0.78rem; }
.apa-gridtable tr:hover { background: var(--apa-surface); }
@media (min-width: 768px) {
	.apa-gridcomp__head { padding: 18px 20px; }
	.apa-gridcomp__title { font-size: 1.1rem; }
	.apa-gridtable thead { display: table-header-group; }
	.apa-gridtable thead th { padding: 8px 20px; font-size: 0.74rem; font-weight: 600; color: var(--apa-muted); text-align: left; border-bottom: 1px solid var(--apa-border); }
	.apa-gridtable tr { display: table-row; padding: 0; }
	.apa-gridtable th[scope="row"],
	.apa-gridtable td { display: table-cell; padding: 14px 20px; border-top: 1px solid var(--apa-border); vertical-align: middle; }
	.apa-gridtable tbody tr:first-child > * { border-top: 0; }
	.apa-gridtable th[scope="row"] { width: 38%; }
	.apa-gridtable td[data-label="Progression"] { width: 26%; }
	.apa-gridtable td[data-label="Vidéos"],
	.apa-gridtable td[data-label="Quiz"] { display: table-cell; text-align: center; }
	.apa-gridtable td[data-label="Statut"] { text-align: right; }
	.apa-gridtable__quiz { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ===================================================================== competency page */
.apa-comp-hero { --apa-c: var(--apa-c1); padding: 24px 20px; border-radius: 18px; background: var(--apa-c); color: #fff; }
.apa-comp-hero h1 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); }
.apa-comp-hero__num { font-weight: 700; opacity: 0.8; }
.apa-comp-hero__desc { margin-top: 8px; opacity: 0.9; max-width: 640px; }
.apa-comp-hero__stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: 0.88rem; }
.apa-comp-hero__stats b { font-size: 1.5rem; }
.apa-comp-hero__bar { margin-top: 14px; height: 10px; border-radius: 999px; background: rgb(255 255 255 / 30%); overflow: hidden; }
.apa-comp-hero__bar span { display: block; height: 100%; background: #fff; border-radius: inherit; }
.apa-comp-hero + .apa-stack { margin-top: 20px; }
@media (min-width: 768px) { .apa-comp-hero { padding: 32px; } }

.apa-accordion { padding: 0 16px; }
.apa-accordion__head { display: flex; align-items: center; gap: 12px; padding: 16px 0; cursor: pointer; list-style: none; }
.apa-accordion__head::-webkit-details-marker { display: none; }
.apa-accordion__head::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--apa-muted); border-bottom: 2px solid var(--apa-muted); transform: rotate(45deg); transition: transform 0.2s; flex-shrink: 0; margin-left: 4px; }
.apa-accordion[open] > .apa-accordion__head::after { transform: rotate(-135deg); }
.apa-accordion__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.apa-accordion__name { font-weight: 600; }
.apa-accordion__title .apa-progress { max-width: 300px; }
.apa-accordion__desc { margin-bottom: 12px; font-size: 0.88rem; }
.apa-accordion .apa-grid { padding-bottom: 16px; }

.apa-comp-summary { --apa-c: var(--apa-c1); display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.apa-comp-summary h2 a { text-decoration: none; }
.apa-comp-summary .apa-progress { margin-top: 8px; }
.apa-module { margin-top: 28px; }
.apa-module__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

/* ===================================================================== lesson page */
.apa-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; font-size: 0.8rem; color: var(--apa-muted); }
.apa-breadcrumb a { text-decoration: none; }
.apa-breadcrumb a:hover { color: var(--apa-ink); text-decoration: underline; }
.apa-lesson { --apa-c: var(--apa-c1); display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.apa-lesson__main > * + * { margin-top: 20px; }
.apa-lesson__title { margin-top: 10px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.apa-lesson__head > .apa-muted { margin-top: 6px; font-size: 0.86rem; }
.apa-lesson__progress { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.apa-lesson__progress .apa-progress { flex: 1 1 auto; }
.apa-lesson__percent { flex-shrink: 0; font-size: 0.86rem; font-weight: 700; }
.apa-lesson__threshold { margin-top: 6px; font-size: 0.75rem; }
.apa-lesson__head .apa-actions { margin-top: 16px; }
.apa-lesson__head > .apa-notice { margin-top: 12px; }
.apa-lesson__nav { display: flex; justify-content: space-between; gap: 12px; }
.apa-lesson__nav .apa-btn { flex: 1 1 0; min-width: 0; max-width: 260px; padding: 0 12px; white-space: normal; text-align: center; line-height: 1.2; }
.apa-lesson__aside { padding: 16px; }
.apa-outline { margin-top: 16px; }
.apa-outline__title { padding: 0 8px; font-weight: 600; font-size: 0.86rem; }
.apa-outline ul { list-style: none; margin: 8px 0 0; padding: 0; }
.apa-outline__item { display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 9px; font-size: 0.86rem; text-decoration: none; color: var(--apa-ink); }
.apa-outline__item:hover { background: var(--apa-surface); }
.apa-outline__item > .apa-icon { color: var(--apa-c); }
.apa-outline__item.is-done > .apa-icon { color: var(--apa-success); }
.apa-outline__item[data-apa-locked] > .apa-icon { color: var(--apa-muted); }
.apa-outline__item.is-current { background: color-mix(in srgb, var(--apa-c) 10%, transparent); font-weight: 600; }
.apa-outline__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apa-outline__time { font-size: 0.75rem; color: var(--apa-muted); }
@media (min-width: 1200px) {
	.apa-lesson { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
	.apa-lesson__aside { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; }
}

/* player */
.apa-player { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--apa-ink); }
@media (max-width: 767px) { .apa-player { border-radius: 12px; margin-left: -4px; margin-right: -4px; } }
.apa-player > img,
.apa-player__facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.apa-player__facade { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.apa-player__btn { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgb(255 255 255 / 95%); color: var(--apa-c1); box-shadow: 0 12px 30px rgb(0 0 0 / 35%); transition: transform 0.2s; }
.apa-player__btn .apa-icon { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.apa-player__facade:hover .apa-player__btn,
.apa-player__facade:focus-visible .apa-player__btn { transform: scale(1.06); }
.apa-player__resume { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 8px; background: rgb(8 8 8 / 80%); color: #fff; font-size: 0.78rem; font-weight: 600; }
.apa-player__frame { position: absolute; inset: 0; display: none; }
.apa-player__frame iframe,
.apa-player--static iframe { width: 100%; height: 100%; border: 0; }
.apa-player.is-playing .apa-player__frame,
.apa-player.is-loading .apa-player__frame { display: block; }
.apa-player.is-playing .apa-player__facade { display: none; }
.apa-player.is-loading .apa-player__btn { animation: apa-pulse 1s infinite; }
@keyframes apa-pulse { 50% { transform: scale(0.92); } }
.apa-player--locked > img,
.apa-player--empty > img { filter: grayscale(1) brightness(0.45); }
.apa-player__lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; color: #fff; }
.apa-player__lock-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgb(255 255 255 / 15%); }
.apa-player__lock-title { font-weight: 700; font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.2rem); max-width: 420px; }
.apa-player--static { margin-top: 16px; }

/* ===================================================================== quiz */
.apa-quiz-page { max-width: 760px; margin: 0 auto; }
.apa-quiz__intro h1 { margin-top: 10px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.apa-quiz__intro > .apa-muted { margin-top: 8px; }
.apa-quiz__intro .apa-btn { margin-top: 8px; }
.apa-quiz__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.apa-quiz__timer { font-weight: 700; font-variant-numeric: tabular-nums; }
.apa-quiz__timer .is-low { color: var(--apa-c1); }
.apa-question { margin-top: 20px; }
.apa-question fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.apa-question legend { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding: 0; }
.apa-question__text { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); font-weight: 700; line-height: 1.3; }
.apa-question__img { display: block; width: 100%; max-height: 360px; object-fit: contain; border-radius: 12px; margin-bottom: 16px; background: var(--apa-surface); }
.apa-answers { display: flex; flex-direction: column; gap: 10px; }
.apa-answer { position: relative; display: flex; align-items: center; gap: 12px; padding: 15px 16px; border: 1px solid var(--apa-input); border-radius: 12px; font-weight: 500; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.apa-answer:hover { border-color: var(--apa-ink); }
.apa-answer input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.apa-answer__mark { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--apa-input); border-radius: 50%; flex-shrink: 0; }
.apa-answer input[type="checkbox"] + .apa-answer__mark { border-radius: 6px; }
.apa-answer:has(input:checked) { border-color: var(--apa-ink); background: var(--apa-surface); }
.apa-answer input:checked + .apa-answer__mark { border-color: var(--apa-ink); background: var(--apa-ink); box-shadow: inset 0 0 0 4px #fff; }
.apa-answer input:focus-visible + .apa-answer__mark { box-shadow: var(--apa-focus); }
.apa-answer.is-correct { border-color: var(--apa-success); background: rgb(31 146 84 / 10%); }
.apa-answer.is-wrong { border-color: var(--apa-c1); background: rgb(255 59 24 / 8%); }
.apa-feedback { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--apa-surface); font-size: 0.9rem; }
.apa-feedback p + p { margin-top: 6px; }
.apa-feedback.is-ok { background: rgb(31 146 84 / 10%); }
.apa-feedback.is-ko { background: rgb(255 59 24 / 8%); }
.apa-quiz__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.apa-quiz__body > * + * { margin-top: 16px; }

.apa-score { padding: 32px 20px; text-align: center; }
.apa-score__icon { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; font-size: 1.8rem; animation: apa-pop 0.5s ease-out both; }
.apa-score__icon.is-pass { background: rgb(31 146 84 / 12%); }
.apa-score__icon.is-fail { background: rgb(255 59 24 / 10%); color: var(--apa-c1); }
.apa-score__value { margin-top: 10px; font-size: clamp(2.6rem, 2rem + 3vw, 3.6rem); font-weight: 800; line-height: 1; }
.apa-score__value span { font-size: 0.45em; color: var(--apa-muted); }
.apa-score__verdict { margin-top: 10px; font-weight: 700; font-size: 1.05rem; }
.apa-score__verdict.is-pass { color: var(--apa-success); }
.apa-score__verdict.is-fail { color: var(--apa-c1); }
.apa-correction { border-left: 4px solid var(--apa-success); }
.apa-correction.is-ko { border-left-color: var(--apa-c1); }
.apa-correction p + p,
.apa-correction p + a { margin-top: 6px; display: block; }
.apa-reco { --apa-c: var(--apa-c1); display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.apa-reco__body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.apa-reco__title { font-weight: 600; }
.apa-exam-card { display: flex; flex-direction: column; }
.apa-exam-result { margin-top: 28px; }
.apa-locked-panel { padding: 32px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.apa-locked-panel__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgb(255 59 24 / 10%); color: var(--apa-c1); flex-shrink: 0; }
.apa-locked-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; text-align: center; }
.apa-locked-cta__title { font-weight: 700; font-size: 1.1rem; }
@media (min-width: 768px) { .apa-locked-cta { flex-direction: row; text-align: left; } }

/* skeleton */
.apa-skeleton-block { display: flex; flex-direction: column; gap: 12px; }
.apa-skeleton { display: block; height: 16px; border-radius: 8px; background: linear-gradient(90deg, #eee 25%, #f7f7f7 37%, #eee 63%); background-size: 400% 100%; animation: apa-shimmer 1.2s ease infinite; }
.apa-skeleton--short { width: 50%; }
@keyframes apa-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ===================================================================== modal & toasts */
.apa-modal { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 16px; }
.apa-modal[hidden] { display: none; }
.apa-modal__backdrop { position: absolute; inset: 0; background: rgb(8 8 8 / 60%); backdrop-filter: blur(2px); }
.apa-modal__dialog { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 32px 24px 24px; border-radius: 20px; background: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: apa-pop 0.25s ease-out; }
.apa-modal__dialog h2 { font-size: 1.4rem; }
.apa-modal__dialog > p { color: var(--apa-muted); font-size: 0.92rem; }
.apa-modal__dialog .apa-checklist { text-align: left; align-self: stretch; margin: 6px 0; }
.apa-modal__dialog .apa-btn { width: 100%; }
.apa-modal__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgb(255 59 24 / 10%); color: var(--apa-c1); }
.apa-modal__eyebrow { font-size: 0.82rem; font-weight: 600; color: var(--apa-c1); min-height: 1em; }
.apa-modal__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--apa-surface); cursor: pointer; }
.apa-modal__login { font-size: 0.86rem; font-weight: 600; color: var(--apa-ink); }
.apa-modal .apa-link { color: var(--apa-muted); font-weight: 500; font-size: 0.86rem; }

.apa-toasts { position: fixed; z-index: 100000; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 420px; pointer-events: none; }
@media (min-width: 1024px) { .apa-toasts { bottom: 24px; } }
.apa-toast { padding: 12px 16px; border-radius: 12px; background: var(--apa-ink); color: #fff; font: 500 0.9rem var(--apa-font); box-shadow: 0 10px 30px rgb(0 0 0 / 25%); opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; }
.apa-toast.is-in { opacity: 1; transform: none; }
.apa-toast--success { background: #136b3c; }
.apa-toast--error { background: #b22408; }
.apa-toast--warning { background: #8a5200; }

/* ===================================================================== app shell */
body.apa-body { margin: 0; background: var(--apa-surface); font-family: var(--apa-font); }
.apa-shell { min-height: 100vh; background: var(--apa-surface); }
.apa-sidebar { display: none; }
.apa-shell__main { min-width: 0; padding-bottom: 88px; }
.apa-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 16px; background: rgb(255 255 255 / 92%); backdrop-filter: blur(8px); border-bottom: 1px solid var(--apa-border); }
.admin-bar .apa-topbar { top: 46px; }
.apa-topbar__context { display: none; align-items: center; gap: 8px; min-width: 0; font-size: 0.86rem; color: var(--apa-muted); }
.apa-topbar__context strong { color: var(--apa-ink); font-weight: 600; white-space: nowrap; }
.apa-topbar__context > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apa-topbar__user { display: flex; align-items: center; gap: 10px; }
.apa-course-switch { min-height: 36px; border: 1px solid var(--apa-input); border-radius: 8px; padding: 0 8px; font: 500 0.86rem var(--apa-font); max-width: 220px; }
.apa-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--apa-c2); color: #fff; font-weight: 700; text-decoration: none; }
.apa-avatar--lg { width: 60px; height: 60px; font-size: 1.4rem; }
.apa-content { padding: 20px 16px; max-width: 1180px; outline: none; }
.apa-page-content > .apa + .apa { margin-top: 24px; }

.apa-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--apa-ink); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.apa-logo__img { max-height: 40px; width: auto; }
.apa-logo__mark { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid currentColor; border-radius: 50%; }
.apa-logo__mark span { width: 12px; height: 12px; border: 2px solid var(--apa-c1); border-radius: 50%; }
.apa-logo__text { display: flex; flex-direction: column; font-size: 0.9rem; text-transform: uppercase; }
.apa-logo__accent { color: var(--apa-c1); }

.apa-tabbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid var(--apa-border); padding-bottom: env(safe-area-inset-bottom); }
.apa-tabbar__link { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 8px; font-size: 0.68rem; font-weight: 500; color: var(--apa-muted); text-decoration: none; }
.apa-tabbar__link.is-active { color: var(--apa-c1); }

@media (min-width: 768px) {
	.apa-content { padding: 28px 28px; }
	.apa-topbar { padding: 0 28px; }
	.apa-topbar__context { display: flex; }
	.admin-bar .apa-topbar { top: 32px; }
}

@media (min-width: 1024px) {
	.apa-sidebar { position: fixed; z-index: 35; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: 248px; padding: 20px 16px; background: #fff; border-right: 1px solid var(--apa-border); overflow-y: auto; }
	.admin-bar .apa-sidebar { top: 32px; }
	.apa-sidebar__nav { flex: 1; margin-top: 28px; display: flex; flex-direction: column; gap: 2px; }
	.apa-sidebar__link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 0.88rem; font-weight: 500; color: var(--apa-muted); text-decoration: none; }
	.apa-sidebar__link:hover { background: var(--apa-surface); color: var(--apa-ink); }
	.apa-sidebar__link.is-active { background: rgb(255 59 24 / 10%); color: var(--apa-c1); }
	.apa-shell__main { padding-left: 248px; padding-bottom: 0; }
	.apa-tabbar,
	.apa-topbar__logo { display: none; }
	.apa-content { padding: 32px 36px 48px; }
}

@media (min-width: 1440px) {
	.apa-content { padding-left: 48px; padding-right: 48px; }
}

/* ===================================================================== account, affiliate */
.apa-account .apa-card.apa-pad { padding: 24px; }
.apa-access-row { padding: 16px 0; border-top: 1px solid var(--apa-border); list-style: none; }
.apa-access-row:first-child { border-top: 0; padding-top: 0; }
.apa-access-row__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.apa-access-row .apa-actions { margin-top: 12px; }
.apa-aff-link { display: flex; flex-direction: column; gap: 16px; }
.apa-aff-link__main { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.apa-aff-link__qr { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border-radius: 12px; background: var(--apa-surface); }
.apa-aff-link__qr [data-apa-qr] { min-width: 112px; min-height: 112px; }
.apa-aff-link__qr img { display: block; }
@media (min-width: 768px) { .apa-aff-link { flex-direction: row; align-items: center; } }
.apa-affiliate > * + * { margin-top: 20px; }
.apa-terms { max-height: 200px; overflow: auto; padding: 12px; border-radius: 10px; background: var(--apa-surface); }

/* ===================================================================== marketing components */
.apa-pricing { position: relative; max-width: 440px; margin: 0 auto; padding: 36px 28px 28px; border: 2px solid var(--apa-c1); }
.apa .apa-pricing__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 4px 16px; border-radius: 999px; background: var(--apa-c1); background-image: var(--apa-gradient); color: #fff; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.apa-pricing__price { text-align: center; font-size: clamp(2.8rem, 2.2rem + 2.5vw, 3.75rem); font-weight: 800; line-height: 1; }
.apa-pricing__sub { margin-top: 6px; text-align: center; font-size: 0.86rem; color: var(--apa-muted); }
.apa-pricing__secure { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.78rem; color: var(--apa-muted); }
.apa-pricing__note { margin-top: 6px; text-align: center; font-size: 0.75rem; color: var(--apa-muted); }
.apa-program { --apa-c: var(--apa-c1); padding: 22px; border-left: 4px solid var(--apa-c); }
.apa-program__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.apa-program__num { font-size: 0.86rem; font-weight: 700; color: var(--apa-c); }
.apa-program__module { padding: 16px; border-radius: 12px; background: var(--apa-surface); }
.apa-program__module ul { list-style: none; margin: 12px 0 0; padding: 0; }
.apa-program__module li { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; font-size: 0.86rem; color: #444; }
.apa-program__module li > .apa-icon { color: var(--apa-c); margin-top: 2px; }
@media (min-width: 768px) { .apa-program { padding: 30px; } }

/* ===================================================================== auth & blank */
body.apa-blank { background: #fff; }
.apa-blank__header { padding: 20px 24px; }
.apa-auth { display: grid; min-height: calc(100vh - 80px); }
.apa-auth__panel { display: flex; align-items: center; justify-content: center; padding: 24px 16px 48px; }
.apa-auth__inner { width: 100%; max-width: 400px; }
.apa-auth__inner > .apa-muted { margin-top: 8px; }
.apa-auth__inner .apa-form { margin-top: 28px; }
.apa-auth__visual { display: none; }
@media (min-width: 1024px) {
	.apa-auth { grid-template-columns: 1fr 1fr; }
	.apa-auth--single { grid-template-columns: 1fr; }
	.apa-auth__visual { position: relative; display: block; background-size: cover; background-position: center; border-radius: 24px; margin: 0 24px 24px 0; }
	.apa-auth__quote { position: absolute; left: 32px; right: 32px; bottom: 32px; padding: 24px; }
	.apa-auth__quote blockquote { margin: 0; font-weight: 700; font-size: 1.1rem; }
}

/* ===================================================================== checkout (WooCommerce classic) */
.apa-checkout-header { background: #fff; border-bottom: 1px solid var(--apa-border); }
.apa-container { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.apa-checkout-header__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.apa-checkout-header__secure { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--apa-muted); }
.apa-checkout-main { padding-top: 24px; padding-bottom: 48px; }
.apa-checkout-intro { margin-bottom: 20px; }
.apa-checkout-help { display: flex; align-items: center; gap: 6px; margin-top: 24px; }
body.apa-checkout-page { background: var(--apa-surface); }
.apa-checkout-page .woocommerce { font-family: var(--apa-font); }
.apa-checkout-page form.checkout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.apa-checkout-page form.checkout > *:not(#customer_details):not(#order_review_heading):not(#order_review) { grid-column: 1 / -1; }
.apa-checkout-page #customer_details,
.apa-checkout-page #order_review { background: #fff; border: 1px solid var(--apa-border); border-radius: var(--apa-radius); box-shadow: var(--apa-shadow); padding: 20px; }
.apa-checkout-page #customer_details .col-1,
.apa-checkout-page #customer_details .col-2 { float: none; width: 100%; }
.apa-checkout-page #order_review_heading { margin: 0; font-size: 1.1rem; }
.apa-checkout-page .form-row input.input-text,
.apa-checkout-page .form-row select,
.apa-checkout-page .select2-container .select2-selection--single { min-height: 46px; border: 1px solid var(--apa-input); border-radius: 10px; padding: 8px 12px; font-size: 1rem; }
.apa-checkout-page #place_order { width: 100%; min-height: 56px; border-radius: var(--apa-radius-sm); background-image: var(--apa-gradient); color: #fff; font: 700 1rem var(--apa-font); box-shadow: var(--apa-shadow-cta); border: 0; }
.apa-checkout-page .apa-checkout-secure td { font-size: 0.8rem; color: var(--apa-muted); text-align: center; }
@media (min-width: 900px) {
	.apa-checkout-page form.checkout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
	.apa-checkout-page #customer_details { grid-row: 1 / span 2; }
	.apa-checkout-page #order_review { position: sticky; top: 20px; }
}
.apa-thankyou { margin: 20px 0; }
.apa-thankyou .apa-btn { margin-top: 14px; }

/* ===================================================================== reduced motion & print */
@media (prefers-reduced-motion: reduce) {
	.apa *,
	.apa *::before,
	.apa *::after { animation: none !important; transition: none !important; }
}
@media print {
	.apa-sidebar,
	.apa-tabbar,
	.apa-topbar { display: none; }
	.apa-shell__main { padding: 0; }
}