body{background:#f5f7fb!important;color:#232d42}
.np-shell{min-height:100vh;display:flex;gap:0}
.np-sidebar{width:280px;background:#fff;border-right:1px solid rgba(0,0,0,.06);padding:22px 16px;position:sticky;top:0;height:100vh;overflow:auto;transition:width .2s ease,padding .2s ease}
.np-sidebar.collapsed{width:92px;padding-inline:10px}.np-sidebar.collapsed .np-brand p,.np-sidebar.collapsed .np-brand h4,.np-sidebar.collapsed .np-nav-title,.np-sidebar.collapsed .np-nav-btn span{display:none}.np-sidebar.collapsed .np-nav-btn{justify-content:center}.np-sidebar.collapsed .np-brand{justify-content:center}
.np-brand-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.np-brand{display:flex;align-items:center;gap:12px;padding:0 6px}.np-brand h4{margin:0;font-size:1.12rem}.np-brand p{margin:0;color:#7d8aa2;font-size:.88rem}
.np-brand-icon{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#d6d6ff,#8d8ef8);color:#fff;display:grid;place-items:center;font-weight:700;box-shadow:0 8px 18px rgba(95,96,245,.25)}
.np-collapse-btn,.np-mobile-menu{width:42px;height:42px;border:0;border-radius:14px;background:#eef2ff;color:#4f46e5;display:grid;place-items:center}.np-mobile-menu{display:none}
.np-nav-title{padding:12px 10px 8px;font-size:15px;font-weight:600;line-height:1.25;letter-spacing:0;color:#344054;text-transform:none}
.np-nav-btn{width:100%;display:flex;align-items:center;gap:12px;border:0;background:transparent;border-radius:16px;padding:12px 14px;text-align:left;font-size:15px;font-weight:600;line-height:1.25;letter-spacing:0;color:#344054;transition:.18s;font-family:inherit}.np-nav-btn:hover,.np-nav-btn.active{background:#eef2ff;color:#3b5bdb}.np-nav-btn i{font-size:18px;line-height:1}
.np-sidebar-overlay{display:none}
body.np-lock-scroll{overflow:hidden}
.np-main{flex:1;min-width:0;padding:22px}.np-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.card-transparent{background:transparent!important;box-shadow:none!important;border:0!important}
.np-search-wrap{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.np-search{flex:1;display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:12px 14px;box-shadow:0 12px 30px rgba(16,24,40,.06);max-width:760px}.np-search i{font-size:1.1rem;color:#667085}.np-search input{border:0;background:transparent;outline:none;flex:1;min-width:0}.np-clear-btn{border:0;background:#f2f4f7;color:#344054;border-radius:12px;padding:8px 10px;font-weight:600}.np-top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.np-folder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:18px}.np-folder-card{border:1px solid rgba(78,115,223,.1);background:#fff;border-radius:16px;padding:10px 12px;text-align:left;box-shadow:0 8px 18px rgba(16,24,40,.05);display:flex;flex-direction:column;gap:4px;transition:.18s}.np-folder-card:hover,.np-folder-card.active{transform:translateY(-2px);box-shadow:0 16px 36px rgba(16,24,40,.1);border-color:#c7d2fe}.np-folder-card strong{font-size:13px;color:#344054;font-family:inherit;line-height:1.1;font-weight:600}.np-folder-card small{font-size:13px;font-weight:600;font-family:inherit;letter-spacing:0;color:#667085;line-height:1.1}.np-card-icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:#eef2ff;color:#4f46e5;font-size:1.35rem}
.card-style{
  background:#fff;
  border-radius:28px;
  padding:20px;
  box-shadow:0 16px 40px rgba(16,24,40,.07)}
  .np-board-head
  {display:flex;
    justify-content:space-between;
    gap:16px;align-items:center;
    margin-bottom:12px}
  .np-board-head h4{
  margin:0;
  font-size:13px;
  font-weight:600;
  line-height:1.1;
  color:#344054;
  font-family:inherit;
  letter-spacing:0;
}.np-board-head p{margin:2px 0 0;color:#667085;font-size:.92rem}.np-tabs{display:flex;gap:8px;flex-wrap:wrap}
.bottom,.topbar,.search,.tabs{display:none!important}.vn-hidden-support{position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.sheet{max-width:980px}.np-sheet-shell{border-radius:26px}.np-sheet-head{background:#fff;border-bottom:1px solid #eaecf0}.sheetBody{padding:18px 20px 16px}.sheetFoot{padding:14px 20px 18px}
.np-editor-wrap{display:flex;flex-direction:column;gap:14px}.np-field{display:flex;flex-direction:column;gap:8px}.np-field label{font-weight:600;color:#344054;font-size:13px;line-height:1.1;font-family:inherit;letter-spacing:0}.np-field input,.np-field textarea,.np-rich-editor{border:1px solid #d0d5dd;border-radius:16px;padding:12px 14px;background:#fff;outline:none}.np-field textarea{min-height:240px;resize:vertical}.np-rich-editor{min-height:260px;line-height:1.6;overflow:auto;padding-top:12px;padding-bottom:12px}.np-rich-editor:empty:before{content:attr(data-placeholder);color:#98a2b3}
.np-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:10px;border:1px solid #e4e7ec;background:#f8f9fc;border-radius:18px}.np-toolbtn{border:0;background:#fff;border-radius:12px;padding:8px 12px;font-weight:700;color:#344054;box-shadow:0 1px 2px rgba(16,24,40,.06)}.np-toolbtn:hover,.np-toolbtn.active{background:#eef2ff;color:#3b5bdb}.np-toolbtn.wide{font-weight:600}
.np-helper{font-size:13px;color:#667085;line-height:1.1;font-weight:600;font-family:inherit;letter-spacing:0}.np-settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.np-settings-card{border:1px solid #eaecf0;border-radius:20px;background:#fff;padding:18px;text-align:left;display:flex;flex-direction:column;gap:8px}.np-settings-card i{font-size:1.35rem;color:#4f46e5}.np-settings-card strong{font-size:1rem}.np-settings-card span{color:#667085;font-size:.9rem;line-height:1.35}
.np-notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.np-note-card{background:#fff;border:1px solid #eaecf0;border-radius:22px;padding:16px;box-shadow:0 10px 24px rgba(16,24,40,.06);display:flex;flex-direction:column;gap:14px;position:relative}.np-note-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.np-note-type{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;color:#4f46e5;padding:6px 10px;border-radius:999px;font-size:.71rem;font-weight:700}.np-note-top-actions{display:flex;gap:8px;align-items:center}.np-icon-btn{width:36px;height:36px;border:0;border-radius:12px;background:#f8f9fc;color:#475467;display:grid;place-items:center}.np-icon-btn.is-favorite{background:#fff4cc;color:#b58105}.np-note-card h5{
  margin:0;
  font-size:13px;
  font-weight:600;
  color:#344054;
  line-height:1.1;
  font-family:inherit;
  letter-spacing:0;
}.np-note-preview{margin:0;color:#667085;font-size:.93rem;line-height:1.38;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;min-height:72px}.np-note-meta{display:flex;gap:8px;flex-wrap:wrap}.np-meta-pill{background:#f2f4f7;color:#475467;border-radius:999px;padding:6px 10px;font-size:.71rem;font-weight:600}.np-more-menu{position:absolute;right:16px;top:58px;min-width:180px;background:#fff;border:1px solid #eaecf0;border-radius:16px;box-shadow:0 18px 32px rgba(16,24,40,.15);padding:8px;display:none;z-index:30}.np-more-menu.show{display:block}.np-more-menu button{width:100%;border:0;background:transparent;padding:10px 12px;text-align:left;border-radius:12px;color:#344054;font-weight:600;display:flex;align-items:center;gap:10px}.np-more-menu button:hover{background:#f8f9fc}.np-more-menu button.danger{color:#d92d20}.np-empty{padding:32px;border:1px dashed #d0d5dd;border-radius:20px;text-align:center;color:#667085;background:#fafbff}
.noteTextPreview{white-space:pre-wrap}.noteHtmlView{line-height:1.55;color:#344054}
.menuPanel{right:0;left:auto;min-width:260px;border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 32px rgba(16,24,40,.15)}
@media (max-width:991px){.np-shell{display:block}.np-sidebar{width:auto;height:auto;position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-100%);border-right:1px solid rgba(0,0,0,.06);border-bottom:0;max-width:290px}.np-sidebar.mobile-open{transform:translateX(0)}.np-sidebar-overlay{position:fixed;inset:0;background:rgba(15,23,42,.38);backdrop-filter:blur(2px);z-index:55;display:none}.np-sidebar-overlay.show{display:block}.np-main{padding:14px}.np-topbar,.np-board-head{flex-direction:column;align-items:stretch}.np-search{max-width:none}.sheet{width:min(96vw,980px)}.np-mobile-menu{display:grid}.np-collapse-btn{display:none}.np-folder-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.np-newnote-label{display:none}}

.np-tabs{display:none!important}.noteHtmlView{background:#f8fafc;min-height:auto}.np-note-card{cursor:pointer}.np-rich-editor h1,.np-rich-editor h2,.np-rich-editor blockquote,.noteHtmlView h1,.noteHtmlView h2,.noteHtmlView blockquote{margin:0 0 10px}.np-rich-editor blockquote,.noteHtmlView blockquote{border-left:4px solid #c7d2fe;padding-left:12px;color:#475467}.np-rich-editor ul,.noteHtmlView ul{padding-left:20px}.np-board-head{align-items:flex-start}

.np-board-head p{display:none!important}
.np-note-card .np-note-top-actions:last-child{justify-content:flex-start}

.np-view-controls{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.np-view-switch,.np-inline-view-switch{display:flex;align-items:center;gap:8px;background:#fff;border-radius:16px;padding:8px 10px;box-shadow:0 10px 24px rgba(16,24,40,.06)}
.np-inline-view-switch{padding:6px}
.np-view-switch>span{font-size:.84rem;font-weight:700;color:#667085}
.np-view-btn{border:0;background:#eef2ff;color:#4f46e5;border-radius:12px;padding:8px 12px;font-weight:700;display:flex;align-items:center;gap:6px}
.np-view-btn.active{background:#4f46e5;color:#fff}
.np-folder-grid.list-view{display:flex;flex-direction:column;gap:10px}
.np-folder-grid.list-view .np-folder-card{display:grid;grid-template-columns:54px 1fr;align-items:center;text-align:left;padding:14px 16px;min-height:auto}
.np-folder-grid.list-view .np-folder-card .np-card-icon{margin:0;width:44px;height:44px}
.np-folder-grid.list-view .np-folder-card strong,.np-folder-grid.list-view .np-folder-card small{grid-column:2}
.np-folder-grid.list-view .np-folder-card strong{margin-top:-34px;display:block}
.np-folder-grid.list-view .np-folder-card small{margin-top:2px}
.np-notes-grid.list-view{display:flex;flex-direction:column;gap:12px}
.np-notes-grid.list-view .np-note-card{padding:16px 18px}
.np-notes-grid.list-view .np-note-head{margin-bottom:8px}
.np-notes-grid.list-view .np-note-meta{margin-top:10px}
.np-notes-grid.list-view .np-note-card h5{margin-bottom:6px}
@media (max-width: 767px){.np-view-controls{justify-content:stretch}.np-view-switch{width:100%;justify-content:space-between}.np-inline-view-switch{display:none}}


/* v53 mobile folder slider override */
.np-view-controls{display:none !important;}
@media (max-width: 767px){
  .np-folder-grid,
  .np-folder-grid.list-view{
    display:flex !important;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:12px;
    margin-bottom:18px;
    padding:2px 2px 10px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    grid-template-columns:none !important;
  }
.np-folder-card,
.np-folder-grid.list-view .np-folder-card{
  flex:0 0 170px;
  min-width:170px;
  max-width:170px;
  scroll-snap-align:start;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  text-align:left !important;
  min-height:96px;
  padding:10px 12px;
}
.np-folder-grid.list-view .np-folder-card .np-card-icon,
.np-folder-card .np-card-icon{
  width:32px;
  height:32px;
  margin:0 0 2px 0;
  border-radius:10px;
  font-size:1rem;
}
  .np-folder-grid.list-view .np-folder-card strong,
  .np-folder-grid.list-view .np-folder-card small{
    grid-column:auto;
    margin-top:0;
  }
}

.np-photo-preview-shell{border-radius:18px;overflow:hidden;background:#0f172a;min-height:180px;display:flex;align-items:center;justify-content:center;padding:8px}.np-photo-preview-shell.in-view{min-height:220px}.np-photo-preview-img{display:block;max-width:100%;max-height:52vh;object-fit:contain;border-radius:14px}.np-note-thumb{width:100%;height:160px;object-fit:cover;border-radius:16px;border:1px solid #eaecf0;background:#f8fafc;margin-bottom:8px}


/* NotePlus theme bridge for legacy v44 modal/content markup */
:root{
  --np-primary:#4f46e5;
  --np-primary-2:#6366f1;
  --np-soft:#eef2ff;
  --np-text:#1d2939;
  --np-muted:#667085;
  --np-border:#e4e7ec;
  --np-danger:#d92d20;
  --np-success:#12b76a;
  --np-warning:#f79009;
}

#sheetTitle{
  font-size:13px;
  font-weight:600;
  line-height:1.1;
  font-family:inherit;
  letter-spacing:0;
  color:var(--np-text);
}

#sheetClose,.sheetHead .btn.neutral{
  background:#fcffba!important;
  color:transparent!important;
  border:1px solid var(--np-border)!important;
  box-shadow:none!important;
  min-width:32px!important;
  width:32px!important;
  min-height:32px!important;
  height:32px!important;
  padding:0!important;
  border-radius:10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  overflow:hidden!important;
  font-size:0!important;
  line-height:0!important;
}

#sheetClose::before,
.sheetHead .btn.neutral::before{
  content:"\eb99";
  font-family:"remixicon"!important;
  font-style:normal!important;
  font-weight:400!important;
  color:#0f489f!important;
  font-size:18px!important;
  line-height:1!important;
  display:block!important;
  width:18px!important;
  height:18px!important;
  text-align:center!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}



#sheetBody .btn,.sheetFoot .btn,.sheetHead .btn,.menuBtn,.iconBtn,.mini,.menuItem,.backupTile,.np-legacy-btn{
  border:1px solid transparent;
  border-radius:10px!important;
  min-height:32px;
  padding:6px 10px;
  font-weight:700;
  line-height:1.1;
  box-shadow:0 10px 24px rgba(16,24,40,.06);
  transition:.18s ease;
}
#sheetBody .btn:hover,.sheetFoot .btn:hover,.sheetHead .btn:hover,.menuBtn:hover,.iconBtn:hover,.mini:hover,.menuItem:hover,.backupTile:hover{transform:translateY(-1px)}
#sheetBody .btn i,.sheetFoot .btn i,.sheetHead .btn i,.menuBtn i,.iconBtn i,.mini i,.np-settings-card i{font-size:1rem;line-height:1}\n#sheetBody .btn,.sheetFoot .btn,.sheetHead .btn,.menuBtn,.iconBtn,.mini{display:inline-flex;align-items:center;justify-content:center;gap:8px}\n.menuBtn .menuIcon{display:none!important}\n.menuBtn .menuText{display:inline-flex;align-items:center;gap:8px}\n
#sheetBody .btn,.menuBtn,.iconBtn,.mini,.menuItem,.backupTile,.np-legacy-btn{background:#fff;color:#344054;border-color:#e4e7ec}
#sheetBody .btn.blue,.sheetFoot .btn.blue,.sheetHead .btn.blue,.btn.btn-primary,#npTopSettings.btn-outline-primary:hover,.menuItem.primary{background:linear-gradient(135deg,var(--np-primary),var(--np-primary-2))!important;color:#fff!important;border-color:transparent!important}
#sheetBody .btn.green,.sheetFoot .btn.green,.sheetHead .btn.green{background:#ecfdf3!important;color:#067647!important;border-color:#abefc6!important}
#sheetBody .btn.yellow,.sheetFoot .btn.yellow,.sheetHead .btn.yellow{background:#fffaeb!important;color:#b54708!important;border-color:#fedf89!important}
#sheetBody .btn.red,.sheetFoot .btn.red,.sheetHead .btn.red,.menuItem.danger{background:#fef3f2!important;color:#b42318!important;border-color:#fecdca!important}
#sheetBody .btn.rose,.sheetFoot .btn.rose,.sheetHead .btn.rose{background:#fdf2fa!important;color:#c11574!important;border-color:#fcceee!important}
#sheetBody .btn.neutral,.sheetFoot .btn.neutral,.sheetHead .btn.neutral{background:#f8fafc!important;color:#344054!important;border-color:#e4e7ec!important}
#sheetBody .btn.mini,.sheetFoot .btn.mini,.mini{min-height:36px;padding:8px 11px;border-radius:12px!important;font-size:.86rem;box-shadow:none}
#sheetBody .btn[disabled],.sheetFoot .btn[disabled],.menuBtn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

#sheetBody input[type="text"],#sheetBody input[type="datetime-local"],#sheetBody input[type="password"],#sheetBody input[type="number"],#sheetBody input:not([type]),#sheetBody textarea,#sheetBody select,
.noteTitleInput,.noteBodyBig,.pinInput,.liveTitle,.liveText,.noteBgSelect{
  width:100%;background:#fff!important;border:1px solid #d0d5dd!important;border-radius:16px!important;padding:12px 14px!important;color:#101828;outline:none;box-shadow:none!important;font-size:13px!important;font-weight:600!important;line-height:1.1!important;font-family:inherit!important;letter-spacing:0!important;
}
.noteBodyBig,.liveText{min-height:220px}
#sheetBody input:focus,#sheetBody textarea:focus,.noteTitleInput:focus,.noteBodyBig:focus,.pinInput:focus,.liveTitle:focus,.liveText:focus,.np-rich-editor:focus{
  border-color:#a5b4fc!important;box-shadow:0 0 0 4px rgba(99,102,241,.14)!important;
}

.noteTopRow,.sheetFootRow,.attachRow,.scanActionsTop{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.attachBox,.livebox,.panel{background:#fff;border:1px solid #eaecf0;border-radius:20px;padding:16px;box-shadow:0 12px 28px rgba(16,24,40,.06)}
.card{background:#fff;border:1px solid #eaecf0;border-radius:20px;padding:14px 16px;box-shadow:0 10px 24px rgba(16,24,40,.06)}
.ph{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.badge,.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#4f46e5;
  font-size:13px;
  font-weight:600;
  line-height:1.1;
  font-family:inherit;
  letter-spacing:0;
  border:0;
}
.badge.yellow,.pill.yellow{background:#fffaeb;color:#b54708}
.badge.green,.pill.green{background:#ecfdf3;color:#067647}
.badge.red,.pill.red{background:#fef3f2;color:#b42318}
.icon{width:52px;height:52px;border-radius:18px;background:#eef2ff;color:#4f46e5;display:grid;place-items:center;font-size:1.35rem;flex:0 0 52px}
.icon.green{background:#ecfdf3;color:#067647}.icon.yellow{background:#fffaeb;color:#b54708}.icon.red{background:#fef3f2;color:#b42318}.icon.rose{background:#fdf2fa;color:#c11574}
.meta .t{
  margin:0 0 6px;
  font-size:13px;
  font-weight:600;
  line-height:1.1;
  font-family:inherit;
  letter-spacing:0;
  color:#1d2939;
}
.meta .s{
  margin:0;
  font-size:13px;
  font-weight:600;
  line-height:1.1;
  font-family:inherit;
  letter-spacing:0;
  color:#667085;
}
.backupTile span{
  font-size:13px;
  font-weight:600;
  line-height:1.1;
  font-family:inherit;
  letter-spacing:0;
  color:#1d2939;
}
.menuRowLabel{
  font-size:13px;
  font-weight:600;
  line-height:1.1;
  font-family:inherit;
  letter-spacing:0;
  color:#344054;
}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.iconBtn,.mini{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.iconBtn.menuLike,.mini.menuLike{padding-inline:12px}
.recording-indicator{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:#fef3f2;color:#b42318;font-weight:700}
.recording-dot{width:10px;height:10px;border-radius:999px;background:#d92d20;box-shadow:0 0 0 6px rgba(217,45,32,.15)}

.backupGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.backupTile{display:flex;align-items:center;justify-content:flex-start;gap:12px;text-align:left;background:#fff;border:1px solid #eaecf0!important;padding:18px!important;border-radius:20px!important}
.backupTile img{width:30px;height:30px;object-fit:contain;border-radius:8px;background:#f8fafc;padding:4px}


.menuPanel{background:#fff;border:1px solid #eaecf0!important;border-radius:18px;box-shadow:0 18px 32px rgba(16,24,40,.15)!important;padding:10px}
.menuItem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff!important;color:#344054!important}
.menuRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 10px;border-radius:14px;background:#f8fafc;border:1px solid #eaecf0}

.switch .slider{background:#d0d5dd}.switch input:checked + .slider{background:#4f46e5}

/* ===== Backup / Restore release cleanup: font match + compact PIN modal ===== */

/* Match helper text to NotePlus modal text style */
.hint{
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.1 !important;
  font-family:inherit !important;
  letter-spacing:0 !important;
  color:#667085 !important;
}

/* Backup / Restore action buttons */
#menuExportBtn,
#menuImportBtn{
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.1 !important;
  font-family:inherit !important;
  letter-spacing:0 !important;
  min-height:28px !important;
  padding:4px 8px !important;
  border-radius:10px !important;
}

/* Compact PIN prompt placement so keyboard does not push it too far */
#backdrop .sheetBody:has(.pinCard){
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:16px !important;
  padding-top:18px !important;
}

/* PIN card matches modal typography */
.pinCard{
  width:100% !important;
  max-width:340px !important;
  margin:0 auto !important;
  background:#fff !important;
  border:1px solid #eaecf0 !important;
  border-radius:18px !important;
  box-shadow:0 18px 34px rgba(16,24,40,.16) !important;
  padding:16px !important;
  color:#667085 !important;
  font-family:inherit !important;
}

.pinTitle{
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.1 !important;
  font-family:inherit !important;
  letter-spacing:0 !important;
  color:#6c4fd3 !important;
  margin-bottom:6px !important;
}

.pinHint,
.pinError{
  color:#667085 !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.1 !important;
  font-family:inherit !important;
  letter-spacing:0 !important;
}

/* PIN input font match */
.pinCard .pinInput,
.pinCard input[type="password"],
.pinCard input[type="number"],
.pinCard input[type="text"]{
  min-height:40px !important;
  padding:10px 12px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.1 !important;
  font-family:inherit !important;
  letter-spacing:0 !important;
  border-radius:14px !important;
  color:#344054 !important;
}

/* PIN action buttons */
.pinActions{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  margin-top:10px !important;
}

.pinActions .btn,
.pinCard .btn{
  min-width:92px !important;
  min-height:30px !important;
  padding:5px 8px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.1 !important;
  font-family:inherit !important;
  letter-spacing:0 !important;
  border-radius:10px !important;
  box-shadow:none !important;
}

.pinActions .btn i,
.pinCard .btn i{
  font-size:12px !important;
  line-height:1 !important;
}

@media (max-width:767px){
  #backdrop .sheetBody:has(.pinCard){
    align-items:flex-start !important;
    justify-content:center !important;
    padding:12px !important;
    padding-top:14px !important;
  }

  .pinCard{
    max-width:320px !important;
    padding:14px !important;
    border-radius:16px !important;
  }

  .pinActions{
    gap:6px !important;
  }

  .pinActions .btn,
  .pinCard .btn{
    min-width:84px !important;
    min-height:28px !important;
    padding:4px 7px !important;
    font-size:12px !important;
  }

  #menuExportBtn,
  #menuImportBtn{
    font-size:11px !important;
    min-height:26px !important;
    padding:4px 7px !important;
  }
}

@media (max-width:767px){
  #sheetBody .btn,
  .sheetFoot .btn,
  .menuBtn,
  .menuItem,
  .backupTile{
    width:100%;
    justify-content:center;
  }

  /* keep attachment and dictation buttons responsive,
     but DO NOT force Edit Note footer into a column */
  .attachRow .btn,
  .attachRow .menuBtn,
  .noteTopRow .btn,
  .dtActionRow .btn,
  .dtActionRow .menuBtn{
    width:100% !important;
    justify-content:center;
  }

  .sheetFootRow{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    align-items:center !important;
    justify-content:flex-end !important;
  }

  .sheetFootRow .btn,
  .sheetFootRow .menuBtn{
    width:auto !important;
    flex:0 0 auto !important;
  }
}


/* === v56 text theme cleanup: keep NotePlus text colors consistent === */
:root{
  --np-text-main:#1d2939;
  --np-text-soft:#667085;
  --np-text-accent:#4f46e5;
  --np-text-strong:#344054;
}

/* Keep sheet header clean; fix mixed legacy colors */
.sheetHead,
.np-sheet-head,
.modal-header{
  background:#fff!important;
  color:var(--np-text-main)!important;
  border-bottom:1px solid #eaecf0!important;
}

#sheetTitle,
.sheetHead h1,.sheetHead h2,.sheetHead h3,.sheetHead h4,
.np-sheet-head h1,.np-sheet-head h2,.np-sheet-head h3,.np-sheet-head h4,
.modal-title,
.pinTitle,
.np-settings-card strong,
.np-folder-card strong,
.noteTitle,
.noteTitleInput,
.ph strong,
.card h1,.card h2,.card h3,.card h4,.card h5,
.livebox h1,.livebox h2,.livebox h3,.livebox h4,
.panel h1,.panel h2,.panel h3,.panel h4{
  color:var(--np-text-main)!important;
}

/* Labels and secondary text */
.sheetBody,
.sheetFoot,
#sheetBody,
#sheetFoot,
.pinCard,
.noteBodyBig,
.liveText,
.liveTitle,
.np-field label,
.np-helper,
.pinHint,
.np-settings-card span,
.np-folder-card small,
.card p,
.livebox p,
.panel p,
.attachBox,
.attachBox *:not(i),
.noteMeta,
.small,
small{
  color:var(--np-text-soft)!important;
}

/* Inputs and editable text should be readable and consistent */
#sheetBody input,
#sheetBody textarea,
#sheetBody select,
#sheetBody option,
#sheetBody [contenteditable="true"],
.noteTitleInput,
.noteBodyBig,
.pinInput,
.liveTitle,
.liveText,
.np-field input,
.np-field textarea,
.np-rich-editor{
  color:var(--np-text-main)!important;
  caret-color:var(--np-text-accent)!important;
}

#sheetBody input::placeholder,
#sheetBody textarea::placeholder,
.noteTitleInput::placeholder,
.noteBodyBig::placeholder,
.pinInput::placeholder,
.liveTitle::placeholder,
.liveText::placeholder,
.np-field input::placeholder,
.np-field textarea::placeholder,
.np-rich-editor:empty:before{
  color:#98a2b3!important;
}

/* Toolbar and action text */
.np-toolbtn,
.menuBtn,
.iconBtn,
.mini,
.menuItem,
.backupTile,
.btn.neutral,
#sheetClose,
#sheetBody .btn.neutral,
.sheetFoot .btn.neutral,
.sheetHead .btn.neutral{
  color:var(--np-text-strong)!important;
}

.btn.blue,
.btn.primary,
.menuBtn.blue,
.iconBtn.blue,
.mini.blue,
#sheetBody .btn.blue,
.sheetFoot .btn.blue,
.sheetHead .btn.blue,
.backupTile.primary{
  color:#fff!important;
}

.btn.red,
.menuBtn.red,
.iconBtn.red,
.mini.red,
#sheetBody .btn.red,
.sheetFoot .btn.red,
.sheetHead .btn.red,
.menuItem.danger{
  color:#060606!important;
}

/* Icons and highlighted inline text use one accent only */
.np-settings-card i,
.np-card-icon,
.sheetHead i,
.np-sheet-head i,
.noteTypeBadge,
.badge,
.pill,
.linkish,
.text-primary,
.text-purple{
  color:var(--np-text-accent)!important;
}

/* Keep badge backgrounds but normalize badge text */
.badge,.pill{background:#eef2ff!important;color:var(--np-text-accent)!important}

/* Backup/settings cards and rows */
.np-settings-card,
.backupTile,
.menuRow,
.attachRow,
.noteTopRow,
.sheetFootRow{
  color:var(--np-text-main)!important;
}

/* Prevent old legacy theme colors from leaking into modal text */
#backdrop,
#backdrop *:not(.btn.blue):not(.btn.red):not(.menuItem.danger):not(.badge):not(.pill):not(i){
  text-shadow:none!important;
}
/* === Brighter NotePlus purple modal title text === */
#sheetTitle,
.modal-title,
.sheetHead h1,
.sheetHead h2,
.sheetHead h3,
.sheetHead h4,
.np-sheet-head h1,
.np-sheet-head h2,
.np-sheet-head h3,
.np-sheet-head h4,
.pinTitle{
  color:#6c4fd3 !important;
}

/* Editor toolbar scroll fix */

.np-toolbar{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    white-space:nowrap;
    gap:6px;
    padding:8px;
    border:1px solid #e4e7ec;
    background:#f8f9fc;
    border-radius:18px;
}

/* hide scrollbar mobile */
.np-toolbar::-webkit-scrollbar{
    display:none;
}

.np-toolbar .np-toolbtn{
    flex:0 0 auto;
    padding:6px 10px;
    font-size:13px;
}

/* hide scrollbar mobile */
.editor-toolbar::-webkit-scrollbar {
    display: none;
}

.editor-toolbar button {
    flex: 0 0 auto;
}

.noteEditorTools,
.noteTools {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 6px;
}

.noteEditorTools button,
.noteTools button {
    flex: 0 0 auto;
}

.editor-toolbar button {
    padding:4px 8px;
    font-size:13px;
}

.np-folder-strip{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:4px 2px 10px;
  margin-bottom:16px;
  scroll-behavior:smooth;
}

.np-folder-strip::-webkit-scrollbar{
  height:8px;
}
.np-folder-strip::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.12);
  border-radius:999px;
}

.np-folder-chip{
  flex:0 0 auto;
  width:auto;
  min-width:max-content;
  height:36px;
  min-height:36px;
  max-height:36px;
  padding:0 12px;
  border-radius:12px;
  box-shadow:none;
  border:1px solid rgba(0,0,0,.06);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  white-space:nowrap;
}

.np-folder-chip .np-card-icon,
.np-folder-chip small{
  display:none !important;
}

.np-folder-chip strong{
  font-size:13px;
  font-weight:600;
  line-height:1.1;
  white-space:nowrap;
  color:#344054;
  font-family:inherit;
  letter-spacing:0;
}

.np-folder-chip:hover,
.np-folder-chip.active{
  transform:none;
  box-shadow:none;
  border-color:rgba(0,0,0,.10);
}

/* pastel colors */
.chip-all{ background:#FFF6BF; }
.chip-text{ background:#DFF7E2; }
.chip-todo{ background:#FFE2E2; }
.chip-easy{ background:#E6F0FF; }
.chip-pdf{ background:#F0E4FF; }
.chip-photo{ background:#DDF7FF; }
.chip-favorites{ background:#FFE4F1; }
.chip-recordings{ background:#E2FFF4; }
.chip-reminders{ background:#EAF1FF; }

.np-folder-chip.active{
  outline:2px solid rgba(52,64,84,.12);
}
.noteBgPickerWrap{margin-top:8px;}
.noteBgPicker{display:flex;flex-wrap:wrap;gap:10px;}
.noteBgSwatch{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;border:1px solid rgba(15,23,42,.12);background:#fff;color:#0f172a;cursor:pointer;font:inherit;}
.noteBgSwatch.active{border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,.15) inset;}
.noteBgDot{width:18px;height:18px;border-radius:999px;border:1px solid rgba(15,23,42,.14);display:inline-block;flex:0 0 18px;}
.noteBgName{font-size:13px;font-weight:600;line-height:1.1;font-family:inherit;letter-spacing:0;color:#344054;}
.np-bg-preview{padding:14px;border-radius:14px;border:1px solid rgba(15,23,42,.08);margin-top:12px;}
.np-bg-preview-title{font-weight:700;margin-bottom:6px;}
.np-bg-preview-body{opacity:.85;line-height:1.45;}
/* =========================================
   Compact Note Titles (Android)
   ========================================= */

@media (max-width: 768px) {

  .npEditorHeader h1,
  .npEditorHeader h2,
  .npEditorHeader h3 {
      font-size: 16px !important;
      margin-bottom: 6px;
  }

  .npNoteTypeTitle {
      font-size: 15px !important;
  }

}

/* Remove header only for Text Note modal */
.sheet.text-note .sheetHead{
  display:none !important;
}

.sheet.text-note .sheetBody{
  padding-top: 18px;
}

.np-note-colored{
  border-radius: 16px;
}

/* ===== Sidebar colored button look only ===== */
/* keep text/icons black */
.np-sidebar #npCreateBody .np-nav-btn,
.np-sidebar #npLibraryBody .np-nav-btn,
.np-sidebar #npMenuSettingsItem,
.np-sidebar #npSettingsSubmenu .np-nav-btn,
.np-sidebar #npFolderTrash,
.np-sidebar #npFolderCustoms,
.np-sidebar #npCustomFolderChildren .np-nav-btn{
  color:#000 !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:10px !important;
  margin:1px 0 !important;
  padding:6px 10px !important;
  min-height:32px !important;
  box-shadow:none !important;
}

/* keep icons black too */
.np-sidebar #npCreateBody .np-nav-btn i,
.np-sidebar #npLibraryBody .np-nav-btn i,
.np-sidebar #npMenuSettingsItem i,
.np-sidebar #npSettingsSubmenu .np-nav-btn i,
.np-sidebar #npFolderTrash i,
.np-sidebar #npFolderCustoms i,
.np-sidebar #npCustomFolderChildren .np-nav-btn i{
  color:#000 !important;
}

/* Create = yellow */
.np-sidebar #npCreateBody .np-nav-btn{
  background:#fcf4c1 !important;
}
.np-sidebar #npCreateBody .np-nav-btn:hover,
.np-sidebar #npCreateBody .np-nav-btn.active{
  background:#fcf4c1 !important;
}

/* Library = sky blue */
.np-sidebar #npLibraryBody .np-nav-btn{
  background:#dff2fc !important;
}
.np-sidebar #npLibraryBody .np-nav-btn:hover,
.np-sidebar #npLibraryBody .np-nav-btn.active{
  background:#dff2fc !important;
}

/* Settings = light green */
.np-sidebar #npMenuSettingsItem,
.np-sidebar #npSettingsSubmenu .np-nav-btn{
  background:#e6f9e1 !important;
}
.np-sidebar #npMenuSettingsItem:hover,
.np-sidebar #npMenuSettingsItem.active,
.np-sidebar #npSettingsSubmenu .np-nav-btn:hover,
.np-sidebar #npSettingsSubmenu .np-nav-btn.active{
  background:#e6f9e1 !important;
}

/* Trash = light rose */
.np-sidebar #npFolderTrash{
  background:#ffe0e7 !important;
}
.np-sidebar #npFolderTrash:hover,
.np-sidebar #npFolderTrash.active{
  background:#ffe0e7 !important;
}

/* Custom folders = light brown */
.np-sidebar #npFolderCustoms,
.np-sidebar #npCustomFolderChildren .np-nav-btn{
  background:#f8ebdc !important;
}
.np-sidebar #npFolderCustoms:hover,
.np-sidebar #npFolderCustoms.active,
.np-sidebar #npCustomFolderChildren .np-nav-btn:hover,
.np-sidebar #npCustomFolderChildren .np-nav-btn.active{
  background:#f8ebdc !important;
}

/* ===== Color the section header buttons too ===== */

/* Create header */
.np-sidebar #npCreateToggle,
.np-sidebar [data-section="create"] > button,
.np-sidebar .np-section.create > button{
  background:#fff3a6 !important;
  color:#000 !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:12px !important;
}
.np-sidebar #npCreateToggle:hover,
.np-sidebar #npCreateToggle.active,
.np-sidebar [data-section="create"] > button:hover,
.np-sidebar .np-section.create > button:hover{
  background:#ffe97a !important;
  color:#000 !important;
}

/* Library header */
.np-sidebar #npLibraryToggle,
.np-sidebar [data-section="library"] > button,
.np-sidebar .np-section.library > button{
  background:#bfe8ff !important;
  color:#000 !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:12px !important;
}
.np-sidebar #npLibraryToggle:hover,
.np-sidebar #npLibraryToggle.active,
.np-sidebar [data-section="library"] > button:hover,
.np-sidebar .np-section.library > button:hover{
  background:#9edcff !important;
  color:#000 !important;
}

/* keep header icons black */
.np-sidebar #npCreateToggle i,
.np-sidebar #npLibraryToggle i,
.np-sidebar [data-section="create"] > button i,
.np-sidebar [data-section="library"] > button i,
.np-sidebar .np-section.create > button i,
.np-sidebar .np-section.library > button i{
  color:#000 !important;
}

/* ===== Color only the sidebar button look ===== */

/* keep text black */
.np-nav-btn.vn-create-btn,
.np-nav-btn.vn-library-btn,
.np-nav-btn.vn-settings-btn,
.np-nav-btn.vn-trash-btn,
.np-nav-btn.vn-custom-btn{
  color:#000 !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:12px !important;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  font-family:inherit !important;
}

/* keep icons black */
.np-nav-btn.vn-create-btn i,
.np-nav-btn.vn-library-btn i,
.np-nav-btn.vn-settings-btn i,
.np-nav-btn.vn-trash-btn i,
.np-nav-btn.vn-custom-btn i,
.np-nav-btn.vn-create-btn span,
.np-nav-btn.vn-library-btn span,
.np-nav-btn.vn-settings-btn span,
.np-nav-btn.vn-trash-btn span,
.np-nav-btn.vn-custom-btn span{
  color:#000 !important;
}

/* Create */
.np-nav-btn.vn-create-btn{
  background:#fff3a6 !important;
}
.np-nav-btn.vn-create-btn:hover,
.np-nav-btn.vn-create-btn.active,
.np-nav-btn.vn-create-btn.open{
  background:#ffe97a !important;
}

/* Library */
.np-nav-btn.vn-library-btn{
  background:#bfe8ff !important;
}
.np-nav-btn.vn-library-btn:hover,
.np-nav-btn.vn-library-btn.active,
.np-nav-btn.vn-library-btn.open{
  background:#9edcff !important;
}

/* Settings */
.np-nav-btn.vn-settings-btn{
  background:#cfeec7 !important;
}
.np-nav-btn.vn-settings-btn:hover,
.np-nav-btn.vn-settings-btn.active,
.np-nav-btn.vn-settings-btn.open{
  background:#b9e8ad !important;
}

/* Trash */
.np-nav-btn.vn-trash-btn{
  background:#ffd6df !important;
}
.np-nav-btn.vn-trash-btn:hover,
.np-nav-btn.vn-trash-btn.active,
.np-nav-btn.vn-trash-btn.open{
  background:#ffc2cf !important;
}

/* Custom folders */
.np-nav-btn.vn-custom-btn{
  background:#e8d2b8 !important;
}
.np-nav-btn.vn-custom-btn:hover,
.np-nav-btn.vn-custom-btn.active,
.np-nav-btn.vn-custom-btn.open{
  background:#dcc19f !important;
}

/* Speech-to-text footer buttons: 3 per row on phone */
#backdrop .dtActionRow{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
}

#backdrop .dtActionRow .btn{
  width:auto !important;
  flex:1 1 calc(33.333% - 8px) !important;
  min-width:0 !important;
  max-width:calc(33.333% - 6px) !important;
  padding:10px 8px !important;
  min-height:42px !important;
  font-size:13px !important;
}

#backdrop .dtActionRow .btn i{
  font-size:15px !important;
}

@media (max-width:420px){
  #backdrop .tnFootRow{
    gap:6px !important;
  }

  #backdrop .tnFootRow > .btn{
    min-width:82px !important;
    min-height:30px !important;
    padding:5px 8px !important;
    font-size:10px !important;
    gap:5px !important;
  }

  #backdrop .tnFootRow > .btn i{
    font-size:12px !important;
  }
}

/* ===== Sidebar collapsible sections ===== */
.np-settings-submenu,
.np-collapsible-body {
  display: none;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 6px;
  width: 100%;
}

.np-settings-submenu.show,
.np-collapsible-body.show {
  display: grid;
}

.np-settings-submenu .np-nav-btn,
.np-collapsible-body .np-nav-btn {
  padding-left: 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  font-family: inherit;
}

.np-settings-toggle .ri-arrow-down-s-line,
.np-collapsible-title .ri-arrow-down-s-line {
  margin-left: auto;
  transition: transform 0.2s ease;
}

.np-settings-toggle.open .ri-arrow-down-s-line,
.np-collapsible-title.open .ri-arrow-down-s-line {
  transform: rotate(180deg);
}

/* ===== Other Apps button = light rose ===== */
.np-nav-btn.vn-otherapps-btn {
  background: #c5e0ae !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  font-family: inherit !important;
  padding: 8px 10px !important;
  margin: 2px 0 !important;
}

.np-nav-btn.vn-otherapps-btn:hover,
.np-nav-btn.vn-otherapps-btn.active,
.np-nav-btn.vn-otherapps-btn.open {
  background: #fbffe9 !important;
}

.np-nav-btn.vn-otherapps-btn i,
.np-nav-btn.vn-otherapps-btn span {
  color: #000 !important;
}

/* Other Apps submenu buttons */
#npOtherAppsSubmenu .np-nav-btn {
  background: #eafadc !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  padding: 8px 10px !important;
  margin: 2px 0 !important;
}

#npOtherAppsSubmenu .np-nav-btn:hover,
#npOtherAppsSubmenu .np-nav-btn.active {
  background: #eafadc !important;
}

#npOtherAppsSubmenu .np-nav-btn i,
#npOtherAppsSubmenu .np-nav-btn span {
  color: #000 !important;
}

#npFolderCustoms .cf-arrow {
  margin-left: auto;
  transition: transform 0.2s ease;
}

#npFolderCustoms.open .cf-arrow {
  transform: rotate(180deg);
}

/* ===== unify all modal footer buttons to Speech-to-Text footer style ===== */
#backdrop .sheetFootRow .btn,
#backdrop .sheetFootRow .menuBtn,
#backdrop .sheetFoot .btn,
#backdrop .sheetFoot .menuBtn,
#backdrop .attachRow .btn,
#backdrop .attachRow .menuBtn{
  min-height:32px !important;
  padding:6px 10px !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  border-radius:10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  box-shadow:none !important;
}

#backdrop .sheetFootRow .btn i,
#backdrop .sheetFootRow .menuBtn i,
#backdrop .sheetFoot .btn i,
#backdrop .sheetFoot .menuBtn i,
#backdrop .attachRow .btn i,
#backdrop .attachRow .menuBtn i{
  font-size:14px !important;
}

#backdrop .sheetFootRow .np-btn-icon,
#backdrop .sheetFoot .np-btn-icon,
#backdrop .attachRow .np-btn-icon{
  width:15px !important;
  height:15px !important;
  flex:0 0 15px !important;
}

/* keep layout as-is; style only */
@media (max-width:420px){
  #backdrop .sheetFootRow .btn,
  #backdrop .sheetFootRow .menuBtn,
  #backdrop .sheetFoot .btn,
  #backdrop .sheetFoot .menuBtn,
  #backdrop .attachRow .btn,
  #backdrop .attachRow .menuBtn{
    min-height:30px !important;
    padding:5px 8px !important;
    font-size:12px !important;
    gap:5px !important;
  }

  #backdrop .sheetFootRow .btn i,
  #backdrop .sheetFootRow .menuBtn i,
  #backdrop .sheetFoot .btn i,
  #backdrop .sheetFoot .menuBtn i,
  #backdrop .attachRow .btn i,
  #backdrop .attachRow .menuBtn i{
    font-size:13px !important;
  }

  #backdrop .sheetFootRow .np-btn-icon,
  #backdrop .sheetFoot .np-btn-icon,
  #backdrop .attachRow .np-btn-icon{
    width:13px !important;
    height:13px !important;
    flex:0 0 13px !important;
  }
}

/* ===== FINAL compact modal buttons match Create ===== */
#backdrop .sheetFootRow,
#backdrop .dtActionRow,
#backdrop .attachRow{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:100% !important;
}

#backdrop .sheetFootRow > .btn,
#backdrop .sheetFootRow > .menuBtn,
#backdrop .dtActionRow > .btn,
#backdrop .dtActionRow > .menuBtn,
#backdrop .attachRow > .btn,
#backdrop .attachRow > .menuBtn{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:88px !important;
  max-width:none !important;
  min-height:32px !important;
  padding:6px 10px !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  border-radius:10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  box-shadow:none !important;
  text-align:center !important;
  white-space:nowrap !important;
}

#backdrop .sheetFootRow > .btn i,
#backdrop .sheetFootRow > .menuBtn i,
#backdrop .dtActionRow > .btn i,
#backdrop .dtActionRow > .menuBtn i,
#backdrop .attachRow > .btn i,
#backdrop .attachRow > .menuBtn i{
  font-size:13px !important;
  line-height:1 !important;
  flex:0 0 auto !important;
}

#backdrop .sheetFootRow > .menuBtn .menuText,
#backdrop .dtActionRow > .menuBtn .menuText,
#backdrop .attachRow > .menuBtn .menuText{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  white-space:nowrap !important;
}

@media (max-width:420px){
  #backdrop .sheetFootRow,
  #backdrop .dtActionRow,
  #backdrop .attachRow{
    gap:6px !important;
  }

  #backdrop .sheetFootRow > .btn,
  #backdrop .sheetFootRow > .menuBtn,
  #backdrop .dtActionRow > .btn,
  #backdrop .dtActionRow > .menuBtn,
  #backdrop .attachRow > .btn,
  #backdrop .attachRow > .menuBtn{
    min-width:82px !important;
    min-height:30px !important;
    padding:5px 8px !important;
    font-size:12px !important;
    gap:5px !important;
  }

  #backdrop .sheetFootRow > .btn i,
  #backdrop .sheetFootRow > .menuBtn i,
  #backdrop .dtActionRow > .btn i,
  #backdrop .dtActionRow > .menuBtn i,
  #backdrop .attachRow > .btn i,
  #backdrop .attachRow > .menuBtn i{
    font-size:12px !important;
  }
}


/* ===== STEP: unify ALL modal/app action button placement ===== */
#backdrop .sheetFoot,
#backdrop .sheetFootRow,
#backdrop .dtActionRow,
#backdrop .attachRow{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
}
#backdrop .sheetFoot::-webkit-scrollbar,
#backdrop .sheetFootRow::-webkit-scrollbar,
#backdrop .dtActionRow::-webkit-scrollbar,
#backdrop .attachRow::-webkit-scrollbar{
  display:none !important;
}

