/* NoteMind look (design-system/). Re-skins the existing screens only — same DOM, same behaviour.
   Everything is scoped to html[data-ui="nm"]; with the toggle off, styles.css renders the Android look.
   Rules followed (design-system/README.md): grey ground, white cards with shadow (no borders),
   everything pressable is a pill, one solid-black element per view, ink / ink-muted text only. */

[data-ui="nm"] {
  --nm-pitch: round(calc((var(--note-size) + 3px) * 1.6), 1px); /* body-lg 20/32 at the default size */
  color-scheme: light;
}
[data-ui="nm"] body { font-family: var(--font-sans); color: var(--ink); background: var(--surface-000); font-size: 16px; line-height: 24px; }
[data-ui="nm"] #app { background: var(--surface-000); }
[data-ui="nm"] .screen { background: var(--surface-000); }
[data-ui="nm"] button:focus-visible, [data-ui="nm"] [role=button]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- toolbar: plain row on the ground, raised round keys ---------- */
[data-ui="nm"] .toolbar {
  height: auto; min-height: 88px; padding: var(--space-3) var(--space-6) var(--space-3); gap: var(--space-2);
  background: transparent; color: var(--ink);
}
[data-ui="nm"] .toolbar .title {
  margin-left: var(--space-3); font: 600 26px/32px var(--font-sans); letter-spacing: -0.01em; color: var(--ink);
}
[data-ui="nm"] .icon-btn {
  width: 56px; height: 56px; padding: 16px; color: var(--ink);
  background: var(--surface-100); border-radius: var(--radius-pill); box-shadow: var(--shadow-key);
}
[data-ui="nm"] .icon-btn:active { background: var(--surface-300); transform: scale(.97); }
[data-ui="nm"] .icon-btn .nm-icon { width: 24px; height: 24px; }
/* the single solid element on editor / reminder: the check (confirm) key */
[data-ui="nm"] .toolbar .icon-btn[aria-label="Save"] { background: var(--solid); color: var(--on-solid); box-shadow: var(--shadow-float); }

/* ---------- note list ---------- */
[data-ui="nm"] .list-body .decor { display: none; }
[data-ui="nm"] .list-scroll { padding: var(--space-2) var(--space-6) 120px; }
[data-ui="nm"] .note-list { display: flex; flex-direction: column; gap: var(--space-3); }
[data-ui="nm"] .note-row {
  background: var(--surface-100); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--space-4); transition: transform .12s ease;
}
[data-ui="nm"] .note-row:active { background: var(--surface-100); transform: scale(.985); }
[data-ui="nm"] .note-row .indicator { display: none; }
[data-ui="nm"] .note-row .content { padding: 0; align-items: center; }
[data-ui="nm"] .note-row .texts { margin: 0 0 0 var(--space-4); }
[data-ui="nm"] .note-row .title { font: 600 20px/24px var(--font-sans); color: var(--ink); }
[data-ui="nm"] .note-row .body { font: 400 16px/24px var(--font-sans); color: var(--ink-muted); margin-top: var(--space-1); }

