:root {
  --bg: #f3f4f6;
  --bg-accent: radial-gradient(circle at 12% 0%, #dff4ff 0%, #f3f4f6 35%, #f3f4f6 100%);
  --canvas-texture: none;
  --surface: #ffffff;
  --surface-soft: #f8f8f8;
  --text: #151515;
  --muted: #666;
  --border: #d8d8d8;
  --focus: #0d9db9;
  --token: #7e8b93;
  --danger: #b74848;
  --active-row: rgba(13, 157, 185, 0.13);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 12px rgba(0, 0, 0, 0.06);
  --density-gap: 1;
  --density-pad: 1;
  --density-font: 1;
  --density-control: 1;
  --app-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ui-scale: 1;
  --tone-weight: 400;
  --tone-spacing: 0em;
  --editor-line-height: 1.6;
  --desktop-sidebar-bottom-reserve: 78px;
  --code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body[data-theme="dark"] {
  --bg: #15181c;
  --bg-accent: radial-gradient(circle at 12% 0%, #1a3b46 0%, #15181c 35%, #15181c 100%);
  --surface: #20252b;
  --surface-soft: #191d23;
  --text: #ebebeb;
  --muted: #a3acb4;
  --border: #333c45;
  --focus: #34c7e6;
  --token: #8ea0ac;
  --danger: #e07a7a;
  --active-row: rgba(52, 199, 230, 0.19);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.28);
}

body[data-theme="light"][data-accent="green"] {
  --bg-accent: radial-gradient(circle at 12% 0%, #e6f5ec 0%, #f3f4f6 36%, #f3f4f6 100%);
  --focus: #2f8f6d;
  --active-row: rgba(47, 143, 109, 0.14);
}

body[data-theme="dark"][data-accent="green"] {
  --bg-accent: radial-gradient(circle at 12% 0%, #19392e 0%, #15181c 38%, #15181c 100%);
  --focus: #62c9a2;
  --active-row: rgba(98, 201, 162, 0.2);
}

body[data-theme="light"][data-accent="red"] {
  --bg-accent: radial-gradient(circle at 12% 0%, #faeceb 0%, #f3f4f6 36%, #f3f4f6 100%);
  --focus: #b85f5f;
  --active-row: rgba(184, 95, 95, 0.15);
}

body[data-theme="dark"][data-accent="red"] {
  --bg-accent: radial-gradient(circle at 12% 0%, #392627 0%, #15181c 38%, #15181c 100%);
  --focus: #e08888;
  --active-row: rgba(224, 136, 136, 0.2);
}

body[data-theme="light"][data-accent="blue"] {
  --bg-accent: radial-gradient(circle at 12% 0%, #e6f0ff 0%, #f3f4f6 36%, #f3f4f6 100%);
  --focus: #437fd0;
  --active-row: rgba(67, 127, 208, 0.15);
}

body[data-theme="dark"][data-accent="blue"] {
  --bg-accent: radial-gradient(circle at 12% 0%, #1d2f49 0%, #15181c 38%, #15181c 100%);
  --focus: #79adf0;
  --active-row: rgba(121, 173, 240, 0.2);
}

body[data-theme="light"][data-accent="orange"] {
  --bg-accent: radial-gradient(circle at 12% 0%, #fff0e1 0%, #f3f4f6 36%, #f3f4f6 100%);
  --focus: #c88842;
  --active-row: rgba(200, 136, 66, 0.14);
}

body[data-theme="dark"][data-accent="orange"] {
  --bg-accent: radial-gradient(circle at 12% 0%, #3d2d1d 0%, #15181c 38%, #15181c 100%);
  --focus: #efaf6a;
  --active-row: rgba(239, 175, 106, 0.2);
}

body[data-theme="light"][data-accent="yellow"] {
  --bg-accent: radial-gradient(circle at 12% 0%, #fff8d8 0%, #f3f4f6 36%, #f3f4f6 100%);
  --focus: #b99234;
  --active-row: rgba(185, 146, 52, 0.15);
}

body[data-theme="dark"][data-accent="yellow"] {
  --bg-accent: radial-gradient(circle at 12% 0%, #3c3217 0%, #15181c 38%, #15181c 100%);
  --focus: #e4c76d;
  --active-row: rgba(228, 199, 109, 0.2);
}

body[data-theme="light"][data-accent="purple"] {
  --bg-accent: radial-gradient(circle at 12% 0%, #efebff 0%, #f3f4f6 36%, #f3f4f6 100%);
  --focus: #7e68ba;
  --active-row: rgba(126, 104, 186, 0.15);
}

body[data-theme="dark"][data-accent="purple"] {
  --bg-accent: radial-gradient(circle at 12% 0%, #2f2747 0%, #15181c 38%, #15181c 100%);
  --focus: #ac96ea;
  --active-row: rgba(172, 150, 234, 0.2);
}

body[data-theme="light"][data-accent="pink"] {
  --bg-accent: radial-gradient(circle at 12% 0%, #fdeef5 0%, #f3f4f6 36%, #f3f4f6 100%);
  --focus: #be6d98;
  --active-row: rgba(190, 109, 152, 0.15);
}

body[data-theme="dark"][data-accent="pink"] {
  --bg-accent: radial-gradient(circle at 12% 0%, #3e2734 0%, #15181c 38%, #15181c 100%);
  --focus: #df90b7;
  --active-row: rgba(223, 144, 183, 0.2);
}

body[data-density="cozy"] {
  --density-gap: 1.22;
  --density-pad: 1.2;
  --density-font: 1.06;
  --density-control: 1.14;
}

body[data-density="compact"] {
  --density-gap: 0.82;
  --density-pad: 0.82;
  --density-font: 0.95;
  --density-control: 0.9;
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: var(--app-font);
  font-size: calc(16px * var(--ui-scale));
  font-weight: var(--tone-weight);
  letter-spacing: var(--tone-spacing);
  background-color: var(--bg);
  background-image: var(--bg-accent), var(--canvas-texture);
  background-repeat: no-repeat, repeat;
  background-size: cover, 240px 240px;
  background-attachment: fixed;
  color: var(--text);
}

body.old-school-mode {
  --bg: #020602;
  --bg-accent: none;
  --canvas-texture: none;
  --surface: #050b05;
  --surface-soft: #071007;
  --text: #82ff9b;
  --muted: #58c973;
  --border: #1f6434;
  --focus: #b4ffbf;
  --token: #52d274;
  --danger: #7dd08f;
  --active-row: rgba(130, 255, 155, 0.15);
  --shadow: 0 0 0 1px rgba(88, 201, 115, 0.24), 0 0 18px rgba(28, 117, 52, 0.24);
  --app-font: "Courier New", "Lucida Console", Monaco, monospace;
  --code-font: "Courier New", "Lucida Console", Monaco, monospace;
  background-image: none;
}

body.old-school-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 110;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(62, 230, 118, 0.08) 2px,
    rgba(62, 230, 118, 0.08) 3px
  );
}

body.old-school-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 109;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 48%,
    rgba(0, 0, 0, 0.42) 100%
  );
}

body.old-school-mode,
body.old-school-mode button,
body.old-school-mode input,
body.old-school-mode textarea,
body.old-school-mode select {
  font-family: var(--app-font);
}

body.old-school-mode .editor,
body.old-school-mode .raw-editor {
  caret-color: #b4ffbf;
  text-shadow: 0 0 0.32rem rgba(132, 255, 158, 0.22);
}

body.old-school-mode a {
  color: #b5ffbf;
}

body[data-canvas="paper"] {
  --canvas-texture:
    linear-gradient(0deg, rgba(55, 65, 81, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 65, 81, 0.02) 1px, transparent 1px);
}

body[data-canvas="grain"] {
  --canvas-texture:
    radial-gradient(circle at 20% 25%, rgba(30, 41, 59, 0.05) 0.8px, transparent 0.8px),
    radial-gradient(circle at 70% 70%, rgba(30, 41, 59, 0.045) 0.7px, transparent 0.7px);
}

.app {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.menu-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 40%, transparent);
}

.menu-bar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(0.28rem * var(--density-pad)) calc(1rem * var(--density-pad));
  gap: calc(0.35rem * var(--density-gap));
}

.menu-bar-nav {
  display: flex;
  align-items: center;
  padding: 0 calc(0.6rem * var(--density-pad));
  gap: calc(0.1rem * var(--density-gap));
  border-top: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
}

.toolbar {
  position: sticky;
  top: 72px;
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.26rem * var(--density-gap));
  padding: calc(0.3rem * var(--density-pad)) calc(0.82rem * var(--density-pad));
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.command-bar-wrap {
  position: fixed;
  top: calc(72px + 0.24rem * var(--density-pad));
  right: calc(0.82rem * var(--density-pad));
  z-index: 26;
  width: min(360px, 38vw);
  padding: 0;
  border: 0;
  background: transparent;
}

.command-bar {
  position: relative;
  width: 100%;
  margin: 0;
}

.command-bar-input {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
  color: var(--text);
  border-radius: 9px;
  padding: calc(0.4rem * var(--density-pad)) calc(0.58rem * var(--density-pad));
  font: inherit;
  font-size: calc(0.84rem * var(--density-font));
}

.command-bar-input:focus {
  outline: none;
  border-color: var(--focus);
}

.command-bar-input::placeholder {
  color: color-mix(in srgb, var(--muted) 92%, var(--surface));
}

@media (min-width: 821px) {
  .command-bar-input {
    height: calc(1.5rem * var(--density-control));
    padding-top: 0;
    padding-bottom: 0;
  }
}

.command-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.24rem);
  margin: 0;
  max-height: min(44vh, 300px);
  z-index: 52;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.command-results .command-result-item {
  cursor: pointer;
}

.command-results .command-result-item:hover,
.command-results .command-result-item.active {
  background: var(--active-row);
}

.pomodoro-toolbar-countdown {
  margin-left: auto;
  align-self: center;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  border-radius: 999px;
  padding: calc(0.2rem * var(--density-pad)) calc(0.46rem * var(--density-pad));
  font-size: calc(0.68rem * var(--density-font));
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}

.tool-btn {
  min-width: calc(1.5rem * var(--density-control));
  height: calc(1.5rem * var(--density-control));
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: calc(0.74rem * var(--density-font));
  border-radius: 6px;
  padding: 0 calc(0.34rem * var(--density-pad));
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.toolbar > .tool-btn:nth-child(5),
.toolbar > .tool-btn:nth-child(8),
.toolbar > .tool-btn:nth-child(11) {
  margin-left: 0.32rem;
}

.toolbar > .tool-btn:nth-child(5)::before,
.toolbar > .tool-btn:nth-child(8)::before,
.toolbar > .tool-btn:nth-child(11)::before {
  content: "";
  position: absolute;
  left: -0.44rem;
  top: 15%;
  height: 70%;
  width: 1px;
  background: color-mix(in srgb, var(--border) 75%, transparent);
  pointer-events: none;
}

.tool-btn:hover {
  border-color: var(--border);
  background: var(--surface-soft);
}

.tool-btn.active {
  background: var(--active-row);
  border-color: color-mix(in srgb, var(--focus) 50%, transparent);
}

.toolbar.raw-mode .tool-btn:not(.tool-btn-utility) {
  opacity: 0.38;
  pointer-events: none;
}

.toolbar-icon {
  display: inline-block;
  width: 0.82rem;
  height: 0.82rem;
  position: relative;
}

.icon-link {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(1px);
}

.icon-graph {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-graph circle {
  fill: color-mix(in srgb, currentColor 24%, transparent);
}

.icon-table {
  border: 1.6px solid currentColor;
  border-radius: 2px;
  background:
    linear-gradient(to right, transparent 31%, currentColor 31%, currentColor 36%, transparent 36%, transparent 64%, currentColor 64%, currentColor 69%, transparent 69%),
    linear-gradient(to bottom, transparent 31%, currentColor 31%, currentColor 36%, transparent 36%, transparent 64%, currentColor 64%, currentColor 69%, transparent 69%);
}

.icon-hr {
  width: 0.84rem;
}

.icon-hr::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 2px solid currentColor;
  transform: translateY(-50%);
}

.icon-strike {
  display: inline-grid;
  place-items: center;
  font-style: normal;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
}

.icon-strike::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.08rem;
  right: -0.08rem;
  border-top: 1.9px solid currentColor;
  transform: translateY(-50%);
}

.focus-exit-button {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 90;
  display: none;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  background: rgba(20, 20, 20, 0.38);
  color: #ffffff;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.focus-exit-button:hover {
  background: rgba(20, 20, 20, 0.56);
}

body.focus-mode .menu-bar,
body.focus-mode .toolbar,
body.focus-mode .command-bar-wrap,
body.focus-mode .sidebar {
  display: none;
}

body.reading-mode .toolbar {
  display: none;
}

body.focus-mode .outline-panel {
  display: none;
}

body.focus-mode .workspace {
  padding-top: 0.9rem;
}

body.focus-mode .editor-surface {
  margin: 0 auto;
  max-width: 980px;
  height: calc(100vh - 92px);
  min-height: 0;
}

body.focus-mode .editor {
  min-height: 0;
}

body.focus-mode .focus-exit-button {
  display: inline-grid;
  place-items: center;
}

.menu-left {
  display: flex;
  align-items: center;
  gap: calc(0.14rem * var(--density-gap));
}

.menu-right {
  display: flex;
  align-items: center;
  gap: calc(0.35rem * var(--density-gap));
}

.app-brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--app-font);
  font-size: calc(1.05rem * var(--density-font));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #000;
  margin-right: calc(0.2rem * var(--density-gap));
  padding: 0.1em 0.05em;
  margin: -0.1em -0.05em;
}

body[data-theme="dark"] .app-brand {
  color: #fff;
}

body.old-school-mode .app-brand {
  color: var(--text);
}

.menu-right {
  position: relative;
}

.ambient-wrap {
  position: relative;
}

.ambient-toggle {
  width: calc(1.85rem * var(--density-control));
  height: calc(1.85rem * var(--density-control));
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: calc(0.88rem * var(--density-font));
  line-height: 1;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
}

.ambient-toggle[hidden] {
  display: none !important;
}

.ambient-toggle:hover {
  background: var(--surface-soft);
  border-color: var(--focus);
}

.ambient-panel {
  position: absolute;
  top: calc(100% + 0.36rem);
  right: 0;
  width: min(280px, 84vw);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  padding: calc(0.46rem * var(--density-pad));
  display: flex;
  flex-direction: column;
  gap: calc(0.34rem * var(--density-gap));
  z-index: 46;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px) scaleY(0.96);
  transform-origin: top right;
  pointer-events: none;
  transition:
    max-height 0.2s ease,
    opacity 0.17s ease,
    transform 0.2s ease;
}

.ambient-panel.open {
  max-height: 320px;
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}

.ambient-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.35rem * var(--density-gap));
}

.ambient-title-row strong {
  font-size: calc(0.8rem * var(--density-font));
}

.ambient-play-row {
  display: flex;
  align-items: center;
  gap: calc(0.42rem * var(--density-gap));
}

.ambient-play-btn {
  width: calc(1.55rem * var(--density-control));
  height: calc(1.55rem * var(--density-control));
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
  color: var(--text);
  font: inherit;
  font-size: calc(0.74rem * var(--density-font));
  line-height: 1;
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}

.ambient-play-btn:hover {
  border-color: var(--focus);
  background: var(--active-row);
}

.ambient-controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.24rem * var(--density-gap));
}

.ambient-volume-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.5rem * var(--density-gap));
  font-size: calc(0.74rem * var(--density-font));
  color: var(--muted);
}