#backdrop .sheetFoot > .btn,
#backdrop .sheetFoot > .menuBtn,
#backdrop .sheetFootRow > .btn,
#backdrop .sheetFootRow > .menuBtn,
#backdrop .dtActionRow > .btn,
#backdrop .dtActionRow > .menuBtn,
#backdrop .attachRow > .btn,
#backdrop .attachRow > .menuBtn{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:110px !important;
  max-width:none !important;
  min-height:38px !important;
  padding:8px 10px !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  border-radius:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  box-shadow:none !important;
  text-align:center !important;
  white-space:nowrap !important;
}

#backdrop .sheetFoot > .btn i,
#backdrop .sheetFoot > .menuBtn i,
#backdrop .sheetFootRow > .btn i,
#backdrop .sheetFootRow > .menuBtn i,
#backdrop .dtActionRow > .btn i,
#backdrop .dtActionRow > .menuBtn i,
#backdrop .attachRow > .btn i,
#backdrop .attachRow > .menuBtn i{
  font-size:14px !important;
  line-height:1 !important;
  flex:0 0 auto !important;
}

#backdrop .sheetFoot > .menuBtn .menuText,
#backdrop .sheetFootRow > .menuBtn .menuText,
#backdrop .dtActionRow > .menuBtn .menuText,
#backdrop .attachRow > .menuBtn .menuText{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  white-space:nowrap !important;
}

