.ccl-pt,
.ccl-exam,
.ccl-dash,
.ccl-app,
.ccl-list,
.ccl-pt-dash-note,
.ccl-pt-credit-badge {
	--ccl-teal: #086b58;
	--ccl-teal-dark: #064d3f;
	--ccl-teal-soft: #e7f5f2;
	--ccl-ink: #1b1f24;
	--ccl-muted: #3d4650;
	--ccl-line: #e4e7eb;
	--ccl-paper: #f6f7f8;
	--ccl-card: #ffffff;
	--ccl-danger: #9f2d2d;
	--ccl-danger-soft: #fdeceb;
	--ccl-amber: #9a6700;
	--ccl-amber-soft: #fff6e0;
	--ccl-ok: #0c8c74;
	--ccl-ok-soft: #e5f6f1;
	--ccl-font: Inter, "Segoe UI", sans-serif;
	--ccl-urdu: "Noto Nastaliq Urdu", "Noto Nastaliq", serif;
	font-family: var(--ccl-font);
	color: var(--ccl-ink);
}

.ccl-btn,
button.ccl-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: var(--ccl-teal);
	color: #fff;
	font: 600 0.95rem/1 var(--ccl-font);
	text-decoration: none;
	cursor: pointer;
	position: relative;
	z-index: 40;
	pointer-events: auto;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(8, 107, 88, 0.25);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ccl-btn:hover,