.ambient-volume-label input[type="range"] {
  width: 100%;
  accent-color: var(--focus);
}

.pomodoro-wrap {
  position: relative;
}

.pomodoro-toggle {
  width: calc(1.85rem * var(--density-control));
  height: calc(1.85rem * var(--density-control));
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: calc(0.88rem * var(--density-font));
  line-height: 1;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
}

.pomodoro-panel {
  position: absolute;
  top: calc(100% + 0.36rem);
  right: 0;
  width: min(280px, 84vw);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  padding: calc(0.46rem * var(--density-pad));
  display: flex;
  flex-direction: column;
  gap: calc(0.34rem * var(--density-gap));
  z-index: 46;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px) scaleY(0.96);
  transform-origin: top right;
  pointer-events: none;
  transition:
    max-height 0.2s ease,
    opacity 0.17s ease,
    transform 0.2s ease;
}

.pomodoro-panel.open {
  max-height: 360px;
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}

.pomodoro-phase-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.pomodoro-phase-label {
  font-size: calc(0.8rem * var(--density-font));
  color: var(--muted);
}

.pomodoro-time {
  font-size: calc(1.05rem * var(--density-font));
  line-height: 1;
}

.pomodoro-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(0.24rem * var(--density-gap));
}

.pomodoro-controls button {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
  color: var(--text);
  font: inherit;
  font-size: calc(0.74rem * var(--density-font));
  border-radius: 8px;
  padding: calc(0.3rem * var(--density-pad)) calc(0.42rem * var(--density-pad));
  cursor: pointer;
}

.pomodoro-controls button:hover {
  border-color: var(--focus);
  background: var(--active-row);
}

.pomodoro-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(0.28rem * var(--density-gap));
}

.pomodoro-field {
  display: flex;
  align-items: center;
  gap: calc(0.24rem * var(--density-gap));
  font-size: calc(0.74rem * var(--density-font));
  color: var(--muted);
}

.pomodoro-field span {
  flex: 0 0 auto;
}

.pomodoro-field input {
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
  color: var(--text);
  border-radius: 8px;
  font: inherit;
  font-size: calc(0.75rem * var(--density-font));
  padding: calc(0.22rem * var(--density-pad)) calc(0.3rem * var(--density-pad));
}

.pomodoro-field input:focus {
  outline: none;
  border-color: var(--focus);
}

.pomodoro-chime-check {
  display: inline-flex;
  align-items: center;
  gap: calc(0.32rem * var(--density-gap));
  color: var(--muted);
  font-size: calc(0.74rem * var(--density-font));
  user-select: none;
  cursor: pointer;
}

.pomodoro-chime-check input {
  margin: 0;
  width: 0.9rem;
  height: 0.9rem;
  accent-color: var(--focus);
  cursor: pointer;
}

.pomodoro-chime-check span {
  color: var(--text);
}

.pomodoro-check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(0.6rem * var(--density-gap));
}

.mobile-notes-toggle {
  display: none;
  width: calc(1.85rem * var(--density-control));
  height: calc(1.85rem * var(--density-control));
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
  border-radius: 999px;
  font: inherit;
  font-size: calc(0.86rem * var(--density-font));
  line-height: 1;
  place-items: center;
  padding: 0;
  cursor: pointer;
  z-index: 18;
}

.mobile-notes-toggle:hover {
  border-color: var(--focus);
  background: var(--surface);
}

.menu {
  position: relative;
}

.menu-trigger,
.about-button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: calc(0.95rem * var(--density-font));
  line-height: 1;
  padding: calc(0.34rem * var(--density-pad)) calc(0.48rem * var(--density-pad));
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.theme-toggle {
  width: calc(1.85rem * var(--density-control));
  height: calc(1.85rem * var(--density-control));
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: calc(0.9rem * var(--density-font));
  line-height: 1;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
}

body[data-theme="light"] .theme-toggle {
  color: #000000;
}

body[data-theme="dark"] .theme-toggle {
  color: #ffffff;
}

