.notes-layout { display:grid; grid-template-columns:220px 1fr; height:calc(100vh - 0px); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; }
.notes-sidebar { border-right:1px solid var(--color-border); display:flex; flex-direction:column; overflow:hidden; }
.notes-sidebar-header { padding:var(--space-4); border-bottom:1px solid var(--color-border); display:flex; flex-direction:column; gap:var(--space-3); }
.notes-search-wrap { position:relative; }
.notes-search-wrap svg { position:absolute; left:8px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--color-text-muted); }
.notes-search { width:100%; padding:6px 10px 6px 28px; font-size:.82rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg); color:var(--color-text); }
.notes-search:focus { border-color:var(--color-border-focus); outline:none; }

.notebooks-list { padding:var(--space-3) var(--space-3) 0; }
.notebooks-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--color-text-muted); padding:var(--space-2); display:flex; align-items:center; justify-content:space-between; }
.notebook-item { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2); border-radius:var(--radius-sm); font-size:.85rem; cursor:pointer; color:var(--color-text-secondary); transition:all var(--transition); }
.notebook-item:hover { background:var(--color-bg); color:var(--color-text); }
.notebook-item.active { background:var(--color-primary-light); color:var(--color-primary); font-weight:600; }
.notebook-item svg { width:14px; height:14px; flex-shrink:0; }
.notebook-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notebook-count { font-size:.7rem; background:var(--color-border); color:var(--color-text-muted); padding:1px 6px; border-radius:var(--radius-full); }
.notes-sidebar-divider { height:1px; background:var(--color-border); margin:var(--space-3) 0; }

