: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,
/* Editor chrome that makes no sense on a read-only page: the status
   line ("File ready for editing…") and the dotfiles toggle. */
.app-shell.is-public .statusbar,
.app-shell.is-public #toggle-hidden-files {
  display: none !important;
}

/* With the topbar and statusbar display:none'd, the panel's row grid
   (auto 1fr auto) would auto-place the stage into the small `auto`
   track and leave the 1fr row empty — collapse to a single full row. */
.app-shell.is-public .workspace-panel {
  grid-template-rows: minmax(0, 1fr) !important;
}

.app-shell.is-public .editor-stage,
.app-shell.is-public #public-content {
  height: 100%;
}

/* Cross-item navigation on shared pages: every published item of this
   instance, display names only (never filesystem paths). */
.public-nav {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.public-nav-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0 0.5rem 0.35rem;
}

.public-nav-item {
  display: block;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-nav-item:hover {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

.public-nav-item.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-weight: 600;
}

/* 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;
  /* Horizontal padding centers a readable article column (~62rem) on
     wide screens and degrades to plain 2rem padding on narrow ones. */
  padding: 2rem max(2rem, calc((100% - 62rem) / 2)) 4rem;
  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. */
/* Deliberately quiet: this sits on every shared page, so it must read
   as a footnote, not an ad — near-black bar, gray text, on every theme. */
.public-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.3rem 1rem;
  background: #16181d;
  color: #9aa0a8;
  font-size: 0.75rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.public-banner strong {
  font-weight: 600;
  color: #c6cbd2;
}
.public-banner a {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
}
body:has(.public-banner) .app-shell {
  height: calc(100vh - 1.9rem);
  height: calc(100dvh - 1.9rem);
}

/* 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: 0;
  padding: 0;
  overflow: hidden;
}

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

/* 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 full-height drawer on the left
   (JS sets --sidebar-w: 0) */
.app-shell.sidebar-overlay .sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-open-w);
  z-index: 200;
  transform: translateX(0);
  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: 0;
  bottom: 0;
  /* straddles the sidebar/main boundary */
  left: calc(var(--sidebar-w) - 3px);
  width: 6px;
  z-index: 30; /* must beat ProseMirror's z-index: 20 */
  cursor: col-resize;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0;
}
.sidebar-resize-handle.is-dragging {
  opacity: 1;
  background: var(--accent-soft);
}
/* Only reveal on devices that can actually hover — on touch screens
   iOS "sticky hover" left a phantom accent strip down the screen edge
   after a tap, and drag-resize is a mouse affordance anyway. */
@media (hover: hover) and (pointer: fine) {
  .sidebar-resize-handle:hover {
    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;
}
@media (pointer: coarse) {
  .sidebar-resize-handle {
    display: none;
  }
}

/* Panels are frameless: no radius, border or shadow — content fills
   the viewport edge-to-edge. (This used to be the "compact chrome"
   preference; it's now the only layout.) Themes keep their colours. */
.sidebar,
.workspace-panel {
  background: var(--panel);
  backdrop-filter: blur(14px);
}

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));
}

.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; }

/* ── File history & blame modal ─────────────────────────────────── */

.modal-card.modal-card-history {
  width: min(calc(100vw - 2rem), 860px);
}

/* "History & line authors" entry inside the git dropdown */
.git-menu-history {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  color: var(--text);
  font-size: 0.85rem;
}

.git-menu-history:hover {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

.git-menu-history svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--muted);
}

.git-menu-history-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.git-menu-history-file {
  color: var(--muted);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0 1.5rem 0.75rem;
}

.history-tab {
  border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.history-tab.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--text);
}

.history-content {
  overflow-y: auto;
  min-height: 240px;
}

.history-commit-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  color: var(--text);
}