@media (max-width:420px){
  #backdrop .sheetFoot,
  #backdrop .sheetFootRow,
  #backdrop .dtActionRow,
  #backdrop .attachRow{
    gap:6px !important;
  }

  #backdrop .sheetFoot > .btn,
  #backdrop .sheetFoot > .menuBtn,
  #backdrop .sheetFootRow > .btn,
  #backdrop .sheetFootRow > .menuBtn,
  #backdrop .dtActionRow > .btn,
  #backdrop .dtActionRow > .menuBtn,
  #backdrop .attachRow > .btn,
  #backdrop .attachRow > .menuBtn{
    min-width:96px !important;
    min-height:36px !important;
    padding:7px 8px !important;
    font-size:11px !important;
    gap:5px !important;
  }

  #backdrop .sheetFoot > .btn i,
  #backdrop .sheetFoot > .menuBtn i,
  #backdrop .sheetFootRow > .btn i,
  #backdrop .sheetFootRow > .menuBtn i,
  #backdrop .dtActionRow > .btn i,
  #backdrop .dtActionRow > .menuBtn i,
  #backdrop .attachRow > .btn i,
  #backdrop .attachRow > .menuBtn i{
    font-size:13px !important;
  }
}


/* ===== Background dropdown color indicators ===== */
.noteBgSelectWrap{
  gap:8px !important;
}

.noteBgSelectHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:nowrap;
}

.noteBgSelectHead label{
  margin:0;
  flex:0 0 auto;
}

.noteBgLegend{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}

.noteBgLegend::-webkit-scrollbar{
  display:none;
}

.noteBgLegendSwatch{
  width:16px;
  height:16px;
  border-radius:4px;
  border:1px solid rgba(15,23,42,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  flex:0 0 16px;
}

.noteBgLegendSwatch.active{
  border-color:#4f46e5;
  box-shadow:0 0 0 2px rgba(79,70,229,.18), inset 0 0 0 1px rgba(255,255,255,.45);
}

.noteBgSelect{
  width:100%;
}


.noteBgAddonRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.noteBgLinesToggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:0;
  color:#344054;
}
.noteBgLinesToggle input{
  width:16px;
  height:16px;
  accent-color:#8b5cf6;
}
.noteZoomRow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.noteZoomBtn{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:#344054;
  border-radius:12px;
  min-height:32px;
  padding:6px 10px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:0;
}
.noteZoomBtn.is-reset{
  min-width:56px;
}
.noteZoomValue{
  min-width:52px;
  text-align:center;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:0;
  color:#475467;
}
@media (max-width:420px){
  .noteBgAddonRow{align-items:flex-start;}
  .noteZoomRow{width:100%;justify-content:flex-start;}
}