.info-circle-btn {
  width: calc(1.85rem * var(--density-control));
  height: calc(1.85rem * var(--density-control));
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  font: inherit;
  font-size: calc(0.86rem * var(--density-font));
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.accent-picker {
  position: relative;
}

.accent-menu-button {
  width: calc(1.85rem * var(--density-control));
  height: calc(1.85rem * var(--density-control));
  border: 1px solid var(--border);
  background: var(--surface-soft);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}

.accent-dot {
  width: 0.9rem;
  height: 0.9rem;
}

.accent-menu {
  position: absolute;
  top: calc(100% + 0.36rem);
  right: 0;
  min-width: 168px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 8px;
  padding: calc(0.35rem * var(--density-pad));
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: calc(0.2rem * var(--density-gap));
  z-index: 45;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px) scaleY(0.96);
  transform-origin: top right;
  pointer-events: none;
  transition:
    max-height 0.2s ease,
    opacity 0.17s ease,
    transform 0.2s ease;
}

.accent-menu.open {
  max-height: 320px;
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}

.accent-menu-option {
  display: flex;
  align-items: center;
  gap: calc(0.5rem * var(--density-gap));
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: calc(0.86rem * var(--density-font));
  border-radius: 8px;
  padding: calc(0.42rem * var(--density-pad)) calc(0.5rem * var(--density-pad));
  cursor: pointer;
}

.accent-menu-option:hover,
.accent-menu-option.active {
  background: var(--surface-soft);
  border-color: var(--focus);
}

.menu-trigger:hover,
.menu-trigger.open {
  background: var(--active-row);
  color: var(--focus);
  border-color: color-mix(in srgb, var(--focus) 35%, transparent);
}

.pomodoro-toggle:hover,
.theme-toggle:hover,
.info-circle-btn:hover,
.accent-menu-button:hover {
  background: var(--active-row);
  border-color: color-mix(in srgb, var(--focus) 45%, transparent);
  color: var(--focus);
}

.menu-dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 220px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 8px;
  padding: calc(0.35rem * var(--density-pad));
  display: none;
  flex-direction: column;
  gap: calc(0.2rem * var(--density-gap));
  box-shadow: var(--shadow);
}

.menu-dropdown.open {
  display: flex;
}

.menu-dropdown button {
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: calc(0.92rem * var(--density-font));
  padding: calc(0.45rem * var(--density-pad)) calc(0.55rem * var(--density-pad));
  border-radius: 7px;
  cursor: pointer;
}

.menu-dropdown button[data-shortcut] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.menu-dropdown button[data-shortcut]::after {
  content: attr(data-shortcut);
  margin-left: auto;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  font-size: calc(0.73rem * var(--density-font));
  line-height: 1;
  white-space: nowrap;
}

.menu-dropdown button.menu-item-checked {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-dropdown button.menu-item-checked::after {
  content: "✓";
  font-size: 0.82em;
  color: var(--focus);
  line-height: 1;
}

.menu-dropdown button:hover {
  background: var(--active-row);
  border-color: color-mix(in srgb, var(--focus) 35%, transparent);
  color: var(--focus);
}

.menu-static-row {
  display: flex;
  justify-content: space-between;
  color: var(--text);
  font-size: calc(0.88rem * var(--density-font));
  padding: calc(0.35rem * var(--density-pad)) calc(0.55rem * var(--density-pad));
}

.workspace {
  --workspace-gutter: clamp(0.375rem, 1vw, 0.675rem);
  --pane-min-height: 340px;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: var(--workspace-gutter);
  padding: var(--workspace-gutter);
  overflow: hidden;
}

.sidebar {
  width: min(282px, 30vw);
  min-width: 225px;
  height: auto;
  max-height: 100%;
  align-self: flex-start;
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    width 0.23s ease,
    min-width 0.23s ease;
}

.sidebar-top {
  border-bottom: 1px solid var(--border);
  padding: calc(0.7rem * var(--density-pad)) calc(0.7rem * var(--density-pad))
    calc(0.34rem * var(--density-pad));
  transition: padding 0.18s ease;
}

.sidebar-pane-title {
  font-size: calc(0.76rem * var(--density-font));
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
  margin-bottom: calc(0.34rem * var(--density-gap));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-pane-title-actions {
  display: inline-flex;
  align-items: center;
  gap: calc(0.16rem * var(--density-gap));
  flex-shrink: 0;
}

.sidebar-controls {
  display: none;
  align-items: center;
  justify-content: flex-start;
  gap: calc(0.22rem * var(--density-gap));
}

.sidebar-right {
  display: flex;
  align-items: center;
  gap: calc(0.3rem * var(--density-gap));
  margin-left: auto;
}

.sidebar-actions {
  display: flex;
  gap: calc(0.2rem * var(--density-gap));
  transition: opacity 0.14s ease;
}

.sidebar-search {
  margin-top: 0;
  position: relative;
}

.sidebar-search-row {
  display: flex;
  align-items: center;
  gap: calc(0.3rem * var(--density-gap));
}

.sidebar-search-new-btn {
  width: calc(1.75rem * var(--density-control));
  height: calc(1.75rem * var(--density-control));
  border-radius: 8px;
  flex: 0 0 auto;
}

.sidebar-batch-toggle-btn {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
  color: var(--text);
  font: inherit;
  font-size: calc(0.72rem * var(--density-font));
  border-radius: 8px;
  height: calc(1.75rem * var(--density-control));
  padding: 0 calc(0.5rem * var(--density-pad));
  cursor: pointer;
}

.sidebar-batch-toggle-btn.active {
  border-color: var(--focus);
  background: var(--active-row);
}

.sidebar-search-toggle-btn {
  width: calc(1.75rem * var(--density-control));
  height: calc(1.75rem * var(--density-control));
  border-radius: 10px;
}

.sidebar-search-input {
  flex: 1;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--bg) 55%, var(--surface-soft));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  color: var(--text);
  font: inherit;
  font-size: calc(0.78rem * var(--density-font));
  border-radius: 6px;
  padding: calc(0.38rem * var(--density-pad)) calc(0.52rem * var(--density-pad));
  outline: none;
}

.sidebar-search-input:focus {
  border-color: var(--focus);
}

.search-options-btn {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
  color: var(--text);
  font: inherit;
  font-size: calc(0.8rem * var(--density-font));
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: 8px;
  width: calc(1.75rem * var(--density-control));
  height: calc(1.75rem * var(--density-control));
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}

.search-options-btn:hover {
  border-color: var(--focus);
}

.search-options-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  min-width: 86px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: calc(0.3rem * var(--density-pad));
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: calc(0.2rem * var(--density-gap));
  z-index: 36;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px) scaleY(0.96);
  transform-origin: top right;
  pointer-events: none;
  transition:
    max-height 0.2s ease,
    opacity 0.17s ease,
    transform 0.2s ease;
}

.search-options-menu.open {
  max-height: 160px;
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}

.search-options-menu button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: calc(0.82rem * var(--density-font));
  border-radius: 8px;
  padding: calc(0.34rem * var(--density-pad)) calc(0.4rem * var(--density-pad));
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
}

.search-options-menu button:hover,
.search-options-menu button.active {
  background: var(--surface-soft);
  border-color: var(--focus);
}

.search-option-aa {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.search-option-word {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.saved-searches-row {
  margin-top: calc(0.12rem * var(--density-gap));
  display: flex;
  align-items: center;
  gap: calc(0.3rem * var(--density-gap));
  min-height: 0;
}

.saved-search-save-btn {
  width: calc(1.75rem * var(--density-control));
  height: calc(1.75rem * var(--density-control));
  border-radius: 7px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
  color: var(--text);
  font: inherit;
  font-size: calc(0.82rem * var(--density-font));
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.saved-search-save-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.saved-search-save-btn:not(:disabled):hover {
  border-color: var(--focus);
}

.saved-searches {
  display: flex;
  align-items: center;
  gap: calc(0.25rem * var(--density-gap));
  overflow-x: auto;
  padding-bottom: 1px;
}

.saved-searches[hidden] {
  display: none;
}

.saved-search-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
  overflow: hidden;
  flex: 0 0 auto;
}

.saved-search-apply,
.saved-search-delete {
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: calc(0.72rem * var(--density-font));
  line-height: 1;
  cursor: pointer;
}

.saved-search-apply {
  padding: calc(0.22rem * var(--density-pad)) calc(0.43rem * var(--density-pad));
}

.saved-search-delete {
  padding: calc(0.22rem * var(--density-pad)) calc(0.34rem * var(--density-pad));
  color: var(--muted);
}

.saved-search-apply:hover,
.saved-search-delete:hover {
  background: color-mix(in srgb, var(--active-row) 78%, transparent);
}

.saved-search-apply.active {
  background: color-mix(in srgb, var(--active-row) 82%, transparent);
}

.sidebar-views {
  margin-top: calc(0.1rem * var(--density-gap));
  display: grid;
  grid-template-columns: auto auto minmax(104px, 1fr);
  gap: calc(0.22rem * var(--density-gap));
  align-items: center;
}

.sidebar-view-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: calc(0.72rem * var(--density-font));
  border-radius: 6px;
  padding: calc(0.27rem * var(--density-pad)) calc(0.44rem * var(--density-pad));
  cursor: pointer;
  min-width: 0;
  width: auto;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.sidebar-view-btn[data-view-value="all"] {
  padding-inline: calc(0.44rem * var(--density-pad));
}

.sidebar-view-btn[data-view-value="trash"] {
  padding-inline: calc(0.4rem * var(--density-pad));
}

.sidebar-view-btn:hover {
  background: color-mix(in srgb, var(--active-row) 60%, transparent);
  color: var(--text);
}

.sidebar-view-btn.active {
  background: var(--active-row);
  border-color: color-mix(in srgb, var(--focus) 40%, transparent);
  color: var(--focus);
  font-weight: 500;
}

.sidebar-tags {
  margin-top: calc(0.38rem * var(--density-gap));
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.2rem * var(--density-gap));
}

.sidebar-tags:empty {
  display: none;
  margin-top: 0;
}

.batch-actions {
  margin-top: calc(0.36rem * var(--density-gap));
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  border-radius: 10px;
  padding: calc(0.34rem * var(--density-pad));
  display: flex;
  flex-direction: column;
  gap: calc(0.26rem * var(--density-gap));
}

.batch-actions[hidden] {
  display: none;
}

.batch-selection-count {
  font-size: calc(0.68rem * var(--density-font));
  color: var(--muted);
}

.batch-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.2rem * var(--density-gap));
}