/* date badge → quiet tile: overline / big number / caption */
[data-ui="nm"] .badge {
  min-width: 64px; padding: var(--space-2) var(--space-1); background: var(--surface-200); border-radius: var(--radius-md);
}
[data-ui="nm"] .badge .b1 {
  background: transparent !important; /* month colours are part of the classic look */
  color: var(--ink-muted); font: 500 11px/14px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; padding: 0;
}
[data-ui="nm"] .badge .b2 { font: 600 26px/32px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
[data-ui="nm"] .badge .b3 { font: 400 11px/14px var(--font-sans); color: var(--ink-muted); padding: 0; letter-spacing: .02em; }

[data-ui="nm"] .search-result {
  margin: 0 0 var(--space-3); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  background: var(--surface-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); color: var(--ink);
}
[data-ui="nm"] .search-result .lbl { font: 500 11px/14px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
[data-ui="nm"] .search-result .q { font: 600 20px/24px var(--font-sans); }
[data-ui="nm"] .search-result .icon-btn { background: var(--surface-200); box-shadow: none; }

/* FAB → solid key (the one black element on the list) */
[data-ui="nm"] .fab {
  right: var(--space-6); bottom: calc(var(--space-6) + var(--safe-bottom)); width: 64px; height: 64px; padding: 20px;
  background: var(--solid); color: var(--on-solid); box-shadow: var(--shadow-float);
}
[data-ui="nm"] .fab:active { filter: none; transform: scale(.97); }

/* ---------- drawer ---------- */
[data-ui="nm"] .scrim { background: var(--scrim); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
[data-ui="nm"] .drawer {
  top: var(--space-3); bottom: var(--space-3); left: var(--space-3); width: min(300px, calc(100vw - 72px));
  background: var(--surface-100); border-radius: var(--radius-xl); box-shadow: var(--shadow-float);
  transform: translateX(calc(-100% - 24px)); padding: var(--space-2) 0 var(--space-4);
}
[data-ui="nm"] .drawer-open .drawer { transform: none; }
[data-ui="nm"] .nav-header { min-height: 0; background: transparent; }
[data-ui="nm"] .nav-header .grad { display: none; }
[data-ui="nm"] .nav-header .inner { padding: var(--space-6) var(--space-6) var(--space-4); }
[data-ui="nm"] .nav-header .avatar {
  width: 64px; height: 64px; margin: 0; padding: 20px; color: var(--ink);
  background: var(--surface-200); border-radius: var(--radius-pill); box-shadow: var(--shadow-key);
}
[data-ui="nm"] .nav-header .sp1 { flex: 0 0 var(--space-4); }
[data-ui="nm"] .nav-header .sp3 { flex: 1; }
/* Sign in is the drawer's one solid element */
[data-ui="nm"] .btn-rounded {
  height: 44px; min-height: 0; padding: 0 var(--space-4); margin: 0; border-radius: var(--radius-pill);
  background: var(--solid); color: var(--on-solid); font: 500 16px/24px var(--font-sans);
}
[data-ui="nm"] .btn-rounded:active { background: var(--solid); transform: scale(.97); }
[data-ui="nm"] .nav-header .email { display: none; }
[data-ui="nm"] .nav-menu { padding: 0 var(--space-3); }
[data-ui="nm"] .nav-item {
  height: 52px; padding: 0 var(--space-4); border-radius: var(--radius-pill);
  font: 500 16px/24px var(--font-sans); color: var(--ink);
}
[data-ui="nm"] .nav-item:active { background: var(--surface-200); }
[data-ui="nm"] .nav-item .ic { color: var(--ink); margin-right: var(--space-4); }
[data-ui="nm"] .nav-item .ic path:not([fill="none"]) { fill: none; }           /* undo the classic tint fill */
[data-ui="nm"] .nav-item .ic circle[fill="currentColor"] { fill: currentColor; }
[data-ui="nm"] .nav-sep { height: 0; background: none; margin: var(--space-2) 0; }

/* ---------- form fields (date / title / codelock) → white pill-cards ---------- */
[data-ui="nm"] .field {
  min-height: 64px; padding: 0 var(--space-4) 0 var(--space-2);
  background: var(--surface-100); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
[data-ui="nm"] .field.date:active { background: var(--surface-100); transform: scale(.99); }
[data-ui="nm"] .field .ic { margin-left: 0; padding: 12px; color: var(--ink-muted); }
[data-ui="nm"] .field input { font: 500 20px/24px var(--font-sans); color: var(--ink); background: transparent; margin-left: var(--space-2); min-height: 64px; }
[data-ui="nm"] .field input::placeholder { color: var(--ink-muted); }

/* ---------- note editor: the focused note sits on a stack of sheets ---------- */
[data-ui="nm"] .note-scroll { padding: var(--space-2) var(--space-6) var(--space-6); gap: var(--space-3); }
[data-ui="nm"] .editor-box {
  position: relative; margin-top: var(--space-3); padding: var(--space-6);
  background: var(--surface-100); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
[data-ui="nm"] .editor-box::before, [data-ui="nm"] .editor-box::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
[data-ui="nm"] .editor-box::before { background: var(--surface-300); transform: rotate(-2.5deg) translate(-6px, -10px); }
[data-ui="nm"] .editor-box::after { background: var(--surface-100); transform: rotate(1.5deg) translate(8px, -4px); }
[data-ui="nm"] .note-scroll { isolation: isolate; }
[data-ui="nm"] .lined {
  background-color: transparent; color: var(--ink);
  font-size: calc(var(--note-size) + 3px); line-height: var(--nm-pitch);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--nm-pitch) - 1px), var(--hairline) calc(var(--nm-pitch) - 1px), var(--hairline) var(--nm-pitch));
}
[data-ui="nm"].no-lines .lined { background-image: none; }
[data-ui="nm"] .lined::placeholder { color: var(--ink-muted); }
[data-ui="nm"] .field input.note-title { font: 600 20px/24px var(--font-sans); }

/* emoji helper → grouped key toolbar floating above the bottom edge */
[data-ui="nm"] .emoji-bar {
  margin: 0 var(--space-6) calc(var(--space-4) + var(--safe-bottom)); padding: var(--space-1);
  background: var(--surface-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-float);
}
[data-ui="nm"] .emoji-sheet { grid-template-columns: repeat(7, 48px); grid-auto-rows: 48px; }
[data-ui="nm"] .emoji-sheet button { line-height: 48px; font-size: 22px; border-radius: var(--radius-pill); color: var(--ink); }
[data-ui="nm"] .emoji-sheet button:active { background: var(--surface-300); }

/* ---------- centred pages (export / reminder / codelock / account / about / lock) ---------- */
[data-ui="nm"] .page { color: var(--ink); padding: 0 var(--space-6); }
[data-ui="nm"] .page .big-icon, [data-ui="nm"] .page .cloud-icon {
  width: 112px; height: 112px; padding: 36px; align-self: center; color: var(--ink);
  background: var(--surface-100); border-radius: var(--radius-pill); box-shadow: var(--shadow-card);
}
[data-ui="nm"] .page .cloud-icon svg { width: 100%; height: 100%; }
[data-ui="nm"] .page .h1, [data-ui="nm"] .page .h2, [data-ui="nm"] .page .h3 {
  font: 600 34px/40px var(--font-sans); letter-spacing: -0.02em; color: var(--ink); margin-left: 0; margin-right: 0;
}
[data-ui="nm"] .page .h2, [data-ui="nm"] .page .h3 { font-size: 26px; line-height: 32px; letter-spacing: -0.01em; }
[data-ui="nm"] .page .p { font: 400 16px/24px var(--font-sans); color: var(--ink-muted); margin-left: 0; margin-right: 0; }
[data-ui="nm"] .page .p.bold, [data-ui="nm"] .page .bold { font: 600 20px/24px var(--font-sans); color: var(--ink); }
[data-ui="nm"] .benefits { margin: 0; }
[data-ui="nm"] .benefit { font: 400 16px/24px var(--font-sans); color: var(--ink); align-items: center; gap: 0; }
[data-ui="nm"] .benefit .tick { width: 20px; height: 20px; margin: 0 var(--space-3) 0 0; color: var(--ink); }

/* bottom buttons → pills: the tall one is the primary (solid), the rest soft */
[data-ui="nm"] .page .bottom { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 0 calc(var(--space-6) + var(--safe-bottom)); }
[data-ui="nm"] .btn-semi {
  height: 56px; min-height: 0; padding: 0 var(--space-6); margin: 0 !important; border-radius: var(--radius-pill);
  background: var(--surface-100); color: var(--ink); box-shadow: var(--shadow-card);
  font: 500 20px/24px var(--font-sans) !important; text-transform: none; transition: transform .12s ease;
}
[data-ui="nm"] .btn-semi:active { background: var(--surface-100); transform: scale(.97); }
[data-ui="nm"] .btn-semi.tall { background: var(--solid); color: var(--on-solid); box-shadow: none; }
[data-ui="nm"] .btn-semi.small { height: 44px; font-size: 16px !important; }

/* diary heading (splash / about / lock): plain type, no script face */
[data-ui="nm"] .heading { color: var(--ink); }
[data-ui="nm"] .heading .brand { font: 600 40px/46px var(--font-sans); letter-spacing: -0.02em; text-shadow: none; }
[data-ui="nm"] .heading .slogan { font: 400 16px/24px var(--font-sans); font-style: normal; color: var(--ink-muted); text-shadow: none; margin-top: var(--space-2); }
[data-ui="nm"] .splash .version { font: 500 11px/14px var(--font-sans); letter-spacing: .04em; color: var(--ink-muted); }
[data-ui="nm"] .spinner { border-top-color: var(--ink); border-right-color: var(--surface-300); border-bottom-color: var(--surface-300); border-left-color: var(--surface-300); }

/* codelock form → card with rows separated by space, not lines */
[data-ui="nm"] .lock-form, [data-ui="nm"] .lock-screen .lock-form {
  margin: 0; padding: var(--space-2) var(--space-4); background: var(--surface-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
[data-ui="nm"] .lock-form .ic { color: var(--ink-muted); }
[data-ui="nm"] .lock-form input, [data-ui="nm"] .lock-form .q { font: 400 16px/24px var(--font-sans); color: var(--ink); background: transparent; border: 0; min-height: 56px; }
[data-ui="nm"] .lock-form .q.empty, [data-ui="nm"] .lock-form input::placeholder { color: var(--ink-muted); }
[data-ui="nm"] .lock-form .sep { background: var(--surface-200); margin: 0 0 0 48px; }

/* ---------- Colors and style (settings) ---------- */
[data-ui="nm"] .style-page { padding: var(--space-2) var(--space-6) var(--space-8); color: var(--ink); }
[data-ui="nm"] .style-page h3 {
  font: 500 11px/14px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted);
  margin: var(--space-8) 0 var(--space-3);
}
[data-ui="nm"] .style-page h3.first { margin-top: var(--space-2); }
[data-ui="nm"] .swatch-scroll { margin-right: var(--space-3); padding: var(--space-1) 0; }
[data-ui="nm"] .swatches { background: transparent; padding: var(--space-1); gap: var(--space-2); }
[data-ui="nm"] .swatches button { width: 40px; height: 40px; border-radius: var(--radius-pill); box-shadow: var(--shadow-key); }
[data-ui="nm"] .circle-btn { width: 56px; height: 56px; padding: 8px; background: var(--surface-100); box-shadow: var(--shadow-card); }
[data-ui="nm"] .preview {
  color: var(--ink); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-6);
  font-size: calc(var(--note-size) + 3px); line-height: var(--nm-pitch); max-height: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--nm-pitch) - 1px), var(--hairline) calc(var(--nm-pitch) - 1px), var(--hairline) var(--nm-pitch)), linear-gradient(var(--surface-100), var(--surface-100));
}
[data-ui="nm"].no-lines .preview { background-image: linear-gradient(var(--surface-100), var(--surface-100)); }
[data-ui="nm"] .text-tools { gap: var(--space-3); }
[data-ui="nm"] .font-btn { width: 56px; height: 56px; padding: 16px; color: var(--ink); background: var(--surface-100); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); }
[data-ui="nm"] .size-row { margin-top: var(--space-4); gap: var(--space-4); }