@media (max-width:420px){
  .noteBgSelectHead{
    gap:8px;
  }

  .noteBgLegend{
    gap:5px;
  }

  .noteBgLegendSwatch{
    width:14px;
    height:14px;
    flex-basis:14px;
  }
}


/* ===== v104 fix: Speech-to-Text buttons in 2 centered rows only ===== */
#backdrop .dtActionGrid{
  display:block !important;
  width:100% !important;
  overflow:visible !important;
}

#backdrop .dtActionGrid .dtRow{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:100% !important;
}

#backdrop .dtActionGrid .dtRowTop{
  margin-bottom:8px !important;
}

#backdrop .dtActionGrid .dtRowTop .btn{
  flex:1 1 0 !important;
  min-width:0 !important;
  width:0 !important;
  max-width:none !important;
}

#backdrop .dtActionGrid .dtRowBottom{
  justify-content:center !important;
}

#backdrop .dtActionGrid .dtRowBottom .btn{
  flex:0 1 180px !important;
  min-width:140px !important;
  width:auto !important;
  max-width:220px !important;
}

@media (max-width:420px){
  #backdrop .dtActionGrid .dtRow{
    gap:6px !important;
  }

  #backdrop .dtActionGrid .dtRowTop{
    margin-bottom:6px !important;
  }

  #backdrop .dtActionGrid .dtRowBottom .btn{
    flex:0 1 46% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}

