/* ============================================================
   VAULT NOTES — design tokens
   Palette: deep graphite + warm brass accent (a vault, not a chat app)
   Type: system sans for UI chrome, monospace for note content
         (most notes are credentials/codes — alignment matters)
   ============================================================ */

:root {
  /* EriKidan palette — navy / gold / black / white. Three distinct elevation
     levels so body ≠ bars ≠ cards. Dark theme is the default. */
  --bg: #090d16;            /* body background — near-black navy (deepest) */
  --bar: #16253f;           /* top / bottom bars — EriKidan navy */
  --bg-elevated: #131b2c;   /* inputs & minor surfaces */
  --bg-card: #1f2d4c;       /* note cards — lifted, stand out from the body */
  --bg-card-hover: #27375c;
  --border: #2a3a5c;
  --border-soft: #1d2941;

  --text: #eceef4;
  --text-dim: #9aa6c0;
  --text-faint: #616f8d;

  /* text sitting directly on the navy bars (light in both themes) */
  --bar-text: #eaeef6;
  --bar-text-dim: #a6b1c9;
  --bar-input: rgba(255,255,255,0.09);

  --brass: #cba64f;         /* gold — reserved for MAIN actions only */
  --brass-bright: #e3c672;
  --brass-dim: #7d6a34;

  --danger: #d97066;
  --success: #6fae7f;

  --radius: 10px;
  --radius-sm: 6px;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --shadow-lift: 0 8px 24px rgba(0,0,0,0.45);
}

/* ---- Light theme — soft warm cream, easy on the eyes (not harsh white) ---- */
[data-theme="light"] {
  --bg: #e7e3d8;            /* cream body */
  --bar: #16253f;           /* navy bars kept for brand identity */
  --bg-elevated: #f2efe7;
  --bg-card: #fcfaf4;       /* near-white cards, lift off the cream body */
  --bg-card-hover: #f2efe4;
  --border: #d9d3c5;
  --border-soft: #e5e0d3;

  --text: #1b2540;
  --text-dim: #566079;
  --text-faint: #8b93a6;

  --bar-text: #eaeef6;
  --bar-text-dim: #a6b1c9;
  --bar-input: rgba(255,255,255,0.10);

  --brass: #b0872b;         /* slightly deeper gold for contrast on cream */
  --brass-bright: #ca9a34;
  --brass-dim: #cbb892;

  --shadow-lift: 0 8px 24px rgba(60,50,20,0.14);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 2px;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea {
  font-family: inherit;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.hidden { display: none !important; }

/* ---------------- screens ---------------- */
.screen {
  position: fixed;
  inset: 0;
}

/* ---------------- auth (setup / unlock) ---------------- */
#screen-setup, #screen-unlock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 20% -10%, rgba(201,151,63,0.08), transparent 40%),
    var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  margin: auto 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.brand-mark {
  color: var(--brass);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
}
.brand-mark svg { display: block; }
.brand-mark.small { font-size: 16px; }

.brand h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.01em;
}

.auth-sub {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 24px;
}

.auth-heading {
  margin: 0 0 8px;
  font-size: 22px;
  text-align: center;
}

.auth-intro {
  margin-bottom: 20px;
  text-align: center;
}

.auth-choice h2 {
  margin: 0 0 6px;
  font-size: 16px;
}

.auth-choice .auth-sub {
  margin-bottom: 12px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--text-faint);
  font-size: 12px;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border-soft);
}

.btn-google {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  font-size: 14.5px;
  font-weight: 600;
}

.btn-google:hover {
  background: #f8faff;
  border-color: #c5c9ce;
}

.btn-google img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.btn-google-secondary {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border);
}

.btn-google-secondary:hover {
  background: var(--border-soft);
}

.auth-offline {
  display: block;
  margin: 8px auto 0;
}

.auth-create-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}

.auth-create-panel .auth-sub {
  margin-bottom: 16px;
}

.account-context {
  margin: -8px 0 18px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.45;
}

.unlock-account-actions {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  text-align: center;
}

.unlock-account-actions .btn-text {
  margin-top: 5px;
}

.field {
  display: block;
  margin-bottom: 16px;
}

