/* ============================================================
   Note Graph — design system
   Clean / neutral grotesque, B/W + one accent, light & dark
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --accent-h: 264;
  --accent: oklch(0.55 0.17 var(--accent-h));
  --accent-soft: oklch(0.55 0.17 var(--accent-h) / 0.12);
  --accent-line: oklch(0.55 0.17 var(--accent-h) / 0.30);

  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --r-card: 16px;
  --r-chip: 999px;

  /* the floating "+" (.fab) is 56px tall and sits 92px above the tab bar → its top is 148px up.
     scrollable lists pad their bottom past that so the last card is never hidden under the FAB. */
  --fab-clear: 164px;
}

/* ---- Light theme (default) ---- */
[data-theme="light"] {
  --bg: oklch(0.985 0.002 270);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.965 0.003 270);
  --elevated: oklch(1 0 0);
  --text: oklch(0.22 0.012 270);
  --text-2: oklch(0.45 0.012 270);
  --muted: oklch(0.60 0.010 270);
  --faint: oklch(0.74 0.008 270);
  --border: oklch(0.915 0.004 270);
  --border-strong: oklch(0.86 0.006 270);
  --shadow: 0 1px 2px oklch(0.2 0.02 270 / 0.06), 0 8px 24px oklch(0.2 0.02 270 / 0.06);
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 270 / 0.07);
  --accent: oklch(0.52 0.17 var(--accent-h));
  --accent-soft: oklch(0.52 0.17 var(--accent-h) / 0.10);
  --accent-line: oklch(0.52 0.17 var(--accent-h) / 0.28);
  --graph-link: oklch(0.80 0.01 270);
  --hl: #fff3a3;
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --bg: oklch(0.165 0.006 270);
  --surface: oklch(0.205 0.007 270);
  --surface-2: oklch(0.235 0.008 270);
  --elevated: oklch(0.235 0.008 270);
  --text: oklch(0.95 0.003 270);
  --text-2: oklch(0.74 0.010 270);
  --muted: oklch(0.62 0.012 270);
  --faint: oklch(0.48 0.010 270);
  --border: oklch(0.28 0.008 270);
  --border-strong: oklch(0.34 0.010 270);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.30), 0 10px 30px oklch(0 0 0 / 0.35);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.30);
  --accent: oklch(0.70 0.15 var(--accent-h));
  --accent-soft: oklch(0.70 0.15 var(--accent-h) / 0.16);
  --accent-line: oklch(0.70 0.15 var(--accent-h) / 0.40);
  --graph-link: oklch(0.40 0.01 270);
  --hl: #e6cf4a;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  background:
    radial-gradient(1200px 800px at 50% -10%, oklch(0.30 0.02 270) 0%, transparent 60%),
    oklch(0.16 0.008 270);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* ============================================================
   STAGE + PHONE FRAME
   ============================================================ */
.stage {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
}
.stage-inner { transform-origin: center center; }

.phone {
  position: relative;
  width: 390px; height: 844px;
  background: var(--bg);
  border-radius: 46px;
  box-shadow:
    0 0 0 11px oklch(0.12 0.006 270),
    0 0 0 13px oklch(0.28 0.008 270),
    0 40px 90px oklch(0 0 0 / 0.55);
  overflow: hidden;
  display: flex; flex-direction: column;
  color: var(--text);
}
.phone::after { /* subtle inner edge */
  content: ""; position: absolute; inset: 0;
  border-radius: 46px; pointer-events: none;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.04);
}

/* native (installed app): fill the device screen, drop the mockup frame + fake status bar */
body.native .stage { padding: 0; }
body.native .stage-inner { transform: none !important; }
body.native .phone { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
body.native .phone::after { display: none; }
body.native .statusbar { display: none; }

/* status bar */
.statusbar {
  height: 50px; flex: 0 0 50px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px 0 34px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  z-index: 30;
  background: var(--bg);
}
.statusbar .sb-right { display: flex; align-items: center; gap: 7px; }
.sb-bars { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.sb-bars i { width: 3px; background: var(--text); border-radius: 1px; display: block; }
.sb-bars i:nth-child(1){ height: 4px; } .sb-bars i:nth-child(2){ height: 6px; }
.sb-bars i:nth-child(3){ height: 8px; } .sb-bars i:nth-child(4){ height: 11px; }
.sb-wifi { width: 16px; height: 12px; position: relative; opacity: 0.95; }
.sb-batt { width: 24px; height: 12px; border: 1.5px solid var(--text); border-radius: 3px; position: relative; opacity: 0.9; }
.sb-batt::after { content:""; position:absolute; right:-3px; top:3px; width:2px; height:6px; background: var(--text); border-radius:0 1px 1px 0; }
.sb-batt i { position:absolute; inset:1.5px; width: 70%; background: var(--text); border-radius: 1px; }

.notch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 120px; height: 30px; background: oklch(0.12 0.006 270); border-radius: 0 0 18px 18px; z-index: 40; }

/* screen scroll region */
.screen { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; background: var(--bg); }
/* Google-Keep-style note colour: the WHOLE note (topbar + body + footer) is tinted, and the intensity
   adapts to the theme — a saturated pastel in light, a muted wash in dark — by mixing the note colour
   into the themed --surface. --note-tint is set inline as "R,G,B". */
.screen.note-tinted { background: color-mix(in srgb, rgb(var(--note-tint)) 60%, var(--surface)); }
[data-theme="dark"] .screen.note-tinted { background: color-mix(in srgb, rgb(var(--note-tint)) 30%, var(--surface)); }
.screen.note-tinted .topbar, .screen.note-tinted .scroll { background: transparent; }
/* the bottom toolbar ("подвал") is coloured to match the note too */
.screen.note-tinted .editor-toolbar { background: color-mix(in srgb, rgb(var(--note-tint)) 60%, var(--surface)); }
[data-theme="dark"] .screen.note-tinted .editor-toolbar { background: color-mix(in srgb, rgb(var(--note-tint)) 30%, var(--surface)); }
/* boost the muted/technical text contrast against the tint (grey-on-pastel was too faint) */
.screen.note-tinted { --muted: oklch(0.38 0.015 270); --faint: oklch(0.50 0.012 270); }
[data-theme="dark"] .screen.note-tinted { --muted: oklch(0.82 0.014 270); --faint: oklch(0.66 0.012 270); }
/* the default --border vanishes against the tint — make the title/footer divider lines visible */
.screen.note-tinted .nd-divider { background: color-mix(in srgb, var(--text) 24%, transparent); }
.screen.note-tinted .nd-footer { border-top-color: color-mix(in srgb, var(--text) 24%, transparent); }
.scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar { padding: 8px 20px 12px; background: var(--bg); position: sticky; top: 0; z-index: 20; }
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar-title { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.topbar-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }

.iconbtn {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; border: none; cursor: pointer;
  background: transparent; color: var(--text-2);
  transition: background .15s, color .15s, transform .1s;
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }
.iconbtn:active { transform: scale(0.93); }
.iconbtn svg { width: 21px; height: 21px; }

.backbtn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none; color: var(--text); cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; padding: 8px 8px 8px 0; margin-left: -2px; }
.backbtn svg { width: 20px; height: 20px; }
.backbtn:active { opacity: 0.6; }

/* ============================================================
   SEARCH FIELD
   ============================================================ */
.searchfield { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; color: var(--muted); transition: border-color .15s, background .15s; }
.searchfield.focused { border-color: var(--accent-line); background: var(--surface); }
.searchfield svg { width: 18px; height: 18px; flex: 0 0 18px; }
.searchfield input { flex: 1; border: none; background: transparent; outline: none; font-family: inherit; font-size: 15px; color: var(--text); }
.searchfield input::placeholder { color: var(--muted); }
.searchfield > span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   TAG / CHIP ROW
   ============================================================ */
.chiprow { display: flex; gap: 8px; padding: 14px 20px 6px; overflow-x: auto; scrollbar-width: none; }
.chiprow::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 13px; border-radius: var(--r-chip);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap;
  font-family: inherit; transition: all .14s;
}
.chip:active { transform: scale(0.95); }
.chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip .hash { font-family: var(--font-mono); opacity: 0.55; font-weight: 500; }
.chip.active .hash { opacity: 0.7; }

/* ============================================================
   NOTE CARDS (feed)
   ============================================================ */
.feed { padding: 8px 20px var(--fab-clear); display: flex; flex-direction: column; gap: 10px; }
.feed-section { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 14px 2px 4px; display: flex; align-items: center; gap: 6px; }
.feed-section svg { width: 13px; height: 13px; }

