.notes-shell { display: grid; gap: 18px; }
.notes-topbar { position: relative; z-index: 30; grid-template-columns: 1fr auto 1fr; }
.notes-topbar > .menu-root { justify-self: end; }
.notes-topbar .menu-root { position: relative; }
.notes-topbar .menu-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--app-border); border-radius: 12px; cursor: pointer; }
.notes-topbar .menu-button svg { width: 18px; height: 18px; fill: currentColor; }
.notes-topbar .menu-dropdown { position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; display: grid; gap: 4px; min-width: 190px; padding: 6px; border: 1px solid var(--app-border); border-radius: 14px; box-shadow: 0 16px 35px rgba(0,0,0,.35); }
.notes-topbar .menu-dropdown button { padding: 10px 12px; border: 0; border-radius: 10px; color: var(--app-text); background: transparent; cursor: pointer; font-size: .92rem; text-align: left; }
.notes-topbar .menu-dropdown button:hover { background: rgba(255,255,255,.12); }
.notes-topbar .menu-dropdown .menu-danger { color: #ffd0d0; }
.notes-heading { display: grid; justify-items: center; gap: 2px; font-weight: 700; }
.notes-heading small { color: var(--app-muted); font-size: .75rem; font-weight: 500; }
.notes-panel { padding: 22px; border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); background: var(--app-surface); box-shadow: var(--app-shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.notes-search { display: grid; gap: 8px; }
.notes-search label { color: var(--app-muted); font-size: .85rem; }
.notes-search-row { display: flex; align-items: stretch; gap: 10px; }
.notes-search input { min-width: 0; min-height: 42px; flex: 1; padding: 11px 13px; border: 1px solid var(--app-border); border-radius: 11px; color: var(--app-text); background: rgba(255,255,255,.05); }
.notes-search input:focus { border-color: var(--app-border-strong); outline: 0; box-shadow: 0 0 0 3px rgba(139,92,246,.12); }
.notes-search-row .primary-btn,
.notes-search-row .ghost-btn,
.notes-pagination .ghost-btn { min-height: 40px; padding: 8px 14px; }
.notes-search-row .primary-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.notes-summary { min-height: 24px; margin: 18px 0 8px; color: var(--app-muted); }
.notes-table-wrap { overflow-x: auto; border: 1px solid var(--app-border); border-radius: 14px; }
.notes-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.notes-table th, .notes-table td { padding: 14px 16px; border-bottom: 1px solid var(--app-border); text-align: left; vertical-align: top; }
.notes-table tr:last-child td { border-bottom: 0; }
.notes-table th { color: var(--app-muted); background: rgba(255,255,255,.035); font-size: .82rem; font-weight: 600; }
.notes-table th:last-child, .note-date { width: 190px; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.note-date { color: var(--app-muted); white-space: nowrap; }
.notes-message { padding: 36px 18px; border: 1px dashed var(--app-border); border-radius: 14px; color: var(--app-muted); text-align: center; }
.error-message { color: var(--app-danger); border-color: rgba(255,129,143,.4); }
.notes-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--app-border); color: var(--app-muted); }
.notes-pagination span { min-width: 132px; text-align: center; font-size: .9rem; }
.notes-pagination .ghost-btn:not(:disabled):hover { border-color: var(--app-border-strong); background: var(--app-accent-soft); }

html[data-theme="light"] .notes-panel { background: rgba(255,255,255,.88); box-shadow: 0 12px 30px rgba(54,38,82,.08); }
html[data-theme="light"] .notes-search input,
html[data-theme="light"] .notes-table th { color: var(--app-text); background: #f5f2f8; }
html[data-theme="light"] .notes-table-wrap { background: rgba(255,255,255,.7); }
@media (max-width: 640px) {
    .notes-topbar { grid-template-columns: 1fr auto; }
    .notes-heading { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; justify-items: start; }
    .notes-panel { padding: 14px; }
    .notes-search-row { flex-wrap: wrap; }
    .notes-search input { flex-basis: 100%; }
    .notes-search-row .primary-btn,
    .notes-search-row .ghost-btn { flex: 1; }
    .notes-table-wrap { overflow: visible; border: 0; }
    .notes-table { display: block; table-layout: auto; }
    .notes-table thead { display: none; }
    .notes-table tbody { display: grid; gap: 10px; }
    .notes-table tr { display: grid; grid-template-areas: "date" "text"; border: 1px solid var(--app-border); border-radius: 12px; overflow: hidden; }
    .notes-table td { width: auto; border: 0; }
    .notes-table .note-date { grid-area: date; padding: 10px 12px 0; font-size: .72rem; white-space: normal; }
    .notes-table .note-text { grid-area: text; padding: 8px 12px 12px; }
    .notes-pagination { justify-content: space-between; gap: 8px; }
}