.field span {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.field input {
  width: 100%;
  padding: 11px 12px;
  font-size: 15px;
}

.field-error {
  color: var(--danger);
  font-size: 13px;
  margin: -8px 0 16px;
}
.field-ok {
  color: var(--success);
  font-size: 13px;
  margin: -8px 0 16px;
}

/* ---------------- password show/hide (eye) ---------------- */
.pw-wrap {
  position: relative;
  display: block;
}
.pw-wrap input {
  width: 100%;
  padding-right: 42px; /* room for the eye button so text doesn't run under it */
}
.pw-eye {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  border-radius: 6px;
}
.pw-eye:hover { color: var(--text); background: var(--border); }
.pw-eye svg { width: 20px; height: 20px; display: block; }
.pw-eye .eye-off { display: none; }
.pw-eye.revealed .eye-on { display: none; }
.pw-eye.revealed .eye-off { display: block; }

.btn-primary {
  width: 100%;
  padding: 12px 16px;
  background: var(--brass);
  color: #171208;
  font-weight: 600;
  font-size: 14.5px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.btn-primary:hover { background: var(--brass-bright); }
.btn-primary.small { width: auto; padding: 8px 16px; font-size: 13.5px; }

.btn-text {
  color: var(--text-dim);
  font-size: 13.5px;
  padding: 8px 10px;
}
.btn-text:hover { color: var(--text); }

/* ---------------- top bar ---------------- */
#screen-main {
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--bar);
  color: var(--bar-text);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  flex-shrink: 0;
}
/* icons/text sitting on the navy bars */
.topbar .btn-icon, .editor-topbar .btn-icon, .find-bar .btn-icon { color: var(--bar-text-dim); }
.topbar .btn-icon:hover, .editor-topbar .btn-icon:hover, .find-bar .btn-icon:hover { background: rgba(255,255,255,0.10); color: var(--bar-text); }
#btn-new-note { color: var(--brass); } /* highlight the main "add note" action in gold */
.editor-title-input, #editor-meta { color: var(--bar-text); }
.editor-footer .btn-text, .due-control { color: var(--bar-text-dim); }
.editor-footer .btn-text:hover { color: var(--bar-text); }

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.brand-name {
  font-weight: 600;
  font-size: 14.5px;
  display: none;
}
@media (min-width: 640px) {
  .brand-name { display: inline; }
}

.search-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  max-width: 560px;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: var(--bar-text-dim);
  pointer-events: none;
}

#search-input {
  width: 100%;
  padding: 9px 36px 9px 38px;
  font-size: 14px;
  border-radius: 20px;
  background: var(--bar-input);
  color: var(--bar-text);
  border-color: transparent;
}
#search-input::placeholder { color: var(--bar-text-dim); }
#search-input:focus { border-color: var(--brass); }

.btn-clear {
  position: absolute;
  right: 8px;
  color: var(--bar-text-dim);
  font-size: 20px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-clear:hover { color: var(--bar-text); background: rgba(255,255,255,0.12); }

.topbar-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}
.btn-icon:hover { background: var(--bg-card); color: var(--text); }

.dropdown {
  position: absolute;
  top: 56px;
  right: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  z-index: 50;
  min-width: 220px;
}
.dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--text);
}
.dropdown button:hover { background: var(--bg-card-hover); }
.dropdown button:disabled { color: var(--text-faint); cursor: not-allowed; }
.dropdown button + button { border-top: 1px solid var(--border-soft); }

/* View (List / Grid) row inside the ⋮ menu */
.menu-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
  color: var(--text);
}
.menu-view-label { color: var(--text-dim); }
.menu-view-opts { display: flex; gap: 6px; }
/* .dropdown button (display:block/width:100%/11px-14px padding) beats a plain
   .view-opt rule on specificity — scope under .dropdown so these stay compact
   pills instead of inheriting full-width menu-row sizing. */
.dropdown .view-opt {
  display: inline-block;
  width: auto;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--bg-elevated);
}
.dropdown .view-opt:hover { color: var(--text); background: var(--bg-elevated); }
.dropdown .view-opt.active {
  color: #171208;
  background: var(--brass);
  border-color: var(--brass);
  font-weight: 600;
}

/* ---------------- layout ---------------- */
.layout {
  flex: 1;
  display: flex;
  min-height: 0;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--bar);
  border-right: 1px solid rgba(0,0,0,0.2);
  overflow-y: auto;
  padding: 12px 8px;
}
.sidebar .category-item { color: var(--bar-text-dim); }
.sidebar .category-item:hover { background: rgba(255,255,255,0.08); color: var(--bar-text); }
.sidebar .category-item.active { background: rgba(255,255,255,0.10); color: var(--brass-bright); }

/* Collapsible categories panel (desktop): a thin ‹/› handle between the
   sidebar and the notes. Persists per device. Hidden on mobile (drawer used). */