/* app bar / brand */
.appbar { display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.brand-mark svg { width: 21px; height: 21px; }
.brand-name { font-size: 20px; font-weight: 800; letter-spacing: -0.025em; white-space: nowrap; }
.searchfield.ghost { cursor: pointer; }

/* vault overview */
.vault-overview { margin: 8px 20px 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 6px 16px 18px; display: flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .15s, transform .12s; overflow: hidden; }
.vault-overview:active { transform: scale(0.99); }
.vault-overview:hover { border-color: var(--border-strong); }
.vo-stats { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.vo-row { display: flex; align-items: baseline; gap: 8px; }
.vo-num { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); min-width: 36px; }
.vo-lbl { font-size: 13px; color: var(--muted); font-weight: 600; }
.vo-open { display: inline-flex; align-items: center; gap: 1px; font-size: 12.5px; font-weight: 700; color: var(--accent); margin-top: 9px; }
.vo-open svg { width: 15px; height: 15px; }
.vo-graph { flex: 0 0 124px; height: 96px; display: grid; place-items: center; }
.mini-graph { overflow: visible; }

/* note cards */
.note-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 16px 17px; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, border-color .15s, box-shadow .18s;
  position: relative; overflow: hidden;
}
.note-card:active { transform: scale(0.985); }
.note-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.note-card.pinned { border-color: var(--accent-line); }
.note-card.pinned::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nc-title { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; padding-right: 22px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.nc-pin { position: absolute; top: 15px; right: 15px; color: var(--accent); }
.nc-pin svg { width: 15px; height: 15px; display: block; }
.nc-snippet { font-size: 13.5px; line-height: 1.55; color: var(--text-2); margin-top: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.1em; }
.nc-photo { margin: -16px -17px 12px; overflow: hidden; background: var(--surface-2); line-height: 0; }
.nc-photo img { display: block; width: 100%; max-height: 190px; object-fit: cover; }
.nc-meta { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.nc-folder { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.nc-tag { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 6px; }
.nc-spacer { flex: 1; }
.nc-links { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); padding: 3px 9px 3px 8px; border-radius: 999px; flex: 0 0 auto; }
.nc-links svg { width: 13px; height: 13px; color: var(--accent); }

.empty { text-align: center; color: var(--muted); padding: 60px 30px; }
.empty svg { width: 40px; height: 40px; opacity: 0.4; margin-bottom: 14px; }
.empty p { font-size: 14px; line-height: 1.5; }

/* ============================================================
   FAB
   ============================================================ */
.fab {
  position: absolute; right: 20px; bottom: 92px; z-index: 25;
  width: 56px; height: 56px; border-radius: 18px;
  background: var(--accent); color: white; border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px var(--accent-line), 0 2px 6px oklch(0 0 0 / 0.2);
  transition: transform .14s;
}
.fab:active { transform: scale(0.9); }
.fab svg { width: 26px; height: 26px; }

/* ============================================================
   TAB BAR
   ============================================================ */
.tabbar {
  flex: 0 0 auto; height: 76px; padding-bottom: 14px;
  display: flex; align-items: stretch;
  background: color-mix(in oklch, var(--bg) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid var(--border);
  z-index: 30;
}
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: none; cursor: pointer; color: var(--muted); font-family: inherit; transition: color .15s; }
.tab svg { width: 29px; height: 29px; transition: transform .15s; }
.tab span { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
.tab.active { color: var(--accent); }
.tab.active svg { transform: translateY(-1px); }
.tab:active svg { transform: scale(0.88); }

/* ============================================================
   NOTE DETAIL
   ============================================================ */
.note-detail { padding: 4px 22px 130px; }
.nd-breadcrumb { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.nd-breadcrumb svg { width: 13px; height: 13px; }
.nd-title { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.nd-info { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.nd-info .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.nd-divider { height: 1px; background: var(--border); margin: 18px 0; }
/* in-place editing: title input + per-block tap-to-edit */
.nd-title-input { width: 100%; font-size: 27px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; font-family: inherit; color: var(--text); border: none; outline: none; background: transparent; padding: 0; }
.nd-title-input::placeholder { color: var(--muted); font-weight: 700; opacity: 0.55; }
.nd-body .seg { border-radius: 8px; transition: background .12s; }
.nd-body .seg.editable { cursor: text; }
.nd-body .seg.editable:active { background: var(--surface-2); }
.nd-body .seg-empty { color: var(--muted); min-height: 1.6em; cursor: text; }
.nd-body .seg-edit { display: block; width: 100%; box-sizing: border-box; border: none; outline: none; resize: none; overflow: hidden; background: transparent; border-radius: 0; padding: 0; margin: 0; font-family: inherit; font-size: inherit; line-height: 1.65; color: var(--text); caret-color: var(--accent); }
.nd-source { display: block; width: 100%; box-sizing: border-box; border: none; outline: none; resize: none; overflow: hidden; background: transparent; padding: 0; margin: 0; font-family: inherit; font-size: 16px; line-height: 1.7; color: var(--text); caret-color: var(--accent); min-height: 55vh; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.nd-source::placeholder { color: var(--muted); opacity: 0.55; }
.md .nd-source.seg-src { min-height: 1.5em; font-size: inherit; line-height: 1.65; padding: 1px 8px; margin: -1px -8px; border-radius: 8px; background: var(--surface-2); font-family: var(--font-mono); }
.md .cm-host.seg-cm { margin: -3px -8px; padding: 2px 8px; border-radius: 9px; background: var(--surface-2); }
.md .cm-host.cm-note { min-height: 62vh; }
/* search → "jump to the found word": temporary highlight on the matched term (flashFind in cm.js) */
.cm-find-hit { background: rgba(255, 206, 0, 0.45); border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 206, 0, 0.55); transition: background .3s; }
.md .cm-host.cm-note .cm-editor, .md .cm-host.cm-note .cm-scroller { min-height: 62vh; }
/* the content itself fills the height so tapping the empty area below the text drops the caret at the
   end of the note (CM maps a click below the last line to the last document position) */
.md .cm-host.cm-note .cm-content { min-height: 60vh; }
/* the editor grows in the page's `.scroll`; make its own scroller non-scrolling so CM's caret
   scroll-into-view walks up to `.scroll` (the real scroll container) and follows the cursor as you type */
.md .cm-host.cm-note .cm-scroller { overflow: visible; }
/* Keep-style body placeholder: an empty CM document is a single line holding only a <br> */
.md .cm-host.cm-note .cm-line:only-child:has(> br:only-child)::before { content: "Note"; color: var(--muted); opacity: 0.55; pointer-events: none; }
.md .cm-host .cm-editor { background: transparent; color: var(--text); }
.md .cm-host .cm-editor.cm-focused { outline: none; }
.md .cm-host .cm-scroller { font-family: var(--font-ui); line-height: 1.65; }
/* bottom toolbar shown while editing a block in place — fixed so it rides at the
   viewport bottom and (via the visualViewport transform in BlockEdit) above the keyboard */
.block-toolbar-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; will-change: transform; }
.block-toolbar-wrap .editor-toolbar { box-shadow: 0 -2px 16px oklch(0 0 0 / 0.12); }
.tbtn.done { color: var(--accent); }

/* WYSIWYG contenteditable editor (E1) — looks like the rendered note, no raw markers */
.ce-edit { outline: none; min-height: 1.6em; caret-color: var(--accent); }
.ce-edit .ce-line { min-height: 1.4em; }
.ce-edit .ce-line + .ce-line { margin-top: 12px; }
.ce-edit .ce-h1 { font-size: 31px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-top: 6px; }
.ce-edit .ce-h2 { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-top: 4px; }
.ce-edit .ce-h3 { font-size: 20px; font-weight: 700; line-height: 1.25; }
.ce-edit .ce-ul, .ce-edit .ce-ol { padding-left: 1.5em; position: relative; }
.ce-edit .ce-ul::before, .ce-edit .ce-ol::before { content: "•"; position: absolute; left: 0.45em; color: var(--muted); }
.ce-edit .ce-task { display: flex; align-items: flex-start; gap: 9px; }
.ce-edit .ce-task .ce-content { flex: 1; }
.ce-edit .ce-check { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; border: 2px solid var(--border-strong); border-radius: 6px; cursor: pointer; display: inline-block; position: relative; }
.ce-edit .ce-check.on { background: var(--accent); border-color: var(--accent); }
.ce-edit .ce-check.on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ce-edit .ce-quote { border-left: 3px solid var(--accent-line); padding-left: 12px; color: var(--muted); font-style: italic; }
.ce-edit .ce-hr { padding: 6px 0; }
.ce-edit .ce-hr hr { border: none; border-top: 1px solid var(--border); margin: 0; }
.ce-edit .ce-content { display: inline; }
.ce-edit .ce-atom { color: var(--accent); cursor: default; }
.ce-edit .ce-atom[data-md^="#"] { color: var(--accent); opacity: 0.92; }

/* markdown body */
.md { font-size: 15.5px; line-height: 1.65; color: var(--text); }
.md > * + * { margin-top: 15px; }
/* spacing between blocks INSIDE a tap-to-edit segment (paragraphs, lists, etc. with no blank line between) */
.nd-body .seg > * + * { margin-top: 12px; }
.md p + p, .md p { margin: 0; }
.md p br { line-height: 1.9; }
.md h1 { font-size: 31px; font-weight: 800; letter-spacing: -0.02em; margin-top: 24px; line-height: 1.15; }
.md h2 { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; margin-top: 22px; line-height: 1.2; }
.md h3 { font-size: 20px; font-weight: 700; margin-top: 18px; color: var(--text); }
.md h4 { font-size: 17px; font-weight: 700; margin-top: 16px; color: var(--text); }
.md h5 { font-size: 15px; font-weight: 700; margin-top: 14px; color: var(--text-2); }
.md h6 { font-size: 12.5px; font-weight: 700; margin-top: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.md p { color: var(--text); }
.md strong { font-weight: 700; }
.md em { font-style: italic; }
.md code { font-family: var(--font-mono); font-size: 0.88em; background: var(--surface-2); border: 1px solid var(--border); padding: 1px 5px; border-radius: 5px; }
.md ul { padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.md li { position: relative; padding-left: 20px; color: var(--text); }
.md li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.md blockquote { border-left: 3px solid var(--accent-line); padding: 2px 0 2px 16px; color: var(--text-2); font-style: italic; }
.md .md-quote { font-style: italic; color: var(--accent); }
.md .codeblock { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; overflow-x: auto; white-space: pre; color: var(--text); }
.md .md-table-wrap { margin-top: 13px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 12px; }
.md .md-table { border-collapse: collapse; width: 100%; font-size: 14px; color: var(--text); }
.md .md-table th, .md .md-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); text-align: left; vertical-align: top; }
.md .md-table th:last-child, .md .md-table td:last-child { border-right: none; }
.md .md-table tbody tr:last-child td { border-bottom: none; }
.md .md-table thead th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
.md .md-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.md .task { display: flex; align-items: flex-start; gap: 9px; padding-left: 0; }
.md .task::before { display: none; }
.md .checkbox { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--border-strong); margin-top: 1px; display: grid; place-items: center; cursor: pointer; transition: all .14s; }
.md .checkbox.done { background: var(--accent); border-color: var(--accent); }
.md .checkbox svg { width: 12px; height: 12px; color: white; opacity: 0; }
.md .checkbox.done svg { opacity: 1; }
.md .task.done span { color: var(--muted); text-decoration: line-through; }

/* inline tokens */
.wikilink { color: var(--accent); font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--accent-line); padding-bottom: 0.5px; transition: background .12s; border-radius: 2px; }
.wikilink:active { background: var(--accent-soft); }
.wikilink.broken { color: var(--muted); border-bottom-style: dashed; }
.tag-inline { font-family: var(--font-mono); font-size: 0.86em; font-weight: 500; color: var(--accent); cursor: pointer; }
.md .ext-link { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 2px; word-break: break-word; }
.md .md-img { max-width: 100%; border-radius: 10px; margin: 6px 0; display: block; }
.md hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.ac-hsym { font-family: var(--font-mono); font-size: 12px; color: var(--accent); opacity: 0.7; min-width: 18px; }

/* backlinks panel — "linked mentions" on the note screen */
.backlinks { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.bl-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 12px; }
.bl-head svg { width: 16px; height: 16px; }
.bl-item { display: block; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; margin-bottom: 9px; cursor: pointer; font-family: inherit; }
.bl-item:active { background: var(--surface); }
.bl-title { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
.bl-title svg { width: 14px; height: 14px; flex: 0 0 auto; }
.bl-ctx { font-size: 13px; color: var(--muted); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* backlinks / outlinks */
.linksec { margin-top: 8px; }
.linksec-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.linksec-head .count { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 0px 7px; border-radius: 999px; }
.linksec-head svg { width: 16px; height: 16px; color: var(--accent); }
.backlink { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 13px 15px; cursor: pointer; margin-bottom: 8px; font-family: inherit; transition: border-color .15s, transform .12s; }
.backlink:active { transform: scale(0.99); }
.backlink:hover { border-color: var(--border-strong); }
.bl-title { font-size: 14.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; }
.bl-title svg { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; }
.bl-context { font-size: 13px; line-height: 1.5; color: var(--text-2); margin-top: 6px; }
.bl-context mark { background: var(--accent-soft); color: var(--accent); font-weight: 600; padding: 0 2px; border-radius: 3px; }

.outchips { display: flex; flex-wrap: wrap; gap: 8px; }
.outchip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit; transition: all .14s; }
.outchip:active { transform: scale(0.96); }
.outchip svg { width: 14px; height: 14px; color: var(--accent); }

/* note detail actions */
.nd-actions { display: flex; gap: 8px; margin-top: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 18px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: all .14s; }
.btn:active { transform: scale(0.97); }
.btn svg { width: 17px; height: 17px; }
.btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn.primary svg { color: white; }
.btn.ghost { background: transparent; }
.btn.full { flex: 1; }

/* ============================================================
   EDITOR
   ============================================================ */
.editor { display: flex; flex-direction: column; height: 100%; }
.editor-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 6px 12px; border-bottom: 1px solid var(--border); }
.editor-title-input { width: 100%; border: none; background: transparent; outline: none; font-family: inherit; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); padding: 16px 22px 6px; }
.editor-title-input::placeholder { color: var(--faint); }
.editor-meta { padding: 0 22px 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.editor-body { flex: 1; min-height: 0; }
.editor-mirror { position: absolute; inset: 0; padding: 8px 22px 40px; font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: var(--text); white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; overflow: hidden; pointer-events: none; z-index: 0; }
.editor-textarea.transparent { color: transparent; caret-color: var(--text); position: relative; z-index: 1; }
.editor-textarea { width: 100%; height: 100%; resize: none; border: none; outline: none; background: transparent; font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: var(--text); padding: 8px 22px 40px; }
.editor-textarea::placeholder { color: var(--faint); }
/* inline (always-editable note) rich mirror — styles must NOT change glyph advance width (keeps caret aligned) */
.editor-body.inline .mq-link { color: var(--accent); border-bottom: 1px solid var(--accent-line); }
.editor-body.inline .mq-tag { color: var(--accent); }
.editor-body.inline .mq-head { text-shadow: 0 0 0.5px currentColor; }
.editor-body.inline .mq-bold { text-shadow: 0 0 0.4px currentColor; }
.editor-body.inline .mq-quote { color: var(--accent); font-style: italic; }
.editor-body.inline .mq-syntax { opacity: 0.3; }
.editor-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; padding: 8px 12px; border-top: 1px solid var(--border); background: var(--surface); overflow-x: auto; scrollbar-width: none; }
.editor-toolbar::-webkit-scrollbar { display: none; }
.tbtn { flex: 0 0 auto; height: 38px; min-width: 38px; padding: 0 10px; border-radius: 10px; border: none; background: transparent; color: var(--text-2); cursor: pointer; display: grid; place-items: center; font-family: var(--font-mono); font-size: 14px; font-weight: 600; transition: background .14s; }
.tbtn:hover { background: var(--surface-2); }
.tbtn:active { background: var(--accent-soft); color: var(--accent); }
.tbtn:disabled { opacity: .3; pointer-events: none; }
.tbtn svg { width: 18px; height: 18px; }
.tbtn.wide { gap: 6px; display: inline-flex; align-items: center; color: var(--accent); }

/* wiki autocomplete popup */
.autocomplete { position: absolute; left: 16px; right: 16px; bottom: 64px; background: var(--elevated); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; z-index: 50; }
.ac-head { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 10px 14px 6px; }
.ac-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; border-top: 1px solid var(--border); }
.ac-item:hover, .ac-item.sel { background: var(--accent-soft); }
.ac-item svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
.ac-item .ac-t { font-size: 14px; font-weight: 600; color: var(--text); }
.ac-item.create .ac-t { color: var(--accent); }
.ac-item .ac-new { margin-left: auto; font-size: 11px; font-family: var(--font-mono); color: var(--muted); }

/* ============================================================
   GRAPH
   ============================================================ */
.graphwrap { position: absolute; inset: 0; overflow: hidden; touch-action: none; background:
  radial-gradient(120% 90% at 50% 30%, var(--surface) 0%, var(--bg) 75%); }
.graph-svg { width: 100%; height: 100%; display: block; cursor: grab; }
.graph-svg:active { cursor: grabbing; }
.glink { stroke: var(--graph-link); stroke-width: 1.2; transition: stroke .2s, stroke-width .2s; }
.glink.hot { stroke: var(--accent); stroke-width: 1.8; }
.gnode circle { transition: fill .2s, stroke .2s; }
.gnode .halo { fill: var(--accent); opacity: 0; transition: opacity .2s; }
.gnode.hot .halo { opacity: 0.14; }
.gnode .dot { fill: var(--text-2); stroke: var(--bg); stroke-width: 2.5; }
.gnode.hot .dot { fill: var(--accent); }
.gnode.dim { opacity: 0.28; }
.gnode text { font-family: var(--font-ui); font-size: 11px; font-weight: 600; fill: var(--text); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.gnode.dim text { opacity: 0; }

.graph-overlay { position: absolute; inset: 0; pointer-events: none; }
.graph-topbar { position: absolute; top: 0; left: 0; right: 0; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; z-index: 10; }
.graph-seg { display: inline-flex; background: color-mix(in oklch, var(--surface) 88%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 11px; padding: 3px; pointer-events: auto; }
.graph-seg button { border: none; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.graph-seg button:disabled { opacity: 0.4; cursor: default; }
.graph-seg span { white-space: nowrap; }
.graph-seg button.active { background: var(--text); color: var(--bg); }
.graph-zoom { position: absolute; right: 16px; bottom: 100px; display: flex; flex-direction: column; gap: 8px; pointer-events: auto; z-index: 10; }
.graph-zoom button { width: 42px; height: 42px; border-radius: 12px; background: color-mix(in oklch, var(--surface) 90%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--border); color: var(--text); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.graph-zoom button:active { transform: scale(0.92); }
.graph-zoom svg { width: 18px; height: 18px; }

/* graph node preview card */
.node-preview { position: absolute; left: 16px; right: 16px; bottom: 92px; background: var(--elevated); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: var(--shadow); padding: 16px 18px; z-index: 20; pointer-events: auto; animation: slideup .22s cubic-bezier(.2,.8,.2,1); }
@keyframes slideup { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.np-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.np-snippet { font-size: 13px; line-height: 1.5; color: var(--text-2); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.np-stat { font-size: 12px; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.np-stat svg { width: 14px; height: 14px; }
.np-open { margin-left: auto; }

/* graph: search field, folder dropdown, cluster colors, orphan rail */
.graph-top { position: absolute; top: 0; left: 0; right: 0; padding: 8px 16px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; pointer-events: none; z-index: 10; }
.graph-top > * { pointer-events: auto; }
.graph-bar { display: flex; align-items: center; gap: 8px; }
.graph-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px; background: color-mix(in oklch, var(--surface) 88%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 12px; }
.graph-search svg { width: 17px; height: 17px; color: var(--muted); flex: 0 0 auto; }
.graph-search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: inherit; font-size: 14.5px; color: var(--text); }
.graph-search input::placeholder { color: var(--muted); }
.gs-clear { border: none; background: var(--surface-2); color: var(--muted); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.gs-clear svg { width: 13px; height: 13px; }
.graph-seg { align-self: center; }

/* folder filter dropdown */
.gfs-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in oklch, var(--surface) 88%, transparent); backdrop-filter: blur(14px); color: var(--text-2); font-family: inherit; cursor: pointer; transition: all .14s; }
.gfs-btn svg { width: 19px; height: 19px; }
.gfs-btn.on { color: var(--accent); border-color: var(--accent); }
.gfs-badge { font-size: 11px; font-weight: 800; background: var(--accent); color: white; border-radius: 999px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-grid; place-items: center; }
.gfs-menu { position: absolute; top: 56px; right: 16px; min-width: 196px; background: color-mix(in oklch, var(--elevated) 91%, var(--text) 9%); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; z-index: 71; animation: slideup .16s cubic-bezier(.2,.8,.2,1); }
.gfs-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: 9px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
.gfs-item:hover { background: var(--surface-2); }
.gfs-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfs-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.gfs-allico { width: 12px; height: 12px; display: grid; place-items: center; color: var(--muted); flex: 0 0 auto; }
.gfs-allico svg { width: 15px; height: 15px; }
.gfs-chk { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }


.gnode.filtered { opacity: 0.07; }
.gnode.filtered text { opacity: 0; }
.glink.filtered { opacity: 0.05; }

/* ============================================================
   SEARCH SCREEN
   ============================================================ */
.search-screen { padding: 0 20px; }
.search-recent-head { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 22px 2px 12px; }
.recent-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; cursor: pointer; }
.recent-row svg { width: 17px; height: 17px; color: var(--muted); }
.recent-row span { font-size: 14.5px; color: var(--text); font-weight: 500; }
.recent-row .rm { margin-left: auto; color: var(--faint); }
.search-results { padding: 8px 0 120px; }
.sr-count { font-size: 12.5px; color: var(--muted); padding: 14px 2px 8px; font-weight: 600; }
.sr-item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, transform .12s; }
.sr-item:active { transform: scale(0.99); }
.sr-title { font-size: 15.5px; font-weight: 700; color: var(--text); }
.sr-title mark, .sr-snippet mark { background: var(--accent-soft); color: var(--accent); font-weight: 700; padding: 0 2px; border-radius: 3px; }
.sr-snippet { font-size: 13px; line-height: 1.5; color: var(--text-2); margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-path { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 8px; }
/* folder hit in search results: icon + name + note count */
.sr-folder { display: flex; align-items: center; gap: 12px; }
.sr-folder .sr-fic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); }
.sr-folder .sr-fic svg { width: 20px; height: 20px; }
.sr-folder .sr-fmeta { min-width: 0; flex: 1; }
.sr-folder .sr-path { margin-top: 3px; }

.tagcloud { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 2px; }

/* ============================================================
   SETTINGS
   ============================================================ */
.settings { padding: 4px 20px 120px; }
.set-group { margin-top: 22px; }
.set-group-title { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 0 2px 10px; }
.set-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-bottom: 1px solid var(--border); }
.set-row:last-child { border-bottom: none; }
.set-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); flex: 0 0 auto; }
.set-ico svg { width: 18px; height: 18px; }
.set-label { font-size: 15px; font-weight: 600; color: var(--text); }
.set-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.set-right { margin-left: auto; color: var(--muted); display: flex; align-items: center; gap: 8px; }

