/* Grey circle pencil */
.lesson-top-btn.circle.notes-circle{background:var(--accent);border:none;color:#fff}
.lesson-top-btn.circle.notes-circle svg{color:#fff}
/* Notes editor modal styles */
.notes-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.notes-icon{width:36px;height:36px;border-radius:9999px;background:#f3f4f6;border:1px solid #e5e7eb;display:grid;place-items:center;font-size:16px;color:var(--accent)}
.notes-title{font-weight:800;font-size:16px;color:var(--accent)}
.notes-toolbar{display:flex;gap:8px;margin-bottom:8px}
.notes-view{white-space:pre-wrap;line-height:1.6;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px;min-height:120px}
.notes-ta{width:100%;min-height:300px;border:1px solid #e5e7eb;border-radius:10px;padding:10px}

.modal-box{max-width:1100px;width:90vw;max-height:85vh;overflow:auto;background:#fff;border-radius:14px;padding:20px}

/* Ensure circular icon button sizing */
.lesson-top-btn.circle{border-radius:9999px;width:36px;height:36px;display:grid;place-items:center;padding:0}

/* Right align container in top nav */
.notes-right{margin-left:auto;display:flex;gap:8px;align-items:center}


/* Modal header title and close */
.modal-box{position:relative}
.notes-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.notes-titlewrap{font-size:16px}
.notes-titlewrap strong{font-weight:800;color:var(--accent)}
.notes-light{font-weight:300;color:var(--accent)}
.notes-close{position:absolute;right:12px;top:12px;background:transparent;border:none;color:#9ca3af;font-size:18px;line-height:1;cursor:pointer}
.notes-close:hover{color:#6b7280}