.sidebar-toggle { display: none; }
@media (min-width: 721px) {
  .sidebar-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 20px; flex-shrink: 0;
    background: var(--bar); color: var(--brass-bright);
    border: none; border-right: 1px solid rgba(0,0,0,0.2);
    cursor: pointer; font-size: 16px; font-weight: 700;
  }
  .sidebar-toggle:hover { background: rgba(255,255,255,0.08); }
  .layout.sidebar-collapsed .sidebar { display: none; }
}
@media (max-width: 720px) {
  .sidebar { display: none; }
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-dim);
  cursor: pointer;
  margin-bottom: 2px;
}
.category-item:hover { background: var(--bg-card); color: var(--text); }
.category-item.active { background: var(--bg-card); color: var(--brass-bright); }
.category-item .count { font-size: 11.5px; color: var(--text-faint); }

.notes-panel {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.notes-list {
  gap: 10px;
}
/* Grid view — cards in a responsive grid (original layout).
   No fixed max-width: the columns follow the window, so a maximised desktop
   browser fills the whole page instead of leaving the right half empty. */
.notes-list.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  width: 100%;
}
/* List view — TITLES ONLY, one dense line each (many notes at a glance). */
.notes-list.view-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.notes-list.view-list .note-card {
  min-height: 0;
  padding: 11px 13px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.note-row-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.note-row-icons { color: var(--text-faint); font-size: 13px; display: flex; gap: 5px; flex-shrink: 0; }
.note-row-category {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--brass)) 62%, transparent);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 10.5px;
  flex-shrink: 0;
}
.note-row-date { color: var(--text-faint); font-size: 11px; white-space: nowrap; flex-shrink: 0; }

/* Tile view — large square tiles, as many per row as the window allows. */
.notes-list.view-tile {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
}
.notes-list.view-tile .note-card { min-height: 0; padding: 14px 16px; }
.notes-list.view-tile .note-card-title { font-size: 15.5px; }
.notes-list.view-tile .note-card-preview { -webkit-line-clamp: 3; font-size: 13px; }

.note-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--cat-color, var(--brass-dim));
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
  min-height: 92px;
  display: flex;
  flex-direction: column;
}
.note-card:hover { background: var(--bg-card-hover); }

.note-card-title {
  font-weight: 600;
  font-size: 14.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.note-card-title .lock-badge { font-size: 12px; opacity: 0.7; }

.note-card-preview {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  flex: 1;
}

.note-card-meta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-faint);
}

mark {
  background: rgba(201,151,63,0.35);
  color: inherit;
  border-radius: 2px;
}

.empty-state {
  text-align: center;
  color: var(--text-faint);
  padding: 60px 20px;
  font-size: 14px;
}

/* ---------------- editor ---------------- */
.editor-screen {
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.editor-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  background: var(--bar);
  color: var(--bar-text);
  flex-shrink: 0;
}

.editor-title-input {
  flex: 1;
  min-width: 0; /* allow the title to shrink so editor-actions (incl. Save) never overflow off-screen on narrow phones */
  border: none;
  background: none;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 4px;
}
.editor-title-input:focus { outline: none; }

.editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0; /* keep the action buttons (Save, lock, etc.) at full size */
}
/* On narrow screens, tighten icon spacing so all actions + Save fit the row */
@media (max-width: 480px) {
  .editor-topbar { gap: 4px; padding: 8px; }
  .editor-actions { gap: 2px; }
  .editor-actions .btn-icon { width: 32px; height: 32px; font-size: 16px; }
  .btn-primary.small { padding: 8px 12px; }
}

/* Find-in-note now lives inside the editor's own top bar, in place of the
   title — matching the main list's header search. It no longer takes a row of
   its own above the note body, so it never pushes or covers the text. */
.find-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border-bottom: none;
  color: var(--bar-text-dim);
  flex: 1 1 auto;
  min-width: 0;
}
.find-bar.hidden { display: none; }
.find-bar .find-ic { flex-shrink: 0; font-size: 16px; }
.editor-topbar .find-bar .btn-icon.small { flex-shrink: 0; }

#find-input {
  flex: 1;
  padding: 7px 10px;
  font-size: 13.5px;
  background: var(--bar-input);
  color: var(--bar-text);
  border-color: transparent;
}
#find-input::placeholder { color: var(--bar-text-dim); }
.find-count { color: var(--bar-text-dim) !important; }

.find-count {
  font-size: 12px;
  color: var(--text-faint);
  min-width: 56px;
  text-align: center;
  white-space: nowrap;
}