/* theme segmented */
.theme-seg { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; }
.theme-seg button { border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 7px 13px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.theme-seg button svg { width: 15px; height: 15px; }
.theme-seg button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.toggle { width: 46px; height: 28px; border-radius: 999px; background: var(--border-strong); border: none; cursor: pointer; position: relative; transition: background .2s; flex: 0 0 auto; }
.toggle.on { background: var(--accent); }
.toggle i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: white; transition: transform .2s; box-shadow: 0 1px 3px oklch(0 0 0 / 0.25); }
.toggle.on i { transform: translateX(18px); }

.accent-swatches { display: flex; gap: 10px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid var(--border); transition: transform .12s; position: relative; }
.swatch:active { transform: scale(0.9); }
.swatch.active { border-color: var(--text); }
.swatch.active::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--accent-line); }

/* fade/slide screen transitions */
.screen-enter { animation: screenIn .26s cubic-bezier(.2,.8,.2,1); }
@keyframes screenIn { from { opacity: 0; } to { opacity: 1; } }   /* fade only: a lingering transform:translateX(0) made .screen a containing block for position:fixed, so bottom-sheet dialogs (Delete forever) resolved bottom:0 against the screen box (below the tab bar) and their buttons fell off-screen */
.fade-in { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* toast */
.toast { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 600; padding: 11px 18px; border-radius: 12px; box-shadow: var(--shadow); z-index: 60; display: flex; align-items: center; gap: 8px; animation: slideup .24s cubic-bezier(.2,.8,.2,1); white-space: nowrap; }
.toast svg { width: 16px; height: 16px; }
.toast-act { border: 0; margin-left: 6px; padding: 5px 12px; border-radius: 999px; background: color-mix(in oklab, var(--bg) 22%, transparent); color: var(--bg); font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.toast-act:active { background: color-mix(in oklab, var(--bg) 34%, transparent); }

/* sign-in nudge — shown on home for accounts-less users; dismissible */
.signin-nudge { position: absolute; left: 14px; right: 14px; bottom: 92px; z-index: 40; display: flex; align-items: center; gap: 11px; padding: 12px 12px 12px 15px; background: var(--elevated); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); animation: slideup .24s cubic-bezier(.2,.8,.2,1); }
.signin-nudge > svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; }
.signin-nudge .sn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.signin-nudge .sn-text b { font-size: 13.5px; font-weight: 700; color: var(--text); }
.signin-nudge .sn-text span { font-size: 12px; color: var(--text-2); line-height: 1.35; }
.signin-nudge .sn-go { border: 0; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 11px; flex: 0 0 auto; }
.signin-nudge .sn-x { border: 0; background: transparent; color: var(--muted); padding: 4px; flex: 0 0 auto; display: grid; place-items: center; }
.signin-nudge .sn-x svg { width: 15px; height: 15px; }