.batch-actions-row button {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  font: inherit;
  font-size: calc(0.67rem * var(--density-font));
  border-radius: 7px;
  padding: calc(0.24rem * var(--density-pad)) calc(0.35rem * var(--density-pad));
  cursor: pointer;
}

.batch-actions-row button:hover:not(:disabled) {
  border-color: var(--focus);
  background: var(--active-row);
}

.batch-actions-row button:disabled {
  opacity: 0.5;
  cursor: default;
}

.tag-filter-btn {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: calc(0.68rem * var(--density-font));
  border-radius: 999px;
  padding: calc(0.2rem * var(--density-pad)) calc(0.4rem * var(--density-pad));
  cursor: pointer;
}

.tag-filter-btn:hover,
.tag-filter-btn.active {
  border-color: var(--focus);
  color: var(--text);
  background: var(--active-row);
}

.sidebar-trash-actions {
  margin-top: 0;
  display: flex;
  gap: calc(0.26rem * var(--density-gap));
  opacity: 1;
  transition: opacity 0.16s ease;
}

.sidebar-trash-actions[hidden] {
  display: flex !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.sidebar-trash-btn {
  flex: 1;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  color: var(--text);
  font: inherit;
  font-size: calc(0.68rem * var(--density-font));
  border-radius: 8px;
  padding: calc(0.28rem * var(--density-pad)) calc(0.35rem * var(--density-pad));
  cursor: pointer;
}

.sidebar-trash-btn:hover {
  border-color: var(--focus);
}

.sidebar-trash-btn.danger {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  color: color-mix(in srgb, var(--danger) 68%, var(--text));
}

.sidebar-bottom {
  border-top: 0;
  padding: calc(0.4rem * var(--density-pad));
  display: flex;
  flex-direction: column;
  gap: calc(0.26rem * var(--density-gap));
  min-height: calc(2.3rem * var(--density-control));
  justify-content: center;
}

body.trash-view-active .sidebar-bottom {
  border-top: 1px solid var(--border);
}

.sidebar-btn {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
  color: var(--text);
  font: inherit;
  font-size: calc(0.78rem * var(--density-font));
  border-radius: 10px;
  padding: 0;
  width: calc(1.8rem * var(--density-control));
  height: calc(1.8rem * var(--density-control));
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.04);
}

.sidebar-btn:hover {
  border-color: var(--focus);
}

.sidebar-btn.icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px;
  height: 13px;
  border: 1px solid var(--muted);
  border-radius: 2px;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 36%,
    var(--surface) 36%,
    var(--surface) 100%
  );
}

.sidebar-btn.icon-btn::after {
  position: absolute;
  right: 1px;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}

.sidebar-btn.new-doc-btn::after {
  content: "+";
  color: #ffffff;
  background: #5f9075;
}

.sidebar-add-note-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  line-height: 1;
  width: calc(1.4rem * var(--density-control));
  height: calc(1.4rem * var(--density-control));
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    color 0.14s ease,
    background-color 0.14s ease;
}

.sidebar-add-note-btn:hover {
  color: var(--focus);
  background: color-mix(in srgb, var(--active-row) 90%, transparent);
}

.sort-wrap {
  position: relative;
  transition: opacity 0.14s ease;
}

.sidebar-sort-btn {
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  color: var(--text);
  font: inherit;
  font-size: calc(0.76rem * var(--density-font));
  border-radius: 10px;
  padding: calc(0.36rem * var(--density-pad)) calc(0.56rem * var(--density-pad));
  cursor: pointer;
  white-space: nowrap;
}

.sidebar-sort-btn:hover {
  border-color: var(--focus);
}

.sidebar-sort-wrap-inline {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  justify-self: end;
}

.sidebar-sort-wrap-inline .sidebar-sort-btn {
  width: calc(8.15rem * var(--density-control));
  min-width: calc(8.15rem * var(--density-control));
  text-align: center;
}

.sidebar-toggle-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  line-height: 1;
  border-radius: 6px;
  width: calc(1.6rem * var(--density-control));
  height: calc(1.6rem * var(--density-control));
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition:
    background-color 0.14s ease,
    color 0.14s ease;
}

.sidebar-toggle-btn:hover {
  color: var(--focus);
  background: color-mix(in srgb, var(--active-row) 90%, transparent);
}

.sidebar-toggle-collapsed {
  display: none;
}

.sort-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  min-width: calc(152px * var(--density-control));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: calc(0.28rem * var(--density-pad));
  box-shadow: var(--shadow);
  display: none;
  flex-direction: column;
  gap: calc(0.2rem * var(--density-gap));
  z-index: 35;
}

.sort-menu.open {
  display: flex;
}

.sort-menu button {
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: calc(0.83rem * var(--density-font));
  padding: calc(0.4rem * var(--density-pad)) calc(0.48rem * var(--density-pad));
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}

.sort-menu button:hover,
.sort-menu button.active {
  background: var(--surface-soft);
  border-color: var(--focus);
}

body.sidebar-collapsed .sidebar {
  width: calc(2.2rem * var(--density-control));
  min-width: calc(2.2rem * var(--density-control));
}

body.sidebar-collapsed .sidebar-top {
  border-bottom-color: transparent;
  padding: calc(0.42rem * var(--density-pad));
}

body.sidebar-collapsed .sidebar-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}

body.sidebar-collapsed .sidebar-pane-title {
  display: none;
}

body.sidebar-collapsed .sidebar-actions {
  width: 100%;
  justify-content: center;
  gap: 0;
}

body.sidebar-collapsed .sidebar-toggle-collapsed {
  display: inline-grid;
}

body.sidebar-collapsed .doc-action-btn,
body.sidebar-collapsed .sidebar-right,
body.sidebar-collapsed .sort-wrap,
body.sidebar-collapsed .sidebar-search,
body.sidebar-collapsed .sidebar-views,
body.sidebar-collapsed .sidebar-tags,
body.sidebar-collapsed .batch-actions,
body.sidebar-collapsed .sidebar-trash-actions,
body.sidebar-collapsed .sidebar-bottom,
body.sidebar-collapsed .document-list {
  display: none;
}

.document-list {
  list-style: none;
  margin: 0;
  padding: calc(0.45rem * var(--density-pad));
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  flex: 1;
  transition: opacity 0.14s ease;
}

.document-list.has-overflow {
  overflow-y: scroll;
}

.document-item {
  position: relative;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 9px;
  margin-bottom: 0;
  background: transparent;
}

.document-item + .document-item {
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.document-item.drag-disabled {
  opacity: 0.96;
}

.document-open-btn {
  border: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: calc(0.84rem * var(--density-font));
  color: var(--text);
  background: transparent;
  border-radius: 8px;
  padding: calc(0.44rem * var(--density-pad)) calc(2.9rem * var(--density-control))
    calc(0.44rem * var(--density-pad)) calc(0.5rem * var(--density-pad));
  cursor: pointer;
  white-space: normal;
  overflow: hidden;
}

.document-item.with-batch .document-open-btn {
  padding-left: calc(1.7rem * var(--density-control));
}

.document-item-actions {
  position: absolute;
  top: 50%;
  right: calc(0.2rem * var(--density-pad));
  display: inline-flex;
  align-items: center;
  gap: calc(0.2rem * var(--density-gap));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(-50% - 2px));
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    visibility 0.14s ease;
}

.document-item-action-btn {
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  width: calc(1.25rem * var(--density-control));
  height: calc(1.25rem * var(--density-control));
  border-radius: 7px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  font-size: calc(0.64rem * var(--density-font));
  line-height: 1;
  opacity: 0.58;
}

.document-item-action-btn.pin-btn {
  font-size: calc(0.62rem * var(--density-font));
}

.document-item-action-btn:hover {
  border-color: var(--focus);
  color: var(--text);
  opacity: 0.9;
}

.document-item-action-btn.pin-btn.active {
  border-color: color-mix(in srgb, var(--focus) 74%, var(--border));
  color: color-mix(in srgb, var(--focus) 82%, var(--text));
  background: color-mix(in srgb, var(--active-row) 82%, transparent);
  opacity: 1;
}

.document-item-main {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.document-batch-check {
  position: absolute;
  top: 50%;
  left: calc(0.36rem * var(--density-pad));
  transform: translateY(-50%);
  z-index: 2;
  width: calc(0.92rem * var(--density-control));
  height: calc(0.92rem * var(--density-control));
  margin: 0;
  accent-color: var(--focus);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}

.document-item:hover .document-batch-check,
.document-item.active .document-batch-check,
.document-item.batch-selected .document-batch-check {
  opacity: 1;
  pointer-events: auto;
}

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

.document-item-meta {
  margin-top: 0.17rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: calc(0.68rem * var(--density-font));
  line-height: 1.2;
}

.document-item-meta .meta-dot {
  opacity: 0.6;
}

.document-item.trashed {
  opacity: 0.78;
}

.document-item.trashed .document-item-meta {
  color: color-mix(in srgb, var(--danger) 65%, var(--muted));
}

.document-empty {
  color: var(--muted);
  font-size: calc(0.76rem * var(--density-font));
  padding: calc(0.45rem * var(--density-pad)) calc(0.55rem * var(--density-pad));
}

.document-item:hover {
  border-color: var(--border);
  background: var(--surface-soft);
}

.document-item:hover .document-item-actions,
.document-item.active .document-item-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%);
}

.document-item.pinned .document-item-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%);
}

.document-item.active {
  border-color: transparent;
  border-left-color: var(--focus);
  border-left-width: 2px;
  background: var(--active-row);
}

.document-item.drag-over {
  border-color: var(--focus);
  outline: 1px dashed var(--focus);
}

.document-item.dragging {
  opacity: 0.55;
}

.editor-area {
  flex: 1;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  gap: calc(0.4rem * var(--density-gap));
}