.btn-icon.small {
  width: 30px;
  height: 30px;
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
   Find-in-note on a phone
   ---------------------------------------------------------------------------
   In the editor header the six find controls (icon, field, counter, ↑, ↓, ×)
   were packed into one narrow row at 30x30px each with 6px gaps. Android's
   minimum recommended touch target is 48dp; at 30px the centres of ↓ and × sit
   about 36px apart, so aiming for "next match" landed on "close" and the search
   ended instead of advancing.

   On a phone the bar now docks to the bottom of the screen — above the on-screen
   keyboard, where the thumb already is — with full-size targets. That also frees
   the header to keep showing the note title while searching.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .find-bar:not(.hidden) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    gap: 4px;
    padding: 8px 10px;
    /* Keeps the row clear of the gesture bar on phones with no hardware keys. */
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--bar-bg, #16253f);
    border-top: 1px solid var(--border, #24304a);
    box-shadow: 0 -4px 16px rgba(0,0,0,.35);
  }
  .find-bar:not(.hidden) .btn-icon.small {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .find-bar:not(.hidden) #find-input {
    /* 16px is deliberate: anything smaller makes mobile Safari zoom the page in
       on focus, which then leaves the note horizontally scrolled. */
    font-size: 16px;
    padding: 11px 12px;
  }
  .find-bar:not(.hidden) .find-count {
    min-width: 58px;
    font-size: 13px;
  }
  .find-bar:not(.hidden) .find-ic { display: none; }

  /* Give the note some scroll room so the last lines aren't stuck under the
     docked bar. app.js adds .find-open to <body> while the bar is up. */
  body.find-open .editor-textarea,
  body.find-open .editor-highlight-overlay {
    padding-bottom: 76px !important;
  }
}

.editor-content-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--bg);
}

.editor-highlight-overlay {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-y: auto;
  color: var(--text);
  pointer-events: none;
  visibility: hidden;
  z-index: 1;
}

.editor-highlight-overlay mark.match {
  background: rgba(201,151,63,0.32);
  color: inherit;
  border-radius: 2px;
}
.editor-highlight-overlay mark.current {
  background: var(--brass-bright);
  color: #171208;
  border-radius: 2px;
}

.editor-content-wrap.searching .editor-highlight-overlay {
  visibility: visible;
}
.editor-content-wrap.searching .editor-textarea {
  color: transparent;
  caret-color: transparent;
}

.editor-textarea {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: none;
  resize: none;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.7;
  background: transparent;
}
.editor-textarea:focus { outline: none; }

.editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-top: 1px solid rgba(0,0,0,0.2);
  background: var(--bar);
  font-size: 12px;
  color: var(--bar-text-dim);
  flex-shrink: 0;
}

/* ---------------- modals ---------------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(10,11,15,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  overflow-y: auto; /* if content is taller than the visible area, let it scroll instead of clipping */
}

/* The PIN modal opens the numeric keyboard, which covers the lower ~half of
   the screen. Anchor it near the top (not vertically centered) so Cancel /
   Unlock stay above the keyboard. */
#modal-note-pin {
  align-items: flex-start;
  padding-top: 12vh;
}

.modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-lift);
}

.modal-card h2 {
  font-size: 16px;
  margin: 0 0 8px;
}

.modal-sub {
  color: var(--text-dim);
  font-size: 13px;
  margin: 0 0 16px;
}

.modal-card input[type="password"],
.modal-card input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 10px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  box-shadow: var(--shadow-lift);
  animation: toast-in 0.2s ease, toast-out 0.25s ease 2.3s forwards;
}
.toast.error { border-left-color: var(--danger); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(-4px); }
}

.drive-status {
  padding: 6px 14px 10px;
  font-size: 11.5px;
  color: var(--text-faint);
  border-top: 1px solid var(--border-soft);
}
.drive-status.error { color: var(--danger); }
.drive-status.ok { color: var(--success); }

#import-status {
  font-size: 13px;
  color: var(--text-dim);
  min-height: 18px;
}

/* ---------------- per-note color ---------------- */
/* Card accent + a subtle full-card tint (falls back to plain card bg when
   a note has no color set). Uses CSS vars so the :hover rule still works. */
.note-card { background: var(--note-tint, var(--bg-card)); }
.note-card:hover { background: var(--note-tint-hover, var(--bg-card-hover)); }

.color-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--bar);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  flex-shrink: 0;
}
/* Reused inside the "More actions" selection popup — a plain swatch row, not
   the editor's fixed toolbar, so drop the toolbar chrome. */
.modal-card .color-bar { border-bottom: none; background: transparent; padding: 4px 0 0; border-radius: 0; }
.sel-more-row { display: flex; gap: 10px; }
.sel-more-row button { padding: 9px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); }
.sel-more-row button:hover { background: var(--bg-card-hover); }
.swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.swatch:hover { transform: scale(1.12); }
.swatch.swatch-default {
  background:
    linear-gradient(135deg, transparent 46%, var(--danger) 46%, var(--danger) 54%, transparent 54%),
    var(--bg-card);
}
#btn-note-color.has-color { border: 1px solid currentColor; border-radius: 8px; }