/* ============================================================
   NAVBAR (folders home + drill-downs)
   ============================================================ */
.navbar { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.navbar-spacer { flex: 1; }
.iconbtn.on { background: var(--accent-soft); color: var(--accent); }

.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; transition: background .15s, color .15s, transform .1s; }
.avatar:hover { background: var(--surface); color: var(--text); }
.avatar:active { transform: scale(0.92); }
.avatar svg { width: 21px; height: 21px; }

.backbtn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 40px; height: 40px; background: transparent; border: none; color: var(--text); cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; padding: 0 8px; margin-left: -8px; border-radius: 11px; transition: background .14s; }
.backbtn:hover { background: var(--surface-2); }
.backbtn:active { transform: scale(0.94); }
.backbtn svg { width: 21px; height: 21px; }

.navbar-folder { display: flex; flex-direction: column; line-height: 1.12; margin-left: 2px; }
.nf-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.nf-count { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 1px; }

/* inline search bar */
.searchbar { gap: 10px; height: 44px; padding: 0 6px 0 14px; background: var(--surface-2); border: 1px solid var(--accent-line); border-radius: 14px; animation: searchGrow .2s ease; }
@keyframes searchGrow { from { opacity: 0.4; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
.searchbar input { flex: 1; border: none; background: transparent; outline: none; font-family: inherit; font-size: 15px; color: var(--text); min-width: 0; }
.searchbar input::placeholder { color: var(--muted); }
.searchbar .iconbtn { width: 34px; height: 34px; flex: 0 0 34px; }

/* sort dropdown */
.sort-wrap { position: relative; }
.menu-scrim { position: fixed; inset: 0; z-index: 40; }
.sort-menu { position: absolute; top: 46px; right: 0; z-index: 50; background: var(--elevated); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow); padding: 5px; min-width: 184px; animation: slideup .16s ease; }
.sort-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; padding: 10px 12px; border: none; background: transparent; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; border-radius: 9px; }
.sort-opt:hover { background: var(--surface-2); }
.sort-opt.active { color: var(--accent); }
.sort-opt svg { width: 17px; height: 17px; }