/* Text Note / To Do footer: same row, same style as other modal buttons */
#backdrop .tnFootRow{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:100% !important;
  overflow:visible !important;
}

#backdrop .tnFootRow > .btn{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:88px !important;
  max-width:none !important;
  min-height:32px !important;
  padding:6px 10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  white-space:nowrap !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  border-radius:10px !important;
}

#backdrop .tnFootRow > .btn i{
  font-size:13px !important;
  line-height:1 !important;
}

@media (max-width:420px){
  #backdrop .tnFootRow{
    gap:6px !important;
  }

  #backdrop .tnFootRow > .btn{
    min-width:90px !important;
    min-height:34px !important;
    padding:6px 8px !important;
    font-size:10px !important;
    gap:5px !important;
  }

  #backdrop .tnFootRow > .btn i{
    font-size:12px !important;
  }
}


/* ===== Compact phone menu + create modal sizing ===== */
.np-nav-title{
  padding:8px 8px 4px !important;
  font-size:12px !important;
  line-height:1.15 !important;
}

.np-nav-btn{
  gap:8px !important;
  padding:8px 10px !important;
  font-size:13px !important;
  line-height:1.15 !important;
  border-radius:12px !important;
}

.np-nav-btn i{
  font-size:18px !important;
}

.np-sidebar #npCreateBody .np-nav-btn,
.np-sidebar #npLibraryBody .np-nav-btn,
.np-sidebar #npMenuSettingsItem,
.np-sidebar #npSettingsSubmenu .np-nav-btn,
.np-sidebar #npFolderTrash,
.np-sidebar #npFolderCustoms,
.np-sidebar #npCustomFolderChildren .np-nav-btn,
.np-nav-btn.vn-create-btn,
.np-nav-btn.vn-library-btn,
.np-nav-btn.vn-settings-btn,
.np-nav-btn.vn-trash-btn,
.np-nav-btn.vn-custom-btn{
  margin:1px 0 !important;
  padding:6px 10px !important;
  min-height:32px !important;
  font-size:13px !important;
  line-height:1.1 !important;
  border-radius:10px !important;
}