/* ---------------- checklist mode ---------------- */
.checklist-editor {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px;
  background: var(--bg);
}
.checklist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.checklist-row .chk-box {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--brass);
  cursor: pointer;
}
.checklist-row .chk-text {
  flex: 1;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--bg-elevated);
}
.checklist-row .chk-text.done {
  text-decoration: line-through;
  color: var(--text-faint);
}
.checklist-row .chk-remove {
  color: var(--text-faint);
  font-size: 18px;
  padding: 4px 8px;
  flex-shrink: 0;
}
.checklist-row .chk-remove:hover { color: var(--danger); }
.checklist-add { margin-top: 6px; }

.note-card-preview .chk-line { display: block; }
.note-card-preview .chk-line.done { color: var(--text-faint); text-decoration: line-through; }

/* ---------------- due date ---------------- */
.editor-footer { gap: 12px; }
.due-control {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-faint);
}
.due-control input[type="date"] {
  padding: 5px 8px;
  font-size: 12.5px;
  background: var(--bg-card);
  color-scheme: dark;
}
.note-card-meta .due { color: var(--brass); }

/* ---------------- editor brand mark ---------------- */
.editor-brand { flex-shrink: 0; margin-right: 2px; }

/* ---------------- brand logos (image) ---------------- */
.brand-hero { justify-content: center; margin-bottom: 24px; }
.brand-logo { width: 96px; height: 96px; border-radius: 20px; display: block; }
.brand-logo-sm { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; display: block; }

/* ---------------- editor note ⋮ overflow menu ---------------- */
.note-menu { top: 48px; right: 12px; min-width: 190px; }
.note-menu button.active { color: var(--brass-bright); }
.note-menu button.has-color { border-left: 3px solid currentColor; }

/* ---------------- home footer nav ---------------- */
.home-footer {
  display: flex;
  align-items: stretch;
  background: var(--bar);
  border-top: 1px solid rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.home-footer .hf-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px 8px;
  color: var(--bar-text-dim);
  font-size: 11px;
}
.home-footer .hf-btn:hover, .home-footer .hf-btn.active { color: var(--brass-bright); }
.home-footer .hf-ic { font-size: 18px; line-height: 1; }
.home-footer .hf-lb { font-size: 10.5px; }
.sel-footer .sel-count { display: flex; align-items: center; padding: 0 12px; color: var(--bar-text); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sel-footer #sel-share { color: var(--brass-bright); }

/* selected note (long-press selection mode) */
.note-card.selected { outline: 2px solid var(--brass); outline-offset: -1px; }

.note-context-menu {
  position: fixed;
  z-index: 260;
  width: min(250px, calc(100vw - 24px));
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lift);
}
.note-context-menu button {
  width: 100%;
  padding: 9px 10px;
  border-radius: 5px;
  color: var(--text);
  text-align: left;
}
.note-context-menu button:hover { background: var(--bg-card-hover); }

/* share options modal */
.share-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.share-opts .btn-primary { width: 100%; }
.share-status { font-size: 12.5px; color: var(--text-dim); min-height: 16px; margin-top: 4px; }

/* ---------------- About page ---------------- */
.about-screen { background: var(--bg); display: flex; flex-direction: column; }
.about-title { font-weight: 600; font-size: 16px; color: var(--bar-text); }
.about-body { flex: 1; overflow-y: auto; padding: 22px 20px 44px; max-width: 640px; margin: 0 auto; width: 100%; }
.about-hero { text-align: center; margin-bottom: 22px; }
.about-logo { width: 108px; height: 108px; border-radius: 24px; margin-bottom: 10px; }
.about-hero h1 { font-size: 22px; margin: 0 0 4px; }
.about-tag { color: var(--text-dim); font-size: 13.5px; margin: 0; }
.about-body h2 { font-size: 15px; color: var(--brass-bright); margin: 22px 0 6px; }
.about-body p { font-size: 14px; line-height: 1.65; color: var(--text); margin: 0 0 8px; }
.about-contact a { color: var(--brass-bright); text-decoration: none; }
.about-version { color: var(--text-faint); font-size: 12px; margin-top: 28px; text-align: center; }

/* ---------------- editor footer actions (Send / Archive) ---------------- */
.editor-footer-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* ---------------- checklist read-only mode ---------------- */
/* By default a checklist row shows the text as a read-only, tappable line
   (only the checkbox is interactive). Tapping the text switches THAT row into
   edit mode (the hidden input appears). */
.checklist-row .chk-view {
  flex: 1;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  cursor: text;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 20px;
}
.checklist-row .chk-view.done {
  text-decoration: line-through;
  color: var(--text-faint);
}
.checklist-row .chk-view.placeholder { color: var(--text-faint); }

/* Read mode: show the view span, hide the input + remove button. */
.checklist-row .chk-text { display: none; }
.checklist-row .chk-remove { display: none; }

