/* ═══════════════════════════════════════════════════════════════════════════
   shadow-prefs.css — tấm "Cài đặt luyện" (shadow-prefs.js) của trang Shadowing video + Luyện hội thoại, 25/09/2026.
   Khung hộp là .lv-dlg dùng chung (learn-ui.css); ở đây chỉ các dòng cài đặt. Chỉ token --lv-*, không hex, tự lật tối.
   ═══════════════════════════════════════════════════════════════════════════ */
.spf-head { flex: 1; min-width: 0; }
.spf .lv-dlg__body { padding-top: 8px; padding-bottom: 8px; }

.spf-g { padding: 14px 0 12px; }
.spf-g + .spf-g { border-top: 1px solid var(--lv-hair); }
.spf-g__t { margin: 0 0 2px; font-size: 15px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; color: var(--lv-ink); }

.spf-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 12px 0; }
.spf-row + .spf-row { border-top: 1px solid color-mix(in srgb, var(--lv-hair) 60%, transparent); }
.spf-row--sw { cursor: pointer; }
.spf-row__t { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; }
.spf-row__t b { font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--lv-ink); }
.spf-row__t small { font-size: 13px; line-height: 1.5; color: var(--lv-muted); }

/* Công tắc: ô chọn thật (bàn phím + trình đọc màn hình), vẽ núm bằng nền — Firefox không vẽ ::after trên <input> */
.spf-sw {
    -webkit-appearance: none; appearance: none; flex: none; width: 46px; height: 28px; margin: 0; border-radius: 999px; cursor: pointer;
    background: radial-gradient(circle 11px at 14px 50%, var(--lv-surface) 96%, transparent 100%), var(--lv-border);
    transition: background var(--lv-dur) var(--lv-ease);
}
.spf-sw:checked { background: radial-gradient(circle 11px at 32px 50%, var(--lv-surface) 96%, transparent 100%), var(--lv-brand-strong); }
.spf-sw:focus-visible { outline: 2px solid var(--lv-brand-fg); outline-offset: 2px; }

/* Lựa chọn: hàng ô bấm, tự xuống dòng ở màn hẹp */
.spf-ch { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.spf-ch__o { position: relative; cursor: pointer; }
.spf-ch__o input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.spf-ch__o span {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 56px; padding: 0 16px;
    border-radius: 12px; border: 1px solid var(--lv-border); background: var(--lv-surface); color: var(--lv-text);
    font-size: 14px; font-weight: 600; line-height: 1.45; font-variant-numeric: tabular-nums;
    transition: border-color var(--lv-dur) var(--lv-ease), background var(--lv-dur) var(--lv-ease), color var(--lv-dur) var(--lv-ease);
}
.spf-ch__o:hover span { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--lv-border)); }
.spf-ch__o input:checked + span {
    background: var(--lv-wash); border-color: var(--lv-brand-strong); color: var(--lv-brand-deep);
    box-shadow: inset 0 0 0 1px var(--lv-brand-strong);
}
.spf-ch__o input:focus-visible + span { outline: 2px solid var(--lv-brand-fg); outline-offset: 2px; }
.spf-ch__o.is-off { cursor: not-allowed; }
.spf-ch__o.is-off span { opacity: .45; }

/* Chân tấm: trạng thái lưu (trái) · Xong (phải) — giữ MỘT hàng cả trên điện thoại */
.lv-dlg__foot.spf-foot { flex-direction: row; align-items: center; justify-content: space-between; }
.spf-st { min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--lv-brand-fg); }
.spf-st.is-err { color: var(--lv-warn-deep); }
.lv-dlg__foot.spf-foot .lv-btn { width: auto; min-width: 120px; }