.np-sidebar #npCreateBody .np-nav-btn i,
.np-sidebar #npLibraryBody .np-nav-btn i,
.np-sidebar #npMenuSettingsItem i,
.np-sidebar #npSettingsSubmenu .np-nav-btn i,
.np-sidebar #npFolderTrash i,
.np-sidebar #npFolderCustoms i,
.np-sidebar #npCustomFolderChildren .np-nav-btn i,
.np-nav-btn.vn-create-btn i,
.np-nav-btn.vn-library-btn i,
.np-nav-btn.vn-settings-btn i,
.np-nav-btn.vn-trash-btn i,
.np-nav-btn.vn-custom-btn i{
  font-size:14px !important;
}

.np-settings-grid{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  gap:8px !important;
}

.np-settings-card{
  padding:10px !important;
  gap:4px !important;
  border-radius:14px !important;
}

.np-settings-card i{
  font-size:1rem !important;
}

.np-settings-card strong{
  font-size:.88rem !important;
  line-height:1.15 !important;
}

.np-settings-card span{
  font-size:.75rem !important;
  line-height:1.2 !important;
}

@media (max-width: 640px){
  .np-sheet .sheetBody,
  #sheetBody{
    padding:12px !important;
  }

  .np-settings-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  .np-settings-card{
    padding:9px !important;
    gap:3px !important;
  }
}