.outline-shell {
  --outline-toggle-size: calc(1.72rem * var(--density-control));
  --outline-panel-width: clamp(170px, 20vw, 240px);
  --outline-gap: calc(0.24rem * var(--density-gap));
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
  gap: var(--outline-gap);
  width: calc(var(--outline-panel-width) + var(--outline-toggle-size) + var(--outline-gap));
  min-width: calc(150px + var(--outline-toggle-size) + var(--outline-gap));
  max-height: 100%;
  transition:
    width 0.23s ease,
    min-width 0.23s ease;
}

.outline-toggle-btn {
  align-self: flex-start;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
  color: var(--text);
  font: inherit;
  font-size: calc(0.88rem * var(--density-font));
  font-weight: 700;
  line-height: 1;
  border-radius: 9px;
  width: var(--outline-toggle-size);
  height: var(--outline-toggle-size);
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}

.outline-toggle-btn:hover {
  border-color: var(--focus);
}

.editor-surface {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: min(var(--pane-min-height), 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: clamp(1.1rem, 2.6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.2s ease;
}

.welcome-pane-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
}

.welcome-pane-overlay[hidden] {
  display: none;
}

.welcome-pane {
  width: min(480px, 92vw);
  max-height: min(84vh, 600px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-top: 3px solid var(--focus);
  border-radius: 10px;
  backdrop-filter: blur(20px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--muted);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.welcome-title {
  margin: 0 0 0.1rem;
  color: var(--text);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
}

.welcome-step-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: calc(0.35rem * var(--density-gap));
}

.welcome-step-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.welcome-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--border) 90%, var(--muted));
  transition: width 0.22s ease, background 0.22s ease, border-radius 0.22s ease;
}

.welcome-dot.active {
  width: 18px;
  border-radius: 3px;
  background: var(--focus);
}

.welcome-step-counter {
  font-size: calc(0.72rem * var(--density-font));
  color: color-mix(in srgb, var(--muted) 75%, transparent);
}

.welcome-steps {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: auto;
  padding-right: 2px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.welcome-steps.is-fading {
  opacity: 0;
  transform: translateY(5px);
}

.welcome-step {
  display: none;
  width: 100%;
}

.welcome-step.active {
  display: block;
}

.welcome-lead {
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  font-size: calc(1.02rem * var(--density-font));
  margin: 0 0 0.52rem;
}

.welcome-step h3 {
  margin: 0 0 0.42rem;
  font-size: calc(0.98rem * var(--density-font));
  color: var(--text);
  font-weight: 650;
}

.welcome-step p {
  margin: 0 0 0.52rem;
  font-size: calc(0.92rem * var(--density-font));
}

.welcome-step ul {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.36rem;
}

.welcome-step li {
  font-size: calc(0.92rem * var(--density-font));
}

.welcome-step a {
  color: var(--focus);
}

.welcome-hide-row {
  margin-top: 0.1rem;
}

.welcome-hide-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: calc(0.76rem * var(--density-font));
  color: var(--muted);
  cursor: pointer;
}

.welcome-hide-row input {
  width: 0.86rem;
  height: 0.86rem;
}

.welcome-controls {
  padding-top: calc(0.4rem * var(--density-pad));
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.4rem * var(--density-gap));
}

.welcome-controls-left,
.welcome-controls-right {
  display: flex;
  align-items: center;
  gap: calc(0.32rem * var(--density-gap));
}

.welcome-nav-btn,
.welcome-skip-btn {
  font: inherit;
  font-size: calc(0.82rem * var(--density-font));
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  background: transparent;
  border-radius: 8px;
  padding: calc(0.36rem * var(--density-pad)) calc(0.62rem * var(--density-pad));
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.welcome-start-btn,
#intro-next-btn {
  font: inherit;
  font-size: calc(0.82rem * var(--density-font));
  font-weight: 500;
  color: #fff;
  border: 1px solid transparent;
  background: var(--focus);
  border-radius: 8px;
  padding: calc(0.36rem * var(--density-pad)) calc(0.62rem * var(--density-pad));
  cursor: pointer;
  transition: filter 0.12s ease;
}

.welcome-nav-btn:hover,
.welcome-skip-btn:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-soft) 80%, transparent);
  color: var(--text);
}

.welcome-start-btn:hover,
#intro-next-btn:hover {
  filter: brightness(1.1);
}

.welcome-nav-btn[hidden],
.welcome-skip-btn[hidden],
.welcome-start-btn[hidden] {
  display: none !important;
}

.doc-header {
  margin-bottom: 1rem;
}

.doc-subtitle {
  margin-top: 0.24rem;
  color: var(--muted);
  font-size: calc(0.78rem * var(--density-font));
  line-height: 1.2;
}

.doc-subtitle .locked-pill,
.doc-subtitle .checklist-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  color: var(--muted);
}

.doc-subtitle .locked-pill {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  color: color-mix(in srgb, var(--danger) 70%, var(--text));
}

.doc-tags-wrap {
  margin-top: 0.2rem;
}

.doc-backlinks {
  margin-top: calc(0.2rem * var(--density-gap));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(0.25rem * var(--density-gap));
}

.doc-backlinks[hidden] {
  display: none;
}

.backlinks-label {
  color: var(--muted);
  font-size: calc(0.73rem * var(--density-font));
}

.backlink-chip {
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
  color: var(--text);
  font: inherit;
  font-size: calc(0.72rem * var(--density-font));
  border-radius: 999px;
  padding: calc(0.2rem * var(--density-pad)) calc(0.45rem * var(--density-pad));
  cursor: pointer;
}

.backlink-chip:hover {
  border-color: var(--focus);
  background: var(--active-row);
}

.doc-tags-display {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: calc(0.8rem * var(--density-font));
  line-height: 1.2;
  border-radius: 6px;
  padding: 0.04rem 0.2rem;
  cursor: pointer;
}

.doc-tags-display:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
}

.doc-tags-display.disabled {
  opacity: 0.58;
  cursor: default;
}

.doc-tags-display.disabled:hover {
  color: var(--muted);
  background: transparent;
}

.doc-tags-input {
  display: none;
  width: min(100%, 520px);
  border: 1px solid color-mix(in srgb, var(--focus) 60%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
  color: var(--text);
  font: inherit;
  font-size: calc(0.8rem * var(--density-font));
  line-height: 1.2;
  padding: 0.14rem 0.28rem;
}

.doc-tags-input.editing {
  display: block;
}

.doc-tags-display.hidden {
  display: none;
}

.doc-title-display {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.15rem 0.35rem;
  display: inline-block;
  cursor: pointer;
}

.doc-title-display:hover,
.doc-title-display:focus {
  background: var(--surface-soft);
  outline: none;
}

.doc-title-input {
  display: none;
  width: min(100%, 640px);
  border: 1px solid var(--focus);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: clamp(1.42rem, 2.5vw, 1.95rem);
  line-height: 1.2;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
}

.doc-title-input.editing {
  display: block;
}

.doc-title-display.hidden {
  display: none;
}

.editor {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  outline: none;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 1.05rem;
  line-height: var(--editor-line-height);
  padding-right: 0;
  transition:
    max-width 0.18s ease,
    margin-inline 0.18s ease;
}

.editor.has-overflow {
  overflow-y: scroll;
}

.raw-editor {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  color: var(--text);
  font-family: var(--code-font);
  font-size: 1rem;
  line-height: var(--editor-line-height);
  padding: 0.72rem 0.82rem;
  outline: none;
  overflow: auto;
  max-width: none;
  margin-inline: 0;
  transition:
    max-width 0.18s ease,
    margin-inline 0.18s ease;
}

.raw-editor:focus {
  border-color: var(--focus);
}

.editor.no-wrap {
  white-space: pre;
  overflow-x: auto;
}

.editor.read-only {
  user-select: text;
  cursor: default;
}

.editor.typo-underline-on::spelling-error {
  text-decoration: underline wavy #9e7070;
}

.editor.typo-underline-on::grammar-error {
  text-decoration: underline wavy #9e7070;
}

body[data-reading-rail="on"] .editor {
  max-width: 72ch;
  margin-left: 0;
  margin-right: auto;
}

body[data-reading-width="narrow"] .editor,
body[data-reading-width="narrow"] .raw-editor {
  max-width: 64ch;
  margin-left: 0;
  margin-right: auto;
}

body[data-reading-width="standard"] .editor,
body[data-reading-width="standard"] .raw-editor {
  max-width: 78ch;
  margin-left: 0;
  margin-right: auto;
}

body[data-reading-width="wide"] .editor,
body[data-reading-width="wide"] .raw-editor {
  max-width: 96ch;
  margin-left: 0;
  margin-right: auto;
}

body[data-reading-width] .editor.no-wrap {
  max-width: none;
  margin-inline: 0;
}

.editor-surface.echo-pulse {
  animation: editor-surface-pulse 0.24s ease;
}

.editor-surface.mood-pulse {
  animation: editor-surface-mood-pulse 0.44s ease;
}

.slash-menu {
  position: absolute;
  top: clamp(4.3rem, 8vh, 6rem);
  left: clamp(1rem, 3vw, 2rem);
  min-width: 210px;
  max-width: 280px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: calc(0.25rem * var(--density-pad));
  z-index: 20;
}

.slash-option {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: calc(0.82rem * var(--density-font));
  text-align: left;
  border-radius: 8px;
  padding: calc(0.34rem * var(--density-pad)) calc(0.45rem * var(--density-pad));
  cursor: pointer;
}

.slash-option:hover,
.slash-option.active {
  border-color: var(--focus);
  background: var(--surface-soft);
}

.outline-panel {
  width: var(--outline-panel-width);
  min-width: 150px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: calc(0.55rem * var(--density-pad));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.outline-title {
  color: var(--muted);
  font-size: calc(0.78rem * var(--density-font));
  margin-bottom: 0.4rem;
}

.outline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  scrollbar-width: thin;
  flex: 1;
  min-height: 0;
}

.outline-list button {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: calc(0.8rem * var(--density-font));
  text-align: left;
  border-radius: 8px;
  padding: calc(0.25rem * var(--density-pad)) calc(0.34rem * var(--density-pad));
  cursor: pointer;
}

.outline-list button:hover,
.outline-list button.active {
  border-color: var(--focus);
  background: var(--active-row);
}

body.outline-collapsed .outline-shell {
  width: var(--outline-toggle-size);
  min-width: var(--outline-toggle-size);
  gap: 0;
}

body.outline-collapsed .outline-panel {
  display: none;
}

@keyframes editor-surface-pulse {
  0% {
    box-shadow: var(--shadow);
  }
  50% {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 35%, transparent), var(--shadow);
  }
  100% {
    box-shadow: var(--shadow);
  }
}