/* range → pill track with a solid knob */
[data-ui="nm"] .seek { margin: 0; height: 44px; }
[data-ui="nm"] .seek::-webkit-slider-runnable-track { height: 8px; border: 0; border-radius: var(--radius-pill); background: var(--surface-300); }
[data-ui="nm"] .seek::-moz-range-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-300); }
[data-ui="nm"] .seek::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -10px; background: var(--surface-100); box-shadow: var(--shadow-float); }
[data-ui="nm"] .seek::-moz-range-thumb { width: 28px; height: 28px; background: var(--surface-100); box-shadow: var(--shadow-float); }
[data-ui="nm"] .reminder-seek { margin: var(--space-4) 0 0; }

/* checkbox → pill switch (Lines, New UI) */
[data-ui="nm"] .check { font: 500 16px/24px var(--font-sans); color: var(--ink); gap: var(--space-3); }
[data-ui="nm"] .check input {
  position: relative; width: 52px; height: 32px; margin: 0; border: 0; border-radius: var(--radius-pill);
  background: var(--surface-300); display: block; transition: background .15s ease; flex: none;
}
[data-ui="nm"] .check input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border: 0; border-radius: var(--radius-pill);
  background: var(--surface-100); box-shadow: var(--shadow-card); transform: none; transition: left .15s ease;
}
[data-ui="nm"] .check input:checked { background: var(--solid); }
[data-ui="nm"] .check input:checked::after { left: 23px; border: 0; transform: none; }