/* ===== sidebar button size match fix ===== */
/* ===== sidebar button size match fix ===== */
.np-sidebar #npCreateToggle,
.np-sidebar #npLibraryToggle,
.np-sidebar #npMenuSettingsItem,
.np-sidebar #npFolderTrash,
.np-sidebar #npFolderCustoms,
.np-sidebar #npOtherAppsItem,
.np-sidebar #npCreateBody .np-nav-btn,
.np-sidebar #npLibraryBody .np-nav-btn,
.np-sidebar #npSettingsSubmenu .np-nav-btn,
.np-sidebar #npCustomFolderChildren .np-nav-btn,
.np-sidebar #npOtherAppsSubmenu .np-nav-btn,
.np-nav-btn.vn-create-btn,
.np-nav-btn.vn-library-btn,
.np-nav-btn.vn-settings-btn,
.np-nav-btn.vn-trash-btn,
.np-nav-btn.vn-custom-btn,
.np-nav-btn.vn-otherapps-btn{
  min-height:32px !important;
  padding:6px 10px !important;
  margin:1px 0 !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.1 !important;
  border-radius:10px !important;
  box-sizing:border-box !important;
}


/* ===== Edit Note footer only: compact release sizing ===== */
#backdrop .sheet.noteSheet .sheetFoot{
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  overflow: visible !important;
}

#backdrop .sheet.noteSheet .sheetFootRow{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  overflow: visible !important;
}

#backdrop .sheet.noteSheet .sheetFootRow > .btn,
#backdrop .sheet.noteSheet .sheetFootRow > .menuBtn{
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  width: 0 !important;
  min-height: 30px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  border-radius: 10px !important;
  gap: 5px !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

#backdrop .sheet.noteSheet .sheetFootRow > .btn i,
#backdrop .sheet.noteSheet .sheetFootRow > .menuBtn i{
  font-size: 12px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

#backdrop .sheet.noteSheet .sheetFootRow > .menuBtn .menuText{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

@media (max-width: 420px){
  #backdrop .sheet.noteSheet .sheetFoot{
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #backdrop .sheet.noteSheet .sheetFootRow{
    gap: 5px !important;
  }

  #backdrop .sheet.noteSheet .sheetFootRow > .btn,
  #backdrop .sheet.noteSheet .sheetFootRow > .menuBtn{
    min-height: 28px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    border-radius: 9px !important;
    gap: 4px !important;
  }

  #backdrop .sheet.noteSheet .sheetFootRow > .btn i,
  #backdrop .sheet.noteSheet .sheetFootRow > .menuBtn i{
    font-size: 11px !important;
  }
}

/* ===== Put top X on right for all shared modals, except Backup & Restore ===== */
#backdrop .sheet:not(:has(#menuExportBtn)):not(:has(#menuImportBtn)) .sheetHead{
  display:flex !important;
  align-items:center !important;
}

#backdrop .sheet:not(:has(#menuExportBtn)):not(:has(#menuImportBtn)) #sheetTitle{
  order:1 !important;
  margin-right:auto !important;
}

#backdrop .sheet:not(:has(#menuExportBtn)):not(:has(#menuImportBtn)) #sheetClose,
#backdrop .sheet:not(:has(#menuExportBtn)):not(:has(#menuImportBtn)) .sheetHead .btn.neutral{
  order:2 !important;
  margin-left:auto !important;
  margin-right:0 !important;
}