.notes-list { flex:1; overflow-y:auto; padding:var(--space-2); -webkit-overflow-scrolling:touch; }
.note-list-item { padding:var(--space-3); border-radius:var(--radius-md); cursor:pointer; transition:background var(--transition); border-bottom:1px solid var(--color-border); }
.note-list-item:last-child { border-bottom:none; }
.note-list-item:hover { background:var(--color-bg); }
.note-list-item.active { background:var(--color-primary-light); }
.note-list-item.active .note-list-title { color:var(--color-primary); }
.note-list-title { font-size:.875rem; font-weight:600; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note-list-preview { font-size:.78rem; color:var(--color-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note-list-meta { font-size:.72rem; color:var(--color-text-muted); margin-top:4px; }

.notes-editor-panel { display:flex; flex-direction:column; overflow:hidden; }
.notes-editor-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-border); flex-shrink:0; gap:var(--space-3); flex-wrap:wrap; }
.notes-editor-actions { display:flex; align-items:center; gap:var(--space-2); flex-shrink:0; }
.editor-toggle-btn { display:flex; background:var(--color-bg); border-radius:var(--radius-sm); padding:2px; }
.toggle-view-btn { padding:4px 12px; border-radius:var(--radius-sm); font-size:.8rem; font-weight:500; color:var(--color-text-secondary); cursor:pointer; transition:all var(--transition); border:none; background:none; }
.toggle-view-btn.active { background:var(--color-surface); color:var(--color-primary); box-shadow:var(--shadow-sm); }

.note-title-input { font-size:1.4rem; font-weight:800; color:var(--color-text); background:transparent; border:none; outline:none; width:100%; padding:var(--space-5) var(--space-5) 0; flex-shrink:0; }
.note-tags-row { padding:var(--space-2) var(--space-5); flex-shrink:0; }

.md-toolbar { display:flex; align-items:center; gap:2px; padding:var(--space-2) var(--space-5); border-bottom:1px solid var(--color-border); flex-wrap:wrap; flex-shrink:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.md-toolbar::-webkit-scrollbar { display:none; }
.md-tool-btn { padding:4px 8px; border-radius:var(--radius-sm); font-size:.8rem; font-weight:600; color:var(--color-text-secondary); background:none; border:none; cursor:pointer; transition:all var(--transition); font-family:'Georgia',serif; white-space:nowrap; flex-shrink:0; }
.md-tool-btn:hover { background:var(--color-bg); color:var(--color-text); }

.notes-body { flex:1; overflow-y:auto; position:relative; -webkit-overflow-scrolling:touch; }
.note-textarea { width:100%; height:100%; padding:var(--space-5); font-size:.95rem; line-height:1.8; color:var(--color-text); background:transparent; border:none; outline:none; resize:none; font-family:'Menlo','Monaco','Courier New',monospace; }
.note-preview { padding:var(--space-5); font-size:.95rem; line-height:1.8; color:var(--color-text); }
.note-preview h1 { font-size:1.6rem; font-weight:800; margin-bottom:var(--space-3); }
.note-preview h2 { font-size:1.3rem; font-weight:700; margin-bottom:var(--space-2); margin-top:var(--space-5); }
.note-preview h3 { font-size:1.1rem; font-weight:600; margin-bottom:var(--space-2); margin-top:var(--space-4); }
.note-preview p  { margin-bottom:var(--space-3); }
.note-preview ul { list-style:disc; margin-left:var(--space-5); margin-bottom:var(--space-3); }
.note-preview ol { list-style:decimal; margin-left:var(--space-5); margin-bottom:var(--space-3); }
.note-preview li { margin-bottom:4px; }
.note-preview blockquote { border-left:3px solid var(--color-primary); padding-left:var(--space-4); color:var(--color-text-secondary); margin-bottom:var(--space-3); }
.note-preview code { background:var(--color-bg); padding:2px 6px; border-radius:var(--radius-sm); font-family:monospace; font-size:.88em; }
.note-preview pre { background:var(--color-bg); padding:var(--space-4); border-radius:var(--radius-md); margin-bottom:var(--space-3); overflow-x:auto; }
.note-preview pre code { background:none; padding:0; }
.note-preview a { color:var(--color-primary); text-decoration:underline; }
.note-preview strong { font-weight:700; }
.note-preview em { font-style:italic; }
.note-preview hr { border:none; border-top:1px solid var(--color-border); margin:var(--space-5) 0; }
.note-save-status { font-size:.75rem; color:var(--color-text-muted); padding:var(--space-2) var(--space-5); border-top:1px solid var(--color-border); flex-shrink:0; }
.notes-empty-editor { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:var(--space-3); color:var(--color-text-muted); }
.notes-empty-editor svg { width:48px; height:48px; color:var(--color-border); }

/* Back button for mobile notes (returns to list) */
.notes-back-btn {
  display:none; align-items:center; gap:var(--space-2);
  font-size:.875rem; color:var(--color-text-secondary); font-weight:500;
  padding:var(--space-2) 0; cursor:pointer; border:none; background:none;
}
.notes-back-btn svg { width:18px; height:18px; }
.notes-back-btn:hover { color:var(--color-primary); }

/* ── Tablet (≤1024px) ── */
@media (max-width:1024px) {
  .notes-layout { height:calc(100vh - 60px); }
}

/* ── Phone (≤640px) ── */
@media (max-width:640px) {
  /* Switch to single-column, show either list OR editor */
  .notes-layout {
    grid-template-columns:1fr;
    height:calc(100vh - var(--mobile-nav-height, 62px) - 80px);
    border-radius:var(--radius-md);
  }

  .notes-sidebar { height:100%; border-right:none; }
  .notes-editor-panel { height:100%; }

  /* JS will toggle .notes-show-editor on the layout */
  .notes-layout:not(.notes-show-editor) .notes-editor-panel { display:none; }
  .notes-layout.notes-show-editor .notes-sidebar { display:none; }
  .notes-layout.notes-show-editor .notes-back-btn { display:flex; }

  .note-title-input { font-size:1.2rem; padding:var(--space-4) var(--space-4) 0; }
  .note-textarea { padding:var(--space-4); font-size:.9rem; }
  .note-preview { padding:var(--space-4); }
  .notes-editor-header { padding:var(--space-3) var(--space-4); }
}