/* Edit mode: hide the view span, show the input + remove button. */
.checklist-row.editing .chk-view { display: none; }
.checklist-row.editing .chk-text { display: block; }

/* ==================== Version 1 refinements ==================== */
select {
  min-width: 150px;
  padding: 9px 10px;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.btn-secondary, .btn-danger {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px 14px;
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius-sm);
  color: var(--brass-bright);
  font-weight: 650;
}
.btn-danger { color: #fff; border-color: #8f3838; background: #8f3838; }
.btn-danger:disabled { opacity: .45; cursor: default; }
.auth-alt { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); text-align: center; }

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--bar-text);
  min-width: 58px;
}
.brand-logo-sm { width: 44px !important; height: 44px !important; object-fit: contain; }
/* Gold embossed "Nahom Notes" beside the logo (replaces the center "All notes") */
.brand-name {
  display: inline !important;
  font-weight: 800 !important;
  font-size: 16.5px;
  letter-spacing: .2px;
  background: linear-gradient(180deg, var(--brass-bright) 0%, var(--brass) 72%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
  white-space: nowrap;
}
/* NexGen keeps the same embossed treatment as Nahom Notes, but in the company's
   own colours sampled from the logo mark: blue #0a77bb and red #e83726, running
   left-to-right the way they do in the interlocking "N". */
/* The logo's own blue (#0a77bb) is too close in lightness to the navy bar
   (#16253f), so "NexGen" sank into the background. These are lifted, more
   luminous versions of the same two brand hues — still unmistakably the NexGen
   blue and red, but with enough contrast to read cleanly on the dark bar. */
[data-brand="nexgen"] .brand-name {
  background: linear-gradient(95deg, #8ad6ff 0%, #4fb2ec 40%, #ff5f47 62%, #ff9174 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  filter: saturate(1.08);
}
[data-brand="nexgen"] .brand-caret { color: #8ad6ff; }
.view-context { display: none !important; }
.brand-caret { color: var(--brass-bright); font-size: 17px; margin-left: 5px; line-height: 1; transition: transform .15s ease; }
.topbar-brand:hover .brand-caret { transform: translateX(2px); }
.topbar-brand { cursor: pointer; }

/* Tile view = SQUARE notes (visually distinct from Grid's cards). Column count
   follows the viewport — two on a phone, more as the window widens — instead of
   being pinned at two and stopping halfway across a desktop screen. */
.notes-list.view-tile {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 8px !important;
}
@media (max-width: 520px) {
  .notes-list.view-tile { grid-template-columns: repeat(2, 1fr) !important; }
}
.notes-list.view-tile .note-card { aspect-ratio: 1 / 1; overflow: hidden; display: flex; flex-direction: column; }

/* Cornered notes + prominent LEFT color bar (ColorNote style) and stop the
   native long-press "select all / copy / paste" menu from hijacking selection */
.note-card { border-radius: 2px !important; border-left-width: 5px !important; }
.note-card, .note-card * {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* Editor top bar: title + last-edited stamp stacked; bigger find/⋮ icons */
.editor-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.editor-title-input { padding: 2px 4px !important; }
.editor-meta-top { font-size: 10px; color: var(--bar-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.editor-meta-top.saving { color: var(--brass-bright); }
.editor-meta-top.saved { color: #78c78e; }
.editor-actions .btn-icon { width: 42px !important; height: 42px !important; font-size: 21px !important; }
#btn-editor-close { font-size: 25px !important; }

/* Editor footer: compact so Send/Archive never clip */
.editor-footer { gap: 8px !important; }
.due-control { display: flex; align-items: center; gap: 4px; min-width: 0; }
.due-control .due-cal { font-size: 16px; }
.due-control input[type="date"] { max-width: 132px; }
.editor-footer-actions { flex-shrink: 0; display: flex; gap: 6px; }
.editor-footer-actions .btn-text { padding: 6px 12px; white-space: nowrap; }

/* Top-bar selection count "n/total" (replaces the crowded footer count) */
.sel-count-top { flex: 1; text-align: center; color: var(--brass-bright); font-weight: 700; font-size: 15px; }

/* Selection footer: fit all six actions comfortably */
.sel-footer .hf-btn { padding: 6px 2px 7px; }
.sel-footer .hf-lb { font-size: 10px; }
.sel-footer .hf-ic { font-size: 17px; }
.topbar-actions { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.topbar-actions .btn-icon { height: 40px !important; }
.btn-new-note { color: var(--brass-bright) !important; font-size: 28px !important; font-weight: 800 !important; line-height: 1; width: 40px !important; height: 40px !important; display: flex !important; align-items: center; justify-content: center; }
.color-filter-icon { width: 40px !important; height: 40px !important; display: grid !important; grid-template-columns: repeat(2, 8px); grid-template-rows: repeat(2, 8px); gap: 2px; place-content: center; }
.color-filter-icon span { width: 8px; height: 8px; border-radius: 2px; }
.color-filter-icon span:nth-child(1) { background: #a9232d; }.color-filter-icon span:nth-child(2) { background: #d3a52d; }.color-filter-icon span:nth-child(3) { background: #176338; }.color-filter-icon span:nth-child(4) { background: #165aa7; }
.color-filter-icon.active { background: rgba(227,198,114,.18); }

/* Search now lives inline in the top bar, between the brand and the actions.
   It stretches to fill whatever space the device has: wide on a desktop
   browser, narrow on a phone, and it never overlays the notes list. */
.topbar-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.topbar-search .search-wrap { flex: 1; max-width: none; min-width: 0; }
.topbar-search #search-input { padding: 7px 34px 7px 36px; font-size: 13.5px; }
.topbar-search #search-input::-webkit-search-cancel-button { display: none; }
.topbar-search .search-icon { left: 11px; }
/* Selection mode takes the bar over — the count replaces the search field. */
.topbar-search.hidden { display: none; }
@media (max-width: 380px) {
  .topbar { gap: 8px; }
  .topbar-search #search-input { padding-left: 32px; font-size: 13px; }
  .topbar-search .search-icon { left: 9px; }
}
@keyframes sheet-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Context menus (notes and categories) */
.ctx-heading {
  padding: 8px 14px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--brass-bright); border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.category-item.ctx-active { outline: 1px solid var(--brass); outline-offset: -1px; }

.notes-panel { padding: 9px 10px 84px !important; }
.notes-list.view-list { gap: 2px !important; }
.notes-list.view-grid, .notes-list.view-tile { gap: 6px !important; }
.note-card { border-radius: 4px !important; padding: 9px 11px !important; transition: transform .16s ease, background .16s ease, opacity .16s ease !important; }
.view-list .note-card { min-height: 39px !important; }
.note-card.entering { animation: note-in .18s ease-out; }
@keyframes note-in { from { opacity: .25; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Ruled paper — the rule now sits at the BOTTOM of each text line (text lands
   ON the line, not struck through), lines are denser, and the page is wider. */
/* Ruled "notebook paper" lines behind the note text.
   These used to drift out from under the text over long notes because the
   textarea's line-height (26px) and the background-gradient's repeat period
   were two independently hardcoded numbers that had to be kept in sync by
   hand. They're now both driven off one shared --line-h value, and the
   gradient uses the CSS `1lh` unit (resolves to the element's own rendered
   line-height) as a second line of defense, so a future line-height/font
   change can't silently desync them again. */
.editor-textarea, .editor-highlight-overlay {
  --line-h: 24px;
  padding: 8px 12px !important;
  line-height: var(--line-h) !important;
  font-family: var(--editor-font, var(--font-ui)) !important;
  font-size: 15px !important;
  background: transparent !important;
}
.editor-content-wrap {
  --line-h: 24px;
  --paper-tint: transparent;
  --rule-color: rgba(110,120,145,.22);
  line-height: var(--line-h); /* so the `1lh` unit below matches the textarea exactly */
  background-color: var(--paper-tint) !important;
  /* The ruled lines are NOT painted here any more — see .editor-textarea below.
     This wrapper does not scroll (the textarea inside it does), so a gradient
     on it stayed nailed to the viewport while the text slid past underneath.
     Anywhere between two rules the lines then cut straight through the glyphs
     and read as strike-through — worse the further down a long note you got. */
  background-image: none !important;
}

/* Ruled lines live on the SCROLLING element, with background-attachment:local
   so the browser scrolls the pattern together with the text.
   Deliberately CSS rather than a JS scroll listener: Android momentum scrolling
   coalesces scroll events, so a JS-repositioned background visibly lags and
   judders behind the text. `local` is handled by the compositor and stays
   locked to the content at any scroll speed.
   background-origin:content-box starts the pattern at the first text line
   rather than at the padding edge, so no magic pixel offset is needed to line
   the rules up — they follow the padding automatically if it ever changes. */
.editor-textarea {
  background-color: transparent !important;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1lh - 1px), var(--rule-color) calc(1lh - 1px), var(--rule-color) 1lh) !important;
  background-size: 100% var(--line-h) !important;
  background-position: 0 0 !important;
  background-origin: content-box !important;
  background-attachment: local !important;
}
/* While a find is running the textarea's own text is transparent and the
   highlight overlay is what you actually read, so the rules have to follow the
   overlay too or they would sit under nothing. The overlay is scroll-synced to
   the textarea in app.js, so `local` keeps both in step. */
.editor-content-wrap.searching .editor-highlight-overlay {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1lh - 1px), var(--rule-color) calc(1lh - 1px), var(--rule-color) 1lh);
  background-size: 100% var(--line-h);
  background-position: 0 0;
  background-origin: content-box;
  background-attachment: local;
}
.editor-content-wrap.searching .editor-textarea {
  background-image: none !important;
}
/* Checklist rows aren't laid out on a text line-height grid (each row is a
   checkbox + input, variable height), so ruled lines never actually lined up
   with anything there — drop them rather than leave stray decorative lines. */
.checklist-editor {
  background-color: var(--paper-tint, transparent) !important;
  background-image: none !important;
}
.checklist-row .chk-text { font-family: var(--editor-font, var(--font-ui)); }

.filter-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 10px; margin-top: 16px; }
.filter-option { display: flex; align-items: center; gap: 7px; padding: 9px; border: 1px solid var(--border); border-radius: 5px; }
.filter-option.active { border-color: var(--brass-bright); box-shadow: 0 0 0 1px var(--brass-bright); }
.filter-dot { width: 20px; height: 20px; border: 1px solid rgba(255,255,255,.25); border-radius: 3px; }

.sheet-backdrop { position: fixed; inset: 0; z-index: 130; background: rgba(0,0,0,.55); }
.side-sheet { width: min(88vw, 360px); height: 100%; padding: max(16px, env(safe-area-inset-top)) 14px 20px; overflow-y: auto; color: var(--text); background: var(--bg-elevated); box-shadow: var(--shadow-lift); animation: drawer-in .2s ease-out; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.drawer-list { display: grid; gap: 5px; padding: 10px 0; }
.drawer-item { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 11px 10px; border-radius: 4px; text-align: left; }
.drawer-item:hover, .drawer-item.active { background: var(--bg-card); color: var(--brass-bright); }
.drawer-item .count { font-size: 12px; color: var(--text-faint); }

.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.setting-account { padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border-soft); }
.setting-account-status { font-size: 13.5px; color: var(--text-dim); margin-bottom: 10px; }
.setting-account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.setting-account-actions .btn-primary.small,
.setting-account-actions .btn-secondary.small,
.setting-account-actions .btn-text.small { width: auto; display: inline-block; margin-top: 0; }
.setting-account-actions .btn-secondary.small { padding: 8px 14px; font-size: 13.5px; }
/* Spinner for buttons that wait on the network or on key derivation.
   currentColor makes it work on both the white Google button and the dark
   secondary ones without needing a per-button variant. */
.btn-spinner {
  width: 18px; height: 18px; flex: 0 0 18px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .7;
  display: inline-block;
  animation: nv-spin .7s linear infinite;
}
button.is-busy { cursor: progress; }
@keyframes nv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 2.4s; }
}

#import-backup-panel { margin-top: 12px; }
#import-backup-panel .field { margin-bottom: 6px; }
.modal-sub.import-note { font-size: 12.5px; line-height: 1.5; margin-top: 0; }
#import-status.field-error { margin-top: 8px; }
.setting-health { align-items: flex-start; flex-direction: column; gap: 8px; }
.setting-health .setting-health-body { width: 100%; }
.setting-health #settings-health-text { font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.setting-health .btn-text.small { width: auto; display: inline-block; margin-top: 8px; }
.manager-list { display: grid; gap: 5px; max-height: 48vh; overflow-y: auto; }
.manager-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 5px; align-items: center; padding: 7px; background: var(--bg-elevated); border-radius: 4px; }
.manager-row input { min-width: 0; padding: 8px; }
.manager-row button { min-width: 34px; min-height: 34px; color: var(--text-dim); }
.inline-create { display: flex; gap: 8px; margin-top: 12px; }.inline-create input { flex: 1; min-width: 0; padding: 10px; }

.sel-footer { overflow-x: auto; justify-content: flex-start !important; }.sel-footer .hf-btn { min-width: 58px; }.sel-count { min-width: max-content; }
.update-banner { position: fixed; z-index: 300; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 11px 18px; border-radius: 999px; color: #10213e; background: var(--brass-bright); box-shadow: var(--shadow-lift); font-weight: 750; }

.privacy-curtain::after { content: "Nahom Notes locked"; position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; color: var(--bar-text); background: var(--bar); font-weight: 700; }

@media (max-width: 720px) {
  .brand-name { display: none !important; }
  .view-context { font-size: 14px; }
  .topbar { padding-left: 8px !important; padding-right: 6px !important; }
  .sidebar { display: none !important; }
  .selection-footer { gap: 2px; }
}
.checklist-row.editing .chk-remove { display: block; }