:root {
  --editor-font-size: 16px;
  --font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
}

body[data-theme="light"] {
  --bg: #f4efe4;
  --panel: rgba(255, 252, 247, 0.88);
  --panel-strong: #fffaf1;
  --surface: rgba(255, 255, 255, 0.72);
  --line: rgba(49, 41, 28, 0.12);
  --line-strong: rgba(49, 41, 28, 0.18);
  --text: #2f261c;
  --muted: #756652;
  --accent: #0f766e;
  --accent-strong: #115e59;
  --accent-soft: rgba(15, 118, 110, 0.1);
  --warning: #9a3412;
  --shadow: 0 18px 55px rgba(67, 45, 18, 0.12);
  --glow: rgba(15, 118, 110, 0.2);
  --radius: 24px;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.85), transparent 30%),
    linear-gradient(135deg, #efe4cf 0%, #f7f2e9 45%, #e8f2ef 100%);
}

body[data-theme="dark"] {
  --bg: #0b1220;
  --panel: rgba(17, 28, 47, 0.9);
  --panel-strong: #0f1c34;
  --surface: rgba(21, 36, 62, 0.86);
  --line: rgba(148, 163, 184, 0.2);
  --line-strong: rgba(43, 59, 94, 0.92);
  --text: #d9e3f0;
  --muted: #8fa3c2;
  --accent: #60a5fa;
  --accent-strong: #1d4ed8;
  --accent-soft: rgba(96, 165, 250, 0.18);
  --warning: #fda4af;
  --shadow: 0 24px 54px rgba(8, 15, 35, 0.62);
  --glow: rgba(37, 99, 235, 0.26);

  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.16), transparent 26%),
    radial-gradient(circle at bottom right, rgba(29, 78, 216, 0.16), transparent 24%),
    linear-gradient(145deg, #0b1220 0%, #0d1728 42%, #111c2f 100%);
}

body[data-theme="noteeli"] {
  --bg: #08111a;
  --panel: rgba(15, 29, 43, 0.92);
  --panel-strong: #14273b;
  --surface: rgba(20, 39, 59, 0.8);
  --line: rgba(140, 188, 234, 0.14);
  --line-strong: rgba(140, 188, 234, 0.26);
  --text: #edf3f8;
  --muted: #9db0c2;
  --accent: #f2b01d;
  --accent-strong: #d49a00;
  --accent-soft: rgba(242, 176, 29, 0.15);
  --warning: #f87171;
  --shadow: 0 28px 90px rgba(1, 8, 18, 0.46);
  --glow: rgba(64, 158, 255, 0.18);
  --radius: 24px;

  background:
    radial-gradient(circle at 15% 8%, rgba(33, 94, 149, 0.34), transparent 26%),
    radial-gradient(circle at 88% 0%, rgba(242, 176, 29, 0.12), transparent 20%),
    radial-gradient(circle at 80% 25%, rgba(75, 143, 212, 0.12), transparent 18%),
    linear-gradient(180deg, #08111a 0%, #09131d 36%, #070e15 100%);
}

body[data-theme="webnote"] {
  --bg: #08111a;
  --panel: rgba(15, 29, 43, 0.9);
  --panel-strong: #0b1722;
  --surface: rgba(20, 39, 59, 0.72);
  --line: rgba(140, 188, 234, 0.14);
  --line-strong: rgba(140, 188, 234, 0.26);
  --text: #edf3f8;
  --muted: #9db0c2;
  --accent: #f2b01d;
  --accent-strong: #d49a00;
  --accent-soft: rgba(242, 176, 29, 0.14);
  --warning: #f87171;
  --shadow: 0 28px 90px rgba(1, 8, 18, 0.46);
  --glow: rgba(64, 158, 255, 0.18);
  --radius: 18px;

  /* Faithful to the web-noteeli landing: deep navy gradient with a soft
     warm gold haze in the top-left, no grid pattern. */
  background:
    linear-gradient(120deg, rgba(242, 176, 29, 0.12), transparent 34%),
    linear-gradient(180deg, #08111a 0%, #09131d 42%, #070e15 100%);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 14px;
}

/* ── Themed scrollbars ───────────────────────────────────────
   Pulls colours from per-theme CSS variables so the scrollbar tones
   itself to the active palette instead of using the bright system
   default. Covers Firefox (scrollbar-width/color) and Chromium/Safari
   (::-webkit-scrollbar). Applies broadly via `*` so editors
   (Toast UI, CodeMirror, JSONEditor) and modal scroll areas all pick
   it up without per-component selectors. */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted, #888) 45%, transparent) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted, #888) 40%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 32px;
}

*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--muted, #888) 70%, transparent);
  background-clip: padding-box;
}

*::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

/* Webnote typography: serif for headings, mono for navigation/labels —
   matches the IBM Plex stack used on the marketing site. */
body[data-theme="webnote"] h1,
body[data-theme="webnote"] h2,
body[data-theme="webnote"] h3,
body[data-theme="webnote"] h4,
body[data-theme="webnote"] .modal-header h3,
body[data-theme="webnote"] .workspace-topbar h2,
body[data-theme="webnote"] .toastui-editor-contents h1,
body[data-theme="webnote"] .toastui-editor-contents h2,
body[data-theme="webnote"] .toastui-editor-contents h3,
body[data-theme="webnote"] .toastui-editor-md-preview h1,
body[data-theme="webnote"] .toastui-editor-md-preview h2,
body[data-theme="webnote"] .toastui-editor-md-preview h3 {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #edf3f8;
}

body[data-theme="webnote"] .label,
body[data-theme="webnote"] .settings-tab,
body[data-theme="webnote"] .settings-label,
body[data-theme="webnote"] .editor-zoom-label,
body[data-theme="webnote"] .user-chip,
body[data-theme="webnote"] .tree-link,
body[data-theme="webnote"] .tree-toggle,
body[data-theme="webnote"] .tree-scope-label,
body[data-theme="webnote"] .sidebar-path,
body[data-theme="webnote"] .editor-mode-toggle {
  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
}

body[data-theme="webnote"] .label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c9d9e8;
  font-size: 0.78rem;
}

/* Tree items styled like the marketing-site mockup: warm gold tint with
   a 1 px border on the active row. */
body[data-theme="webnote"] .tree-link {
  font-size: 0.86rem;
  border-radius: 10px;
  /* Horizontal padding matches the base theme (0.15rem) so the
     chevron→folder gap stays tight; keep the taller 6px vertical. */
  padding: 6px 0.15rem;
  color: var(--muted);
  border: 1px solid transparent;
}

body[data-theme="webnote"] .tree-link.is-active,
body[data-theme="webnote"] .tree-row.is-active > .tree-link {
  background: rgba(242, 176, 29, 0.12);
  border-color: rgba(242, 176, 29, 0.32);
  color: var(--text);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: var(--font-sans);
  color: var(--text);
  transition: background 0.2s ease, color 0.2s ease;
}

body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.hidden {
  display: none !important;
}

.eyebrow {
  display: none;
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.74rem;
  color: var(--muted);
}

.button {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.78rem 1.15rem;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.button-sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.button-sm svg {
  flex-shrink: 0;
}

.button-primary {
  background: var(--accent);
  color: #f7fbfb;
}

.button-primary:hover {
  background: var(--accent-strong);
}

body[data-theme="dark"] .button-primary,
body[data-theme="noteeli"] .button-primary {
  background: linear-gradient(145deg, rgba(96, 165, 250, 0.94), rgba(29, 78, 216, 1));
  border-color: rgba(191, 219, 254, 0.55);
  box-shadow: 0 16px 28px var(--glow);
}

body[data-theme="dark"] .button-primary:hover,
body[data-theme="noteeli"] .button-primary:hover {
  background: linear-gradient(145deg, rgba(125, 181, 251, 0.96), rgba(37, 99, 235, 1));
  box-shadow: 0 20px 34px rgba(37, 99, 235, 0.34);
}

.button-secondary {
  background: rgba(255, 255, 255, 0.66);
  border-color: var(--line);
  color: var(--text);
}

body[data-theme="dark"] .button-secondary,
body[data-theme="noteeli"] .button-secondary {
  background: rgba(17, 24, 39, 0.82);
  border-color: rgba(148, 163, 184, 0.34);
  color: var(--text);
}

body[data-theme="dark"] .button-secondary:hover,
body[data-theme="noteeli"] .button-secondary:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(191, 219, 254, 0.5);
}

.button-large {
  width: 100%;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* ── Login page ───────────────────────────────────────────── */

.login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: #18181a;
}

.login-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  user-select: none;
}

.login-logo {
  margin-bottom: 8px;
}

.login-tagline {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 6px 0 0;
}

.login-wordmark {
  margin: 0;
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #18181a;
  text-shadow:
    2px 3px 5px rgba(0, 0, 0, 0.95),
    -1px -1px 0px rgba(255, 255, 255, 0.07);
}

.login-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.login-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem 0.55rem 0.75rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8125rem;
  font-weight: 400;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.login-google-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.login-google-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.75);
}

.login-google-btn:hover svg {
  opacity: 1;
}

.login-error {
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(253, 164, 175, 0.8);
}

.login-unconfigured {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.15);
}

.login-env-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.08);
  color: rgba(251, 191, 36, 0.85);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: left;
}

.login-env-hint svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  opacity: 0.8;
}

.login-env-hint code {
  font-family: monospace;
  font-size: 0.8em;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

/* ── Password login ─────────────────────────────── */
.login-password-details {
  width: 100%;
}

.login-password-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}

.login-password-summary::-webkit-details-marker { display: none; }

.login-password-summary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.login-password-summary svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}