/* folder list */
.folder-page { padding: 10px 20px var(--fab-clear); }
.folder-list { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.folder-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 14px 14px 14px; border: none; border-bottom: 1px solid var(--border); background: transparent; font-family: inherit; cursor: pointer; text-align: left; transition: background .14s; }
.folder-row:last-child { border-bottom: none; }
.folder-row:hover { background: var(--surface-2); }
.folder-row:active { background: var(--accent-soft); }
.fr-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); flex: 0 0 auto; }
.fr-ico.all { background: var(--accent-soft); color: var(--accent); }
.fr-ico svg { width: 20px; height: 20px; }
.fr-name { font-size: 15.5px; font-weight: 600; color: var(--text); flex: 1; letter-spacing: -0.01em; }
.fr-count { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

.nc-date { font-size: 12px; color: var(--muted); font-weight: 600; }

/* tab bar — two tabs centered */
.tabbar.two { justify-content: stretch; gap: 0; }
.tabbar.two .tab { flex: 1 1 0; width: auto; gap: 5px; }
.tabbar.three { justify-content: stretch; gap: 0; }
.tabbar.three .tab { flex: 1 1 0; width: auto; gap: 5px; }

/* Tasks screen */
.task-list { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.task-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.task-row.is-done { opacity: 0.62; }
.task-box { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 2px solid var(--border-strong); background: transparent; position: relative; cursor: pointer; transition: background .12s, border-color .12s; }
.task-box.on { background: var(--accent); border-color: var(--accent); }
.task-box.on::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.task-main { flex: 1; min-width: 0; cursor: pointer; }
.task-text { font-size: 15px; line-height: 1.4; color: var(--text); word-break: break-word; }
.task-row.is-done .task-text { text-decoration: line-through; color: var(--muted); }
.task-note { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.task-note svg { width: 13px; height: 13px; flex: 0 0 auto; }
.task-donehdr { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 4px; background: transparent; border: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.task-donehdr svg { width: 16px; height: 16px; }
.task-allclear { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 40px 20px; color: var(--muted); font-size: 15px; font-weight: 600; }
.task-allclear svg { width: 18px; height: 18px; color: var(--accent); }

/* profile header */
.profile-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 22px; }
.profile-avatar { width: 78px; height: 78px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 13px; }
.profile-avatar svg { width: 42px; height: 42px; }
.profile-name { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.profile-sub { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.account-card { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.account-photo { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; margin-bottom: 13px; border: 2px solid var(--accent-soft); }
.gbtn { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 22px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.gbtn:active { background: var(--surface-2); }
.gbtn:disabled { opacity: 0.55; cursor: default; }
.gbtn-g { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; font-weight: 800; font-family: var(--font-ui); color: #4285F4; font-size: 14px; }
.account-hint { margin-top: 11px; font-size: 12px; color: var(--muted); max-width: 260px; line-height: 1.45; }
.account-out { margin-top: 15px; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 19px; border: 1px solid var(--border); background: none; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.account-out svg { width: 15px; height: 15px; }

/* community plugins screen */
.plg-warn { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.45; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; margin-bottom: 16px; }
.plg-warn svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: oklch(0.62 0.16 60); }
.plg-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 24px 0; }
.plg-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 12px; background: var(--surface); }
.plg-card.off { opacity: 0.6; }
.plg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.plg-name { font-size: 16px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
.plg-ver { font-size: 11px; font-weight: 600; color: var(--muted); font-family: var(--font-mono); }
.plg-author { font-size: 12px; color: var(--muted); margin-top: 2px; }
.plg-desc { font-size: 13.5px; color: var(--text); opacity: 0.85; line-height: 1.45; margin-top: 9px; }
.plg-cmds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.plg-cmd { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 17px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.plg-cmd svg { width: 13px; height: 13px; }
.plg-uninstall { margin-top: 12px; background: none; border: none; color: oklch(0.58 0.19 27); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; }
.plg-add { margin-top: 14px; }
.plg-code { width: 100%; min-height: 150px; border: 1px solid var(--border); border-radius: 12px; padding: 12px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; background: var(--surface-2); color: var(--text); resize: vertical; }
.plg-add-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.plg-doc { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.plg-doc code { font-family: var(--font-mono); font-size: 11.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; color: var(--accent); }

/* plugin: code-copy button (markdown post-processor demo) */
.md .codeblock { position: relative; }
.cc-btn { position: absolute; top: 8px; right: 8px; height: 26px; padding: 0 11px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; opacity: 0.85; }
.cc-btn:active { background: var(--surface-2); }

/* vault switcher (settings) */
.vault-card { padding: 0; overflow: hidden; }
.vault-current { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; }
.vault-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: 0 0 auto; }
.vault-ico svg { width: 21px; height: 21px; }
.vault-meta { flex: 1; display: flex; flex-direction: column; }
.vault-label { font-size: 11px; color: var(--muted); font-weight: 600; }
.vault-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.vault-list { border-top: 1px solid var(--border); padding: 6px; }
.vault-row { display: flex; align-items: center; gap: 4px; border-radius: 10px; }
.vault-row.active { background: var(--accent-soft); }
.vault-pick { flex: 1; display: flex; align-items: center; gap: 10px; padding: 11px 10px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14.5px; color: var(--text); text-align: left; }
.vault-pick svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }
.vault-act { width: 34px; height: 34px; display: grid; place-items: center; background: none; border: none; cursor: pointer; color: var(--muted); border-radius: 8px; flex: 0 0 auto; }
.vault-act svg { width: 16px; height: 16px; }
.vault-act.danger { color: oklch(0.58 0.19 27); }
.vault-row.editing { padding: 6px 8px; gap: 8px; }
.vault-input { flex: 1; height: 36px; border: 1px solid var(--accent-line); border-radius: 9px; padding: 0 11px; font-family: inherit; font-size: 14.5px; background: var(--surface); color: var(--text); outline: none; }
.vault-new { display: flex; align-items: center; gap: 9px; width: 100%; padding: 12px 10px; background: none; border: none; cursor: pointer; color: var(--accent); font-family: inherit; font-size: 14px; font-weight: 600; }
.vault-new svg { width: 17px; height: 17px; }

/* login gate (#3) */
.login-screen { display: grid; place-items: center; height: 100%; padding: 24px; }
.login-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; max-width: 300px; }
.login-logo { width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(135deg, #6e7dff, #4d5de0); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(91,108,240,0.4); margin-bottom: 4px; }
.login-logo svg { width: 38px; height: 38px; }
.login-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.login-sub { font-size: 14px; color: var(--muted); line-height: 1.5; }
.login-gbtn { margin-top: 10px; }
.login-err { display: flex; align-items: center; gap: 7px; font-size: 13px; color: oklch(0.58 0.19 27); }
.login-err svg { width: 15px; height: 15px; flex: 0 0 auto; }
.login-skip { margin-top: 4px; background: none; border: none; color: var(--muted); font-family: inherit; font-size: 13.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.login-legal { margin-top: 14px; font-size: 12px; line-height: 1.55; color: var(--muted); }
.login-legal-link { background: none; border: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* legal (privacy / terms) sheet */
.legal-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(15,18,30,0.5); display: flex; align-items: flex-end; justify-content: center; }
.legal-doc { width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,0.25); animation: sheetup 0.22s cubic-bezier(0.2,0.7,0.2,1); }
.legal-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; border-bottom: 1px solid var(--border); }
.legal-h-title { flex: 1; font-size: 17px; font-weight: 700; color: var(--text); }
.legal-x { flex: 0 0 auto; width: 32px; height: 32px; border: none; background: var(--faint); border-radius: 10px; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.legal-x svg { width: 18px; height: 18px; }
.legal-body { overflow-y: auto; padding: 14px 18px 28px; -webkit-overflow-scrolling: touch; }
.legal-updated { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.legal-sec { margin-bottom: 16px; }
.legal-sh { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.legal-p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0 0 7px; }
.account-actions { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; justify-content: center; }
.account-actions .account-out { margin-top: 0; }
.account-sync { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 19px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.account-sync svg { width: 15px; height: 15px; }

/* ============================================================
   SELECTION ACTION BAR + MENUS
   ============================================================ */
.selbar { animation: fadeIn .14s ease; }
.selbar-label { font-size: 15px; font-weight: 700; margin-left: 4px; letter-spacing: -0.01em; }
.menu-head { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 5px; }
.iconbtn.danger { color: oklch(0.58 0.19 27); }
[data-theme="dark"] .iconbtn.danger { color: oklch(0.70 0.17 27); }
.sort-opt.danger { color: oklch(0.58 0.19 27); }
[data-theme="dark"] .sort-opt.danger { color: oklch(0.70 0.17 27); }
.sort-opt.danger svg { color: inherit; }

/* ============================================================
   FAB CREATE MENU
   ============================================================ */
.fab { transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.fab.open { transform: rotate(45deg); z-index: 50; }
.fab.open:active { transform: rotate(45deg) scale(0.9); }
.fab-menu { position: absolute; right: 20px; bottom: 158px; z-index: 50; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.fab-opt { display: inline-flex; align-items: center; gap: 11px; padding: 0 17px 0 11px; height: 50px; border-radius: 15px; background: var(--elevated); border: 1px solid var(--border); box-shadow: var(--shadow); font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--text); cursor: pointer; animation: slideup .18s ease backwards; }
.fab-opt-ico { width: 32px; height: 32px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); }
.fab-opt-ico.accent { background: var(--accent-soft); color: var(--accent); }
.fab-opt-ico svg { width: 18px; height: 18px; }

/* ============================================================
   MODAL (new folder)
   ============================================================ */
.modal-scrim { position: absolute; inset: 0; background: oklch(0 0 0 / 0.42); z-index: 70; display: grid; place-items: center; padding: 26px; animation: fadeIn .15s ease; }
.modal { width: 100%; background: var(--elevated); border: 1px solid var(--border-strong); border-radius: 20px; box-shadow: var(--shadow); padding: 20px; animation: slideup .2s cubic-bezier(.2,.8,.2,1); }
.modal-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.modal-input { width: 100%; margin: 14px 0; height: 48px; padding: 0 15px; border-radius: 13px; border: 1px solid var(--border-strong); background: var(--surface-2); font-family: inherit; font-size: 15px; color: var(--text); outline: none; }
.modal-input:focus { border-color: var(--accent-line); background: var(--surface); }
.modal-actions { display: flex; gap: 10px; }

/* ============================================================
   FOLDER GRID + NOTE VIEW MODES
   ============================================================ */
.folder-row { user-select: none; -webkit-user-select: none; }
.folder-row.selected { background: var(--accent-soft); }

.folder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.folder-tile { display: flex; flex-direction: column; align-items: flex-start; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; cursor: pointer; box-shadow: var(--shadow-sm); font-family: inherit; color: var(--text); text-align: left; transition: border-color .15s, transform .12s; user-select: none; -webkit-user-select: none; }
.folder-tile:hover { border-color: var(--border-strong); }
.folder-tile:active { transform: scale(0.98); }
.folder-tile.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); }
.ft-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); margin-bottom: 12px; }
.ft-ico.all { background: var(--accent-soft); color: var(--accent); }
.ft-ico svg { width: 22px; height: 22px; }
.ft-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.ft-count { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }

.note-card { user-select: none; -webkit-user-select: none; }
.note-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); }
.feed.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.feed.grid .nc-snippet { -webkit-line-clamp: 3; min-height: 4.65em; }
.feed.grid .nc-meta { gap: 6px; margin-top: auto; padding-top: 13px; }
.feed.grid .note-card { display: flex; flex-direction: column; }
.feed.grid .nc-date { display: none; }
.feed.list .note-card { padding: 13px 15px; }
.feed.list .nc-title { -webkit-line-clamp: 1; min-height: 1.3em; }
.feed.list .nc-snippet { -webkit-line-clamp: 1; margin-top: 5px; min-height: 1.55em; }

/* ============================================================
   NOTE DETAIL — meta footer
   ============================================================ */
.nd-footer { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 9px 16px; align-items: center; }
.ndf-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ndf-item svg { width: 14px; height: 14px; color: var(--faint); }
.ndf-tags { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; margin-top: 2px; }
.ndf-tags .nc-tag { cursor: pointer; }

/* ============================================================
   MARKDOWN LISTS (ordered / nested) + HIGHLIGHT
   ============================================================ */
.md .md-list { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; }
.md .md-li { display: flex; align-items: flex-start; gap: 9px; color: var(--text); line-height: 1.55; }
.md .md-li .li-marker { flex: 0 0 auto; min-width: 16px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.md .md-li.ord .li-marker { color: var(--accent); font-family: var(--font-mono); font-size: 0.9em; }
.md .md-li .li-body { flex: 1; }
.md .md-li.task.done .li-body { color: var(--muted); text-decoration: line-through; }
mark.hl { background: var(--accent-soft); color: var(--text); padding: 0 3px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ============================================================
   EMBEDS (transclusion / attachments) + CALLOUTS
   ============================================================ */
.embed-note { border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: 12px; padding: 12px 14px; margin-top: 13px; cursor: pointer; background: var(--surface-2); transition: border-color .15s, transform .12s; }
.embed-note:active { transform: scale(0.99); }
.embed-note.broken { border-left-color: var(--faint); opacity: 0.65; cursor: default; }
.embed-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); }
.embed-head > svg:first-child { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
.embed-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 1px 6px; border-radius: 6px; }
.embed-body { margin-top: 9px; font-size: 14px; opacity: 0.95; pointer-events: none; }
.embed-body > * { margin-top: 6px; }
.embed-body > *:first-child { margin-top: 0; }

.embed-audio { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-top: 13px; background: var(--surface-2); }
.ea-play { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: white; border: none; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.ea-play svg { width: 18px; height: 18px; margin-left: 2px; }
.ea-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; }
.ea-wave span { flex: 1; background: var(--accent-line); border-radius: 2px; min-height: 10%; transform-origin: center; transition: background .12s linear; }
.ea-wave span.ea-on { background: var(--accent); }
.embed-audio.playing .ea-wave span.ea-on { animation: eq 0.85s ease-in-out infinite alternate; }
@keyframes eq { from { transform: scaleY(0.32); } to { transform: scaleY(1); } }
.ea-time { font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-weight: 600; flex: 0 0 auto; min-width: 34px; text-align: right; }

/* fullscreen image viewer (tap a screenshot to open) */
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,0.92); display: grid; place-items: center; padding: 24px; animation: fadein 0.15s ease; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lightbox-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,0.16); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lightbox-close svg { width: 22px; height: 22px; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* move-to-folder bottom sheet */
.sheet-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.4); animation: fadein 0.15s ease; }
/* reminder picker */
.rem-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--elevated); border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 -8px 30px rgba(0,0,0,0.25); padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); animation: sheetup .2s ease; }
.rem-head { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.rem-head svg { width: 19px; height: 19px; color: var(--accent); }
.rem-current { margin-top: 6px; font-size: 13px; color: var(--accent); font-weight: 600; }
.rem-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.rem-presets button { border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 600; padding: 9px 13px; border-radius: 11px; }
.rem-presets button:active { background: var(--accent-soft); border-color: var(--accent-line); }
.rem-input { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-family: inherit; font-size: 15px; outline: none; }
.rem-input:focus { border-color: var(--accent-line); background: var(--surface); }
.rem-foot { display: flex; align-items: center; gap: 4px; margin-top: 16px; }
.rem-remove { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #d64545; font-weight: 700; font-size: 14px; }
.rem-remove svg { width: 15px; height: 15px; }
.rem-cancel { border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; padding: 10px 12px; }
.rem-ok { border: 0; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; padding: 10px 22px; border-radius: 12px; }
.rem-ok:disabled { opacity: 0.45; }
/* Calendar agenda */
.cal-agenda { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.cal-day { display: flex; flex-direction: column; }
.cal-day-head { font-size: 12.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 2px 8px; }
.cal-day-head.today { color: var(--accent); }
.cal-ev { display: flex; align-items: flex-start; gap: 12px; padding: 11px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; margin-bottom: 8px; }
.cal-ev-time { flex: 0 0 50px; font-size: 13px; font-weight: 700; color: var(--accent); padding-top: 1px; font-variant-numeric: tabular-nums; }
.cal-ev-body { flex: 1; min-width: 0; }
.cal-ev-title { font-size: 15px; color: var(--text); line-height: 1.35; word-break: break-word; }
.cal-ev-loc { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.cal-ev-loc svg { width: 12px; height: 12px; flex: 0 0 auto; }
.cal-ev-del { flex: 0 0 auto; border: 0; background: transparent; color: var(--faint); padding: 4px; }
.cal-ev-del svg { width: 15px; height: 15px; }
.ev-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ev-row .rem-input { margin: 0; }
.ev-allday { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--text); }
.ev-allday input { width: 18px; height: 18px; accent-color: var(--accent); }

/* danger variant for confirm sheets (Delete forever) */
.rem-ok.danger { background: #d64545; }

/* version history sheet */
.hist-sheet { max-height: 68vh; display: flex; flex-direction: column; }
.hist-empty { margin: 14px 2px 6px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.hist-list { margin-top: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.hist-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; }
.hist-info { flex: 1; min-width: 0; }
.hist-meta { display: flex; align-items: center; gap: 8px; }
.hist-time { font-size: 12.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.hist-badge { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); padding: 2px 7px; border-radius: 999px; }
.hist-badge.c { color: #d64545; background: color-mix(in oklab, #d64545 13%, transparent); }
.hist-prev { margin-top: 3px; font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-restore { flex: 0 0 auto; border: 0; background: color-mix(in oklab, var(--accent) 13%, transparent); color: var(--accent); font-weight: 800; font-size: 12.5px; padding: 8px 13px; border-radius: 11px; }

/* backups screen */
.bk-note { margin: 6px 2px 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.bk-list { display: flex; flex-direction: column; gap: 8px; }
.bk-row { display: flex; align-items: center; gap: 12px; padding: 12px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; }
.bk-row > svg { width: 19px; height: 19px; color: var(--accent); flex: 0 0 auto; }
.bk-info { flex: 1; min-width: 0; }
.bk-date { font-size: 14px; font-weight: 700; color: var(--text); }
.bk-sub { margin-top: 1px; font-size: 12.5px; color: var(--muted); }
.bk-restore { flex: 0 0 auto; border: 0; background: color-mix(in oklab, var(--accent) 13%, transparent); color: var(--accent); font-weight: 800; font-size: 12.5px; padding: 8px 13px; border-radius: 11px; }
.bk-restore:disabled { opacity: 0.4; }

/* daily-note header: ‹ date › navigation */
.nd-title.nd-date { display: flex; align-items: center; gap: 4px; }
.nd-title .day-title { flex: 1; text-align: center; min-width: 0; font-size: 22px; }
.day-nav { border: 0; background: var(--surface); color: var(--text-2); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; }
.day-nav svg { width: 18px; height: 18px; }
.day-nav:active { background: var(--border); }
.nc-rem { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); }
.nc-rem svg { width: 13px; height: 13px; }
/* archived = anti-pin: stays in the list but dimmed + sunk to the bottom */
.note-card.archived { opacity: 0.55; }
.note-card.archived.selected { opacity: 1; }
.folder-row.archived, .folder-tile.archived { opacity: 0.58; }
.folder-row.archived.selected, .folder-tile.archived.selected { opacity: 1; }
/* header icon with a count badge (Tasks shortcut) */
.iconbtn.ib-wrap { position: relative; overflow: visible; }
.ib-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; border-radius: 9px; border: 2px solid var(--bg); }
.move-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; background: var(--surface); border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 8px 0 calc(16px + env(safe-area-inset-bottom)); max-height: 62%; display: flex; flex-direction: column; box-shadow: 0 -8px 30px rgba(0,0,0,0.25); animation: sheetup 0.2s ease; }
@keyframes sheetup { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--border); margin: 6px auto 4px; flex: 0 0 auto; }
.sheet-head { font-weight: 700; font-size: 15px; padding: 8px 20px 10px; flex: 0 0 auto; }
.move-list { overflow-y: auto; padding: 0 10px 4px; }
.move-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 12px; background: none; border: none; border-radius: 12px; cursor: pointer; color: var(--text); font-family: inherit; font-size: 15px; text-align: left; }
.move-opt:active { background: var(--surface-2); }
.move-opt svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; }
.move-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-empty { padding: 18px 20px; color: var(--muted); }

.embed-image { margin-top: 13px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.embed-image img { width: 100%; display: block; max-height: 260px; object-fit: cover; }
.embed-image .img-ph { height: 150px; display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--surface) 10px, var(--surface) 20px); color: var(--muted); }
.embed-image .img-ph svg { width: 30px; height: 30px; }
.embed-image .ea-cap { display: block; font-size: 11.5px; font-family: var(--font-mono); color: var(--muted); padding: 7px 12px; border-top: 1px solid var(--border); background: var(--surface); }

.embed-file { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 13px; background: var(--surface-2); }
.ef-ico { width: 36px; height: 36px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: 0 0 auto; }
.ef-ico svg { width: 18px; height: 18px; }
.ef-meta { flex: 1; display: flex; flex-direction: column; }
.ef-name { font-size: 14px; font-weight: 600; color: var(--text); }
.ef-size { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }

.callout { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 12px 14px; margin-top: 13px; background: var(--accent-soft); }
.callout-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.callout-head svg { width: 16px; height: 16px; }
.callout-body { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--text); }