button.ccl-btn:hover { background: var(--ccl-teal-dark); color: #fff; }
.ccl-btn:focus-visible,
button.ccl-btn:focus-visible,
.ccl-exam a:focus-visible,
.ccl-dash a:focus-visible {
	outline: 3px solid #0c8c74;
	outline-offset: 2px;
}
.ccl-btn:disabled,
button.ccl-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ccl-btn-secondary,
button.ccl-btn-secondary {
	background: #fff;
	color: var(--ccl-ink);
	border-color: #cfd5db;
}
.ccl-btn-secondary:hover,
button.ccl-btn-secondary:hover { background: var(--ccl-paper); color: var(--ccl-ink); }

.ccl-btn-danger,
button.ccl-btn-danger { background: var(--ccl-danger); }
.ccl-btn-danger:hover,
button.ccl-btn-danger:hover { background: #7d2222; }

.ccl-btn-dark,
button.ccl-btn-dark { background: #1a1a1a; }
.ccl-btn-dark:hover,
button.ccl-btn-dark:hover { background: #000; }

.ccl-urdu { font-family: var(--ccl-urdu); font-size: 1.15rem; line-height: 2; }

.ccl-pt-dash-note,
.ccl-pt-credit-badge {
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--ccl-teal-soft);
}
.ccl-pt-credit-badge {
	display: inline-block;
	background: var(--ccl-ink);
	color: #fff;
	font-weight: 600;
}

/* Exam player, modelled on the assessmentQ practice layout. */
.ccl-exam {
	background: #fff;
	border: 1px solid var(--ccl-line);
	border-top: 4px solid var(--ccl-teal);
	min-height: 72vh;
	display: flex;
	flex-direction: column;
	position: relative;
}

.ccl-exam-top,
.ccl-exam-sub {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 10px 18px;
}
.ccl-exam-top {
	border-bottom: 1px solid var(--ccl-line);
	height: 56px;
	min-height: 56px;
	max-height: 56px;
	box-sizing: border-box;
}
.ccl-exam .ccl-exam-top .ccl-exit {
	width: 112px;
	min-width: 112px;
	max-width: 112px;
	height: 36px;
	min-height: 36px;
	flex: 0 0 112px;
	padding: 0 8px;
}
.ccl-exam-brand { font-weight: 700; letter-spacing: -0.02em; }
.ccl-exam-user { color: var(--ccl-muted); font-size: 0.88rem; }
.ccl-exam-sub { border-bottom: 1px solid var(--ccl-line); font-size: 0.92rem; }
.ccl-exam-crumb { color: var(--ccl-muted); }
.ccl-exam-count { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.ccl-exam-bar,
.ccl-exam-dots { height: 8px; background: #eceff2; border-radius: 99px; overflow: hidden; }
.ccl-exam-bar { width: 92px; }
.ccl-exam-bar > span,
.ccl-exam-dots > span { display: block; height: 100%; background: var(--ccl-teal); }
.ccl-exam-dots { display: flex; gap: 4px; height: 8px; background: transparent; flex: 1; border-radius: 0; }
.ccl-exam-dots i { flex: 1; background: #e3e7eb; border-radius: 99px; }
.ccl-exam-dots i.is-on { background: var(--ccl-teal); }

.ccl-exam-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px 18px 0;
}
.ccl-exam-heading h1 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.ccl-clock {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--ccl-paper);
}
.ccl-clock.is-amber { background: var(--ccl-amber-soft); color: var(--ccl-amber); }
.ccl-clock.is-red { background: var(--ccl-danger-soft); color: var(--ccl-danger); }

.ccl-exam-main {
	padding: 8px 22px calc(72px + env(safe-area-inset-bottom, 0px));
	flex: 1;
}
.ccl-exam h2 {
	margin: 8px 0 14px;
	color: var(--ccl-teal);
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	font-weight: 700;
}
.ccl-exam p { line-height: 1.55; }
.ccl-exam-prose p:last-child { margin-bottom: 0; }

.ccl-exam-split {
	display: grid;
	grid-template-columns: minmax(240px, 0.9fr) minmax(280px, 1.1fr);
	gap: 28px;
	align-items: start;
}
.ccl-exam-split > * { min-width: 0; }
.ccl-kicker { font-weight: 700; margin-bottom: 8px; }
.ccl-inline-step { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.ccl-exam-note { color: var(--ccl-muted); font-size: 0.92rem; }

.ccl-exam .ccl-btn,
.ccl-exam button.ccl-btn {
	width: 180px;
	min-width: 180px;
	max-width: 180px;
	height: 44px;
	min-height: 44px;
	padding: 0 10px;
	box-sizing: border-box;
	flex: 0 0 180px;
}
.ccl-exam-footer .ccl-btn,
.ccl-exam-footer button.ccl-btn {
	width: 148px;
	min-width: 148px;
	max-width: 148px;
	flex-basis: 148px;
}
.ccl-inline-step { min-height: 52px; align-items: center; }
.ccl-exam-stage { min-height: 240px; }
.ccl-wave {
	background: #f3f4f6;
	border-radius: 6px;
	height: 128px;
	min-height: 128px;
	box-sizing: border-box;
	padding: 8px 8px 0;
	position: relative;
	display: flex;
	flex-direction: column;
}
.ccl-wave canvas { width: 100%; height: 104px; min-height: 104px; flex: 0 0 104px; display: block; }
.ccl-wave-base { height: 2px; margin: 8px 8px 6px; background: #1b1f24; border-radius: 1px; flex: 0 0 2px; }
.ccl-wave-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	height: 52px;
	min-height: 52px;
	font-size: 0.95rem;
	color: var(--ccl-muted);
	font-variant-numeric: tabular-nums;
}
.ccl-timer, .ccl-attempts { min-width: 5.5rem; }
.ccl-wave-meta.ccl-wave-stats {
	height: 28px;
	min-height: 28px;
	max-height: 28px;
	flex-wrap: nowrap;
	justify-content: flex-start;
}
.ccl-wave-controls,
.ccl-wave-meta {
	position: relative;
	z-index: 50;
}
.ccl-wave-controls {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	height: 52px;
	min-height: 52px;
	max-height: 52px;
	box-sizing: border-box;
	pointer-events: auto;
}
.ccl-exam .ccl-wave-controls .ccl-btn,
.ccl-exam .ccl-wave-controls button.ccl-btn {
	height: 44px;
	min-height: 44px;
	padding: 0 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ccl-exam .ccl-wave-controls .ccl-btn-start {
	width: 92px;
	min-width: 92px;
	max-width: 92px;
	flex: 0 0 92px;
}
.ccl-exam .ccl-wave-controls .ccl-btn-finish {
	width: 150px;
	min-width: 150px;
	max-width: 150px;
	flex: 0 0 150px;
}
.ccl-wave-controls .ccl-rec { width: 64px; min-width: 64px; flex: 0 0 64px; }
.ccl-cam-slot { height: 168px; min-height: 168px; background: #142018; border-radius: 8px; overflow: hidden; }
.ccl-cam-slot video { width: 100%; height: 168px; max-height: 168px; display: block; object-fit: cover; }
.ccl-playback-slot {
	height: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: absolute;
	width: 1px;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	pointer-events: none;
}
.ccl-audio-hidden,
.ccl-playback-slot audio,
audio.ccl-audio-hidden,
#ccl-pt-source-audio,
#ccl-pt-mic-audio {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	appearance: none !important;
}
.ccl-banner-slot { min-height: 44px; }
.ccl-rec.is-idle { visibility: hidden; }
.ccl-rec {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 72px;
	min-width: 72px;
	height: 32px;
	box-sizing: border-box;
	border: 1px solid #f0c2c2;
	background: #fff;
	color: var(--ccl-danger);
	border-radius: 999px;
	padding: 4px 8px;
	font-size: 0.75rem;
	font-weight: 700;
}
.ccl-rec i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e23b3b;
	display: inline-block;
}
.ccl-cam-slot video,
video.ccl-cam {
	width: 100%;
	max-height: 180px;
	background: #111;
	border-radius: 8px;
	object-fit: cover;
}
video.ccl-cam.is-corner {
	position: fixed;
	right: 16px;
	bottom: 84px;
	width: 168px;
	height: 112px;
	max-height: none;
	border: 2px solid #fff;
	box-shadow: 0 10px 28px rgba(16, 24, 32, 0.28);
	z-index: 20;
	pointer-events: none;
}

.ccl-banner {
	background: var(--ccl-amber-soft);
	border: 1px solid #f0ddb0;
	color: #6b4a09;
	border-radius: 10px;
	padding: 10px 12px;
	margin: 10px 0;
}
.ccl-status {
	min-height: 4.8em;
	margin: 0;
	color: var(--ccl-muted);
}

.ccl-exam-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 12px 18px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--ccl-line);
	position: sticky;
	bottom: 0;
	z-index: 80;
	background: #fff;
	box-shadow: 0 -6px 16px rgba(16, 24, 32, 0.06);
}
.ccl-exam-stage {
	position: relative;
}
.ccl-review { list-style: none; margin: 0; padding: 0; }
.ccl-review li {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 12px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--ccl-line);
}
.ccl-pill {
	display: inline-flex;
	border-radius: 999px;
	padding: 3px 8px;
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--ccl-paper);
}
.ccl-pill.is-ok { background: var(--ccl-ok-soft); color: var(--ccl-teal-dark); }
.ccl-pill.is-no { background: var(--ccl-danger-soft); color: var(--ccl-danger); }
.ccl-text-btn {
	background: none;
	border: 0;
	color: var(--ccl-teal-dark);
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
}

.ccl-modal-back {
	position: absolute;
	inset: 0;
	background: rgba(90, 96, 102, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.ccl-modal {
	background: #fff;
	border-radius: 12px;
	padding: 28px 24px;
	text-align: center;
	max-width: 420px;
	box-shadow: 0 16px 50px rgba(0, 0, 0, 0.16);
}
.ccl-modal h2 { letter-spacing: 0; color: var(--ccl-ink); font-size: 1.25rem; }

/* Dashboard */
.ccl-dash { max-width: 980px; }
.ccl-dash-head, .ccl-dash-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 16px;
}
.ccl-dash h2 { margin: 0 0 4px; font-size: 1.8rem; letter-spacing: -0.03em; }
.ccl-kicker-label {
	margin: 0;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ccl-teal);
	font-weight: 700;
}
.ccl-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 18px;
}
.ccl-stat {
	background: var(--ccl-card);
	border: 1px solid var(--ccl-line);
	border-radius: 16px;
	padding: 14px 16px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ccl-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 24, 32, 0.06); }