.history-commit-row:hover,
.history-commit-row.is-open {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

.history-author-dot {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.history-commit-text {
  min-width: 0;
}

.history-commit-subject {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-commit-meta {
  font-size: 0.78rem;
}

.history-diff {
  margin: 0.15rem 0 0.6rem 2.35rem;
  padding: 0.5rem 0.7rem;
  border-left: 2px solid color-mix(in srgb, var(--muted) 35%, transparent);
  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.history-hunk {
  border-top: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent);
  margin: 0.45rem 0;
}

.history-diff-line {
  min-height: 1.2em;
}

.diff-added {
  background: color-mix(in srgb, #16a34a 22%, transparent);
  border-radius: 3px;
}

.diff-removed {
  background: color-mix(in srgb, #dc2626 20%, transparent);
  text-decoration: line-through;
  opacity: 0.75;
  border-radius: 3px;
}

.blame-line {
  display: flex;
  gap: 0.7rem;
  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
  font-size: 0.8rem;
  line-height: 1.5;
}

.blame-gutter {
  flex: 0 0 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 3px solid transparent;
  padding-left: 0.5rem;
  font-family: inherit;
  font-size: 0.75rem;
}

.blame-content {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
  min-width: 0;
}

/* freshness tint: the newer the line, the warmer the row reads */
.blame-age-0 .blame-content { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.blame-age-1 .blame-content { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.blame-age-2 .blame-content { background: color-mix(in srgb, var(--accent) 4%, transparent); }

@media (max-width: 640px) {
  .blame-gutter {
    flex-basis: 110px;
  }
}

/* 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);
}

/* Toast UI's stylesheet ships `.toastui-editor-defaultUI-toolbar button`
   with a hardcoded near-white border and dark text. That rule is more
   specific than `.noteeli-toolbar-button` above, so our theme variables
   lost: invisible on the light theme, but on every dark theme the custom
   undo/redo buttons rendered as a glaring white box with a dark glyph.
   Re-assert the theme variables with higher specificity + !important
   (the !important also outranks per-theme `.toastui-editor-toolbar
   button { color: … !important }` overrides, e.g. Obsidian's #808080). */
.toastui-editor-defaultUI-toolbar button.noteeli-toolbar-button {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.toastui-editor-defaultUI-toolbar button.noteeli-toolbar-button:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

.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;
  }

  /* The drawer starts BELOW the topbar (height measured into --topbar-h
     by JS): the hamburger and Save button stay visible and tappable
     while the drawer is open, so there is always an obvious way to
     close it. Same for the dimming backdrop. */
  .app-shell .sidebar {
    position: fixed;
    left: 0.6rem;
    top: calc(var(--topbar-h, 3.5rem) + 0.4rem);
    bottom: 0.6rem;
    width: min(var(--sidebar-open-w), calc(100vw - 1.2rem));
    z-index: 200;
    transform: translateX(calc(-100% - 2rem));
    transition: transform 0.25s ease;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .app-shell.sidebar-overlay::before {
    top: var(--topbar-h, 3.5rem);
  }

  .app-shell.sidebar-overlay .sidebar,
  .app-shell.sidebar-docked .sidebar {
    transform: translateX(0);
    /* Override the desktop overlay width/top rules — clamp to viewport
       and keep the drawer below the topbar. */
    width: min(var(--sidebar-open-w), calc(100vw - 1.2rem));
    top: calc(var(--topbar-h, 3.5rem) + 0.4rem);
    bottom: 0.6rem;
    left: 0.6rem;
  }

  /* skip the blur on mobile — costly, and the panel is edge-to-edge */
  .workspace-panel {
    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);
}

/* :not(.noteeli-toolbar-button) — the custom undo/redo buttons draw their
   glyph with currentColor and must keep var(--text); #808080 on the dark
   surface was near-invisible. */
body[data-theme="obsidian"] .toastui-editor-toolbar button,
body[data-theme="obsidian"] .toastui-editor-defaultUI-toolbar button {
  border-radius: 3px !important;
}

body[data-theme="obsidian"] .toastui-editor-toolbar button:not(.noteeli-toolbar-button),
body[data-theme="obsidian"] .toastui-editor-defaultUI-toolbar button:not(.noteeli-toolbar-button) {
  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);
}

/* ── Kanban board ───────────────────────────────────────────── */
.kanban-board {
  height: 100%;
  width: 100%;
  overflow: auto;
  padding: 16px;
}

.kanban-columns {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 100%;
}

.kanban-column {
  flex: 0 0 290px;
  max-width: 290px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}

.kanban-column-ghost {
  background: transparent;
  border-style: dashed;
}

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px;
}

.kanban-column-title {
  font-weight: 600;
  color: var(--text);
  cursor: text;
  overflow-wrap: anywhere;
}

.kanban-column-count {
  flex: none;
  font-size: 12px;
  color: var(--muted);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 1px 8px;
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 24px;
  border-radius: 8px;
}

.kanban-cards.drop-append {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

.kanban-card {
  background: var(--panel-strong, var(--bg));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: grab;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kanban-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.kanban-card.is-dragging {
  opacity: 0.5;
}

.kanban-card.drop-before {
  box-shadow: 0 -3px 0 0 var(--accent);
}

.kanban-card.drop-after {
  box-shadow: 0 3px 0 0 var(--accent);
}

.kanban-card.drop-into {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.kanban-card-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.kanban-card-checkbox {
  flex: none;
  transform: translateY(2px);
  accent-color: var(--accent);
  cursor: pointer;
}

.kanban-card-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
}

.kanban-card.is-done > .kanban-card-main .kanban-card-text {
  text-decoration: line-through;
  color: var(--muted);
}

.kanban-card-text code {
  font-size: 0.85em;
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 1px 4px;
}

.kanban-link {
  color: var(--accent);
  text-decoration: underline;
}

.kanban-card-progress {
  flex: none;
  font-size: 11px;
  color: var(--muted);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 1px 7px;
  cursor: help;
}

.kanban-card-actions {
  flex: none;
  display: none;
  gap: 2px;
}

.kanban-card:hover > .kanban-card-main .kanban-card-actions {
  display: inline-flex;
}

.kanban-icon-button {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 6px;
  cursor: pointer;
}

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

.kanban-icon-danger:hover {
  color: color-mix(in srgb, #dc2626 80%, var(--text));
}

.kanban-card-note {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Subtask thread: indent + connecting line under the parent card */
.kanban-children {
  margin-top: 8px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kanban-add-card,
.kanban-add-column {
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}

.kanban-add-column {
  flex: 0 0 220px;
  align-self: flex-start;
}

.kanban-add-card:hover,
.kanban-add-column:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.kanban-inline-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--panel-strong, var(--bg));
  color: var(--text);
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
}

.kanban-inline-input:focus {
  outline: 2px solid var(--accent-soft);
}

/* ── Editor view-mode dropdown ─────────────────────────────── */
.editor-mode-menu-wrap {
  position: relative;
}

.editor-mode-toggle::after {
  content: "▾";
  margin-left: 0.35em;
  font-size: 0.85em;
  opacity: 0.7;
}

.editor-mode-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  min-width: 140px;
  padding: 0.4rem;
  border-radius: 14px;
  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;
}

.editor-mode-menu-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
}

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

.editor-mode-menu-item.is-active {
  color: var(--accent);
  font-weight: 600;
}

.editor-mode-menu-item.is-active::after {
  content: "✓";
  float: right;
}

/* Detached subtask: chip linking back to its parent card (Jira-style) */
.kanban-card-parent {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ghost slot showing where a dragged card will land */
.kanban-drop-placeholder {
  border: 2px dashed var(--accent);
  border-radius: 10px;
  background: var(--accent-soft);
  flex: none;
}

/* ── Update bar (a new version was deployed under this tab) ──── */
.update-bar {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: calc(100vw - 2rem);
  padding: 0.55rem 0.6rem 0.55rem 1rem;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  font-size: 0.85rem;
  color: var(--text);
}

/* ── Review comments ─────────────────────────────────────────────
   A commented range is a `<span data-comment="c_…">` mark inside the
   WYSIWYG editor (the file itself carries `<!--comment:c_…:start/end-->`
   markers, see app.js). The panel on the right lists the comments that
   live in the sibling `<note>_comments.md`. Highlight colours are
   generated per comment id at runtime (open vs resolved) into
   #comment-dynamic-style — this file only ships the shared shapes. */
.workspace-body {
  display: flex;
  min-height: 0;
  min-width: 0;
  /* As a grid item the wrapper must not let the editor's intrinsic
     width (the toolbar row) widen the whole column on a phone — the
     editor stage used to be the grid item and clipped it the same way. */
  overflow: hidden;
}

.workspace-body > .editor-stage {
  flex: 1 1 auto;
  min-width: 0;
}

.comments-panel {
  flex: 0 0 auto;
  width: min(340px, 42vw);
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--line);
  background: var(--panel);
}

.comments-panel.hidden {
  display: none;
}

.comments-panel-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem 0.55rem 0.9rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.comments-panel-header strong {
  flex: 1 1 auto;
}

.comments-show-resolved {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.comments-show-resolved input {
  accent-color: var(--accent);
  margin: 0;
}

.comments-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.comments-hint {
  margin: 0;
  padding: 0.5rem 0.9rem 0.65rem;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  line-height: 1.35;
}

.comments-empty {
  margin: 0.6rem 0.3rem;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
}

.comment-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 0.55rem 0.65rem 0.5rem;
  display: grid;
  gap: 0.4rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.comment-card:hover {
  border-color: var(--line-strong);
}

.comment-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.comment-card.is-resolved {
  opacity: 0.72;
}

.comment-card.is-composer {
  cursor: default;
  border-style: dashed;
  border-color: var(--accent);
}

.comment-card-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  color: var(--muted);
}

.comment-card-head time {
  flex: 1 1 auto;
}

.comment-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.comment-number.is-resolved {
  background: var(--muted);
}

.comment-number.is-orphan {
  background: var(--warning);
}

.comment-quote {
  margin: 0;
  padding-left: 0.55rem;
  border-left: 3px solid var(--accent-soft);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.comment-quote.is-orphan {
  border-left-color: var(--warning);
  font-style: normal;
}

.comment-text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.42;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comment-textarea {
  width: 100%;
  min-height: 4.2rem;
  resize: vertical;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--panel-strong);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.4;
}

.comment-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.comment-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}

.comment-action {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.74rem;
  padding: 0.18rem 0.55rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.comment-action:hover {
  color: var(--text);
  background: var(--accent-soft);
}

.comment-action.is-primary {
  color: #fff;
  background: var(--accent);
}

.comment-action.is-primary:hover {
  background: var(--accent-strong);
}

.comment-action.is-danger {
  color: var(--warning);
}

.comment-action.is-danger:hover {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border-color: var(--warning);
}

/* topbar toggle + count */
.comments-toggle {
  position: relative;
}

.comments-toggle[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.comments-badge {
  top: -4px;
  right: -4px;
}

/* floating "Comment" chip that follows a text selection */
.comment-add-floating {
  position: fixed;
  z-index: 1000;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--panel-strong, #fff);
  color: var(--accent);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-select: none;
}

.comment-add-floating svg {
  width: 1rem;
  height: 1rem;
}

.comment-add-floating:hover {
  /* --accent-soft is translucent — over editor text the label became
     unreadable. Mix the tint into an opaque panel colour instead. */
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-strong, #fff));
}

.comment-add-floating.hidden {
  display: none;
}

/* range marks inside the WYSIWYG editor — colours per id come from the
   runtime stylesheet; here only the geometry, so unknown ids stay plain */
.toastui-editor-contents span[data-comment] {
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.toastui-editor-ww-container {
  position: relative;
}

.comment-badge-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* Toast UI gives the contenteditable z-index: 20 — stay above it or
     the badges paint but never receive a click. */
  z-index: 25;
}

/* Toast UI styles every <button> under its container (square, fixed
   size, hardcoded border) — out-specify it the same way as the custom
   toolbar buttons. */
.toastui-editor-ww-container button.comment-badge {
  position: absolute;
  right: 6px;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto !important;
  min-width: 20px;
  height: 20px !important;
  margin: 0;
  padding: 0 6px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font: inherit;
  font-size: 0.66rem !important;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.toastui-editor-ww-container button.comment-badge.is-resolved {
  background: var(--muted) !important;
}

.toastui-editor-ww-container button.comment-badge.is-active {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--accent-soft), 0 2px 8px rgba(15, 23, 42, 0.18);
}

.tree-icon-comments { color: #d9a441; }

@media (max-width: 768px) {
  /* The phone topbar is a single non-wrapping row that is already full;
     one more icon pushes the Save button off-screen. The margin badges
     and the floating "Comment" chip are the mobile way into the panel. */
  #comments-toggle {
    display: none !important;
  }

  /* The topbar's non-wrapping row is a grid item: without an explicit
     minimum its intrinsic width (long file name + every button) widened
     the whole column past the viewport, clipping the Save button and
     pushing the comment badges off-screen. */
  .workspace-topbar {
    min-width: 0;
  }

  /* the panel becomes a right-hand drawer over the editor */
  .comments-panel {
    position: fixed;
    top: var(--topbar-h, 3.5rem);
    right: 0;
    bottom: 0;
    width: min(360px, 100vw);
    z-index: 26;
    border-left: 1px solid var(--line);
    background: var(--panel-strong); /* opaque — it covers the editor */
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.22);
  }

  .comment-add-floating {
    font-size: 0.86rem;
    padding: 0.42rem 0.85rem 0.42rem 0.65rem;
  }
}

/* A short notice next to the selection when a comment cannot be made —
   the status bar alone was too easy to miss. */
.comment-toast {
  position: fixed;
  z-index: 1001;
  max-width: min(320px, calc(100vw - 2rem));
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--warning);
  background: var(--panel-strong, #fff);
  color: var(--warning);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.comment-toast.hidden {
  display: none;
}

.comment-toast.is-fading {
  opacity: 0;
}