/* ============================================================
   EDITOR — attachments + recording
   ============================================================ */
.att-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); padding: 4px 6px 4px 9px; border-radius: 8px; }
.att-chip > svg { width: 13px; height: 13px; color: var(--accent); }
.att-x { width: 18px; height: 18px; border: none; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: 5px; }
.att-x svg { width: 12px; height: 12px; color: var(--muted); }
.tb-div { width: 1px; height: 22px; background: var(--border); margin: 0 4px; flex: 0 0 auto; }
.tb-spacer { flex: 1 1 auto; }
.tbtn.rec { color: oklch(0.60 0.21 25); background: oklch(0.60 0.21 25 / 0.12); }

.rec-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.rec-dot { width: 11px; height: 11px; border-radius: 50%; background: oklch(0.60 0.22 25); flex: 0 0 auto; animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.rec-time { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); flex: 0 0 auto; min-width: 38px; }
.rec-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 26px; }
.rec-wave span { flex: 1; background: oklch(0.60 0.22 25 / 0.55); border-radius: 2px; height: 30%; animation: recbar .8s ease-in-out infinite; }
@keyframes recbar { 0%, 100% { height: 18%; } 50% { height: 90%; } }
.rec-cancel, .rec-stop { width: 38px; height: 38px; border-radius: 11px; border: none; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.rec-cancel { background: var(--surface-2); color: var(--text-2); }
.rec-stop { background: oklch(0.60 0.22 25); color: white; }
.rec-cancel svg, .rec-stop svg { width: 18px; height: 18px; }

/* selection check indicators + attachment marker */
.nc-att { display: inline-flex; align-items: center; color: var(--muted); }
.nc-att svg { width: 14px; height: 14px; }
.nc-check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; background: var(--surface); }
.nc-check.on { background: var(--accent); border-color: var(--accent); }
.nc-check svg { width: 13px; height: 13px; color: white; }
.fr-check { width: 38px; height: 38px; border-radius: 11px; border: 2px solid var(--border-strong); display: grid; place-items: center; flex: 0 0 auto; }
.fr-check.on { background: var(--accent); border-color: var(--accent); }
.fr-check svg { width: 16px; height: 16px; color: white; }

