.lesson-editor { width:min(560px,calc(100% - 24px)); max-height:calc(100dvh - 32px); margin:auto; padding:20px; border:1px solid #cbd5e1; border-radius:16px; color:#0f172a; background:#fff; overflow:auto; box-sizing:border-box; font-family:var(--font-body,system-ui); }
.lesson-editor::backdrop { background:#0f172a99; }
.lesson-editor-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lesson-editor h2 { font-size:1.15rem; }
.lesson-editor label { display:flex; flex-direction:column; gap:5px; margin-top:12px; font-size:.85rem; font-weight:700; min-width:0; }
.lesson-editor input,.lesson-editor select { width:100%; min-width:0; min-height:44px; padding:8px; border:1px solid #94a3b8; border-radius:8px; background:#fff; color:#0f172a; font:inherit; }
.lesson-editor button,.lesson-add-button,.audio-save-verse { min-height:44px; padding:10px 14px; border:1px solid #cbd5e1; border-radius:10px; background:#f1f5f9; color:#0f172a; font:700 .85rem var(--font-body,system-ui); cursor:pointer; }
.lesson-editor #lessonSave { width:100%; margin-top:14px; background:#0f172a; color:#fff; }
.lesson-editor button:disabled { opacity:.5; cursor:wait; }
.lesson-editor :focus-visible,.lesson-add-button:focus-visible,.audio-save-verse:focus-visible { outline:3px solid #0284c7; outline-offset:2px; }
.lesson-range-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.lesson-editor fieldset { padding:8px 12px 12px; border:1px solid #cbd5e1; border-radius:8px; min-width:0; }
.lesson-preview { margin-top:14px; padding:10px; background:#f8fafc; border-radius:8px; overflow-wrap:anywhere; }
.lesson-storage-note { margin-top:12px; font-size:.75rem; line-height:1.5; color:#64748b; }
#lessonStatus { margin-top:10px; font-size:.85rem; }
.lesson-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.lesson-feedback { font-size:.8rem; line-height:1.5; color:#334155; }
.audio-save-verse { margin:0; width:auto; flex:0 0 auto; padding:8px 10px; white-space:nowrap; }
@media(max-width:360px) { .lesson-editor { padding:14px; } .lesson-range-grid { gap:8px; } .lesson-editor fieldset { padding:8px; } }

.lesson-header-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
.lesson-icon-button { width:44px; min-width:44px; padding:0; font-size:1.5rem; line-height:1; }
.collection-header-row { gap:10px; }
.lesson-feedback:empty { display:none; }