.notes-panel { min-width: 0; }
.notes-panel .note-row { padding: 16px 0; border-bottom: 1px solid var(--border, #e1e5e9); border-radius: 0; }
.note-title-button { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: 4px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.note-title-button:hover { text-decoration: underline; }
.note-title-button:focus-visible, .note-lesson-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.notes-panel .note-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-lesson-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.note-lesson-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.notes-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0; }
.notes-pagination .icon-btn, .notes-panel .icon-btn, .notes-modal .icon-btn { width: 44px; height: 44px; flex-shrink: 0; }
.notes-modal .modal { max-width: min(640px, calc(100vw - 24px)); display: flex; flex-direction: column; max-height: min(780px, 92dvh); overflow: hidden; }
.notes-modal .modal-head, .notes-modal .modal-actions { flex-shrink: 0; }
.notes-modal .modal-body { overflow-y: auto; min-height: 0; }
.notes-modal .modal-body, .notes-modal .field, .notes-modal form { min-width: 0; }
.notes-modal input, .notes-modal textarea { width: 100%; box-sizing: border-box; }
.notes-modal textarea { resize: vertical; }
.notes-modal .note-mini-row { display: flex; width: 100%; border-bottom: 1px solid var(--border, #e1e5e9); }
.notes-modal .note-lesson-list h3 { font-size: 16px; }
.notes-modal .modal-actions .btn { min-height: 44px; }
@media (max-width: 480px) {
  .notes-modal .modal-actions { flex-wrap: wrap; }
  .notes-panel .note-title { font-size: 18px; }
}