.login-password-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 1.1rem 1.25rem 1.25rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.login-field span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.login-field input {
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.login-field input:focus {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
}

.login-submit-btn {
  margin-top: 0.25rem;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.login-submit-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.muted {
  color: var(--muted);
}

.alert {
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.875rem;
  text-align: center;
}

.alert-error {
  color: var(--warning);
  border-color: rgba(154, 52, 18, 0.25);
  background: rgba(255, 245, 240, 0.9);
}

body[data-theme="dark"] .alert-error,
body[data-theme="noteeli"] .alert-error {
  border-color: rgba(190, 24, 93, 0.45);
  background: rgba(69, 10, 10, 0.42);
}

/* ── Demo mode ──────────────────────────────────────────────
   Banner pinned to the top, non-dismissable. Hides write-only UI
   (Save, New file, New folder, Upload, Profile mgmt, kebab menu)
   so the user doesn't tap things that would just throw 403. */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.55rem 1rem;
  background: linear-gradient(90deg, #f59e0b, #f2b01d);
  color: #1a1505;
  font-size: 0.88rem;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.demo-banner a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

.app-shell.is-demo #save-button,
.app-shell.is-demo #new-file,
.app-shell.is-demo #new-directory,
.app-shell.is-demo #save-settings,
.app-shell.is-demo #save-profile,
.app-shell.is-demo #cancel-profile-edit,
.app-shell.is-demo .settings-tab[data-tab="profiles"],
.app-shell.is-demo [data-panel="profiles"],
.app-shell.is-demo .upload-stage,
.app-shell.is-demo .tree-row-menu,
/* Public read-only viewer: drop write-only UI. Toast UI / JSONEditor /
   CodeMirror don't even load in public mode (template branches), so
   no toolbar-collapse hacks are needed any more. */
.app-shell.is-public .workspace-topbar,
.app-shell.is-public #save-button,
.app-shell.is-public #new-file,
.app-shell.is-public #new-directory,
.app-shell.is-public #save-settings,
.app-shell.is-public #save-profile,
.app-shell.is-public .upload-stage,
.app-shell.is-public .tree-row-menu,
.app-shell.is-public #editor,
.app-shell.is-public #json-editor,
.app-shell.is-public #code-editor {
  display: none !important;
}

/* Server-rendered markdown / code / json container used in public
   view. Mimics the look of the auth'd WYSIWYG output but is just
   plain HTML — no editor chrome. */
.public-content {
  height: 100%;
  overflow: auto;
  padding: 1.5rem 2rem;
  color: var(--text);
  background: transparent;
  line-height: 1.65;
}

.public-content > *:first-child { margin-top: 0; }
.public-content h1 { font-size: 1.85rem; margin: 1.4em 0 0.5em; line-height: 1.2; }
.public-content h2 { font-size: 1.45rem; margin: 1.3em 0 0.5em; }
.public-content h3 { font-size: 1.2rem; margin: 1.1em 0 0.4em; }
.public-content h4, .public-content h5, .public-content h6 {
  font-size: 1rem; margin: 1em 0 0.4em;
}
.public-content p { margin: 0.7em 0; }
.public-content ul, .public-content ol { padding-left: 1.7em; margin: 0.6em 0; }
.public-content li { margin: 0.25em 0; }
.public-content blockquote {
  margin: 1em 0; padding: 0.4em 1em;
  border-left: 3px solid var(--line-strong);
  color: var(--muted); border-radius: 0 6px 6px 0;
  background: var(--surface);
}
.public-content code {
  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
  font-size: 0.88em;
  background: var(--surface); padding: 0.1em 0.35em;
  border-radius: 4px;
}
.public-content pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8em 1em;
  overflow-x: auto;
  margin: 1em 0;
}
.public-content pre code { background: transparent; padding: 0; font-size: 0.86em; }
.public-content table {
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.92em;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
}
.public-content th, .public-content td {
  border: 1px solid var(--line);
  padding: 0.4rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.public-content thead, .public-content tr:first-child { background: var(--surface); }
.public-content img { max-width: 100%; height: auto; border-radius: 4px; }
.public-content a { color: var(--accent); text-decoration: underline; }
.public-content hr { border: 0; height: 1px; background: var(--line); margin: 2em 0; }
.public-image, .public-pdf, .public-office {
  width: 100%; height: 100%; min-height: 70vh;
  border: 0; border-radius: 8px;
}
.public-content .mermaid-diagram { margin: 1em 0; text-align: center; }

/* Public view banner — green, less alarming than the demo amber. */
.public-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.55rem 1rem;
  background: linear-gradient(90deg, #16a34a, #22c55e);
  color: #052e16;
  font-size: 0.88rem;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
.public-banner a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}
body:has(.public-banner) .app-shell {
  height: calc(100vh - 2.4rem);
  height: calc(100dvh - 2.4rem);
}

/* Globe badge on tree rows that have been published. */
.tree-row-publish-badge {
  margin-left: auto;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.tree-row-publish-badge svg { width: 13px; height: 13px; }
.tree-row-publish-badge:hover { opacity: 1; }
.tree-row-menu + .tree-row-publish-badge,
.tree-row-publish-badge + .tree-row-menu { margin-left: 0.15rem; }
.app-shell.is-demo .editor-mode-toggle {
  opacity: 0.65;
}

/* When the demo banner is on top of the shell, account for its height
   in the shell's max-height so the editor doesn't overflow viewport. */
body:has(.demo-banner) .app-shell {
  height: calc(100vh - 2.4rem);
  height: calc(100dvh - 2.4rem);
}

.app-shell {
  /* --sidebar-w: grid column width (0 when collapsed/overlay, sidebarWidth when docked) */
  /* --sidebar-open-w: actual panel width when visible (used in overlay/mobile)          */
  --sidebar-w: 300px;
  --sidebar-open-w: 300px;
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1.2rem;
  overflow: hidden;
  /* gap animates when collapsing/docking */
  transition: gap 0.25s ease;
}

/* ── Sidebar states ─────────────────────────────────────────── */
/* Grid width (--sidebar-w) and opacity are now controlled directly by JS.
   CSS classes only carry non-grid layout concerns.                        */

/* collapsed: sidebar invisible, no grid space (JS sets --sidebar-w: 0)   */
.app-shell.sidebar-collapsed {
  gap: 0 1.2rem;
}
/* opacity/pointer-events also set by JS as belt-and-suspenders */
.app-shell.sidebar-collapsed .sidebar {
  opacity: 0;
  pointer-events: none;
}

/* overlay: sidebar floats as a fixed drawer (JS sets --sidebar-w: 0)     */
.app-shell.sidebar-overlay {
  gap: 0 1.2rem;
}
.app-shell.sidebar-overlay .sidebar {
  position: fixed;
  left: 1.2rem;
  top: 1.2rem;
  bottom: 1.2rem;
  width: var(--sidebar-open-w);
  z-index: 200;
  transform: translateX(0);
  border-radius: var(--radius);
  overflow: hidden;
}

/* backdrop when overlay is open */
.app-shell.sidebar-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
}

.sidebar {
  transition: opacity 0.2s ease, transform 0.25s ease;
}

/* ── Resize handle ──────────────────────────────────────────── */
.sidebar-resize-handle {
  position: absolute;
  top: 1.2rem;
  bottom: 1.2rem;
  /* sits in the gap between sidebar and main */
  left: calc(1.2rem + var(--sidebar-w) - 3px);
  width: 6px;
  z-index: 30; /* must beat ProseMirror's z-index: 20 */
  cursor: col-resize;
  border-radius: 3px;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.is-dragging {
  opacity: 1;
  background: var(--accent-soft);
}
.app-shell:hover .sidebar-resize-handle {
  opacity: 0.5;
}
.app-shell.sidebar-collapsed .sidebar-resize-handle,
.app-shell.sidebar-overlay .sidebar-resize-handle {
  display: none;
}

.sidebar,
.workspace-panel {
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

body[data-theme="dark"] .sidebar,
body[data-theme="dark"] .workspace-panel,
body[data-theme="noteeli"] .sidebar,
body[data-theme="noteeli"] .workspace-panel {
  background:
    linear-gradient(180deg, rgba(17, 28, 47, 0.96), rgba(15, 28, 52, 0.92));
  border-color: var(--line-strong);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(191, 219, 254, 0.05);
}

/* ── Compact chrome (no frames) ──────────────────────────────
   Settings → Appearance → "Compact layout". Strips the outer padding,
   inter-panel gap, panel border-radius/border/shadow so content fills
   the viewport edge-to-edge. The sidebar resize handle anchors to the
   left edge (no padding to offset). Themes keep their colours; only
   the framing geometry is flattened. */
body[data-compact-chrome="1"] .app-shell {
  padding: 0;
  gap: 0;
}
body[data-compact-chrome="1"] .sidebar,
body[data-compact-chrome="1"] .workspace-panel {
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
body[data-compact-chrome="1"] .sidebar-resize-handle {
  top: 0;
  bottom: 0;
  left: calc(var(--sidebar-w) - 3px);
  border-radius: 0;
}
body[data-compact-chrome="1"] .app-shell.sidebar-overlay .sidebar {
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.sidebar-version {
  flex-shrink: 0;
  align-self: flex-end;
  margin: 0.4rem 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.sidebar-version:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--accent-soft);
}

.brand-block,
.sidebar-actions {
  padding: 0.8rem 1rem;
}

.workspace-topbar {
  padding: 0.4rem 0.9rem;
}

.statusbar {
  padding: 0.2rem 0.9rem;
  font-size: 0.74rem;
}

.brand-block h1,
.workspace-topbar h2 {
  margin: 0;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-topbar .label {
  display: none;
}

#current-file-path {
  margin: 0;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-theme="dark"] .brand-block h1,
body[data-theme="dark"] .workspace-topbar h2,
body[data-theme="dark"] .modal-header h3,
body[data-theme="noteeli"] .brand-block h1,
body[data-theme="noteeli"] .workspace-topbar h2,
body[data-theme="noteeli"] .modal-header h3 {
  color: #c8d5e8;
}

.sidebar-path {
  margin: 0;
  color: var(--muted);
  word-break: break-word;
}

.sidebar-actions {
  padding-top: 0;
}

.sidebar-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.sidebar-toolbar .button {
  flex: 1 1 0;
  min-width: 0;
}

.sidebar-tree-controls {
  display: none;
}

.sidebar-toolbar-icons {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  align-items: center;
}

.sidebar-toolbar-sep {
  flex: 1;
}

.sidebar-tree-icon {
  color: var(--muted);
}

.sidebar-tree-icon.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* File search box — revealed by the magnifier toggle in the toolbar. */
.tree-search-row {
  margin-top: 0.5rem;
}

.tree-search-row.hidden {
  display: none;
}

.tree-search-input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
}

.tree-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.tree-search-input::placeholder {
  color: var(--muted);
}

body[data-theme="dark"] .tree-search-input,
body[data-theme="noteeli"] .tree-search-input {
  background: rgba(8, 17, 26, 0.6);
  border-color: var(--line-strong);
}

.tree-search-empty {
  padding: 1rem 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

body[data-theme="dark"] .sidebar-tree-icon,
body[data-theme="noteeli"] .sidebar-tree-icon {
  background: rgba(17, 24, 39, 0.78);
  border-color: rgba(148, 163, 184, 0.22);
}

body[data-theme="dark"] .sidebar-tree-icon:hover,
body[data-theme="noteeli"] .sidebar-tree-icon:hover {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(191, 219, 254, 0.28);
}

body[data-theme="dark"] .sidebar-tree-icon.is-active,
body[data-theme="noteeli"] .sidebar-tree-icon.is-active {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(191, 219, 254, 0.32);
  color: #c6d5e9;
}

.context-menu {
  position: fixed;
  /* Must beat the sidebar-overlay (z:200) used in RWD/mobile, where the
     sidebar floats as a drawer; otherwise the menu hides behind it. */
  z-index: 300;
  width: min(280px, calc(100vw - 24px));
  padding: 0.5rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(16px);
}

.context-menu-header {
  display: grid;
  gap: 0.15rem;
  padding: 0.45rem 0.55rem 0.65rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.35rem;
}

.context-menu-title {
  font-size: 0.94rem;
}

.context-menu-path {
  font-size: 0.76rem;
  color: var(--muted);
  word-break: break-word;
}

.context-menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  border-radius: 10px;
  padding: 0.4rem 0.65rem;
  font-size: 0.86rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.context-menu-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.context-menu-icon svg {
  width: 16px;
  height: 16px;
}

.context-menu-item:hover {
  background: var(--accent-soft);
}

.context-menu-item:hover .context-menu-icon {
  color: var(--accent);
}

.context-menu-item-muted {
  color: var(--muted);
}

.context-menu-item-danger {
  color: var(--warning);
  font-weight: 600;
}

.context-menu-item-danger .context-menu-icon {
  color: var(--warning);
}

body[data-theme="dark"] .context-menu,
body[data-theme="noteeli"] .context-menu {
  border-color: rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(17, 28, 47, 0.98), rgba(15, 28, 52, 0.96));
  box-shadow: 0 24px 48px rgba(3, 8, 20, 0.5);
}

body[data-theme="dark"] .context-menu-header,
body[data-theme="noteeli"] .context-menu-header {
  border-color: rgba(148, 163, 184, 0.16);
}

body[data-theme="dark"] .context-menu-item,
body[data-theme="noteeli"] .context-menu-item {
  color: #c5d2e3;
}

body[data-theme="dark"] .context-menu-item:hover,
body[data-theme="noteeli"] .context-menu-item:hover {
  background: rgba(59, 130, 246, 0.14);
}

body[data-theme="dark"] .context-menu-item-muted,
body[data-theme="noteeli"] .context-menu-item-muted {
  color: #94a7c3;
}

.settings-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: -0.15rem;
}

.settings-input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0.5rem 0.72rem;
  font-size: 0.9rem;
  color: var(--text);
}

.settings-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.settings-path-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
}

.settings-browse-button {
  white-space: nowrap;
}

.settings-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}

/* Custom checkbox painting — replace the bright white system checkbox so
   it picks up the active theme's surface, line and accent colours. The
   unchecked box uses the panel surface; the checked state fills with the
   accent and draws a simple white tick via ::after. */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 5px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0;
  vertical-align: middle;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

input[type="checkbox"]:hover {
  border-color: var(--accent);
}

input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 0.32rem;
  height: 0.58rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -55%) rotate(45deg);
}

/* Light-on-gold has poor contrast — use a dark tick on the warm-amber
   themes (Noteeli / Webnote.li) instead of white. */
body[data-theme="noteeli"] input[type="checkbox"]:checked::after,
body[data-theme="webnote"] input[type="checkbox"]:checked::after {
  border-color: #0e1520;
}

/* Toast UI renders task-list checkboxes (in WYSIWYG and Markdown preview)
   as hard-coded base64 SVGs on a ::before pseudo-element, ignoring CSS
   variables. Override that with a themed box + a CSS-drawn checkmark on
   ::after so the checkbox follows the active palette like every other
   input on the page. */
.toastui-editor-contents .task-list-item::before,
.toastui-editor-md-preview .task-list-item::before {
  background-image: none !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--line-strong) !important;
  border-radius: 4px !important;
  width: 16px !important;
  height: 16px !important;
  top: 4px !important;
  cursor: pointer;
}

.toastui-editor-contents .task-list-item.checked::before,
.toastui-editor-md-preview .task-list-item.checked::before {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.toastui-editor-contents .task-list-item.checked::after,
.toastui-editor-md-preview .task-list-item.checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}