/* ============================================================
   COLORS + NESTED FOLDER SECTIONS + PIN INDICATORS
   ============================================================ */
.note-card.pinned::before { display: none; }
.nc-color { position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; }
.note-detail { position: relative; }
.nd-colorbar { position: absolute; left: -2px; top: 6px; width: 4px; height: 30px; border-radius: 0 3px 3px 0; }

.color-row { display: flex; gap: 8px; padding: 4px 12px 8px; }
.color-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; transition: transform .12s; }
.color-swatch.none { border-color: var(--border-strong); background: var(--surface-2); }
.color-swatch svg { width: 12px; height: 12px; color: var(--muted); }
.color-swatch:active { transform: scale(0.88); }
.menu-sep { height: 1px; background: var(--border); margin: 4px 8px; }

.folder-tile { position: relative; }
.ft-pin { position: absolute; top: 12px; right: 12px; color: var(--accent); }
.ft-pin svg { width: 14px; height: 14px; display: block; }

.section-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 4px 2px 10px; }
.section-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 10px; }
.section-row .iconbtn { width: 32px; height: 32px; }

/* drag to reorder */
.note-card.dragging { box-shadow: 0 12px 32px oklch(0 0 0 / 0.28); transform: scale(1.03); opacity: 0.96; z-index: 20; border-color: var(--accent); }
.scroll.drag-lock { touch-action: none; overflow: hidden; }
.drop-line { position: absolute; left: 0; right: 0; height: 2.5px; background: var(--accent); border-radius: 2px; z-index: 15; pointer-events: none; transform: translateY(-1px); }
.drop-line::before { content: ""; position: absolute; left: -2px; top: -2.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* editor background picker (in toolbar) */
.bg-pop { position: fixed; left: 12px; right: 12px; bottom: 62px; z-index: 50; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; padding: 14px; background: var(--elevated); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow); animation: slideup .16s ease; }
.bg-pop-label { flex-basis: 100%; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.bg-swatch { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--border-strong); cursor: pointer; display: grid; place-items: center; transition: transform .12s; flex: 0 0 auto; }
.bg-swatch.none { background: var(--surface-2); }
.bg-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); }
.bg-swatch:active { transform: scale(0.88); }
.bg-swatch svg { width: 15px; height: 15px; color: var(--muted); }