@keyframes editor-surface-mood-pulse {
  0% {
    box-shadow: var(--shadow);
  }
  42% {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent),
      var(--shadow);
  }
  100% {
    box-shadow: var(--shadow);
  }
}

.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 120;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 10px;
  border-radius: 2px;
  opacity: 0.92;
  animation: confetti-fall 1s ease-out forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0.96;
  }
  100% {
    transform: translate3d(var(--drift-x), 78vh, 0) rotate(var(--drift-r));
    opacity: 0;
  }
}

.document-list,
.editor,
.raw-editor {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--border) 78%, var(--surface-soft))
    transparent;
}

.document-list::-webkit-scrollbar,
.editor::-webkit-scrollbar,
.raw-editor::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.document-list::-webkit-scrollbar-track,
.editor::-webkit-scrollbar-track,
.raw-editor::-webkit-scrollbar-track {
  background: transparent;
}

.document-list::-webkit-scrollbar-thumb,
.editor::-webkit-scrollbar-thumb,
.raw-editor::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border) 78%, var(--surface-soft));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.document-list::-webkit-scrollbar-thumb:hover,
.editor::-webkit-scrollbar-thumb:hover,
.raw-editor::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--focus) 30%, var(--border));
  border: 2px solid transparent;
  background-clip: content-box;
}

.editor :is(h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, pre) {
  margin: 0;
}

.editor h1 {
  margin: 0.45rem 0;
  font-size: 2rem;
  line-height: 1.2;
}

.editor h2 {
  margin: 0.4rem 0;
  font-size: 1.6rem;
  line-height: 1.3;
}

.editor h3 {
  margin: 0.35rem 0;
  font-size: 1.3rem;
}

.editor p,
.editor blockquote,
.editor ul,
.editor ol,
.editor pre {
  margin: 0.2rem 0 0.45rem;
}

.editor ul,
.editor ol {
  display: block;
  list-style: none;
  padding-left: 0;
}

.editor li {
  display: list-item;
  list-style: none;
}

.editor blockquote {
  border-left: 3px solid var(--border);
  padding-left: 0.75rem;
  color: var(--muted);
}

.editor code {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.08rem 0.3rem;
  font-family: var(--code-font);
  font-size: 0.95em;
}

.editor pre {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  overflow-x: auto;
  position: relative;
}

.editor pre.md-code-block {
  padding-top: 1.6rem;
}

.editor pre .code-block-tools {
  position: absolute;
  top: 0.3rem;
  right: 0.42rem;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  z-index: 1;
}

.editor pre .code-language-badge {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 84%, var(--surface-soft));
  color: var(--muted);
  border-radius: 999px;
  padding: 0.06rem 0.36rem;
  font-size: 0.68em;
  line-height: 1.3;
  text-transform: lowercase;
}

.editor pre .code-copy-btn {
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--text);
  border-radius: 999px;
  padding: 0.04rem 0.42rem;
  font-size: 0.68em;
  line-height: 1.3;
  cursor: pointer;
}

.editor pre .code-copy-btn:hover {
  border-color: var(--focus);
  background: var(--active-row);
}

.editor pre code {
  border: 0;
  padding: 0;
  background: transparent;
}

.editor pre code.hljs {
  color: inherit;
}

.editor pre code.hljs .hljs-keyword,
.editor pre code.hljs .hljs-selector-tag,
.editor pre code.hljs .hljs-literal {
  color: color-mix(in srgb, var(--focus) 78%, var(--text));
}

.editor pre code.hljs .hljs-string,
.editor pre code.hljs .hljs-attr,
.editor pre code.hljs .hljs-template-tag {
  color: color-mix(in srgb, #5da873 68%, var(--text));
}

.editor pre code.hljs .hljs-comment,
.editor pre code.hljs .hljs-quote {
  color: color-mix(in srgb, var(--muted) 85%, transparent);
}

.editor pre code.hljs .hljs-number,
.editor pre code.hljs .hljs-symbol,
.editor pre code.hljs .hljs-bullet {
  color: color-mix(in srgb, #c88842 74%, var(--text));
}

.editor pre code.hljs .hljs-title,
.editor pre code.hljs .hljs-function {
  color: color-mix(in srgb, #4a83cf 74%, var(--text));
}

.editor a {
  color: var(--focus);
}

.editor a.wiki-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.editor mark.search-highlight {
  background: color-mix(in srgb, var(--focus) 34%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 0.08em;
}

.md-token {
  color: var(--token);
  opacity: 0.88;
}

.status-live-region {
  position: fixed;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pomodoro-banner {
  position: fixed;
  top: calc(3.9rem * var(--density-pad));
  right: clamp(0.45rem, 1.4vw, 0.8rem);
  z-index: 41;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  color: var(--text);
  border-radius: 10px;
  padding: calc(0.34rem * var(--density-pad)) calc(0.5rem * var(--density-pad));
  font-size: calc(0.75rem * var(--density-font));
  line-height: 1.2;
  box-shadow: var(--shadow);
}

.pomodoro-banner[hidden] {
  display: none;
}

.konami-banner {
  position: fixed;
  top: calc(3.9rem * var(--density-pad));
  left: 50%;
  transform: translateX(-50%);
  z-index: 42;
  border: 1px solid color-mix(in srgb, var(--focus) 52%, var(--border));
  background: color-mix(in srgb, var(--surface) 86%, var(--active-row));
  color: var(--text);
  border-radius: 999px;
  padding: calc(0.34rem * var(--density-pad)) calc(0.72rem * var(--density-pad));
  font-size: calc(0.74rem * var(--density-font));
  line-height: 1;
  box-shadow: var(--shadow);
}

.konami-banner[hidden] {
  display: none;
}

.mobile-notes-backdrop {
  position: fixed;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 38;
}

body.mobile-notes-open .mobile-notes-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.support-bubble {
  position: fixed;
  left: clamp(0.375rem, 1vw, 0.675rem);
  bottom: clamp(1.7rem, 2.6vw, 2.2rem);
  width: min(282px, 30vw);
  min-width: 225px;
  max-width: calc(100vw - 1rem);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  padding: calc(0.42rem * var(--density-pad));
  display: flex;
  align-items: center;
  gap: calc(0.32rem * var(--density-gap));
  overflow: hidden;
  z-index: 16;
  transition:
    width 0.23s ease,
    min-width 0.23s ease,
    padding 0.23s ease,
    gap 0.23s ease;
}

.support-bubble[hidden] {
  display: none;
}

.support-bubble[hidden] + .feedback-contact {
  display: none;
}

.support-bubble-link {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  text-decoration: none;
  font-size: calc(0.78rem * var(--density-font));
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  gap: calc(0.28rem * var(--density-gap));
  transition: gap 0.2s ease;
}

.support-bubble-link:hover {
  color: var(--focus);
}

.support-bubble-link span:first-child {
  min-width: 0;
  max-width: 20rem;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition:
    max-width 0.2s ease,
    opacity 0.16s ease;
}

.support-bubble-coffee {
  font-size: calc(0.9rem * var(--density-font));
  line-height: 1;
  flex: 0 0 auto;
}

.support-bubble-dismiss {
  flex: 0 0 auto;
  width: calc(1.3rem * var(--density-control));
  height: calc(1.3rem * var(--density-control));
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: calc(0.74rem * var(--density-font));
  line-height: 1;
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition:
    width 0.2s ease,
    height 0.2s ease,
    opacity 0.16s ease,
    margin 0.2s ease,
    border-width 0.2s ease;
}

.support-bubble-dismiss:hover {
  color: var(--text);
  border-color: var(--focus);
}

body.sidebar-collapsed .support-bubble {
  width: calc(1.9rem * var(--density-control));
  min-width: 0;
  padding: calc(0.2rem * var(--density-pad));
  gap: 0;
  justify-content: center;
}

body.sidebar-collapsed .support-bubble-link span:first-child {
  max-width: 0;
  opacity: 0;
}

body.sidebar-collapsed .support-bubble-link {
  min-width: 0;
  justify-content: center;
  gap: 0;
}

body.sidebar-collapsed .support-bubble-dismiss {
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
  border-width: 0;
  pointer-events: none;
}

body.sidebar-collapsed .feedback-contact {
  display: none;
}

.feedback-contact {
  position: fixed;
  left: clamp(0.375rem, 1vw, 0.675rem);
  bottom: calc(0.45rem + env(safe-area-inset-bottom));
  width: min(282px, 30vw);
  min-width: 225px;
  max-width: calc(100vw - 1rem);
  color: var(--muted);
  font-size: calc(0.66rem * var(--density-font));
  line-height: 1.2;
  z-index: 15;
}

.feedback-contact a,
.about-feedback-line a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.feedback-contact a:hover,
.about-feedback-line a:hover {
  color: var(--focus);
}

body.focus-mode .outline-shell {
  display: none;
}

.floating-metrics-trigger {
  position: absolute;
  left: 50%;
  bottom: clamp(0.45rem, 1.2vw, 0.7rem);
  transform: translateX(-50%);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: calc(0.28rem * var(--density-gap));
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: color-mix(in srgb, var(--muted) 86%, var(--text));
  border-radius: 999px;
  padding: calc(0.26rem * var(--density-pad)) calc(0.6rem * var(--density-pad));
  font: inherit;
  font-size: calc(0.68rem * var(--density-font));
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 10px rgba(0, 0, 0, 0.06);
  opacity: 0.92;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.floating-metrics-trigger:hover {
  border-color: color-mix(in srgb, var(--focus) 50%, transparent);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--text);
  opacity: 1;
}

.floating-metrics-trigger.frosted {
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  backdrop-filter: blur(8px);
}

.floating-metrics-separator {
  opacity: 0.55;
}

body[data-live-counters="off"] .floating-metrics-trigger {
  display: none;
}

.floating-metrics-trigger:disabled,
.floating-metrics-trigger.disabled {
  opacity: 0.52;
  cursor: default;
  pointer-events: none;
}

.editor-surface.no-document {
  background: color-mix(in srgb, var(--surface) 72%, #9ca3af 28%);
}

.editor-surface.no-document .editor,
.editor-surface.no-document .raw-editor,
.editor-surface.no-document .doc-header,
.editor-surface.no-document .floating-metrics-trigger {
  opacity: 0.56;
}

#stats-dialog {
  width: min(92vw, 460px);
}

.stats-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.dialog-x-btn {
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: calc(0.8rem * var(--density-font));
  line-height: 1;
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}

.dialog-x-btn:hover {
  color: var(--text);
  border-color: var(--focus);
  background: var(--surface);
}

.stats-grid {
  margin: 0.65rem 0 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 10px;
  overflow: hidden;
}

.stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: calc(0.48rem * var(--density-pad)) calc(0.64rem * var(--density-pad));
  font-size: calc(0.88rem * var(--density-font));
}

.stats-row + .stats-row {
  border-top: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}

.stats-row strong {
  font-size: calc(0.9rem * var(--density-font));
  color: var(--text);
}

.llm-token-grid .stats-row strong.pending {
  color: var(--muted);
  font-weight: 500;
}

.llm-token-grid .stats-row strong.unavailable {
  color: color-mix(in srgb, var(--danger) 70%, var(--muted));
  font-weight: 500;
}

dialog {
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--text);
  width: min(92vw, 440px);
  padding: 1rem;
  box-shadow: var(--shadow);
}

#about-dialog {
  width: min(92vw, 673px);
  position: relative;
  font-size: calc(0.82rem * var(--density-font));
}

.about-section-title {
  font-size: calc(0.9rem * var(--density-font));
  font-weight: 600;
}

.about-dialog-title {
  font-size: calc(2rem * var(--density-font));
  font-weight: 700;
  letter-spacing: -0.01em;
}

.about-close-btn {
  position: absolute;
  top: calc(0.62rem * var(--density-pad));
  right: calc(0.62rem * var(--density-pad));
}

.about-feedback-line {
  margin-top: 0.75rem;
  color: var(--muted);
}

.markdown-help-dialog {
  width: min(92vw, 620px);
}

.documentation-dialog {
  width: min(96vw, 1180px);
  height: min(90vh, 820px);
  max-height: min(90vh, 820px);
  padding: 0;
  overflow: hidden;
  display: none;
  flex-direction: column;
}

.documentation-dialog[open] {
  display: flex;
}

.documentation-header {
  position: relative;
  padding: calc(0.9rem * var(--density-pad)) calc(1.05rem * var(--density-pad));
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

.documentation-close-btn {
  position: absolute;
  top: calc(0.62rem * var(--density-pad));
  right: calc(0.62rem * var(--density-pad));
}

.documentation-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: calc(0.9rem * var(--density-pad)) calc(1.05rem * var(--density-pad))
    calc(1.1rem * var(--density-pad));
  display: grid;
  gap: calc(0.75rem * var(--density-gap));
}

.documentation-section {
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 62%, transparent);
  padding: calc(0.68rem * var(--density-pad));
}

.documentation-section h3 {
  margin: 0 0 0.45rem;
  font-size: calc(0.96rem * var(--density-font));
}

.documentation-section p {
  margin: 0;
  color: var(--muted);
  font-size: calc(0.86rem * var(--density-font));
  line-height: 1.5;
}

.documentation-section p + p {
  margin-top: 0.42rem;
}

.documentation-section code {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 72%, var(--surface-soft));
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 6px;
  padding: 0.08rem 0.3rem;
}

