.notebook-page { min-width: 0; }
.notebook-page #notebook-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.notebook-page .notebook-search { grid-column: 1 / -1; }
.notebook-page .notebook-filter-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.notebook-page .notebook-state-hint { grid-column: 1 / -1; margin: 0; padding: 8px 12px; border-left: 2px solid var(--cyan); background: rgba(87,221,255,.04); color: #b6cbdc; font: 13px/1.6 var(--body); }
.notebook-page label.notebook-important { display: flex; flex-direction: row; align-items: center; gap: 10px; color: #e9d29d; font: 14px/1.5 system-ui, sans-serif; cursor: pointer; min-height: 44px; }
.notebook-page input[data-note-important] { appearance: auto; flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; padding: 0; accent-color: #dfbd70; }
.notebook-page button:disabled { opacity: .45; cursor: default; }
.notebook-page :is(button, summary, input, select):focus-visible { outline: 2px solid #a8deee; outline-offset: 3px; }
.notebook-results-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.notebook-results-bar output { color: #a8c3d4; font: 14px/1.5 system-ui, sans-serif; }
.notebook-results-bar > div { display: flex; flex-wrap: wrap; gap: 8px; }
.notebook-page .notebook-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.notebook-page .player-note { overflow: hidden; scroll-margin-top: 80px; }
.notebook-page .player-note > summary { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 14px; padding: 18px 48px 18px 20px; list-style: none; font-family: var(--display); letter-spacing: 0; }
.notebook-page .player-note > summary::-webkit-details-marker { display: none; }
.notebook-page .player-note > summary::after { content: '+'; position: absolute; right: 18px; top: 18px; color: #a3ccdf; font: 22px/1.2 system-ui, sans-serif; }
.notebook-page .player-note[open] > summary::after { content: '−'; }
.notebook-page .note-title { grid-column: 1; font-size: 17px; font-weight: 650; line-height: 1.5; }
.notebook-page .note-badges { grid-column: 2; grid-row: 1; max-width: 100%; }
.notebook-page .notebook-note-meta { grid-column: 1 / -1; color: #a5b6c8; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.notebook-page .notebook-note-preview { grid-column: 1 / -1; color: #bacad6; font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.notebook-page .player-note[open] .notebook-note-preview { display: none; }
.notebook-page .player-note:not([open]) > summary {
  height: 180px;
  grid-template-rows: 51px 18px minmax(0, 1fr);
}
.notebook-page .player-note:not([open]) .note-title {
  grid-row: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.notebook-page .player-note:not([open]) .notebook-note-meta {
  grid-row: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notebook-page .player-note:not([open]) .notebook-note-preview { grid-row: 3; }
.notebook-page .player-note-body > div { padding: 22px; }
.notebook-page .player-note-body p { max-width: 90ch; font-size: 16px; line-height: 1.85; color: #c7d7e4; overflow-wrap: anywhere; }
.notebook-page .player-note-body small { font: 12px/1.5 system-ui, sans-serif; letter-spacing: .05em; }
.notebook-page .notebook-filter-empty { padding: 28px; text-align: center; border: 1px dashed var(--line); }
.notebook-page .notebook-filter-empty strong { font: 600 17px/1.5 system-ui, sans-serif; }
.notebook-page .notebook-filter-empty p { font: 15px/1.6 system-ui, sans-serif; }
@media (max-width: 820px) {
  .notebook-page .notebook-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .notebook-page #notebook-filters { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 12px; }
  .notebook-page .player-note > summary { grid-template-columns: minmax(0, 1fr); padding: 15px 38px 15px 15px; }
  .notebook-page .note-badges { grid-column: 1; grid-row: auto; margin-left: 0; justify-content: flex-start; }
  .notebook-page .player-note:not([open]) > summary { height: 202px; grid-template-rows: 48px 24px 18px minmax(0, 1fr); }
  .notebook-page .player-note:not([open]) .note-badges { grid-row: 2; }
  .notebook-page .player-note:not([open]) .notebook-note-meta { grid-row: 3; }
  .notebook-page .player-note:not([open]) .notebook-note-preview { grid-row: 4; }
  .notebook-page .note-title { font-size: 16px; }
  .notebook-page .player-note > summary::after { right: 12px; top: 16px; }
  .notebook-page .player-note-body > div { padding: 16px; }
  .notebook-results-bar > div { width: 100%; }
  .notebook-results-bar button { flex: 1; }
}