/* editor font picker */
.font-pop { position: absolute; left: 12px; right: 12px; bottom: 62px; z-index: 50; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; padding: 14px; background: var(--elevated); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow); animation: slideup .16s ease; }
.font-card { padding: 9px 14px; border-radius: 11px; border: 2px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; font-size: 16px; font-weight: 600; transition: transform .12s, border-color .15s; flex: 0 0 auto; }
.font-card:active { transform: scale(0.95); }
.font-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); }

/* typography panel — full bottom sheet */
.type-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--elevated); border-top: 1px solid var(--border-strong); border-radius: 20px 20px 0 0; box-shadow: var(--shadow); padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); animation: slideup .2s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; gap: 7px; }
.type-head { display: flex; align-items: center; justify-content: center; position: relative; padding: 10px 0 6px; font-size: 16px; font-weight: 800; }
.type-done { position: absolute; right: -4px; top: 4px; width: 38px; height: 38px; border: none; background: transparent; color: var(--accent); cursor: pointer; display: grid; place-items: center; }
.type-done svg { width: 22px; height: 22px; }
.turn-row { display: flex; gap: 7px; }
.turn-btn { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; height: 40px; border: none; background: var(--surface-2); border-radius: 11px; color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s; }
.turn-btn svg { width: 17px; height: 17px; }
.turn-btn:active { background: var(--accent-soft); color: var(--accent); }
.type-block { display: flex; align-items: center; gap: 9px; }
.fmt-group { display: flex; gap: 4px; background: var(--surface-2); border-radius: 11px; padding: 4px; flex: 1; }
.fmt-btn { flex: 1; height: 36px; border: none; background: transparent; border-radius: 8px; font-size: 16px; font-weight: 700; color: var(--text); cursor: pointer; transition: background .12s; }
.fmt-btn:active { background: var(--accent-soft); color: var(--accent); }
.fmt-i { font-style: italic; } .fmt-u { text-decoration: underline; } .fmt-s { text-decoration: line-through; }
.size-group { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); border-radius: 13px; padding: 5px 8px; flex: 0 0 auto; }
.size-group > svg { width: 20px; height: 20px; color: var(--muted); }
.size-group button { width: 34px; height: 34px; border: none; background: var(--surface); border-radius: 50%; font-size: 18px; font-weight: 600; color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm); }
.size-group button:active { background: var(--accent-soft); }
.size-group span { min-width: 24px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.colorline { background: var(--surface-2); border-radius: 11px; padding: 5px 9px; gap: 8px; }
.cl-ind { width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: 0 0 auto; color: var(--text); }
.cl-ind.hl { background: #fff3a0; color: #2a2a2a; }
.cl-ind.tc { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cl-div { width: 1px; height: 28px; background: var(--border); flex: 0 0 auto; }
.cl-swatches { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; align-items: center; }
.dot { width: 27px; height: 27px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; flex: 0 0 auto; display: grid; place-items: center; transition: transform .12s; }
.dot.none { border-color: var(--border-strong); background: var(--surface); }
.dot.active { box-shadow: 0 0 0 3px var(--accent); }
.dot:active { transform: scale(0.88); }
.dot svg { width: 15px; height: 15px; color: var(--muted); }
.type-fonts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; max-height: 168px; overflow-y: auto; scrollbar-width: none; }
.type-fonts::-webkit-scrollbar { display: none; }
.type-fonts .font-card { height: 52px; display: grid; place-items: center; font-size: 16px; border-radius: 12px; padding: 0 6px; overflow: hidden; white-space: nowrap; }

/* ============================================================
   Note password lock + Google Calendar integration
   ============================================================ */

/* disabled buttons should read as inactive */
.btn:disabled { opacity: 0.45; cursor: default; }

/* active state for topbar icon buttons (e.g. locked note) */
.iconbtn.on { background: var(--accent-soft); color: var(--accent); }

/* locked-note preview on the card */
.nc-snippet.nc-locked { display: flex; align-items: center; gap: 7px; color: var(--muted); font-style: italic; -webkit-line-clamp: none; min-height: 0; }
.nc-snippet.nc-locked svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* modal extras (password set dialog) */
.modal-hint { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.modal-err { font-size: 12.5px; color: oklch(0.6 0.2 25); margin: -4px 0 6px; font-weight: 600; }

/* full-screen lock gate inside a protected note */
.lock-gate { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 28px 40px; }
.lock-gate .lg-ico { width: 62px; height: 62px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 18px; }
.lock-gate .lg-ico svg { width: 28px; height: 28px; }
.lock-gate .lg-title { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; }
.lock-gate .lg-sub { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 8px; max-width: 260px; }
.lock-gate .lg-input { width: 100%; max-width: 260px; margin-top: 20px; height: 48px; padding: 0 15px; border-radius: 13px; border: 1px solid var(--border-strong); background: var(--surface-2); font-family: inherit; font-size: 15px; color: var(--text); outline: none; text-align: center; }
.lock-gate .lg-input:focus { border-color: var(--accent-line); background: var(--surface); }
.lock-gate .lg-input.err { border-color: oklch(0.6 0.2 25); }
.lock-gate .lg-err { font-size: 12.5px; color: oklch(0.6 0.2 25); margin-top: 8px; font-weight: 600; }

/* Google Calendar settings card */
.gcal-row { display: flex; align-items: center; gap: 12px; padding: 12px 0 10px; }
.gcal-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: 0 0 auto; }
.gcal-ico svg { width: 20px; height: 20px; }
.gcal-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.gcal-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.gcal-input { width: 100%; height: 44px; padding: 0 13px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-2); font-family: var(--font-mono); font-size: 12.5px; color: var(--text); outline: none; }
.gcal-input:focus { border-color: var(--accent-line); background: var(--surface); }
.gcal-saved { display: flex; align-items: center; gap: 8px; }
.gcal-mono { flex: 1; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcal-link { background: none; border: none; color: var(--accent); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; flex: 0 0 auto; }
.gcal-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.gcal-range { display: flex; align-items: center; gap: 7px; }
.gcal-range-lbl { font-size: 13px; color: var(--muted); font-weight: 600; margin-right: 2px; }
.gcal-chip { flex: 1; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .14s; }
.gcal-chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.gcal-status { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 600; margin-top: 11px; line-height: 1.4; }
.gcal-status svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.gcal-status.ok { color: oklch(0.55 0.13 155); }
.gcal-status.err { color: oklch(0.6 0.2 25); }
.gcal-help { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border); }
.gcal-origin { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; word-break: break-all; }

/* language picker in Settings (i18n.jsx) */
.lang-select { appearance: none; -webkit-appearance: none; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; font-size: 14px; font-family: inherit; max-width: 170px; cursor: pointer; }

.pro-bar { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-top: 6px; }
.pro-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; }

/* Lightsidian Pro paywall */
.pro-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.pro-modal { background: var(--surface); width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 24px 20px 22px; position: relative; }
@media (min-width: 520px) { .pro-scrim { align-items: center; } .pro-modal { border-radius: 20px; } }
.pro-x { position: absolute; top: 14px; right: 14px; background: var(--surface-2); border: none; border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-2); cursor: pointer; }
.pro-hero { text-align: center; margin-bottom: 18px; }
.pro-badge { font-size: 26px; color: var(--accent); }
.pro-h1 { font-size: 24px; font-weight: 800; margin-top: 4px; }
.pro-sub { color: var(--muted); font-size: 14px; margin-top: 6px; line-height: 1.4; }
.pro-table { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.pro-row { display: grid; grid-template-columns: 1fr 74px 74px; align-items: center; padding: 10px 14px; font-size: 13.5px; border-top: 1px solid var(--border); }
.pro-row:first-child { border-top: none; }
.pro-head { font-weight: 700; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.pf-name { color: var(--text); }
.pf-free, .pf-pro { text-align: center; display: flex; justify-content: center; }
.pf-pro { color: var(--accent); font-weight: 600; }
.pf-no { color: var(--faint); }
.pro-plans { display: flex; gap: 8px; margin-bottom: 16px; }
.pro-plan { flex: 1; background: var(--surface-2); border: 2px solid transparent; border-radius: 14px; padding: 13px 6px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
.pro-plan.on { border-color: var(--accent); background: var(--accent-soft); }
.pp-best { position: absolute; top: -9px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 7px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.pp-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.pp-price { font-size: 18px; font-weight: 800; color: var(--text); }
.pp-price small { font-size: 11px; font-weight: 500; color: var(--muted); }
.pp-note { font-size: 10px; color: var(--accent); text-align: center; line-height: 1.2; }
.pro-cta { width: 100%; background: var(--accent); color: #fff; border: none; border-radius: 14px; padding: 15px; font-size: 16px; font-weight: 700; cursor: pointer; }
.pro-fine { text-align: center; color: var(--faint); font-size: 11px; margin-top: 12px; line-height: 1.3; }