.ccl-stat span { display: block; color: var(--ccl-muted); font-size: 0.8rem; }
.ccl-stat strong { display: block; font-size: 1.8rem; letter-spacing: -0.03em; margin-top: 4px; }
.ccl-stat.is-accent { background: #14242a; color: #f4f7f7; border-color: #14242a; }
.ccl-stat.is-accent span { color: #b7c4c8; }

.ccl-panel {
	background: #fff;
	border: 1px solid var(--ccl-line);
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 16px;
}
.ccl-panel h3 { margin: 0 0 12px; font-size: 1.05rem; }
.ccl-chart { width: 100%; height: 160px; display: block; }
.ccl-chart-empty { color: var(--ccl-muted); margin: 0; }

.ccl-test-grid, .ccl-attempt-list { display: grid; gap: 12px; }
.ccl-test-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ccl-test-card, .ccl-attempt {
	border: 1px solid var(--ccl-line);
	border-radius: 14px;
	padding: 14px;
	background: #fff;
	transition: border-color 0.15s ease;
}
.ccl-test-card:hover, .ccl-attempt:hover { border-color: #b7d5cd; }
.ccl-attempt {
	display: grid;
	grid-template-columns: 1.4fr 0.8fr auto;
	gap: 12px;
	align-items: center;
}
.ccl-attempt h4, .ccl-test-card h4 { margin: 0 0 4px; }
.ccl-muted { color: var(--ccl-muted); font-size: 0.9rem; }
.ccl-rules { font-size: 0.85rem; color: var(--ccl-muted); }

.ccl-scorecard {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: flex-end;
	border-radius: 16px;
	padding: 16px 18px;
	margin: 12px 0;
	background: var(--ccl-paper);
}
.ccl-scorecard.is-pass { background: var(--ccl-ok-soft); }
.ccl-scorecard.is-fail { background: var(--ccl-danger-soft); }
.ccl-scoreline { font-size: 2.6rem; margin: 0; letter-spacing: -0.04em; font-weight: 700; }
.ccl-scoreline span { font-size: 1.1rem; color: var(--ccl-muted); font-weight: 600; }
.ccl-fail-list { margin: 8px 0 0; padding-left: 18px; }
.ccl-dialogue { margin-top: 16px; }
.ccl-seg {
	border-top: 1px solid var(--ccl-line);
	padding: 12px 0;
}
.ccl-seg audio { width: 100%; margin: 6px 0; }

@media (max-width: 800px) {
	.ccl-stats { grid-template-columns: 1fr 1fr; }
	.ccl-exam-split, .ccl-dash-head, .ccl-dash-row, .ccl-attempt, .ccl-exam-footer, .ccl-review li {
		grid-template-columns: 1fr;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.ccl-btn, button.ccl-btn { width: 100%; }
	.ccl-exam-footer .ccl-btn { width: auto; }
	video.ccl-cam.is-corner { width: 96px; height: 64px; right: 10px; bottom: auto; top: calc(64px + env(safe-area-inset-top, 0px)); pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ccl-stat, .ccl-btn, button.ccl-btn { transition: none; }
}

.ccl-app, .ccl-list { font-size: 17px; line-height: 1.5; }
.ccl-app h2, .ccl-list h2 { font-size: 2.05rem; letter-spacing: -0.03em; }
.ccl-app h3, .ccl-list h3 { font-size: 1.4rem; }
.ccl-app { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.ccl-side {
	background: #10241f;
	color: #f4f7f6;
	border-radius: 18px;
	padding: 22px 16px;
	position: sticky;
	top: 16px;
}
.ccl-side a { color: #f4f7f6; text-decoration: none; }
.ccl-avatar-wrap { text-align: center; }
.ccl-avatar {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	object-fit: cover;
	background: #244038;
	display: block;
	margin: 0 auto 10px;
}
.ccl-side-name { margin: 0; font-size: 1.25rem; font-weight: 700; }
.ccl-side-credits { margin: 8px 0 16px; color: #d5ebe4; font-size: 1rem; }
.ccl-side-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ccl-side-nav a, .ccl-side-nav button {
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	color: #f4f7f6;
	font: 600 1.05rem/1.3 var(--ccl-font);
	padding: 10px 12px;
	border-radius: 10px;
	cursor: pointer;
	text-decoration: none;
}
.ccl-side-nav a:hover, .ccl-side-nav a[aria-current="page"] { background: #1c3b33; }
.ccl-side-nav a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ccl-photo-btn { margin-top: 8px; background: #fff; color: #10241f; }
.ccl-app-main h2 { margin-top: 0; }
.ccl-profile { display: grid; gap: 14px; max-width: 640px; }
.ccl-profile label { display: grid; gap: 6px; font-weight: 650; font-weight: 600; }
.ccl-profile input, .ccl-profile textarea {
	font: 1rem/1.4 var(--ccl-font);
	padding: 10px 12px;
	border: 1px solid #8d97a1;
	border-radius: 10px;
	color: var(--ccl-ink);
	background: #fff;
}
.ccl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ccl-chip {
	border: 1px solid #086b58;
	background: #fff;
	color: #064d3f;
	border-radius: 999px;
	padding: 8px 14px;
	font: 600 1rem/1 var(--ccl-font);
	cursor: pointer;
}
.ccl-chip[aria-pressed="true"] { background: #086b58; color: #fff; }
.ccl-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.ccl-catalog-card {
	border: 1px solid var(--ccl-line);
	border-radius: 16px;
	padding: 16px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ccl-catalog-card h3 { margin: 0; font-size: 1.35rem; }
.ccl-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.ccl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.ccl-pt-account-app .woocommerce-MyAccount-navigation { display: none; }
.ccl-pt-account-app .woocommerce-MyAccount-content { width: 100% !important; float: none !important; }
.ccl-pt-account-app .entry-header,
.ccl-pt-account-app .wp-block-post-title { display: none; }
.ccl-wc-pane table { width: 100%; border-collapse: collapse; }
.ccl-wc-pane th, .ccl-wc-pane td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--ccl-line); }
.ccl-wc-pane a { color: var(--ccl-teal); }

.ccl-guest {
	display: flex;
	justify-content: center;
	padding: 32px 16px 64px;
}
.ccl-auth-modal[hidden] { display: none; }
.ccl-auth-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
}
.ccl-auth-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 28, 0.55);
}
body.ccl-auth-open { overflow: hidden; }
.ccl-auth-dialog {
	--ccl-font: Inter, "Segoe UI", sans-serif;
	position: relative;
	z-index: 1;
	width: 420px;
	max-width: 100%;
	background: #fff;
	color: #1b1f24;
	border-radius: 6px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
	padding: 36px 32px 28px;
	font-family: var(--ccl-font);
	box-sizing: border-box;
}
.ccl-auth-dialog.is-page { box-shadow: 0 12px 40px rgba(16, 24, 32, 0.12); }
.ccl-auth-close {
	position: absolute;
	top: 14px;
	right: 14px;
	border: 0;
	background: transparent;
	color: #111;
	font: 400 26px/1 var(--ccl-font);
	cursor: pointer;
	padding: 0 4px;
}
.ccl-auth-tabs { display: flex; justify-content: center; gap: 8px; margin: 0 0 18px; }
.ccl-auth-tab {
	border: 0;
	border-radius: 4px;
	background: #f3f4f6;
	color: #222;
	font: 600 14px/1 var(--ccl-font);
	padding: 10px 18px;
	cursor: pointer;
}
.ccl-auth-tab.is-on { background: #111; color: #fff; }
.ccl-auth-dialog h2 { margin: 0 0 8px; text-align: center; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; }
.ccl-auth-switch { margin: 0 0 18px; text-align: center; color: #5c6570; font-size: 14px; }
.ccl-auth-switch button {
	border: 0;
	background: transparent;
	color: #0e9f86;
	font: 600 14px/1 var(--ccl-font);
	cursor: pointer;
	padding: 0;
}
.ccl-auth-pane { display: none; }
.ccl-auth-pane.is-on { display: block; }
.ccl-auth-dialog input[type="text"],
.ccl-auth-dialog input[type="email"],
.ccl-auth-dialog input[type="password"] {
	width: 100%;
	height: 46px;
	border: 1px solid #e6e8eb;
	border-radius: 8px;
	padding: 0 14px;
	font: 400 15px/1 var(--ccl-font);
	box-sizing: border-box;
	color: #1b1f24;
	background: #fff;
}
.ccl-auth-dialog p { margin: 0 0 12px; }
.ccl-auth-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 14px; font-size: 14px; }
.ccl-auth-row label { display: flex; align-items: center; gap: 8px; }
.ccl-auth-link {
	border: 0;
	background: transparent;
	color: #0e9f86;
	font: 600 14px/1 var(--ccl-font);
	cursor: pointer;
	padding: 0;
}
.ccl-auth-submit {
	width: 100%;
	height: 48px;
	border: 0;
	border-radius: 8px;
	background: #1ab69d;
	color: #fff;
	font: 700 16px/1 var(--ccl-font);
	cursor: pointer;
}
.ccl-auth-submit:hover { background: #129884; }
.ccl-auth-submit:disabled { opacity: 0.7; cursor: wait; }
.ccl-auth-error { min-height: 1.2em; color: #9f2d2d; font-size: 14px; }
.ccl-auth-ok { min-height: 1.2em; color: #0b6b4a; font-size: 14px; }

body.ccl-pt-exam-mode { margin-top: 0 !important; padding-top: 0 !important; }
body.ccl-pt-exam-mode #wpadminbar,
body.ccl-pt-exam-mode header,
body.ccl-pt-exam-mode footer,
body.ccl-pt-exam-mode .site-header,
body.ccl-pt-exam-mode .site-footer,
body.ccl-pt-exam-mode #masthead,
body.ccl-pt-exam-mode #colophon,
body.ccl-pt-exam-mode .ast-above-header-wrap,
body.ccl-pt-exam-mode .ast-primary-header-bar,
body.ccl-pt-exam-mode .ast-below-header-wrap,
body.ccl-pt-exam-mode #ast-desktop-header,
body.ccl-pt-exam-mode #ast-mobile-header,
body.ccl-pt-exam-mode .ast-footer-overlay,
body.ccl-pt-exam-mode .site-header-wrap,
body.ccl-pt-exam-mode .site-footer-wrap,
body.ccl-pt-exam-mode .kadence-header,
body.ccl-pt-exam-mode .kadence-footer,
body.ccl-pt-exam-mode .elementor-location-header,
body.ccl-pt-exam-mode .elementor-location-footer,
body.ccl-pt-exam-mode .generate-header,
body.ccl-pt-exam-mode #generate-header,
body.ccl-pt-exam-mode #main-header,
body.ccl-pt-exam-mode #main-footer,
body.ccl-pt-exam-mode #top-header,
body.ccl-pt-exam-mode #et-top-navigation,
body.ccl-pt-exam-mode .et-l--header,
body.ccl-pt-exam-mode .et-l--footer,
body.ccl-pt-exam-mode aside,
body.ccl-pt-exam-mode .sidebar,
body.ccl-pt-exam-mode .widget-area,
body.ccl-pt-exam-mode .wp-site-blocks > header,
body.ccl-pt-exam-mode .wp-site-blocks > footer,
body.ccl-pt-exam-mode .entry-header,
body.ccl-pt-exam-mode .wp-block-post-title,
body.ccl-pt-exam-mode .woocommerce-MyAccount-navigation {
	display: none !important;
}
body.ccl-pt-exam-mode #ccl-pt-app {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: #fff;
	overflow: auto;
	margin: 0;
}
@media (max-width: 800px) {
	.ccl-app { grid-template-columns: 1fr; }
	.ccl-side { position: static; }
	.ccl-side-nav { grid-template-columns: 1fr 1fr; }
	body.ccl-pt-exam-mode #ccl-pt-app {
		padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}
	.ccl-exam-main {
		padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}
	.ccl-exam-footer {
		position: sticky;
		bottom: 0;
		z-index: 80;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		gap: 10px;
	}
	.ccl-exam-footer > div:last-child {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: 100%;
	}
	.ccl-exam .ccl-btn,
	.ccl-exam button.ccl-btn {
		width: 100%;
		min-width: 0;
		max-width: none;
		flex: 1 1 100%;
		min-height: 48px;
		height: auto;
		padding: 12px 14px;
	}
	.ccl-exam-footer .ccl-btn,
	.ccl-exam-footer button.ccl-btn {
		width: auto;
		min-width: 0;
		max-width: none;
		flex: 1 1 calc(50% - 4px);
	}
	.ccl-wave-controls {
		flex-wrap: wrap;
		height: auto;
		min-height: 48px;
		max-height: none;
		gap: 8px;
		margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}
	.ccl-exam .ccl-wave-controls .ccl-btn,
	.ccl-exam .ccl-wave-controls button.ccl-btn,
	.ccl-exam .ccl-wave-controls .ccl-btn-start,
	.ccl-exam .ccl-wave-controls .ccl-btn-finish {
		width: 100%;
		min-width: 0;
		max-width: none;
		flex: 1 1 100%;
		min-height: 48px;
		height: auto;
		font-size: 0.95rem;
		overflow: visible;
		text-overflow: clip;
	}
	.ccl-wave-controls .ccl-rec {
		width: auto;
		min-width: 64px;
		flex: 0 0 auto;
	}
	.ccl-wave-meta {
		height: auto;
		min-height: 48px;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 8px;
		margin-bottom: 8px;
	}
	.ccl-wave-meta .ccl-btn,
	.ccl-wave-meta button.ccl-btn {
		width: 100%;
		min-width: 0;
		max-width: none;
		flex: 1 1 100%;
		min-height: 48px;
		height: auto;
	}
	/* Keep the PiP camera away from action buttons on phones. */
	video.ccl-cam.is-corner {
		width: 96px;
		height: 64px;
		right: 10px;
		bottom: auto;
		top: calc(64px + env(safe-area-inset-top, 0px));
		z-index: 20;
		pointer-events: none;
	}
}