[data-ui="nm"] .date-styles { gap: var(--space-2); }
[data-ui="nm"] .date-styles button { padding: var(--space-2); border-radius: var(--radius-md); background: var(--surface-100); box-shadow: var(--shadow-card); }
[data-ui="nm"] .date-styles button.sel { background: var(--surface-100); outline: 2px solid var(--ink); outline-offset: 0; }
[data-ui="nm"] .date-styles .badge { min-width: 56px; }
[data-ui="nm"] .icon-row button { width: 56px; height: 56px; background: var(--surface-100); box-shadow: var(--shadow-card); }
[data-ui="nm"] .icon-row button.sel { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- dialogs, popups, toasts ---------- */
[data-ui="nm"] .dialog-wrap { background: var(--scrim); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
[data-ui="nm"] .dialog, [data-ui="nm"] .dialog.light {
  max-width: 360px; background: var(--surface-100); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); overflow: hidden;
}
[data-ui="nm"] .dialog .d-title { font: 600 26px/32px var(--font-sans); letter-spacing: -0.01em; padding: var(--space-6) var(--space-6) 0; }
[data-ui="nm"] .dialog .d-msg { font: 400 16px/24px var(--font-sans); color: var(--ink-muted); padding: var(--space-3) var(--space-6) 0; }
[data-ui="nm"] .dialog .d-body { padding: var(--space-4) var(--space-6) 0; }
[data-ui="nm"] .dialog .d-label { font: 500 11px/14px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-1); }
[data-ui="nm"] .dialog input[type=text], [data-ui="nm"] .dialog input[type=search], [data-ui="nm"] .dialog input[type=password], [data-ui="nm"] .dialog select {
  height: 52px; min-height: 0; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill);
  background: var(--surface-200); color: var(--ink); font: 400 16px/24px var(--font-sans);
}
[data-ui="nm"] .dialog input[type=password] + input[type=password] { margin-top: var(--space-2) !important; }
[data-ui="nm"] .dialog input:focus, [data-ui="nm"] .dialog select:focus { outline: 2px solid var(--ink); outline-offset: 0; }
[data-ui="nm"] .dialog .d-error { color: var(--ink); font-weight: 500; }
[data-ui="nm"] .dialog .d-actions { padding: var(--space-4) var(--space-6) var(--space-6); margin-top: var(--space-2); gap: var(--space-2); }
[data-ui="nm"] .dialog .d-actions button {
  height: 44px; min-height: 0; padding: 0 var(--space-4); border-radius: var(--radius-pill); text-transform: none;
  font: 500 16px/24px var(--font-sans); background: var(--surface-200); color: var(--ink);
}
[data-ui="nm"] .dialog .d-actions button:last-child { background: var(--solid); color: var(--on-solid); }
[data-ui="nm"] .dialog .d-actions button:active { transform: scale(.97); }
[data-ui="nm"] .dialog .list-choice button { color: var(--ink); border: 0; border-radius: var(--radius-md); padding: var(--space-3); font: 400 16px/24px var(--font-sans); }
[data-ui="nm"] .dialog .list-choice button:active { background: var(--surface-200); }
[data-ui="nm"] .font-list button { color: var(--ink); background: var(--surface-100); border: 0; border-radius: var(--radius-pill); margin: var(--space-1) 0; height: 52px; line-height: 52px; font-size: 22px; }
[data-ui="nm"] .font-list button.sel { background: var(--surface-200); }
[data-ui="nm"] .dialog.light .d-body { padding: var(--space-3); }
[data-ui="nm"] .progress-bar { height: 8px; border-radius: var(--radius-pill); background: var(--surface-200); margin-top: var(--space-4); }
[data-ui="nm"] .progress-bar::after { background: var(--solid); border-radius: var(--radius-pill); }