.documentation-areas {
  background: color-mix(in srgb, var(--active-row) 20%, var(--surface-soft));
}

.documentation-areas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(0.38rem * var(--density-gap));
  margin-top: 0.25rem;
}

.documentation-areas-grid a {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 8px;
  padding: calc(0.34rem * var(--density-pad)) calc(0.5rem * var(--density-pad));
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--text);
  text-decoration: none;
  font-size: calc(0.84rem * var(--density-font));
}

.documentation-areas-grid a:hover {
  border-color: var(--focus);
  background: var(--active-row);
}

.markdown-help-examples {
  margin-top: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 10px;
  overflow: hidden;
}

.markdown-help-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: calc(0.46rem * var(--density-pad)) calc(0.62rem * var(--density-pad));
  font-size: calc(0.84rem * var(--density-font));
}

.markdown-help-row + .markdown-help-row {
  border-top: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}

.markdown-help-row code {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 7px;
  padding: 0.18rem 0.36rem;
  word-break: break-word;
}

.markdown-help-row span {
  color: var(--muted);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dialog-title {
  font-size: 1.15rem;
  margin-bottom: 0.7rem;
}

.stats-dialog-header .dialog-title {
  margin-bottom: 0;
}

dialog button {
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: calc(0.45rem * var(--density-pad)) calc(0.65rem * var(--density-pad));
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
}

dialog button:focus,
dialog button:focus-visible,
.dialog-x-btn:focus,
.dialog-x-btn:focus-visible,
.about-coffee-btn:focus,
.about-coffee-btn:focus-visible,
.support-bubble-link:focus,
.support-bubble-link:focus-visible,
.support-bubble-dismiss:focus,
.support-bubble-dismiss:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--focus);
}

.about-coffee-btn:focus,
.about-coffee-btn:focus-visible,
.support-bubble-link:focus,
.support-bubble-link:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--focus) 78%, transparent);
  outline-offset: 1px;
}

.about-coffee-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.3rem;
  padding: calc(0.36rem * var(--density-pad)) calc(0.62rem * var(--density-pad));
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  text-decoration: none;
  font: inherit;
  font-size: calc(0.9rem * var(--density-font));
  line-height: 1.1;
}

.about-coffee-btn:hover {
  border-color: var(--focus);
  background: var(--active-row);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(0.45rem * var(--density-gap));
  margin-top: 1rem;
}

.danger-action {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  background: color-mix(in srgb, var(--danger) 9%, var(--surface-soft));
}

.danger-action:hover {
  border-color: var(--danger);
}

.settings-dialog {
  width: min(94vw, 780px);
  max-height: min(90vh, 780px);
  overflow: auto;
}

.find-dialog {
  width: min(92vw, 640px);
}

.command-dialog {
  width: min(92vw, 560px);
}

.merge-dialog {
  width: min(92vw, 520px);
}

.template-dialog {
  width: min(96vw, 900px);
  height: min(86vh, 620px);
  max-height: min(86vh, 620px);
  overflow: hidden;
  display: none;
  flex-direction: column;
}

.template-dialog[open] {
  display: flex;
}

.graph-dialog {
  width: min(96vw, 980px);
  position: relative;
}

.graph-close-btn {
  position: absolute;
  top: calc(0.62rem * var(--density-pad));
  right: calc(0.62rem * var(--density-pad));
}

.graph-view-canvas {
  width: 100%;
  height: min(68vh, 560px);
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
  margin-top: 0.62rem;
}

.template-grid {
  display: grid;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
  gap: calc(0.6rem * var(--density-gap));
  flex: 1;
  min-height: 0;
}

.template-list {
  display: flex;
  flex-direction: column;
  gap: calc(0.25rem * var(--density-gap));
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.template-item {
  width: 100%;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  font: inherit;
  font-size: calc(0.82rem * var(--density-font));
  border-radius: 9px;
  padding: calc(0.34rem * var(--density-pad)) calc(0.48rem * var(--density-pad));
  cursor: pointer;
}

.template-item:hover,
.template-item.active {
  border-color: var(--focus);
  background: var(--active-row);
}

.template-preview {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 74%, transparent);
  padding: calc(0.48rem * var(--density-pad)) calc(0.58rem * var(--density-pad));
  min-height: 0;
  height: 100%;
  overflow: auto;
}

.template-preview h4 {
  margin: 0 0 0.5rem;
  font-size: calc(0.9rem * var(--density-font));
}

.template-preview pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  font-size: calc(0.8rem * var(--density-font));
  color: var(--muted);
}

.find-grid {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: calc(0.35rem * var(--density-gap)) calc(0.45rem * var(--density-gap));
}

.find-label {
  align-self: center;
  color: var(--muted);
  font-size: calc(0.82rem * var(--density-font));
}

.find-input {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
  color: var(--text);
  border-radius: 8px;
  padding: calc(0.36rem * var(--density-pad)) calc(0.5rem * var(--density-pad));
  font: inherit;
  font-size: calc(0.86rem * var(--density-font));
}

.find-input:focus {
  outline: none;
  border-color: var(--focus);
}

.find-options {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.3rem * var(--density-gap));
}

.find-actions {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.34rem * var(--density-gap));
}

.find-results {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  max-height: 260px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 10px;
}

.find-results li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: calc(0.34rem * var(--density-pad)) calc(0.5rem * var(--density-pad));
  font-size: calc(0.82rem * var(--density-font));
}