body[data-theme="noteeli"] .toastui-editor-contents .task-list-item.checked::after,
body[data-theme="noteeli"] .toastui-editor-md-preview .task-list-item.checked::after,
body[data-theme="webnote"] .toastui-editor-contents .task-list-item.checked::after,
body[data-theme="webnote"] .toastui-editor-md-preview .task-list-item.checked::after {
  border-color: #0e1520;
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-toggle input {
  margin-top: 0.14rem;
}

.settings-toggle span {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.settings-toggle strong {
  font-size: 0.9rem;
}

.settings-toggle small {
  font-size: 0.78rem;
  line-height: 1.35;
}

body[data-theme="dark"] .settings-input,
body[data-theme="dark"] .settings-toggle,
body[data-theme="noteeli"] .settings-input,
body[data-theme="noteeli"] .settings-toggle {
  background: rgba(17, 24, 39, 0.78);
  border-color: rgba(148, 163, 184, 0.28);
}

.small-note {
  margin: 0;
  font-size: 0.78rem;
}

.tree-root {
  overflow: auto;
  padding: 0 0.6rem 1rem 0.75rem;
}

.tree-scope-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 0.75rem;
}

.tree-scope-up {
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 0.28rem 0.55rem;
  cursor: pointer;
}

.tree-scope-label {
  min-width: 0;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-root.is-drop-target-root {
  outline: 1px dashed rgba(15, 118, 110, 0.45);
  outline-offset: -6px;
  background: rgba(15, 118, 110, 0.06);
}

body[data-theme="dark"] .tree-root,
body[data-theme="noteeli"] .tree-root {
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0), rgba(11, 18, 32, 0.22));
}

body[data-theme="dark"] .tree-root.is-drop-target-root,
body[data-theme="noteeli"] .tree-root.is-drop-target-root {
  outline-color: rgba(96, 165, 250, 0.5);
  background: rgba(59, 130, 246, 0.1);
}

body[data-theme="dark"] .tree-scope-up,
body[data-theme="noteeli"] .tree-scope-up {
  background: rgba(17, 24, 39, 0.78);
  color: #c3d0e1;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

body[data-theme="dark"] .tree-scope-up:hover,
body[data-theme="noteeli"] .tree-scope-up:hover {
  background: rgba(59, 130, 246, 0.14);
}

.tree-list {
  list-style: none;
  margin: 0;
  /* Indent matches the toggle width so a child row lines up one level in.
     Keep in sync with .tree-toggle width and .tree-link-file margin-left. */
  padding-left: 0.8rem;
}

.tree-list-root {
  padding-left: 0;
}

.tree-item {
  margin: 0.08rem 0;
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

/* Kebab "⋮" button per tree row — a reliable tap-target for opening
   the context menu on touch devices (long-press is unreliable on iOS).
   On desktop with a real mouse the button reveals on row hover; on
   touch (coarse pointer) it's permanently visible. */
.tree-row-menu {
  margin-left: auto;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.tree-row-menu svg {
  width: 14px;
  height: 14px;
}

.tree-row:hover .tree-row-menu,
.tree-row:focus-within .tree-row-menu,
.tree-row-menu:focus-visible {
  opacity: 1;
}

.tree-row-menu:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* On coarse-pointer devices (iPad / phones) the button is always
   visible — there's no hover to reveal it. */
@media (pointer: coarse) {
  .tree-row-menu { opacity: 1; }
}

.tree-toggle,
.tree-link {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0.28rem 0.15rem;
  border-radius: 10px;
}

.tree-toggle {
  width: 0.8rem;
  padding: 0.28rem 0;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Chevron sized explicitly (it lives directly in the button, not in a
   .tree-icon wrapper) so the toggle box stays snug around it. */
.tree-toggle svg {
  width: 12px;
  height: 12px;
}

/* File leaves have no chevron, so their icon would start ~1 toggle-width
   to the left of sibling folders. Push them right by the toggle width so
   file icons line up directly under folder icons at the same level.
   Keep this in sync with .tree-toggle width and .tree-list padding-left. */
.tree-link-file {
  margin-left: 0.8rem;
}

.tree-link {
  flex: 1;
  text-align: left;
  cursor: pointer;
}

.tree-link:hover,
.tree-link.is-active,
.tree-toggle:hover {
  background: var(--accent-soft);
}

body[data-theme="dark"] .tree-link,
body[data-theme="dark"] .tree-toggle,
body[data-theme="noteeli"] .tree-link,
body[data-theme="noteeli"] .tree-toggle {
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

body[data-theme="dark"] .tree-link:hover,
body[data-theme="dark"] .tree-toggle:hover,
body[data-theme="noteeli"] .tree-link:hover,
body[data-theme="noteeli"] .tree-toggle:hover {
  background: rgba(59, 130, 246, 0.16);
}

body[data-theme="dark"] .tree-link.is-active,
body[data-theme="noteeli"] .tree-link.is-active {
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.28), rgba(29, 78, 216, 0.24));
  box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.22);
}

.tree-row.is-draggable {
  cursor: grab;
}

.tree-row.is-draggable:active {
  cursor: grabbing;
}

.tree-row.is-dragging {
  opacity: 0.45;
}

.tree-row.is-drop-target {
  background: rgba(15, 118, 110, 0.12);
  outline: 1px dashed rgba(15, 118, 110, 0.45);
}

body[data-theme="dark"] .tree-row.is-drop-target,
body[data-theme="noteeli"] .tree-row.is-drop-target {
  background: rgba(59, 130, 246, 0.16);
  outline-color: rgba(96, 165, 250, 0.5);
}

.tree-link.is-disabled {
  color: var(--muted);
}

.tree-link.is-disabled {
  opacity: 0.6;
}

.workspace-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}

.workspace-topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.topbar-left > div {
  min-width: 0;
}

/* hamburger + pin shared style */
.sidebar-toggle-btn,
.sidebar-pin-btn {
  flex-shrink: 0;
}

/* pin button — only visible when sidebar is in overlay mode */
.sidebar-pin-btn {
  display: none;
}
.app-shell.sidebar-overlay .sidebar-pin-btn {
  display: inline-flex;
}

/* brand row: logo + pin side by side */
.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

body[data-theme="dark"] .workspace-topbar,
body[data-theme="dark"] .statusbar,
body[data-theme="dark"] .modal-header,
body[data-theme="dark"] .modal-actions,
body[data-theme="noteeli"] .workspace-topbar,
body[data-theme="noteeli"] .statusbar,
body[data-theme="noteeli"] .modal-header,
body[data-theme="noteeli"] .modal-actions {
  border-color: rgba(148, 163, 184, 0.18);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.profiles-menu {
  position: relative;
}

.profiles-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: min(320px, calc(100vw - 2rem));
  padding: 0.7rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(16px);
  z-index: 40;
}

.profiles-dropdown-header {
  display: grid;
  gap: 0.12rem;
  padding: 0.35rem 0.45rem 0.7rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.45rem;
}

.profiles-dropdown-list {
  display: grid;
  gap: 0.35rem;
  max-height: min(55vh, 420px);
  overflow: auto;
}

.profiles-dropdown-item {
  width: 100%;
  display: grid;
  gap: 0.18rem;
  text-align: left;
  border: 0;
  border-radius: 16px;
  padding: 0.75rem 0.8rem;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.profiles-dropdown-item span {
  font-size: 0.82rem;
  color: var(--muted);
  word-break: break-word;
}

.profiles-dropdown-item:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
}

/* Row = apply-button + small × delete on the right. */
.profiles-dropdown-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  border-radius: 12px;
}

/* Mark the profile that was last applied — its values are reflected in
   the workspace's current preferences, so it's the "active" set. */
.profiles-dropdown-row.is-active {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.profiles-dropdown-row .profiles-dropdown-item {
  flex: 1;
  min-width: 0;
}

.profiles-dropdown-delete {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  opacity: 0.55;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.profiles-dropdown-delete:hover {
  opacity: 1;
  color: var(--warning);
  background: rgba(248, 113, 113, 0.12);
}

.profiles-dropdown-delete svg {
  width: 13px;
  height: 13px;
}

/* Footer: quick "save current as new profile" input + button. */
.profiles-dropdown-footer {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}

.profiles-dropdown-footer .settings-input {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.65rem;
  font-size: 0.86rem;
}

.profiles-dropdown-footer .button {
  flex-shrink: 0;
}

.profiles-dropdown-empty {
  padding: 0.75rem 0.8rem;
  font-size: 0.86rem;
  line-height: 1.45;
}

.user-chip {
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  color: var(--muted);
}

body[data-theme="dark"] .user-chip,
body[data-theme="noteeli"] .user-chip {
  background: rgba(17, 24, 39, 0.85);
  border-color: rgba(148, 163, 184, 0.28);
  color: #b9c9df;
}

/* ── User account menu ──────────────────────────────────────── */
.user-menu {
  position: relative;
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: min(240px, calc(100vw - 2rem));
  padding: 0.4rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(16px);
  z-index: 60;
}

.user-menu-dropdown.hidden {
  display: none;
}

.user-menu-identity {
  padding: 0.5rem 0.6rem 0.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.35rem;
}

.user-menu-email,
.user-menu-label {
  font-size: 0.82rem;
  color: var(--muted);
  word-break: break-all;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
}

.user-menu-item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--muted);
}

.user-menu-item:hover {
  background: var(--accent-soft);
}

.user-menu-item:hover svg {
  color: var(--accent);
}

.user-menu-item-danger:hover {
  background: rgba(248, 113, 113, 0.14);
  color: #dc2626;
}

.user-menu-item-danger:hover svg {
  color: #dc2626;
}

.user-menu-logout-form {
  margin: 0;
}

body[data-theme="dark"] .user-menu-dropdown,
body[data-theme="noteeli"] .user-menu-dropdown {
  background: linear-gradient(180deg, rgba(17, 28, 47, 0.98), rgba(15, 28, 52, 0.96));
  border-color: var(--line-strong);
}

/* ── Git menu ───────────────────────────────────────────────── */
.git-menu {
  position: relative;
}

.git-menu.hidden {
  display: none;
}

#git-menu-toggle {
  position: relative;
}

.git-menu-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.git-menu-badge.hidden {
  display: none;
}

.git-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: min(320px, calc(100vw - 2rem));
  padding: 0.7rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(16px);
  z-index: 60;
}

.git-dropdown.hidden {
  display: none;
}

.git-branch-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
}

.git-branch-icon {
  width: 15px;
  height: 15px;
  color: var(--muted);
  flex-shrink: 0;
}

.git-sync-state {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
}

.git-changes-list {
  max-height: 180px;
  overflow-y: auto;
  margin: 0.6rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.35rem 0;
}

.git-change-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.15rem;
  font-size: 0.82rem;
}

.git-change-letter {
  width: 1.1rem;
  flex-shrink: 0;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
}

.git-change-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.git-changes-empty {
  padding: 0.6rem 0.2rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

.git-commit-message {
  width: 100%;
  resize: vertical;
  min-height: 2.4rem;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
}

.git-commit-message:focus {
  border-color: var(--accent);
}

.git-commit-actions,
.git-remote-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.git-commit-actions .button,
.git-remote-actions .button {
  flex: 1;
}

.git-status-msg {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  min-height: 1rem;
  word-break: break-word;
}

.git-status-msg.is-error {
  color: #dc2626;
}

.git-status-msg.is-ok {
  color: #16a34a;
}

body[data-theme="dark"] .git-dropdown,
body[data-theme="noteeli"] .git-dropdown {
  background: linear-gradient(180deg, rgba(17, 28, 47, 0.98), rgba(15, 28, 52, 0.96));
  border-color: var(--line-strong);
}

/* ── Tree git decorations ───────────────────────────────────── */
.git-status-badge {
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 0.15rem;
}

.git-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 0.2rem;
}