/* date picker */
[data-ui="nm"] .dialog.light .d-actions button { color: var(--ink); }
[data-ui="nm"] .dialog.light .d-actions button:last-child { color: var(--on-solid); }
[data-ui="nm"] .dp { color: var(--ink); }
[data-ui="nm"] .dp-head { background: var(--surface-200); color: var(--ink); border-radius: var(--radius-md); text-align: left; padding: var(--space-4); }
[data-ui="nm"] .dp-wd { background: transparent; padding: 0; font: 500 11px/14px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
[data-ui="nm"] .dp-sel { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-1) 0 0; }
[data-ui="nm"] .dp-m, [data-ui="nm"] .dp-y { font: 400 20px/24px var(--font-sans); opacity: 1; color: var(--ink-muted); text-transform: none; }
[data-ui="nm"] .dp-d { font: 600 40px/46px var(--font-sans); letter-spacing: -0.02em; order: -1; }
[data-ui="nm"] .dp-month { font: 600 16px/24px var(--font-sans); }
[data-ui="nm"] .dp-arrow { color: var(--ink); background: var(--surface-200); width: 44px; height: 44px; }
[data-ui="nm"] .dp-dow { color: var(--ink-muted); font: 500 11px/32px var(--font-sans); }
[data-ui="nm"] .dp-day { color: var(--ink); border-radius: var(--radius-pill); }
[data-ui="nm"] .dp-day.today { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
[data-ui="nm"] .dp-day.sel { background: var(--solid); color: var(--on-solid); text-decoration: none; }

[data-ui="nm"] .popup { background: var(--surface-100); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-float); padding: var(--space-2); }
[data-ui="nm"] .popup button { height: 48px; border-radius: var(--radius-pill); font: 400 16px/24px var(--font-sans); }
[data-ui="nm"] .popup button:active { background: var(--surface-200); }
[data-ui="nm"] .status-msg { background: var(--surface-100); color: var(--ink); border-radius: var(--radius-pill); padding: var(--space-3) var(--space-6); box-shadow: var(--shadow-float); text-shadow: none; font: 500 16px/24px var(--font-sans); }
[data-ui="nm"] .toast { background: var(--solid); color: var(--on-solid); border-radius: var(--radius-pill); padding: var(--space-3) var(--space-6); font: 400 14px/18px var(--font-sans); box-shadow: var(--shadow-float); }