.find-results li + li {
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.find-results li.active {
  background: var(--active-row);
}

.find-results li button {
  font-size: calc(0.76rem * var(--density-font));
  padding: calc(0.24rem * var(--density-pad)) calc(0.46rem * var(--density-pad));
}

.merge-note-list {
  max-height: min(300px, 42vh);
}

.merge-note-item {
  align-items: center;
}

.merge-note-label {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: calc(0.4rem * var(--density-gap));
}

.merge-note-check {
  accent-color: var(--focus);
}

.find-result-name {
  color: var(--text);
}

.find-result-snippet {
  color: var(--muted);
  font-size: calc(0.74rem * var(--density-font));
}

.snapshot-danger {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  color: color-mix(in srgb, var(--danger) 64%, var(--text));
}

.settings-section {
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 12px;
  padding: calc(0.66rem * var(--density-pad));
  margin-bottom: calc(0.62rem * var(--density-gap));
  background: color-mix(in srgb, var(--surface-soft) 58%, transparent);
}

.settings-section h3 {
  margin: 0 0 calc(0.55rem * var(--density-gap));
  font-size: calc(0.93rem * var(--density-font));
  font-weight: 600;
}

.setting-subtext {
  margin: calc(0.38rem * var(--density-gap)) 0 0;
  color: var(--muted);
  font-size: calc(0.78rem * var(--density-font));
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.7rem * var(--density-gap));
  padding: calc(0.34rem * var(--density-pad)) 0;
}

.setting-row + .setting-row {
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.setting-row-stack {
  align-items: flex-start;
  flex-direction: column;
}

.setting-label {
  font-size: calc(0.88rem * var(--density-font));
  color: var(--text);
}

.settings-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(0.34rem * var(--density-gap));
}

.settings-options-wrap {
  max-width: min(100%, 390px);
}

.setting-chip {
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background: color-mix(in srgb, var(--surface) 76%, var(--surface-soft));
  color: var(--text);
  font: inherit;
  font-size: calc(0.8rem * var(--density-font));
  line-height: 1;
  border-radius: 999px;
  padding: calc(0.36rem * var(--density-pad)) calc(0.58rem * var(--density-pad));
  cursor: pointer;
}

.setting-chip:hover,
.setting-chip.active {
  border-color: var(--focus);
  background: var(--active-row);
}

.settings-palette-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(0.36rem * var(--density-gap));
}

.palette-option {
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 78%, var(--surface-soft));
  color: var(--text);
  font: inherit;
  font-size: calc(0.8rem * var(--density-font));
  border-radius: 10px;
  padding: calc(0.38rem * var(--density-pad)) calc(0.42rem * var(--density-pad));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(0.4rem * var(--density-gap));
  cursor: pointer;
}

.palette-option:hover,
.palette-option.active {
  border-color: var(--focus);
  background: var(--active-row);
}

.settings-switch {
  width: calc(2.35rem * var(--density-control));
  height: calc(1.36rem * var(--density-control));
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface) 75%, var(--surface-soft));
  border-radius: 999px;
  position: relative;
  padding: 0;
  cursor: pointer;
  transition: background 0.16s ease;
}

.settings-switch-knob {
  position: absolute;
  top: 50%;
  left: 2px;
  width: calc(1.03rem * var(--density-control));
  height: calc(1.03rem * var(--density-control));
  border-radius: 50%;
  transform: translate(0, -50%);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  transition: transform 0.16s ease;
}

.settings-switch.active {
  border-color: color-mix(in srgb, var(--focus) 58%, var(--border));
  background: color-mix(in srgb, var(--focus) 28%, var(--surface-soft));
}

.settings-switch.active .settings-switch-knob {
  transform: translate(calc(1rem * var(--density-control)), -50%);
  border-color: color-mix(in srgb, var(--focus) 55%, var(--border));
}

.settings-footer {
  margin-top: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(0.5rem * var(--density-gap));
}

.settings-reset-btn {
  border-color: transparent;
  background: transparent;
  color: var(--focus);
  padding-left: 0;
  padding-right: 0;
}

.theme-swatch {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex: 0 0 auto;
}

.accent-dot.theme-swatch {
  width: 0.86rem;
  height: 0.86rem;
}

.theme-swatch.default {
  background: #0d9db9;
}

.theme-swatch.green {
  background: #2f8f6d;
}

.theme-swatch.red {
  background: #b85f5f;
}

.theme-swatch.blue {
  background: #437fd0;
}

.theme-swatch.orange {
  background: #c88842;
}

.theme-swatch.yellow {
  background: #b99234;
}

.theme-swatch.purple {
  background: #7e68ba;
}

.theme-swatch.pink {
  background: #be6d98;
}

.shortcut-hint {
  font-size: 0.88rem;
  color: var(--muted);
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0.65rem 0 0.95rem;
}

.emoji-item {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
  padding: 0.35rem;
  text-align: center;
  cursor: pointer;
}

.emoji-item:hover {
  border-color: var(--focus);
}

@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.mobile-layout {
    overflow: hidden;
  }

  .app {
    width: 100vw;
    overflow: hidden;
  }

  .menu-bar {
    padding: calc(0.26rem * var(--density-pad)) calc(0.45rem * var(--density-pad));
    gap: calc(0.2rem * var(--density-gap));
  }

  .menu-left {
    gap: calc(0.05rem * var(--density-gap));
    min-width: 0;
    flex: 1 1 auto;
  }

  .app-brand {
    font-size: calc(0.9rem * var(--density-font));
    margin-right: calc(0.08rem * var(--density-gap));
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .menu-trigger {
    font-size: calc(0.78rem * var(--density-font));
    padding: calc(0.22rem * var(--density-pad)) calc(0.26rem * var(--density-pad));
    border-radius: 6px;
    white-space: nowrap;
  }

  .menu-right {
    gap: calc(0.2rem * var(--density-gap));
    margin-left: calc(0.2rem * var(--density-gap));
    flex: 0 0 auto;
  }

  .pomodoro-toggle,
  .ambient-toggle,
  .theme-toggle,
  .accent-menu-button,
  .info-circle-btn {
    width: calc(1.55rem * var(--density-control));
    height: calc(1.55rem * var(--density-control));
  }

  .pomodoro-toggle {
    font-size: calc(0.78rem * var(--density-font));
  }

  .theme-toggle {
    font-size: calc(0.78rem * var(--density-font));
  }

  .info-circle-btn {
    font-size: calc(0.76rem * var(--density-font));
  }

  .accent-dot {
    width: 0.72rem;
    height: 0.72rem;
  }

  .menu-bar,
  .toolbar,
  .command-bar-wrap,
  .workspace,
  .editor-area,
  .editor-surface {
    max-width: 100vw;
  }

  .workspace,
  .editor-area,
  .editor-surface {
    overflow: hidden;
  }

  .document-batch-check {
    opacity: 1;
    pointer-events: auto;
  }

  .pomodoro-panel {
    right: 0;
    width: min(280px, 90vw);
  }

  .pomodoro-banner {
    top: calc(4.2rem * var(--density-pad));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 1.2rem);
  }

  .mobile-notes-toggle {
    display: inline-grid;
    position: absolute;
    top: calc(0.46rem * var(--density-pad));
    left: calc(0.46rem * var(--density-pad));
    box-shadow: var(--shadow);
  }

  .doc-header {
    padding-left: calc(2rem * var(--density-control));
  }

  .workspace {
    flex-direction: row;
    padding-bottom: calc(6.4rem + env(safe-area-inset-bottom));
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(60.2vw, 252px);
    min-width: min(60.2vw, 252px);
    max-width: 60.2vw;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0 14px 14px 0;
    transform: translateX(calc(-100% - 0.75rem));
    transition: transform 0.23s ease;
    z-index: 44;
  }

  body.mobile-notes-open .sidebar {
    transform: translateX(0);
  }

  body.mobile-layout .sidebar-controls,
  body.mobile-layout .sidebar-search-toggle-btn,
  body.mobile-layout .sidebar-toggle-collapsed {
    display: none !important;
  }

  body.mobile-layout .sidebar-pane-title {
    display: flex;
  }

  .editor-surface {
    height: 100%;
    min-height: 0;
  }

  body.mobile-layout .floating-metrics-trigger {
    bottom: calc(0.55rem * var(--density-pad));
  }

  .toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .command-bar-wrap {
    top: auto;
    position: relative;
    z-index: 23;
    left: 0;
    right: auto;
    padding: calc(0.26rem * var(--density-pad)) calc(0.45rem * var(--density-pad));
    padding-top: calc(0.58rem * var(--density-pad));
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .command-bar {
    width: min(92vw, 560px);
    max-width: calc(100vw - 0.9rem);
    margin-inline: auto;
  }

  .command-bar-input {
    font-size: calc(0.78rem * var(--density-font));
    padding: calc(0.34rem * var(--density-pad)) calc(0.5rem * var(--density-pad));
  }

  .command-results {
    max-height: min(38vh, 250px);
  }

  .toolbar .tool-btn {
    flex: 0 0 auto;
  }

  .outline-panel {
    display: none !important;
  }

  .outline-shell {
    display: none !important;
  }

  .documentation-dialog {
    width: min(98vw, 98vw);
    height: min(92vh, 92dvh);
    max-height: min(92vh, 92dvh);
  }

  .documentation-areas-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .editor {
    min-height: 0;
    font-size: 1rem;
  }

  body.mobile-layout .support-bubble {
    left: 0.5rem;
    right: auto;
    width: min(282px, calc(100vw - 1rem));
    min-width: 0;
    max-width: calc(100vw - 1rem);
    bottom: calc(1.95rem + env(safe-area-inset-bottom));
  }

  body.mobile-layout .support-bubble-link {
    min-width: 0;
  }

  body.mobile-layout .support-bubble-link span:first-child {
    max-width: 20rem;
    opacity: 1;
  }

  body.mobile-layout .support-bubble-dismiss {
    display: inline-grid;
  }

  body.mobile-layout .feedback-contact {
    left: 0.5rem;
    width: min(282px, calc(100vw - 1rem));
    min-width: 0;
    max-width: calc(100vw - 1rem);
    bottom: calc(0.3rem + env(safe-area-inset-bottom));
  }

  .settings-palette-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .template-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .graph-view-canvas {
    height: min(56vh, 420px);
  }

  .setting-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-options {
    justify-content: flex-start;
  }
}