diff --git a/src/components/ai-edition/CaptionsPane.tsx b/src/components/ai-edition/CaptionsPane.tsx
index c1f6d732..7b4142fb 100644
--- a/src/components/ai-edition/CaptionsPane.tsx
+++ b/src/components/ai-edition/CaptionsPane.tsx
@@ -182,7 +182,7 @@ export function CaptionsPane() {
 			</header>
 			<div className={styles.paneBody} style={{ padding: 0 }}>
 				<div className={styles.paneRow}>
-					<span className="label">{t("captions.show")}</span>
+					<span className={styles.label}>{t("captions.show")}</span>
 					<Toggle
 						checked={settings.enabled}
 						disabled={disabled || !hasTranscript}
@@ -275,7 +275,7 @@ export function CaptionsPane() {
 				{/* ── Language ───────────────────────────────────────────── */}
 				<div className={styles.sectionLabel}>{t("captions.language")}</div>
 				<div className={styles.paneRow}>
-					<span className="label">{t("captions.displayLanguage")}</span>
+					<span className={styles.label}>{t("captions.displayLanguage")}</span>
 					<select
 						value={settings.language ?? ""}
 						disabled={disabled}
@@ -358,7 +358,7 @@ export function CaptionsPane() {
 				{/* ── Text ───────────────────────────────────────────────── */}
 				<div className={styles.sectionLabel}>{t("captions.text")}</div>
 				<div className={styles.paneRow}>
-					<span className="label">{t("captions.font")}</span>
+					<span className={styles.label}>{t("captions.font")}</span>
 					<select
 						value={settings.fontFamily}
 						disabled={disabled}
@@ -373,7 +373,7 @@ export function CaptionsPane() {
 					</select>
 				</div>
 				<div className={styles.paneRow}>
-					<span className="label">{t("captions.bold")}</span>
+					<span className={styles.label}>{t("captions.bold")}</span>
 					<Toggle
 						checked={settings.fontWeight === "bold"}
 						disabled={disabled}
@@ -393,7 +393,7 @@ export function CaptionsPane() {
 					/>
 				</div>
 				<div className={styles.paneRow}>
-					<span className="label">{t("captions.textColor")}</span>
+					<span className={styles.label}>{t("captions.textColor")}</span>
 					<ColorField
 						label={t("captions.textColor")}
 						value={settings.color}
@@ -409,7 +409,7 @@ export function CaptionsPane() {
 				    background: the swatch keeps showing the remembered colour while the
 				    plate is off, because that is what turning it back on will draw. */}
 				<div className={styles.paneRow}>
-					<span className="label">{t("captions.background")}</span>
+					<span className={styles.label}>{t("captions.background")}</span>
 					<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
 						<ColorField
 							label={t("captions.backgroundColor")}
@@ -488,7 +488,7 @@ export function CaptionsPane() {
 				{/* ── Line length ────────────────────────────────────────── */}
 				<div className={styles.sectionLabel}>{t("captions.lineLength")}</div>
 				<div className={styles.paneRow}>
-					<span className="label">{t("captions.minWords")}</span>
+					<span className={styles.label}>{t("captions.minWords")}</span>
 					<select
 						value={settings.minWordsPerLine}
 						disabled={disabled}
@@ -503,7 +503,7 @@ export function CaptionsPane() {
 					</select>
 				</div>
 				<div className={styles.paneRow} style={{ marginBottom: 16 }}>
-					<span className="label">{t("captions.maxWords")}</span>
+					<span className={styles.label}>{t("captions.maxWords")}</span>
 					<select
 						value={settings.maxWordsPerLine}
 						disabled={disabled}
diff --git a/src/components/ai-edition/ExportDialog.tsx b/src/components/ai-edition/ExportDialog.tsx
index e640fbd1..ec8122f0 100644
--- a/src/components/ai-edition/ExportDialog.tsx
+++ b/src/components/ai-edition/ExportDialog.tsx
@@ -570,7 +570,7 @@ export function ExportDialog({ open, onClose, document }: ExportDialogProps) {
 							</div>
 						</div>
 						<div className={styles.paneRow} style={{ margin: 0 }}>
-							<span className="label">{t("exportDialog.loopGif")}</span>
+							<span className={styles.label}>{t("exportDialog.loopGif")}</span>
 							<button
 								type="button"
 								className={`${styles.toggle} ${gifLoop ? styles.isOn : ""}`}
diff --git a/src/components/ai-edition/RightPanes.tsx b/src/components/ai-edition/RightPanes.tsx
index 5ac70471..f725b867 100644
--- a/src/components/ai-edition/RightPanes.tsx
+++ b/src/components/ai-edition/RightPanes.tsx
@@ -1380,7 +1380,7 @@ export function VideoEffectsPane() {
 	return (
 		<Pane title={ts("effects.title")} icon={<Sliders size={14} />} helpText={ts("effects.help")}>
 			<div className={styles.paneRow}>
-				<span className="label">{ts("effects.blurBg")}</span>
+				<span className={styles.label}>{ts("effects.blurBg")}</span>
 				<Toggle
 					checked={settings.showBlur}
 					disabled={!hasDocument}
@@ -1540,7 +1540,7 @@ export function LayoutPane() {
 				</select>
 			</div>
 			<div className={styles.paneRow}>
-				<span className="label">{ts("layout.mirrorWebcam")}</span>
+				<span className={styles.label}>{ts("layout.mirrorWebcam")}</span>
 				<Toggle
 					checked={settings.webcamMirrored}
 					disabled={layoutControlsDisabled}
@@ -1554,7 +1554,7 @@ export function LayoutPane() {
 			</div>
 			{supportsReactiveZoom ? (
 				<div className={styles.paneRow}>
-					<span className="label">{ts("layout.reactiveWebcam")}</span>
+					<span className={styles.label}>{ts("layout.reactiveWebcam")}</span>
 					<Toggle
 						checked={settings.webcamReactiveZoom}
 						disabled={layoutControlsDisabled}
@@ -1627,9 +1627,9 @@ export function LayoutPane() {
 			{isPip ? (
 				<div className={styles.sliderGrid}>
 					<div className={`${styles.sliderCell} ${styles.full}`}>
-						<div className="head">
-							<span className="label">{ts("layout.webcamSize")}</span>
-							<span className="val">{Math.round(settings.webcamSizePreset)}%</span>
+						<div className={styles.head}>
+							<span className={styles.label}>{ts("layout.webcamSize")}</span>
+							<span className={styles.val}>{Math.round(settings.webcamSizePreset)}%</span>
 						</div>
 						<input
 							type="range"
@@ -1703,7 +1703,7 @@ export function CursorPane() {
 			helpText={ts("cursor.help")}
 		>
 			<div className={styles.paneRow}>
-				<span className="label">{ts("cursor.show")}</span>
+				<span className={styles.label}>{ts("cursor.show")}</span>
 				<Toggle
 					checked={settings.cursorShow}
 					disabled={!hasDocument}
@@ -1716,7 +1716,7 @@ export function CursorPane() {
 				/>
 			</div>
 			<div className={styles.paneRow}>
-				<span className="label">{ts("cursor.clipToBounds")}</span>
+				<span className={styles.label}>{ts("cursor.clipToBounds")}</span>
 				<Toggle
 					checked={settings.cursor.clipToBounds}
 					disabled={!hasDocument}
@@ -1883,10 +1883,10 @@ export function SliderCell({
 }) {
 	return (
 		<div className={styles.sliderCell}>
-			<div className="head">
-				<span className="label">{label}</span>
+			<div className={styles.head}>
+				<span className={styles.label}>{label}</span>
 				{showValue ? (
-					<span className="val">
+					<span className={styles.val}>
 						{value.toFixed(decimals)}
 						{suffix}
 					</span>