/* ---------- refinements ---------- */
[data-ui="nm"] .page .big-icon, [data-ui="nm"] .page .cloud-icon { display: grid; place-items: center; padding: 0; }
[data-ui="nm"] .page .big-icon .nm-icon, [data-ui="nm"] .page .cloud-icon .nm-icon { width: 40px; height: 40px; }
/* tracks read on the grey ground: white pill track */
[data-ui="nm"] .seek::-webkit-slider-runnable-track { background: var(--surface-100); box-shadow: var(--shadow-key), 0 0 0 1px var(--surface-300); }
[data-ui="nm"] .seek::-moz-range-track { background: var(--surface-100); }
[data-ui="nm"] .seek::-webkit-slider-thumb { background: var(--ink); box-shadow: var(--shadow-float); }
[data-ui="nm"] .seek::-moz-range-thumb { background: var(--ink); }
/* switches: "on" is ink-muted so they never compete with the one solid element per view */
[data-ui="nm"] .check input:checked { background: var(--ink-muted); }
/* editor bar holds four keys: keep the title readable */
[data-ui="nm"] .note-screen .toolbar { gap: var(--space-1); padding-left: var(--space-4); padding-right: var(--space-4); }
[data-ui="nm"] .note-screen .toolbar .icon-btn { width: 48px; height: 48px; padding: 12px; }
[data-ui="nm"] .note-screen .toolbar .title { font-size: 20px; line-height: 24px; margin-left: var(--space-2); }
[data-ui="nm"] .preview { background-repeat: no-repeat; background-origin: content-box, border-box; background-clip: content-box, border-box; }
[data-ui="nm"] .dialog select { -webkit-appearance: none; appearance: none; padding-right: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }

/* ---------- cloud account ---------- */
[data-ui="nm"] .note-row .sync-error { left: auto; right: var(--space-4); bottom: var(--space-4); width: 24px; height: 24px; padding: 3px; background: var(--surface-200); color: var(--ink); border-radius: var(--radius-pill); }
[data-ui="nm"] .nav-header .email { display: block; text-align: left; margin: var(--space-3) 0 0; font: 400 14px/18px var(--font-sans); color: var(--ink-muted); }
[data-ui="nm"] .status-icon { width: 40px; height: 40px; padding: 8px; color: var(--ink); background: var(--surface-100); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); }
[data-ui="nm"] .status-icon .nm-icon { width: 24px; height: 24px; }
[data-ui="nm"] .auth-head { margin: 0 0 var(--space-4); color: var(--ink); font: 600 26px/32px var(--font-sans); letter-spacing: -0.01em; }
[data-ui="nm"] .auth-head .auth-cloud { width: 64px; height: 64px; display: grid; place-items: center; color: var(--ink); background: var(--surface-100); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); }
[data-ui="nm"] .page .bottom.row2 { flex-direction: row; gap: var(--space-3); }
[data-ui="nm"] .page .bottom.row2 .btn-semi { min-height: 0; }