/* status colours (shared by list letters, tree badges, dots) */
.git-modified  { color: #d9920a; }
.git-added     { color: #16a34a; }
.git-deleted   { color: #dc2626; }
.git-untracked { color: #6b7280; }
.git-renamed   { color: #2563eb; }
.git-conflict  { color: #dc2626; }
.git-dot.git-modified  { background: #d9920a; }
.git-dot.git-added     { background: #16a34a; }
.git-dot.git-deleted   { background: #dc2626; }
.git-dot.git-untracked { background: #9ca3af; }
.git-dot.git-renamed   { background: #2563eb; }
.git-dot.git-conflict  { background: #dc2626; }

/* a changed file's name gets a subtle tint so the row reads as "dirty" */
.tree-link.is-git-changed {
  font-weight: 600;
}

.icon-button {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.icon-button svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

.icon-button-small {
  width: 2.35rem;
  height: 2.35rem;
}

.icon-button:hover {
  background: var(--accent-soft);
}

body[data-theme="dark"] .icon-button,
body[data-theme="noteeli"] .icon-button {
  background: rgba(17, 24, 39, 0.84);
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: inset 0 1px 0 rgba(191, 219, 254, 0.05);
}

body[data-theme="dark"] .icon-button:hover,
body[data-theme="noteeli"] .icon-button:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(191, 219, 254, 0.42);
}

body[data-theme="dark"] .profiles-dropdown,
body[data-theme="noteeli"] .profiles-dropdown {
  border-color: rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(17, 28, 47, 0.98), rgba(15, 28, 52, 0.96));
  box-shadow: 0 24px 48px rgba(3, 8, 20, 0.5);
}

body[data-theme="dark"] .profiles-dropdown-header,
body[data-theme="noteeli"] .profiles-dropdown-header {
  border-color: rgba(148, 163, 184, 0.16);
}

body[data-theme="dark"] .profiles-dropdown-item,
body[data-theme="noteeli"] .profiles-dropdown-item {
  color: #c5d2e3;
}

body[data-theme="dark"] .profiles-dropdown-item span,
body[data-theme="noteeli"] .profiles-dropdown-item span {
  color: #94a7c3;
}

body[data-theme="dark"] .profiles-dropdown-item:hover,
body[data-theme="noteeli"] .profiles-dropdown-item:hover {
  background: rgba(59, 130, 246, 0.14);
}

.editor-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--panel-strong);
}

.editor-stage.is-drop-target-link {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
  background: var(--accent-soft);
}

body[data-theme="dark"] .editor-stage,
body[data-theme="noteeli"] .editor-stage {
  background:
    linear-gradient(180deg, rgba(15, 28, 52, 0.98), rgba(11, 18, 32, 0.96));
}

.editor-zoom {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.editor-zoom-label {
  min-width: 3.4rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.editor-stage #editor,
.toastui-editor-defaultUI {
  height: 100%;
}

/* ── JSON Editor panel ──────────────────────────────────────── */
.json-editor-panel {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* ── Code Editor panel (CodeMirror) ─────────────────────────── */
.code-editor-panel {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.code-editor-panel .CodeMirror {
  height: 100%;
  font-size: var(--editor-font-size, 16px);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Tame the default theme — keywords, atoms etc. ship with bold weight which
   makes everything look shouty. Drop bold/italic across the board so any
   theme reads as a calm token-coloured surface. */
.code-editor-panel .CodeMirror,
.code-editor-panel .CodeMirror span {
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Override jsoneditor default colours to match our themes */
.jsoneditor,
.jsoneditor-menu {
  border-color: var(--line) !important;
}

.jsoneditor-menu {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

.jsoneditor-menu button,
.jsoneditor-menu .jsoneditor-separator {
  color: var(--text) !important;
}

.jsoneditor-tree,
.jsoneditor .ace_editor,
.jsoneditor-text {
  background-color: var(--panel-strong) !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
}

.jsoneditor-field,
.jsoneditor-value {
  color: var(--text) !important;
}

.jsoneditor-value.jsoneditor-string  { color: #059669 !important; }
.jsoneditor-value.jsoneditor-number  { color: #0369a1 !important; }
.jsoneditor-value.jsoneditor-boolean { color: #7c3aed !important; }
.jsoneditor-value.jsoneditor-null    { color: var(--muted) !important; }

/* dark + obsidian + noteeli tweaks */
body[data-theme="dark"] .jsoneditor-value.jsoneditor-string,
body[data-theme="obsidian"] .jsoneditor-value.jsoneditor-string,
body[data-theme="noteeli"] .jsoneditor-value.jsoneditor-string  { color: #34d399 !important; }
body[data-theme="dark"] .jsoneditor-value.jsoneditor-number,
body[data-theme="obsidian"] .jsoneditor-value.jsoneditor-number,
body[data-theme="noteeli"] .jsoneditor-value.jsoneditor-number  { color: #60a5fa !important; }
body[data-theme="dark"] .jsoneditor-value.jsoneditor-boolean,
body[data-theme="obsidian"] .jsoneditor-value.jsoneditor-boolean,
body[data-theme="noteeli"] .jsoneditor-value.jsoneditor-boolean { color: #a78bfa !important; }

.jsoneditor-navigation-bar {
  background: var(--panel) !important;
  color: var(--muted) !important;
  border-bottom-color: var(--line) !important;
}

.jsoneditor-statusbar {
  background: var(--panel) !important;
  color: var(--muted) !important;
  border-top-color: var(--line) !important;
}

.jsoneditor-search input {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.jsoneditor tr:hover > .jsoneditor-tree td {
  background: var(--accent-soft) !important;
}

.file-preview {
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  overflow: auto;
}

.upload-stage {
  height: 100%;
  padding: 1.4rem;
  overflow: auto;
}

.upload-card {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.upload-card h3 {
  margin: 0.25rem 0 0;
}

.upload-dropzone {
  border: 1px dashed var(--line-strong);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.5);
  padding: 1.4rem;
  display: grid;
  gap: 0.8rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.upload-dropzone strong {
  font-size: 1.06rem;
}

.upload-dropzone.is-dragover,
.upload-dropzone:hover,
.upload-dropzone:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08);
}

.upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.upload-file-list {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  padding: 0.9rem 1rem;
}

.upload-file-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.upload-file-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.1rem;
  border-bottom: 1px solid var(--line);
}

.upload-file-item:last-child {
  border-bottom: 0;
}

.upload-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-file-size,
.upload-file-empty {
  color: var(--muted);
  font-size: 0.88rem;
}

.file-preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.68);
}

.file-preview-pdf,
.file-preview-office {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 18px;
  background: #fff;
}

body[data-theme="dark"] .file-preview-image,
body[data-theme="noteeli"] .file-preview-image {
  background: rgba(17, 24, 39, 0.78);
  box-shadow: 0 24px 44px rgba(3, 8, 20, 0.4);
}

body[data-theme="dark"] .file-preview-pdf,
body[data-theme="noteeli"] .file-preview-pdf {
  background: #0f172a;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
}

body[data-theme="dark"] .upload-dropzone,
body[data-theme="noteeli"] .upload-dropzone {
  background: rgba(17, 24, 39, 0.56);
  border-color: rgba(148, 163, 184, 0.28);
}

body[data-theme="dark"] .upload-dropzone.is-dragover,
body[data-theme="dark"] .upload-dropzone:hover,
body[data-theme="dark"] .upload-dropzone:focus-visible,
body[data-theme="noteeli"] .upload-dropzone.is-dragover,
body[data-theme="noteeli"] .upload-dropzone:hover,
body[data-theme="noteeli"] .upload-dropzone:focus-visible {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(96, 165, 250, 0.58);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

body[data-theme="dark"] .upload-file-list,
body[data-theme="noteeli"] .upload-file-list {
  background: rgba(17, 24, 39, 0.68);
  border-color: rgba(148, 163, 184, 0.2);
}

.overlay-card {
  position: absolute;
  inset: 1.4rem;
  border-radius: 24px;
  border: 1px dashed var(--line);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 2rem;
  background: rgba(255, 251, 245, 0.86);
}

body[data-theme="dark"] .overlay-card,
body[data-theme="noteeli"] .overlay-card {
  background: rgba(15, 23, 42, 0.88);
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: inset 0 1px 0 rgba(191, 219, 254, 0.04);
}

.overlay-card strong {
  font-size: 1.05rem;
}

.statusbar {
  border-top: 1px solid var(--line);
  color: var(--muted);
}

#status-message {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

#status-message.status-autosaving::before {
  content: "";
  width: 0.62rem;
  height: 0.62rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  opacity: 0.78;
  animation: autosave-spin 0.75s linear infinite;
}

@keyframes autosave-spin {
  to {
    transform: rotate(360deg);
  }
}

.toastui-editor-defaultUI {
  border: 0 !important;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100% !important; /* belt-and-suspenders: ensure the editor fills its grid column */
  /* No overflow:hidden here — it would clip absolutely-positioned
     toolbar dropdowns. Clipping is handled by .toastui-editor-main below. */
}

.toastui-editor-main {
  flex: 1 1 auto;
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  overflow: hidden;
}

.toastui-editor-md-container,
.toastui-editor-ww-container {
  height: 100% !important;
  min-height: 0;
}

/* Force scroll on the actual ProseMirror / CodeMirror wrapper.
   .toastui-editor-main-container is position:absolute inside
   .toastui-editor-main (position:relative); without height:100% it grows
   to its content height and never creates a scroll container. */
.toastui-editor-main-container {
  height: 100% !important;
  overflow: hidden !important;
}

.toastui-editor.ww-mode,
.toastui-editor.md-mode {
  height: 100% !important;
  overflow: hidden !important;
}

.ProseMirror.toastui-editor-contents {
  height: 100% !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

.toastui-editor-toolbar,
.toastui-editor-defaultUI-toolbar {
  border-bottom-color: var(--line) !important;
  background: var(--surface) !important;
  padding: 2px 4px !important;
}

/* zoom scales layout + background sprites proportionally — unlike
   transform:scale which only scales visually and leaves layout space intact */
.toastui-editor-toolbar .toastui-editor-toolbar-group,
.toastui-editor-defaultUI-toolbar .toastui-editor-toolbar-group {
  zoom: 0.78;
}

.toastui-editor-contents {
  font-size: var(--editor-font-size);
}

/* Toast UI hardcodes color:#222 on heading elements which clashes with
   dark themes — make them inherit from the document instead. */
.toastui-editor-contents h1,
.toastui-editor-contents h2,
.toastui-editor-contents h3,
.toastui-editor-contents h4,
.toastui-editor-contents h5,
.toastui-editor-contents h6,
.toastui-editor-md-preview h1,
.toastui-editor-md-preview h2,
.toastui-editor-md-preview h3,
.toastui-editor-md-preview h4,
.toastui-editor-md-preview h5,
.toastui-editor-md-preview h6 {
  color: inherit !important;
}

/* ── Markdown rendering style presets ─────────────────────────
   Selected via body[data-md-style="…"]. Theme-orthogonal:
   colour comes from the theme palette, layout/typography comes
   from the picked preset. Default keeps Toast UI's built-in
   look (h1 with double underline, h2 with single line) — the
   other four offer distinct reading experiences. */

/* === Clean === minimal, no borders, balanced weights. */
body[data-md-style="clean"] .toastui-editor-contents h1,
body[data-md-style="clean"] .toastui-editor-md-preview h1 {
  border-bottom: none !important;
  font-size: 1.7rem !important;
  font-weight: 600 !important;
  margin: 1.6em 0 0.4em !important;
  padding-bottom: 0 !important;
  line-height: 1.25 !important;
}
body[data-md-style="clean"] .toastui-editor-contents h2,
body[data-md-style="clean"] .toastui-editor-md-preview h2 {
  border-bottom: none !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  padding-bottom: 0 !important;
  margin: 1.3em 0 0.4em !important;
  line-height: 1.3 !important;
}
body[data-md-style="clean"] .toastui-editor-contents h3,
body[data-md-style="clean"] .toastui-editor-md-preview h3 {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

/* === Magazine === serif, generous, italic h2, optional drop-cap. */
body[data-md-style="magazine"] .toastui-editor-contents,
body[data-md-style="magazine"] .toastui-editor-md-preview {
  font-family: "IBM Plex Serif", Georgia, serif;
  line-height: 1.72;
}
body[data-md-style="magazine"] .toastui-editor-contents h1,
body[data-md-style="magazine"] .toastui-editor-md-preview h1 {
  font-family: "IBM Plex Serif", Georgia, serif;
  border-bottom: none !important;
  font-size: 2.3rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  margin: 1.5em 0 0.45em !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}
body[data-md-style="magazine"] .toastui-editor-contents h2,
body[data-md-style="magazine"] .toastui-editor-md-preview h2 {
  font-family: "IBM Plex Serif", Georgia, serif;
  border-bottom: none !important;
  font-size: 1.55rem !important;
  font-style: italic;
  font-weight: 500 !important;
  padding-bottom: 0 !important;
  margin: 1.3em 0 0.4em !important;
}
body[data-md-style="magazine"] .toastui-editor-contents h3,
body[data-md-style="magazine"] .toastui-editor-md-preview h3 {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* Drop-cap effect on first paragraph after the first H1 */
body[data-md-style="magazine"] .toastui-editor-contents h1 + p::first-letter,
body[data-md-style="magazine"] .toastui-editor-md-preview h1 + p::first-letter {
  font-size: 3em;
  font-weight: 700;
  float: left;
  line-height: 0.85;
  margin: 0.04em 0.08em 0 0;
  color: var(--accent);
}

/* === Compact === tight spacing, smaller fonts, dense reading. */
body[data-md-style="compact"] .toastui-editor-contents,
body[data-md-style="compact"] .toastui-editor-md-preview {
  line-height: 1.42;
}
body[data-md-style="compact"] .toastui-editor-contents h1,
body[data-md-style="compact"] .toastui-editor-md-preview h1 {
  font-size: 1.4rem !important;
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: 0.2em !important;
  margin: 1em 0 0.3em !important;
  line-height: 1.3 !important;
}
body[data-md-style="compact"] .toastui-editor-contents h2,
body[data-md-style="compact"] .toastui-editor-md-preview h2 {
  font-size: 1.2rem !important;
  border-bottom: none !important;
  margin: 0.8em 0 0.25em !important;
  line-height: 1.3 !important;
}
body[data-md-style="compact"] .toastui-editor-contents h3,
body[data-md-style="compact"] .toastui-editor-md-preview h3 {
  font-size: 1.05rem !important;
  margin: 0.7em 0 0.2em !important;
}
body[data-md-style="compact"] .toastui-editor-contents p,
body[data-md-style="compact"] .toastui-editor-md-preview p {
  margin: 0.45em 0 !important;
}
body[data-md-style="compact"] .toastui-editor-contents li,
body[data-md-style="compact"] .toastui-editor-md-preview li {
  margin: 0.1em 0 !important;
}

/* === Manuscript === book-like: serif body, justified, indented paragraphs. */
body[data-md-style="manuscript"] .toastui-editor-contents,
body[data-md-style="manuscript"] .toastui-editor-md-preview {
  font-family: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  line-height: 1.78;
  text-align: justify;
  hyphens: auto;
}
body[data-md-style="manuscript"] .toastui-editor-contents h1,
body[data-md-style="manuscript"] .toastui-editor-md-preview h1 {
  border-bottom: none !important;
  text-align: center;
  font-variant: small-caps;
  font-size: 1.75rem !important;
  letter-spacing: 0.06em;
  margin: 2em 0 1em !important;
  padding-bottom: 0 !important;
  font-weight: 500 !important;
}
body[data-md-style="manuscript"] .toastui-editor-contents h2,
body[data-md-style="manuscript"] .toastui-editor-md-preview h2 {
  border-bottom: none !important;
  font-style: italic;
  font-size: 1.35rem !important;
  text-align: center;
  font-weight: 500 !important;
  padding-bottom: 0 !important;
  margin: 1.4em 0 0.6em !important;
}
body[data-md-style="manuscript"] .toastui-editor-contents h3,
body[data-md-style="manuscript"] .toastui-editor-md-preview h3 {
  font-style: italic;
  font-size: 1.15rem !important;
  font-weight: 500 !important;
}
/* First paragraph after a heading: no indent. Subsequent paragraphs:
   indented like a typeset book. */
body[data-md-style="manuscript"] .toastui-editor-contents p + p,
body[data-md-style="manuscript"] .toastui-editor-md-preview p + p {
  text-indent: 1.8em;
  margin-top: 0 !important;
}

/* ── Hide default mode switch, use topbar button instead ── */
.toastui-editor-mode-switch {
  display: none !important;
}

.editor-mode-toggle {
  min-width: 96px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* ── Diagrams ─────────────────────────────────────────────── */
/* ── Tables ───────────────────────────────────────────────── */

.toastui-editor-contents table,
.toastui-editor-md-preview table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: auto;
  margin: 1rem 0;
  border: 1.5px solid var(--line-strong) !important;
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.92em;
}

.toastui-editor-contents th,
.toastui-editor-contents td,
.toastui-editor-md-preview th,
.toastui-editor-md-preview td {
  border: 1px solid var(--line-strong) !important;
  padding: 0.42rem 0.72rem !important;
  text-align: left;
  vertical-align: top;
  min-width: 5rem;
}

.toastui-editor-contents thead tr,
.toastui-editor-md-preview thead tr {
  background: var(--accent-soft) !important;
}

.toastui-editor-contents th,
.toastui-editor-md-preview th {
  font-weight: 600;
  color: var(--text) !important;
  background: var(--accent-soft) !important;
}

.toastui-editor-contents tbody tr:nth-child(even),
.toastui-editor-md-preview tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.025);
}

body[data-theme="dark"] .toastui-editor-contents tbody tr:nth-child(even),
body[data-theme="dark"] .toastui-editor-md-preview tbody tr:nth-child(even),
body[data-theme="noteeli"] .toastui-editor-contents tbody tr:nth-child(even),
body[data-theme="noteeli"] .toastui-editor-md-preview tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

body[data-theme="dark"] .toastui-editor-contents th,
body[data-theme="dark"] .toastui-editor-md-preview th,
body[data-theme="noteeli"] .toastui-editor-contents th,
body[data-theme="noteeli"] .toastui-editor-md-preview th {
  background: rgba(96, 165, 250, 0.12) !important;
}

body[data-theme="obsidian"] .toastui-editor-contents th,
body[data-theme="obsidian"] .toastui-editor-md-preview th {
  background: rgba(124, 111, 205, 0.15) !important;
}

body[data-theme="obsidian"] .toastui-editor-contents tbody tr:nth-child(even),
body[data-theme="obsidian"] .toastui-editor-md-preview tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

/* Also style the selected/active cell in WYSIWYG */
.toastui-editor-contents td.toastui-editor-ww-table-selected-cell {
  background: var(--accent-soft) !important;
  outline: 2px solid var(--accent) !important;
  outline-offset: -2px;
}

/* ── Diagrams ─────────────────────────────────────────────── */

.mermaid-diagram {
  text-align: center;
  margin: 1rem 0;
  overflow-x: auto;
}

.mermaid-diagram svg {
  max-width: 100%;
  height: auto;
}

.diagram-plantuml {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
}

.ww-diagram-out {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
  overflow-x: auto;
  cursor: pointer;
}

.ww-diagram-out:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 10px;
}

.toastui-editor-ww-code-block.is-diagram-rendered .toastui-editor-ww-code-block-language,
.toastui-editor-ww-code-block.is-diagram-rendered pre {
  display: none;
}

.toastui-editor-ww-code-block.is-diagram-rendered .ww-diagram-out {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.toastui-editor-ww-code-block.is-diagram-rendered.is-source-visible .toastui-editor-ww-code-block-language,
.toastui-editor-ww-code-block.is-diagram-rendered.is-source-visible pre {
  display: block;
}

.toastui-editor-ww-code-block.is-diagram-rendered.is-source-visible .ww-diagram-out {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
}

.noteeli-diagram-toolbar-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 0.35rem;
  /* No zoom here — zoom creates a stacking context that breaks
     position:fixed on the dropdown menu. Size button manually instead. */
}

.noteeli-undo-redo-group {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding-right: 0.35rem;
}

.noteeli-toolbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Match the visual size of zoomed toolbar buttons (28px × 0.78 ≈ 22px) */
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.noteeli-toolbar-button:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.noteeli-toolbar-menu {
  position: fixed;
  /* top/left are set dynamically by JS via inline style */
  min-width: 10rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  z-index: 150;
}

/* Reset all ToastUI toolbar-group button styles that bleed into our menu */
.noteeli-toolbar-menu .noteeli-toolbar-menu-item {
  all: unset;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.32rem 0.55rem;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
}

.noteeli-toolbar-menu .noteeli-toolbar-menu-item:hover {
  background: var(--accent-soft);
}

body[data-theme="dark"] .toastui-editor-defaultUI,
body[data-theme="dark"] .toastui-editor-main,
body[data-theme="dark"] .toastui-editor-md-container,
body[data-theme="dark"] .toastui-editor-ww-container,
body[data-theme="dark"] .toastui-editor-toolbar,
body[data-theme="dark"] .toastui-editor-defaultUI-toolbar,
body[data-theme="dark"] .toastui-editor-mode-switch,
body[data-theme="dark"] .toastui-editor-popup,
body[data-theme="noteeli"] .toastui-editor-defaultUI,
body[data-theme="noteeli"] .toastui-editor-main,
body[data-theme="noteeli"] .toastui-editor-md-container,
body[data-theme="noteeli"] .toastui-editor-ww-container,
body[data-theme="noteeli"] .toastui-editor-toolbar,
body[data-theme="noteeli"] .toastui-editor-defaultUI-toolbar,
body[data-theme="noteeli"] .toastui-editor-mode-switch,
body[data-theme="noteeli"] .toastui-editor-popup {
  background: #0f1c34 !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

body[data-theme="dark"] .toastui-editor-toolbar,
body[data-theme="dark"] .toastui-editor-defaultUI-toolbar,
body[data-theme="dark"] .toastui-editor-mode-switch,
body[data-theme="noteeli"] .toastui-editor-toolbar,
body[data-theme="noteeli"] .toastui-editor-defaultUI-toolbar,
body[data-theme="noteeli"] .toastui-editor-mode-switch {
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.96), rgba(15, 28, 52, 0.96)) !important;
  box-shadow:
    inset 0 -1px 0 rgba(148, 163, 184, 0.12),
    inset 0 1px 0 rgba(191, 219, 254, 0.04);
}

body[data-theme="dark"] .toastui-editor-mode-switch,
body[data-theme="noteeli"] .toastui-editor-mode-switch {
  flex: 0 0 auto;
  display: flex !important;
  height: auto !important;
  min-height: 3.5rem;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 0.8rem !important;
  border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
  box-sizing: border-box;
}

body[data-theme="dark"] .toastui-editor-toolbar button,
body[data-theme="dark"] .toastui-editor-defaultUI-toolbar button,
body[data-theme="dark"] .toastui-editor-mode-switch .tab-item,
body[data-theme="noteeli"] .toastui-editor-toolbar button,
body[data-theme="noteeli"] .toastui-editor-defaultUI-toolbar button,
body[data-theme="noteeli"] .toastui-editor-mode-switch .tab-item {
  color: #aebfd8 !important;
}

body[data-theme="dark"] .toastui-editor-mode-switch .tab-item,
body[data-theme="noteeli"] .toastui-editor-mode-switch .tab-item {
  min-width: 7.5rem;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(17, 24, 39, 0.68) !important;
  box-shadow: inset 0 1px 0 rgba(191, 219, 254, 0.03);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

body[data-theme="dark"] .toastui-editor-toolbar-icons,
body[data-theme="noteeli"] .toastui-editor-toolbar-icons {
  filter: invert(0.96) hue-rotate(180deg) saturate(0.9);
}

body[data-theme="dark"] .toastui-editor-contents,
body[data-theme="dark"] .toastui-editor-contents p,
body[data-theme="dark"] .toastui-editor-md-preview,
body[data-theme="dark"] .ProseMirror,
body[data-theme="noteeli"] .toastui-editor-contents,
body[data-theme="noteeli"] .toastui-editor-contents p,
body[data-theme="noteeli"] .toastui-editor-md-preview,
body[data-theme="noteeli"] .ProseMirror {
  color: #c6d1df !important;
}

body[data-theme="dark"] .toastui-editor-contents li,
body[data-theme="dark"] .toastui-editor-md-preview li,
body[data-theme="dark"] .toastui-editor-contents td,
body[data-theme="dark"] .toastui-editor-md-preview td,
body[data-theme="noteeli"] .toastui-editor-contents li,
body[data-theme="noteeli"] .toastui-editor-md-preview li,
body[data-theme="noteeli"] .toastui-editor-contents td,
body[data-theme="noteeli"] .toastui-editor-md-preview td {
  color: #c1ccdb !important;
}

body[data-theme="dark"] .toastui-editor-contents strong,
body[data-theme="dark"] .toastui-editor-md-preview strong,
body[data-theme="noteeli"] .toastui-editor-contents strong,
body[data-theme="noteeli"] .toastui-editor-md-preview strong {
  color: #d2dbe8 !important;
}

body[data-theme="dark"] .toastui-editor-md-preview,
body[data-theme="noteeli"] .toastui-editor-md-preview {
  background: #111c2f !important;
}

body[data-theme="dark"] .toastui-editor-contents blockquote,
body[data-theme="dark"] .toastui-editor-md-preview blockquote,
body[data-theme="dark"] .toastui-editor-contents blockquote p,
body[data-theme="dark"] .toastui-editor-md-preview blockquote p,
body[data-theme="noteeli"] .toastui-editor-contents blockquote,
body[data-theme="noteeli"] .toastui-editor-md-preview blockquote,
body[data-theme="noteeli"] .toastui-editor-contents blockquote p,
body[data-theme="noteeli"] .toastui-editor-md-preview blockquote p {
  color: #93a4bb !important;
  border-left-color: rgba(148, 163, 184, 0.24) !important;
}

body[data-theme="dark"] .toastui-editor-contents code,
body[data-theme="dark"] .toastui-editor-md-preview code,
body[data-theme="noteeli"] .toastui-editor-contents code,
body[data-theme="noteeli"] .toastui-editor-md-preview code {
  background: rgba(148, 163, 184, 0.1) !important;
  color: #c7b7ca !important;
}

body[data-theme="dark"] .toastui-editor-contents pre,
body[data-theme="dark"] .toastui-editor-md-preview pre,
body[data-theme="noteeli"] .toastui-editor-contents pre,
body[data-theme="noteeli"] .toastui-editor-md-preview pre {
  background: rgba(11, 18, 32, 0.6) !important;
  color: #b9c8da !important;
}

body[data-theme="dark"] .toastui-editor-contents a,
body[data-theme="dark"] .toastui-editor-md-preview a,
body[data-theme="noteeli"] .toastui-editor-contents a,
body[data-theme="noteeli"] .toastui-editor-md-preview a {
  color: #9dbbe2 !important;
}

body[data-theme="dark"] .toastui-editor-toolbar-group,
body[data-theme="noteeli"] .toastui-editor-toolbar-group {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

body[data-theme="dark"] .toastui-editor-toolbar button,
body[data-theme="dark"] .toastui-editor-defaultUI-toolbar button,
body[data-theme="noteeli"] .toastui-editor-toolbar button,
body[data-theme="noteeli"] .toastui-editor-defaultUI-toolbar button {
  border-radius: 10px !important;
}

body[data-theme="dark"] .toastui-editor-toolbar button:hover,
body[data-theme="dark"] .toastui-editor-defaultUI-toolbar button:hover,
body[data-theme="dark"] .toastui-editor-mode-switch .tab-item:hover,
body[data-theme="dark"] .toastui-editor-mode-switch .tab-item.active,
body[data-theme="noteeli"] .toastui-editor-toolbar button:hover,
body[data-theme="noteeli"] .toastui-editor-defaultUI-toolbar button:hover,
body[data-theme="noteeli"] .toastui-editor-mode-switch .tab-item:hover,
body[data-theme="noteeli"] .toastui-editor-mode-switch .tab-item.active {
  background: rgba(59, 130, 246, 0.16) !important;
}

body[data-theme="dark"] .toastui-editor-toolbar button:hover,
body[data-theme="dark"] .toastui-editor-defaultUI-toolbar button:hover,
body[data-theme="dark"] .toastui-editor-mode-switch .tab-item:hover,
body[data-theme="noteeli"] .toastui-editor-toolbar button:hover,
body[data-theme="noteeli"] .toastui-editor-defaultUI-toolbar button:hover,
body[data-theme="noteeli"] .toastui-editor-mode-switch .tab-item:hover {
  color: #d6e1f0 !important;
}

body[data-theme="dark"] .toastui-editor-mode-switch .tab-item.active,
body[data-theme="noteeli"] .toastui-editor-mode-switch .tab-item.active {
  color: #dde8f6 !important;
  border-color: rgba(191, 219, 254, 0.34) !important;
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.28), rgba(29, 78, 216, 0.24)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(191, 219, 254, 0.18),
    0 8px 18px rgba(37, 99, 235, 0.18);
}

body[data-theme="dark"] .toastui-editor-popup-body input,
body[data-theme="dark"] .toastui-editor-popup-body label,
body[data-theme="dark"] .toastui-editor-popup-body select,
body[data-theme="noteeli"] .toastui-editor-popup-body input,
body[data-theme="noteeli"] .toastui-editor-popup-body label,
body[data-theme="noteeli"] .toastui-editor-popup-body select {
  color: var(--text) !important;
}

body[data-theme="dark"] .toastui-editor-contents h1,
body[data-theme="dark"] .toastui-editor-contents h2,
body[data-theme="dark"] .toastui-editor-contents h3,
body[data-theme="dark"] .toastui-editor-contents h4,
body[data-theme="dark"] .toastui-editor-md-preview h1,
body[data-theme="dark"] .toastui-editor-md-preview h2,
body[data-theme="dark"] .toastui-editor-md-preview h3,
body[data-theme="dark"] .toastui-editor-md-preview h4,
body[data-theme="noteeli"] .toastui-editor-contents h1,
body[data-theme="noteeli"] .toastui-editor-contents h2,
body[data-theme="noteeli"] .toastui-editor-contents h3,
body[data-theme="noteeli"] .toastui-editor-contents h4,
body[data-theme="noteeli"] .toastui-editor-md-preview h1,
body[data-theme="noteeli"] .toastui-editor-md-preview h2,
body[data-theme="noteeli"] .toastui-editor-md-preview h3,
body[data-theme="noteeli"] .toastui-editor-md-preview h4 {
  color: #b7c7da !important;
}

body[data-theme="dark"] .toastui-editor-contents h1,
body[data-theme="dark"] .toastui-editor-md-preview h1,
body[data-theme="noteeli"] .toastui-editor-contents h1,
body[data-theme="noteeli"] .toastui-editor-md-preview h1 {
  border-bottom-color: rgba(148, 163, 184, 0.32) !important;
}

body[data-theme="dark"] .toastui-editor-contents h2,
body[data-theme="dark"] .toastui-editor-md-preview h2,
body[data-theme="noteeli"] .toastui-editor-contents h2,
body[data-theme="noteeli"] .toastui-editor-md-preview h2 {
  border-bottom-color: rgba(148, 163, 184, 0.2) !important;
}

.ProseMirror,
.toastui-editor-md-preview,
.toastui-editor-contents,
.toastui-editor-contents p,
.toastui-editor-contents li,
.toastui-editor-md-preview p,
.toastui-editor-md-preview li {
  font-size: var(--editor-font-size) !important;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 20, 27, 0.46);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow-y: auto;
  z-index: 30;
}

body[data-theme="dark"] .modal-backdrop,
body[data-theme="noteeli"] .modal-backdrop {
  background: rgba(3, 8, 20, 0.72);
}

.modal-card {
  width: min(100%, 520px);
  max-height: calc(100vh - 3rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 28px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.modal-card-wide {
  width: min(100%, 760px);
}

.modal-card-settings {
  width: min(100%, 880px);
  max-height: calc(100vh - 2rem);
}

/* Settings layout: vertical tab strip on the left, panel content on the right */
.settings-body {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.settings-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 0.55rem 0.85rem 0.85rem;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.025);
}

body[data-theme="dark"] .settings-tabs,
body[data-theme="noteeli"] .settings-tabs {
  background: rgba(15, 23, 42, 0.45);
}

.settings-tab {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.86rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.settings-tab:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.05);
}

body[data-theme="dark"] .settings-tab:hover,
body[data-theme="noteeli"] .settings-tab:hover {
  background: rgba(255, 255, 255, 0.06);
}

.settings-tab.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 500;
}

.settings-tab-content {
  padding: 0.85rem 1rem;
  overflow-y: auto;
  min-height: 0;
}

.settings-tab-panel {
  display: grid;
  gap: 0.55rem;
}

.settings-tab-panel.hidden {
  display: none;
}

@media (max-width: 640px) {
  .settings-body {
    grid-template-columns: 1fr;
  }
  .settings-tabs {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 0.65rem;
  }
  .settings-tab {
    flex: 0 0 auto;
  }
}

body[data-theme="dark"] .modal-card,
body[data-theme="noteeli"] .modal-card {
  background:
    linear-gradient(180deg, rgba(17, 28, 47, 0.98), rgba(15, 28, 52, 0.96));
  border-color: var(--line-strong);
}

body[data-theme="dark"] .settings-profile-item,
body[data-theme="noteeli"] .settings-profile-item {
  background: rgba(17, 24, 39, 0.78);
  border-color: rgba(148, 163, 184, 0.22);
}

body[data-theme="dark"] .directory-browser-path,
body[data-theme="dark"] .directory-browser-create,
body[data-theme="noteeli"] .directory-browser-path,
body[data-theme="noteeli"] .directory-browser-create {
  background: rgba(17, 24, 39, 0.78);
  border-color: rgba(148, 163, 184, 0.22);
}

body[data-theme="dark"] .directory-browser-list,
body[data-theme="noteeli"] .directory-browser-list {
  background: rgba(17, 24, 39, 0.78);
  border-color: rgba(148, 163, 184, 0.22);
}

body[data-theme="dark"] .directory-browser-item,
body[data-theme="noteeli"] .directory-browser-item {
  border-color: rgba(148, 163, 184, 0.1);
}

body[data-theme="dark"] .directory-browser-item:hover,
body[data-theme="noteeli"] .directory-browser-item:hover {
  background: rgba(59, 130, 246, 0.14);
}

.modal-header,
.modal-content,
.modal-actions {
  padding: 0.85rem 1rem;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
}

.modal-header h3 {
  margin: 0.2rem 0 0;
  font-size: 1.05rem;
}

.modal-content {
  display: grid;
  gap: 0.55rem;
  overflow-y: auto;
  min-height: 0;
}

/* Smaller buttons inside any modal — keep the visual weight low */
.modal-actions .button,
.modal-content .button,
.settings-tab-content .button {
  padding: 0.4rem 0.9rem;
  font-size: 0.84rem;
}


.settings-profile-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.settings-profile-list {
  display: grid;
  gap: 0.55rem;
}

.settings-profile-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.75rem 0.85rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.settings-profile-item.is-editing {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.settings-profile-item-info {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.settings-profile-item-info span {
  font-size: 0.82rem;
  color: var(--muted);
  word-break: break-word;
}

.settings-profile-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.settings-profile-action {
  min-width: 6rem;
}

.settings-profile-empty {
  padding: 0.75rem 0.2rem 0.1rem;
  font-size: 0.86rem;
}

.directory-browser-current {
  display: grid;
  gap: 0.35rem;
}

.directory-browser-path {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0.8rem 0.95rem;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  word-break: break-word;
}

.directory-browser-crumb {
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 0.15rem 0.2rem;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}

.directory-browser-crumb:hover {
  background: var(--accent-soft);
}

.directory-browser-crumb.is-current {
  color: var(--text);
  cursor: default;
  font-weight: 600;
}

.directory-browser-separator {
  color: var(--muted);
  font-size: 0.86rem;
}

.directory-browser-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.directory-browser-create {
  display: grid;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border-radius: 16px;
  border: 1px dashed var(--line);
  background: rgba(255, 255, 255, 0.4);
}

.directory-browser-create-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.directory-browser-list {
  display: flex;
  flex-direction: column;
  max-height: min(50vh, 420px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.directory-browser-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  padding: 0.38rem 0.6rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  transition: background-color 0.12s ease;
}

.directory-browser-item:last-child {
  border-bottom: 0;
}

.directory-browser-item:hover {
  background: var(--accent-soft);
}

.directory-browser-item-icon {
  flex-shrink: 0;
  color: #c8974a;
  opacity: 0.9;
}

body[data-theme="obsidian"] .directory-browser-item-icon {
  color: #d4a73a;
}

.directory-browser-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.directory-browser-item-chevron {
  flex-shrink: 0;
  color: var(--muted);
  opacity: 0.6;
}

.directory-browser-empty {
  padding: 0.65rem 0.75rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

@media (max-width: 720px), (max-height: 860px) {
  .modal-backdrop {
    padding: 0.75rem;
    place-items: start center;
  }

  .modal-card {
    max-height: calc(100vh - 1.5rem);
    border-radius: 20px;
  }

  .modal-header,
  .modal-content,
  .modal-actions {
    padding: 1rem;
  }
}

@media (max-width: 768px) {
  /* On mobile, sidebar is always overlay — never docked.
     Specificity boosted (body .app-shell + !important on grid-template-columns)
     so this ALWAYS beats the .app-shell.sidebar-docked rule from the 1200px
     media query, regardless of source order or class state. */
  /* On mobile the sidebar is position:fixed (see rule below), so it's OUT of
     grid flow. If we leave 2 columns here, auto-placement drops .workspace-panel
     into the FIRST column — which, being 0px, gives main a 0-width track and
     the whole UI collapses into the top-left corner. Use a single-column grid
     so main always fills the row. */
  body .app-shell,
  body .app-shell.sidebar-docked,
  body .app-shell.sidebar-collapsed,
  body .app-shell.sidebar-overlay {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0;        /* no gap: single column row */
    padding: 0;    /* no outer padding: workspace goes edge-to-edge */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .app-shell .sidebar {
    position: fixed;
    left: 1.2rem;
    top: 1.2rem;
    bottom: 1.2rem;
    width: min(var(--sidebar-open-w), calc(100vw - 2.4rem));
    z-index: 200;
    transform: translateX(calc(-100% - 2rem));
    transition: transform 0.25s ease;
    border-radius: var(--radius);
  }

  .app-shell.sidebar-overlay .sidebar,
  .app-shell.sidebar-docked .sidebar {
    transform: translateX(0);
    /* Override the desktop overlay width rule — clamp to viewport on mobile */
    width: min(var(--sidebar-open-w), calc(100vw - 2.4rem));
  }

  /* workspace goes edge-to-edge on mobile — no card styling */
  .workspace-panel {
    border-radius: 0;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
  }

  /* always show pin on mobile */
  .sidebar-pin-btn {
    display: inline-flex !important;
  }

  /* hide resize handle on mobile */
  .sidebar-resize-handle {
    display: none !important;
  }

  .workspace-topbar {
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    flex-wrap: nowrap; /* single row — enforce by hiding non-essential items */
  }

  /* hide non-essential controls on mobile to keep topbar single-line.
     Saved-profiles, file-refresh and the account menu stay visible —
     the account menu now holds Settings + Logout, so it's essential. */
  .editor-zoom,
  .editor-mode-toggle {
    display: none !important;
  }

  /* topbar-actions must not wrap — we've hidden enough elements to fit */
  .topbar-actions {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }

  /* hide file path subtitle — show only the file name on mobile */
  #current-file-path {
    display: none;
  }

  /* compact save button */
  #save-button {
    padding: 0.3rem 0.65rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .sidebar-toolbar .button {
    flex-basis: calc(50% - 0.3rem);
  }
}

@media (max-width: 980px) and (min-width: 769px) {
  .workspace-topbar {
    gap: 0.6rem;
  }

  /* Cap sidebar to 30 vw on medium viewports so workspace always gets ≥ 70 %.
     Works for both docked (--sidebar-w = Npx) and collapsed/overlay (0px).   */
  .app-shell {
    grid-template-columns: min(var(--sidebar-w), 30vw) minmax(0, 1fr);
  }
}

/* ── Pure-CSS sidebar collapse safety net ──────────────────────
   When the docked sidebar would leave < 420 px for the workspace,
   hide it in the grid (the JS listener fires too but may lag).
   Covers the gap between the 768px mobile breakpoint and ~1200px. */
@media (max-width: 1200px) {
  .app-shell.sidebar-docked {
    /* Force sidebar column to 0 when viewport is tight enough that
       sidebarWidth (stored as --sidebar-open-w) > viewport - 420px.
       We can't read localStorage from CSS, so use a conservative cap:
       at 1200px the sidebar gets at most 780px for workspace which is fine;
       the JS auto-collapse handles cases below (viewport - sidebarWidth < 420). */
    grid-template-columns: min(var(--sidebar-w), calc(100vw - 520px)) minmax(0, 1fr);
  }
}

/* ── Tree icons ──────────────────────────────────────────── */

.tree-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 0.3rem;
}

.tree-icon svg {
  width: 14px;
  height: 14px;
}

.tree-link-dir,
.tree-link-file {
  display: inline-flex;
  align-items: center;
}

.tree-icon-folder  { color: #c8974a; }
.tree-icon-md      { color: #6b9fd4; }
.tree-icon-image   { color: #6aaf76; }
.tree-icon-pdf     { color: #c96b6b; }
.tree-icon-docx    { color: #4a86d4; }
.tree-icon-xlsx    { color: #4a9d6d; }
.tree-icon-pptx    { color: #d4794a; }
.tree-icon-json    { color: #d4a55a; }
.tree-icon-code    { color: #b884e0; }
.tree-icon-archive { color: #a89472; }
.tree-icon-audio   { color: #5fb8a8; }
.tree-icon-video   { color: #d878a8; }
.tree-icon-text    { color: #98a2b3; }
.tree-icon-generic { color: var(--muted); }

/* ── Brand logo ──────────────────────────────────────────── */

.brand-logo-link { display: block; }
.brand-logo {
  display: block;
  height: 38px;
  width: auto;
  object-fit: contain;
}
body[data-theme="light"] .brand-logo { filter: invert(1) brightness(0.3); }

/* ── Webnote.li theme ─────────────────────────────────────── */

body[data-theme="webnote"] .sidebar,
body[data-theme="webnote"] .workspace-panel,
body[data-theme="webnote"] .modal-card,
body[data-theme="webnote"] .profiles-dropdown,
body[data-theme="webnote"] .context-menu {
  background:
    linear-gradient(180deg, rgba(22, 45, 69, 0.74), rgba(9, 21, 33, 0.9));
  border-color: rgba(140, 188, 234, 0.18);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(216, 229, 242, 0.06);
}

/* ── Webnote: single-panel layout ────────────────────────────
   Faithful to the marketing-site mockup, where the sidebar and
   editor live inside one outlined panel separated by a 1 px seam,
   not two floating rounded boxes. */
body[data-theme="webnote"] .app-shell {
  gap: 0;
}

body[data-theme="webnote"] .app-shell.sidebar-collapsed,
body[data-theme="webnote"] .app-shell.sidebar-overlay {
  gap: 0 1.2rem;
}

body[data-theme="webnote"] .sidebar {
  border: 1px solid rgba(140, 188, 234, 0.18);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: none;
}

body[data-theme="webnote"] .workspace-panel {
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Restore full rounding when the sidebar is collapsed/floating so the
   editor doesn't end up with one square corner. */
body[data-theme="webnote"] .app-shell.sidebar-collapsed .workspace-panel,
body[data-theme="webnote"] .app-shell.sidebar-overlay .workspace-panel {
  border-radius: var(--radius);
}

body[data-theme="webnote"] .app-shell.sidebar-overlay .sidebar {
  border-radius: var(--radius);
  border-right: 1px solid rgba(140, 188, 234, 0.18);
}

body[data-theme="webnote"] .brand-block h1,
body[data-theme="webnote"] .workspace-topbar h2,
body[data-theme="webnote"] .modal-header h3,
body[data-theme="webnote"] .toastui-editor-contents h1,
body[data-theme="webnote"] .toastui-editor-contents h2,
body[data-theme="webnote"] .toastui-editor-contents h3,
body[data-theme="webnote"] .toastui-editor-md-preview h1,
body[data-theme="webnote"] .toastui-editor-md-preview h2,
body[data-theme="webnote"] .toastui-editor-md-preview h3 {
  color: #d9e6f4 !important;
  font-weight: 600;
}

body[data-theme="webnote"] .button-primary {
  background: linear-gradient(180deg, #ffcb4f 0%, var(--accent) 100%);
  border-color: rgba(255, 209, 99, 0.56);
  color: #0e1520;
  box-shadow: 0 10px 24px rgba(242, 176, 29, 0.24);
}

body[data-theme="webnote"] .button-primary:hover {
  background: linear-gradient(180deg, #ffd66f 0%, #f2b01d 100%);
  box-shadow: 0 14px 30px rgba(242, 176, 29, 0.3);
}

body[data-theme="webnote"] .button-secondary,
body[data-theme="webnote"] .icon-button,
body[data-theme="webnote"] .user-chip,
body[data-theme="webnote"] .settings-input,
body[data-theme="webnote"] .settings-toggle,
body[data-theme="webnote"] .sidebar-tree-icon,
body[data-theme="webnote"] .tree-scope-up,
body[data-theme="webnote"] .upload-file-list,
body[data-theme="webnote"] .upload-dropzone,
body[data-theme="webnote"] .overlay-card {
  background: rgba(98, 140, 184, 0.08);
  border-color: rgba(140, 188, 234, 0.22);
  color: var(--text);
}

body[data-theme="webnote"] .button-secondary:hover,
body[data-theme="webnote"] .icon-button:hover,
body[data-theme="webnote"] .tree-link:hover,
body[data-theme="webnote"] .tree-toggle:hover,
body[data-theme="webnote"] .context-menu-item:hover,
body[data-theme="webnote"] .profiles-dropdown-item:hover {
  background: rgba(242, 176, 29, 0.12);
}

body[data-theme="webnote"] .tree-link,
body[data-theme="webnote"] .tree-toggle {
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

body[data-theme="webnote"] .tree-link.is-active,
body[data-theme="webnote"] .sidebar-tree-icon.is-active,
body[data-theme="webnote"] .tree-row.is-drop-target {
  background: rgba(242, 176, 29, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 99, 0.26);
}

body[data-theme="webnote"] .workspace-topbar,
body[data-theme="webnote"] .statusbar,
body[data-theme="webnote"] .modal-header,
body[data-theme="webnote"] .modal-actions,
body[data-theme="webnote"] .profiles-dropdown-header,
body[data-theme="webnote"] .context-menu-header {
  border-color: rgba(140, 188, 234, 0.16);
}

body[data-theme="webnote"] .editor-stage,
body[data-theme="webnote"] .toastui-editor-defaultUI,
body[data-theme="webnote"] .toastui-editor-main,
body[data-theme="webnote"] .toastui-editor-md-container,
body[data-theme="webnote"] .toastui-editor-ww-container,
body[data-theme="webnote"] .toastui-editor-popup {
  background: rgba(11, 23, 34, 0.96) !important;
  color: var(--text) !important;
  border-color: rgba(140, 188, 234, 0.14) !important;
}

body[data-theme="webnote"] .toastui-editor-toolbar,
body[data-theme="webnote"] .toastui-editor-defaultUI-toolbar,
body[data-theme="webnote"] .toastui-editor-mode-switch {
  background:
    linear-gradient(180deg, rgba(13, 24, 36, 0.98), rgba(11, 23, 34, 0.96)) !important;
  border-color: rgba(140, 188, 234, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(216, 229, 242, 0.04);
}

body[data-theme="webnote"] .toastui-editor-toolbar-icons {
  filter: invert(0.96) hue-rotate(180deg) saturate(0.9);
}

body[data-theme="webnote"] .toastui-editor-contents,
body[data-theme="webnote"] .toastui-editor-contents p,
body[data-theme="webnote"] .toastui-editor-md-preview,
body[data-theme="webnote"] .ProseMirror {
  background: transparent !important;
  color: #c6d1df !important;
}

body[data-theme="webnote"] .toastui-editor-md-preview {
  background:
    repeating-linear-gradient(90deg, rgba(140, 188, 234, 0.035) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(140, 188, 234, 0.03) 0 1px, transparent 1px 72px),
    #0b1722 !important;
}

body[data-theme="webnote"] .toastui-editor-contents blockquote,
body[data-theme="webnote"] .toastui-editor-md-preview blockquote,
body[data-theme="webnote"] .toastui-editor-contents blockquote p,
body[data-theme="webnote"] .toastui-editor-md-preview blockquote p {
  color: #93a4bb !important;
  border-left-color: rgba(242, 176, 29, 0.64) !important;
}

body[data-theme="webnote"] .toastui-editor-contents code,
body[data-theme="webnote"] .toastui-editor-md-preview code {
  background: rgba(140, 188, 234, 0.1) !important;
  color: #ffd163 !important;
}

body[data-theme="webnote"] .toastui-editor-contents pre,
body[data-theme="webnote"] .toastui-editor-md-preview pre {
  background: rgba(7, 14, 21, 0.72) !important;
  color: #d9e6f4 !important;
}

/* ── Obsidian theme ──────────────────────────────────────── */

body[data-theme="obsidian"] {
  --bg: #1e1e1e;
  --panel: #252526;
  --panel-strong: #1e1e1e;
  --surface: #2d2d30;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);
  --text: #cccccc;
  --muted: #808080;
  --accent: #7c6fcd;
  --accent-strong: #6a5db8;
  --accent-soft: rgba(124, 111, 205, 0.15);
  --warning: #f28779;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  --glow: transparent;
  --radius: 4px;

  background: #1e1e1e;
}

body[data-theme="obsidian"] .app-shell {
  gap: 0;
  padding: 0;
  height: 100vh;
  height: 100dvh;
}
body[data-theme="obsidian"] .sidebar-resize-handle {
  top: 0;
  bottom: 0;
  left: calc(var(--sidebar-w) - 3px); /* centered on border: 3px in sidebar, 3px in workspace */
}

body[data-theme="obsidian"] .sidebar,
body[data-theme="obsidian"] .workspace-panel {
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: none;
  background: var(--panel);
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

body[data-theme="obsidian"] .workspace-panel {
  border-right: none;
}

body[data-theme="obsidian"] .brand-block h1,
body[data-theme="obsidian"] .workspace-topbar h2,
body[data-theme="obsidian"] .modal-header h3 {
  color: #d4d4d4;
}

body[data-theme="obsidian"] .button {
  border-radius: 4px;
  transform: none !important;
}

body[data-theme="obsidian"] .button-primary {
  background: var(--accent);
  border-color: transparent;
  box-shadow: none;
  color: #fff;
}

body[data-theme="obsidian"] .button-primary:hover {
  background: var(--accent-strong);
  box-shadow: none;
}

body[data-theme="obsidian"] .button-secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
}

body[data-theme="obsidian"] .button-secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

body[data-theme="obsidian"] .icon-button {
  border-radius: 4px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body[data-theme="obsidian"] .icon-button:hover {
  background: var(--accent-soft);
  border-color: transparent;
}

body[data-theme="obsidian"] .user-chip {
  border-radius: 4px;
  background: var(--surface);
  border-color: var(--line-strong);
}

body[data-theme="obsidian"] .profiles-dropdown {
  border-radius: 6px;
  background: #252526;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
  backdrop-filter: none;
}

body[data-theme="obsidian"] .profiles-dropdown-header {
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="obsidian"] .profiles-dropdown-item {
  border-radius: 4px;
}

body[data-theme="obsidian"] .profiles-dropdown-item:hover {
  background: var(--accent-soft);
}

body[data-theme="obsidian"] .settings-profile-item {
  border-radius: 4px;
  background: #252526;
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="obsidian"] .directory-browser-create {
  border-radius: 4px;
  background: #252526;
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="obsidian"] .tree-toggle,
body[data-theme="obsidian"] .tree-link {
  border-radius: 3px;
}

body[data-theme="obsidian"] .tree-link:hover,
body[data-theme="obsidian"] .tree-toggle:hover {
  background: var(--accent-soft);
}

body[data-theme="obsidian"] .tree-link.is-active {
  background: var(--accent-soft);
  color: #a89de8;
  box-shadow: none;
}

body[data-theme="obsidian"] .sidebar-tree-icon {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

body[data-theme="obsidian"] .sidebar-tree-icon:hover {
  background: var(--accent-soft);
  border-color: transparent;
}

body[data-theme="obsidian"] .sidebar-tree-icon.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}

body[data-theme="obsidian"] .workspace-topbar,
body[data-theme="obsidian"] .statusbar,
body[data-theme="obsidian"] .modal-header,
body[data-theme="obsidian"] .modal-actions {
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="obsidian"] .editor-stage {
  background: #1e1e1e;
}

body[data-theme="obsidian"] .toastui-editor-defaultUI,
body[data-theme="obsidian"] .toastui-editor-main,
body[data-theme="obsidian"] .toastui-editor-md-container,
body[data-theme="obsidian"] .toastui-editor-ww-container,
body[data-theme="obsidian"] .toastui-editor-popup {
  background: #1e1e1e !important;
  color: #cccccc !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body[data-theme="obsidian"] .toastui-editor-toolbar,
body[data-theme="obsidian"] .toastui-editor-defaultUI-toolbar,
body[data-theme="obsidian"] .toastui-editor-mode-switch {
  background: #252526 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

body[data-theme="obsidian"] .toastui-editor-toolbar-icons {
  filter: invert(0.82) hue-rotate(180deg) saturate(0.7);
}

body[data-theme="obsidian"] .toastui-editor-toolbar button,
body[data-theme="obsidian"] .toastui-editor-defaultUI-toolbar button {
  border-radius: 3px !important;
  color: #808080 !important;
}

body[data-theme="obsidian"] .toastui-editor-toolbar button:hover,
body[data-theme="obsidian"] .toastui-editor-defaultUI-toolbar button:hover {
  background: var(--accent-soft) !important;
  color: #cccccc !important;
}

body[data-theme="obsidian"] .toastui-editor-toolbar-group {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body[data-theme="obsidian"] .toastui-editor-mode-switch {
  min-height: 2.8rem;
  padding: 0.5rem 0.6rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body[data-theme="obsidian"] .toastui-editor-mode-switch .tab-item {
  border-radius: 3px !important;
  background: var(--surface) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #808080 !important;
  box-shadow: none !important;
}

body[data-theme="obsidian"] .toastui-editor-mode-switch .tab-item.active {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: #a89de8 !important;
  box-shadow: none !important;
}

body[data-theme="obsidian"] .toastui-editor-contents,
body[data-theme="obsidian"] .toastui-editor-contents p,
body[data-theme="obsidian"] .ProseMirror,
body[data-theme="obsidian"] .toastui-editor-md-preview {
  background: #1e1e1e !important;
  color: #cccccc !important;
}

body[data-theme="obsidian"] .toastui-editor-contents h1,
body[data-theme="obsidian"] .toastui-editor-contents h2,
body[data-theme="obsidian"] .toastui-editor-contents h3,
body[data-theme="obsidian"] .toastui-editor-contents h4,
body[data-theme="obsidian"] .toastui-editor-md-preview h1,
body[data-theme="obsidian"] .toastui-editor-md-preview h2,
body[data-theme="obsidian"] .toastui-editor-md-preview h3,
body[data-theme="obsidian"] .toastui-editor-md-preview h4 {
  color: #e8e8e8 !important;
}

body[data-theme="obsidian"] .toastui-editor-contents h1,
body[data-theme="obsidian"] .toastui-editor-md-preview h1 {
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

body[data-theme="obsidian"] .toastui-editor-contents h2,
body[data-theme="obsidian"] .toastui-editor-md-preview h2 {
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

body[data-theme="obsidian"] .toastui-editor-contents code,
body[data-theme="obsidian"] .toastui-editor-md-preview code {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ce9178 !important;
}

body[data-theme="obsidian"] .toastui-editor-contents pre,
body[data-theme="obsidian"] .toastui-editor-md-preview pre {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #d4d4d4 !important;
}

body[data-theme="obsidian"] .toastui-editor-contents a,
body[data-theme="obsidian"] .toastui-editor-md-preview a {
  color: #569cd6 !important;
}

body[data-theme="obsidian"] .toastui-editor-contents blockquote,
body[data-theme="obsidian"] .toastui-editor-md-preview blockquote,
body[data-theme="obsidian"] .toastui-editor-contents blockquote p,
body[data-theme="obsidian"] .toastui-editor-md-preview blockquote p {
  border-left-color: var(--accent) !important;
  color: #808080 !important;
}

body[data-theme="obsidian"] .toastui-editor-contents li,
body[data-theme="obsidian"] .toastui-editor-md-preview li {
  color: #cccccc !important;
}

body[data-theme="obsidian"] .toastui-editor-contents strong,
body[data-theme="obsidian"] .toastui-editor-md-preview strong {
  color: #e8e8e8 !important;
}

body[data-theme="obsidian"] .toastui-editor-popup-body input,
body[data-theme="obsidian"] .toastui-editor-popup-body label,
body[data-theme="obsidian"] .toastui-editor-popup-body select {
  color: var(--text) !important;
}

body[data-theme="obsidian"] .context-menu {
  border-radius: 6px;
  background: #2d2d30;
  border-color: rgba(255, 255, 255, 0.13);
  backdrop-filter: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

body[data-theme="obsidian"] .context-menu-item {
  border-radius: 3px;
  color: #cccccc;
}

body[data-theme="obsidian"] .context-menu-item:hover {
  background: var(--accent-soft);
}

body[data-theme="obsidian"] .context-menu-item-muted {
  color: #808080;
}

body[data-theme="obsidian"] .context-menu-header {
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="obsidian"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.65);
}

body[data-theme="obsidian"] .modal-card {
  border-radius: 6px;
  background: #252526;
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

body[data-theme="obsidian"] .settings-input {
  border-radius: 3px;
  background: #2d2d30;
  border-color: rgba(255, 255, 255, 0.13);
  color: #cccccc;
}

body[data-theme="obsidian"] .settings-input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

body[data-theme="obsidian"] .directory-browser-path {
  border-radius: 4px;
  background: #2d2d30;
  border-color: rgba(255, 255, 255, 0.1);
  color: #cccccc;
}

body[data-theme="obsidian"] .directory-browser-list {
  background: #2d2d30;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

body[data-theme="obsidian"] .directory-browser-item {
  color: #cccccc;
  border-color: rgba(255, 255, 255, 0.06);
}

body[data-theme="obsidian"] .directory-browser-item:hover {
  background: var(--accent-soft);
}


body[data-theme="obsidian"] .upload-dropzone {
  border-radius: 4px;
  background: #2d2d30;
  border-color: rgba(255, 255, 255, 0.13);
}

body[data-theme="obsidian"] .upload-dropzone:hover,
body[data-theme="obsidian"] .upload-dropzone.is-dragover,
body[data-theme="obsidian"] .upload-dropzone:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: none;
}

body[data-theme="obsidian"] .upload-file-list {
  border-radius: 4px;
  background: #2d2d30;
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="obsidian"] .overlay-card {
  border-radius: 4px;
  background: rgba(37, 37, 38, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

body[data-theme="obsidian"] .tree-scope-up {
  border-radius: 3px;
  background: #2d2d30;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cccccc;
}

body[data-theme="obsidian"] .tree-scope-up:hover {
  background: var(--accent-soft);
}

body[data-theme="obsidian"] .alert-error {
  background: rgba(80, 20, 20, 0.6);
  border-color: rgba(242, 135, 121, 0.3);
}

body[data-theme="obsidian"] .tree-icon-folder  { color: #d4a73a; }
body[data-theme="obsidian"] .tree-icon-md      { color: #6b9fd4; }
body[data-theme="obsidian"] .tree-icon-image   { color: #6aaf76; }
body[data-theme="obsidian"] .tree-icon-pdf     { color: #c96b6b; }
body[data-theme="obsidian"] .tree-icon-json    { color: #d4a55a; }
body[data-theme="obsidian"] .tree-icon-code    { color: #b884e0; }
body[data-theme="obsidian"] .tree-icon-archive { color: #a89472; }
body[data-theme="obsidian"] .tree-icon-audio   { color: #5fb8a8; }
body[data-theme="obsidian"] .tree-icon-video   { color: #d878a8; }
body[data-theme="obsidian"] .tree-icon-text    { color: #98a2b3; }
body[data-theme="obsidian"] .tree-icon-generic { color: #808080; }

/* ── Subscribe / paywall page ────────────────────────────────────── */

.subscribe-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

.subscribe-card {
  width: 100%;
  max-width: 420px;
  padding: 40px 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.subscribe-logo img {
  border-radius: 12px;
}

.subscribe-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.subscribe-tagline {
  color: var(--muted);
  margin: 0;
  font-size: 0.95rem;
}

.subscribe-plan {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  text-align: left;
}

.subscribe-plan-name {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}

.subscribe-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 16px;
}

.subscribe-plan-amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
}

.subscribe-plan-period {
  color: var(--muted);
  font-size: 0.9rem;
}

.subscribe-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subscribe-features li {
  color: var(--muted);
  font-size: 0.9rem;
  padding-left: 1.4em;
  position: relative;
}

.subscribe-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.subscribe-btn {
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.subscribe-btn:hover {
  opacity: 0.88;
}

.subscribe-account {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

.subscribe-footer {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0;
}

.subscribe-footer a {
  color: var(--accent);
}

/* ── Legal links on the self-host login page ────────────────── */

.login-legal-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  font-size: 0.8rem;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.login-legal-links a {
  color: var(--muted);
  text-decoration: none;
}

.login-legal-links a:hover {
  color: var(--text);
}

/* ── Setup banner (hosted-mode user without SFTP/GDrive yet) ──── */

.setup-banner {
  background: linear-gradient(180deg, rgba(242, 176, 29, 0.18), rgba(242, 176, 29, 0.08));
  border-bottom: 1px solid rgba(242, 176, 29, 0.4);
  color: var(--text);
  padding: 12px 18px;
  font-size: 0.92rem;
  text-align: center;
}
.setup-banner strong { color: var(--accent); }
.setup-banner-link {
  background: none;
  border: 0;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.setup-banner-link:hover { color: var(--accent-soft); }

/* ── Profile dropdown extras: drag handle + update icon ──────── */

.profiles-dropdown-drag {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: 0.4;
  cursor: grab;
}
.profiles-dropdown-drag:hover { opacity: 0.8; }
.profiles-dropdown-drag svg { width: 12px; height: 12px; }
.profiles-dropdown-row.is-dragging { opacity: 0.4; }
.profiles-dropdown-row.is-drop-target {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 6px;
}

.profiles-dropdown-update {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  opacity: 0.55;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.profiles-dropdown-update:hover {
  opacity: 1;
  color: var(--accent);
  background: rgba(242, 176, 29, 0.14);
}
.profiles-dropdown-update svg { width: 13px; height: 13px; }

/* Settings: inline checkbox label with text */
.settings-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text);
  margin: 8px 0 12px;
  cursor: pointer;
  user-select: none;
}
.settings-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}