@font-face { font-family:'Inter'; src:url('fonts/Inter.ttf') format('truetype'); font-style:normal; font-weight:100 900; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Italic.ttf') format('truetype'); font-style:italic; font-weight:100 900; font-display:swap; }
html, body, .brand-mark, .mobile-symbol { font-family:'Inter', sans-serif; }
.brand { gap:8px; }
.brand-icon { width:30px; height:30px; overflow:hidden; flex:none; border-radius:7px; display:grid; place-items:center; }
html[data-theme="dark"] .brand-icon { border:0.5px solid #fff; }
.brand-icon img { display:block; width:100%; height:100%; max-width:100%; object-fit:contain; }
.brand-wordmark { font-size:19px; font-weight:600; letter-spacing:-.035em; white-space:nowrap; color:#000d17; }
.brand-wordmark span:last-child { color:#325c7d; }
html[data-theme="dark"] .brand-wordmark { color:#e8e3d8; }
html[data-theme="dark"] .brand-wordmark span:last-child { color:#b6cfe3; }
.editor-meta, .format-toolbar { display: none; }
.editor-meta { display:flex; margin-bottom:18px; }
.editor-meta .meta-dot, .editor-meta .saved { display:none; }
.note-title { margin-top: 0; margin-bottom: 0; }
.editor { margin-left:0; margin-right:auto; }
.editor-toolbar { width:100%; max-width:760px; padding-left:65px; padding-right:65px; }
.toolbar-left { min-width:0; }
#breadcrumb-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.note-body { padding-top: 18px; }
.note-title:focus-visible, .note-body:focus-visible { outline: none; }
.note-surface:focus-visible { outline:none; }
.note-title:empty:before { content:attr(data-placeholder); color:var(--muted); pointer-events:none; }
.note-item { min-height:68px; }
#restore-note[hidden] { display:none; }
.note-item-title { font-size:16px; }
.notes-pane { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.list-header, .list-divider, .list-label { flex:none; }
.note-list { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
#pin-note[aria-pressed="true"] { background:var(--selected); color:var(--text); }
.pin-indicator { display:inline-flex; vertical-align:middle; color:var(--muted); margin-right:5px; }
.pin-indicator svg { width:13px; height:13px; }
.editor-footer { display:none; }
.save-status { display:none; }
.save-failed .save-status { display:block; position:fixed; bottom:16px; right:16px; background:#7c2525; color:white; padding:12px 16px; border-radius:6px; z-index:5; }
.storage-error { max-width:560px; margin:12vh auto; padding:24px; line-height:1.6; }
.reset-preview { margin-top:12px; padding:9px 12px; border:1px solid var(--line); border-radius:6px; background:var(--soft); color:var(--text); }
.folder-wrap { display:flex; align-items:center; min-width:0; }
.folder-wrap:has([data-folder="all"]), .folder-wrap:has([data-folder="root"]) { position:sticky; z-index:2; background:var(--side); }
.folder-wrap:has([data-folder="all"]) { top:0; }
.folder-wrap:has([data-folder="root"]) { top:40px; }
.folder-wrap .folder-row { flex:1; min-width:0; }
.folder-menu { position:fixed; z-index:10; width:160px; padding:5px; border:1px solid var(--line); border-radius:7px; background:var(--paper); box-shadow:0 6px 18px #0003; }
.folder-menu button { display:block; width:100%; padding:9px 10px; border:0; border-radius:4px; background:transparent; color:var(--text); font-size:13px; text-align:left; }
.folder-menu button:hover, .folder-menu button:focus-visible { background:var(--selected); }
.folder-delete-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:24px; }
.folder-delete-actions button { border:1px solid var(--line); border-radius:6px; padding:10px 12px; background:var(--soft); color:var(--text); }
.folder-delete-actions button:hover { background:var(--input); }
.folder-delete-actions .danger { background:#8b3030; border-color:#8b3030; color:#fff; }
.folder-delete-actions .danger:hover { background:#702525; }
.import-actions { display:flex; gap:8px; margin-top:20px; }
.import-actions button { border:1px solid var(--line); border-radius:6px; padding:10px 14px; background:var(--soft); color:var(--text); }
.import-actions button:hover { background:var(--input); }
#import-errors { color:var(--text); font-size:12px; line-height:1.5; max-height:150px; overflow:auto; padding-left:20px; }

@media (min-width:701px) {
  html, body { height:100%; overflow:hidden; }
  .app { height:100dvh; min-height:0; overflow:hidden; }
  .sidebar, .notes-pane, .editor-pane { min-height:0; }
  .sidebar-content { min-height:0; overflow-y:auto; }
  .editor-scroll { min-height:0; overscroll-behavior:contain; }
  .notes-pane { overscroll-behavior:contain; }
}


.new-note[hidden] { display:none; }

#delete-folder-dialog { width:min(620px, calc(100% - 40px)); }
#delete-folder-dialog .folder-delete-actions { flex-wrap:nowrap; }
#delete-folder-dialog .folder-delete-actions button { white-space:nowrap; }
@media (max-width:560px) {
  #delete-folder-dialog .folder-delete-actions { flex-wrap:wrap; }
}
#new-folder-name { display:block; width:100%; margin-top:8px; padding:10px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--text); }

.empty-editor { width:100%; max-width:760px; margin-left:0; margin-right:auto; }