@property --topbar-h {
  syntax: "<length>";
  inherits: true;
  initial-value: 50px;
}

:root {
  --bg: #101215;
  --panel: #181d23;
  --panel-2: #202732;
  --chrome-1: #151b23;
  --chrome-2: #121821;
  --text: #e9eef5;
  --muted: #9db0c3;
  --border: #2b3442;
  --accent: #4ba3ff;
  /* JSON Canvas purple — click-drag marquee only. Selected cards, connectors, and Excalidraw use --selection-accent. */
  --json-canvas-purple: #8e79cf;
  --json-canvas-purple-r: 142;
  --json-canvas-purple-g: 121;
  --json-canvas-purple-b: 207;
  --marquee-accent-border: rgba(142, 121, 207, 0.9);
  --marquee-accent-fill: rgba(142, 121, 207, 0.14);
  /* Identity-driven selection ring (updated from app.js → syncSelectionAccentCssFromHex). Default matches --accent.
     Excalidraw paints its outline from --color-selection; .excalidraw.theme--dark sets its own, so the overlay rule below replaces it. */
  --color-selection: #4ba3ff;
  --selection-accent: #4ba3ff;
  --selection-accent-r: 75;
  --selection-accent-g: 163;
  --selection-accent-b: 255;
  --selection-accent-marquee-border: rgba(75, 163, 255, 0.9);
  --selection-accent-marquee-fill: rgba(75, 163, 255, 0.14);
  --selection-accent-group-border: rgba(75, 163, 255, 0.95);
  --selection-accent-group-fill: rgba(75, 163, 255, 0.1);
  --selection-accent-handle-fill: rgba(75, 163, 255, 0.95);
  --selection-accent-resize-hint: rgba(75, 163, 255, 0.35);
  --danger: #c94f4f;
  /* Fallback when @property --topbar-h is unsupported; animated height uses registration + body transition. */
  --topbar-h: 50px;
  --chrome-topbar-bg: linear-gradient(180deg, var(--chrome-1), var(--chrome-2));
  --chrome-sidebar-bg: linear-gradient(180deg, var(--chrome-1), var(--chrome-2));
  --chrome-sidebar-occluder-bg: linear-gradient(180deg, var(--chrome-1), var(--chrome-2));
  --z-canvas: 1;
  --z-sidebar: 210;
  --z-sidebar-occluder: 205;
  --z-topbar: 220;
  --z-panel: 200;
  --z-excalidraw-chrome: 140;
  /* Viewport-fixed Excalidraw chrome: sidebar width + gap (ResizeObserver updates on html in app.js). */
  --cells-sidebar-chrome-inset: 88px;
  /* Raw left rail width for translateX on library/settings (same observer as chrome inset). */
  --cells-sidebar-rail-width: 64px;
  --cells-collapsed-rail-width: 76px;
  --z-context-menu: 240;
  --z-modal: 260;
  --z-floating: 280;
  /* Topbar/sidebar collapse: one timeline to avoid seams/jitter (open + close). */
  --cells-chrome-collapse-duration: 450ms;
  --cells-chrome-collapse-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Feedback inspector + left library/settings slide: shared motion (matches .inspector). */
  --cells-blade-transform-duration: 220ms;
  --cells-blade-opacity-duration: 170ms;
  --cells-blade-ease: ease;
  /* Canvas inset / TL radius; collapsed: body.topbar-collapsed sets --cells-content-radius: 0px */
  --cells-content-gap: 3px;
  --cells-content-radius: 10px;
  /* Top bar “Cells”; join modal + login wordmark use --cells-identity-title-size. */
  --cells-app-title-size: 22px;
  --cells-identity-title-size: 32px;
  /* Shared vertical chrome gradient: topbar + sidebar + occluder sample one tall gradient (no masks). */
  --cells-chrome-gradient-span: 100vh;
  /* Reserved for a future additive corner (e.g. ::after) — do not use subtractive clip on the shell. */
  --cells-chrome-l-inner-r: calc(var(--cells-content-gap) + var(--cells-content-radius));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  --topbar-h: 50px;
  --topbar-expanded-h: 50px;
  --cells-sidebar-collapse-offset: calc(var(--topbar-expanded-h) - var(--topbar-h));
  transition: --topbar-h var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease);
}

body.topbar-collapsed {
  --topbar-h: 0px;
  --cells-content-radius: 0px;
}

.app-shell {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  transition: top var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease);
}

/* Dashboard modal: full workspace column only (session replay iframe). */
html[data-cells-replay-embed="1"] .topbar {
  display: none;
}

html[data-cells-replay-embed="1"] .app-shell {
  top: 0;
  grid-template-columns: 1fr;
}

html[data-cells-replay-embed="1"] .app-shell::before {
  display: none;
}

html[data-cells-replay-embed="1"] .sidebar {
  display: none;
}

.app-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--cells-sidebar-rail-width, 72px);
  background-color: transparent;
  background-image: var(--chrome-sidebar-occluder-bg);
  background-size: 100% var(--cells-chrome-gradient-span);
  background-position: 0 calc(-1 * var(--topbar-expanded-h));
  background-repeat: no-repeat;
  z-index: var(--z-sidebar-occluder);
  pointer-events: none;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--topbar-expanded-h);
  background-color: transparent;
  background-image: var(--chrome-topbar-bg);
  background-size: 100% var(--cells-chrome-gradient-span);
  background-position: 0 0;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 14px;
  z-index: var(--z-topbar);
  overflow: hidden;
  /* Full-rect paint: do not use subtractive clip-path here — it cuts through to body bg at the rail junction. */
  clip-path: inset(0 0 0 0);
  transition:
    clip-path var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    padding var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    gap var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease);
}

.topbar-brand-slot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  transition:
    flex-basis var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    width var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease);
}

.topbar-rest {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  min-width: 0;
  min-height: 0;
  transition:
    flex var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    width var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    opacity var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    max-width var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    clip-path var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease);
}

body.topbar-collapsed .topbar {
  /* Match live sidebar width (narrow rail + hover glyph expansion via ResizeObserver → --cells-sidebar-rail-width). */
  clip-path: inset(0 calc(100% - var(--cells-sidebar-rail-width, 72px)) 0 0);
  padding: 0;
  gap: 0;
  transition:
    clip-path var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    padding var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    gap var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease);
}

body.topbar-collapsed .topbar-brand-slot {
  width: var(--cells-sidebar-rail-width, 72px);
  flex: 0 0 var(--cells-sidebar-rail-width, 72px);
  justify-content: center;
  align-items: center;
  transition: none;
}

body.topbar-collapsed .topbar-rest {
  flex: 0 0 0;
  width: 0;
  max-width: 0;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.topbar * {
  white-space: nowrap;
}

/* Raised emboss for “Cells” wordmarks only (.topbar-title, join modal h3, login h1). */
.cells-wordmark {
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.22),
    0 -1px 0 rgba(255, 255, 255, 0.12),
    -1px 0 0 rgba(255, 255, 255, 0.1),
    1px 1px 0 rgba(0, 0, 0, 0.94),
    2px 2px 0 rgba(0, 0, 0, 0.55),
    3px 3px 0 rgba(0, 0, 0, 0.38),
    4px 4px 0 rgba(0, 0, 0, 0.24),
    0 2px 0 rgba(0, 0, 0, 0.68),
    0 3px 0 rgba(0, 0, 0, 0.52),
    0 4px 0 rgba(0, 0, 0, 0.36),
    1px 0 0 rgba(0, 0, 0, 0.86),
    0 1px 0 rgba(0, 0, 0, 0.88),
    -1px 0 0 rgba(0, 0, 0, 0.76),
    0 -1px 0 rgba(0, 0, 0, 0.7),
    1px -1px 0 rgba(0, 0, 0, 0.84),
    -1px 1px 0 rgba(0, 0, 0, 0.84),
    3px 0 0 rgba(0, 0, 0, 0.4),
    3px 2px 0 rgba(0, 0, 0, 0.3),
    2px 3px 0 rgba(0, 0, 0, 0.3);
}

.topbar-title {
  font-family: "Inknut Antiqua", Georgia, serif;
  font-weight: 700;
  font-size: var(--cells-app-title-size);
  line-height: 1;
  color: #f7fafc;
}

/* Hide topbar wordmark until Inknut metrics are ready (avoids FOIT “grow” on :9330). */
html[data-cells-font-prep="1"] .topbar-title {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html[data-cells-font-prep="1"] .topbar-title {
    visibility: visible;
  }
}

.topbar-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100% - 240px));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.topbar-rest .topbar-center {
  z-index: 1;
}

.filename-display {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 14px;
  border-radius: 8px;
  padding: 4px 8px;
  cursor: default;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.filename-path-trail {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.filename-path-ancestor {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  padding: 0;
  margin: 0;
  cursor: pointer;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: baseline;
}

.filename-path-ancestor:hover,
.filename-path-ancestor:focus-visible {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.filename-path-sep {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.filename-path-current {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: text;
}

.filename-display:hover {
  background: transparent;
}

.filename-display:hover .filename-path-current {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.filename-display.editing {
  cursor: default;
}

.filename-input {
  border: 1px solid var(--border);
  background: #141922;
  color: var(--text);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 14px;
  width: 8ch;
  min-width: 6ch;
  max-width: 38ch;
  text-align: center;
}

.clock-display {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.03em;
}

.sidebar {
  position: relative;
  z-index: var(--z-sidebar);
  border-right: 0;
  background-color: transparent;
  background-image: var(--chrome-sidebar-bg);
  background-size: 100% var(--cells-chrome-gradient-span);
  background-position: 0 calc(-1 * var(--topbar-expanded-h));
  background-repeat: no-repeat;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  box-sizing: border-box;
  width: 64px;
  overflow: hidden;
  transform: translateY(var(--cells-sidebar-collapse-offset));
  height: calc(100% - var(--cells-sidebar-collapse-offset));
  transition:
    width var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    transform var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    height var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease);
}

body.topbar-collapsed .app-shell:not(.sidebar-rail-expanded) .sidebar {
  width: var(--cells-collapsed-rail-width, var(--cells-sidebar-rail-width, 72px));
}

.sidebar-spacer {
  flex: 1;
}

.app-shell.sidebar-rail-expanded .sidebar {
  align-items: stretch;
  width: max-content;
  max-width: min(260px, 45vw);
  min-width: 64px;
}

.sidebar-rail-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.app-shell:not(.sidebar-rail-expanded) .sidebar .sidebar-rail-item {
  gap: 0;
  justify-content: center;
}

.sidebar .sidebar-rail-item .icon-button {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sidebar-rail-label {
  flex: 1;
  min-width: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  transition:
    max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}

.app-shell:not(.sidebar-rail-expanded) .sidebar .sidebar-rail-label {
  flex: 0 0 0;
  width: 0;
  transition:
    max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.22s ease;
}

.app-shell.sidebar-rail-expanded .sidebar .sidebar-rail-item {
  gap: 10px;
  justify-content: flex-start;
}

.app-shell.sidebar-rail-expanded .sidebar .sidebar-rail-label {
  flex: 1;
  max-width: 12rem;
  opacity: 1;
}

.workspace {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  isolation: isolate;
}

.workspace > .canvas-container {
  z-index: 0;
}

.button {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  cursor: pointer;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.14);
}

.button:disabled:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.button:hover {
  border-color: var(--accent);
}

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

.icon-button {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #273243, #202732);
  color: var(--text);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    transform 140ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.icon-button:hover {
  border-color: var(--selection-accent);
  box-shadow: 0 0 0 2px rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.22);
  transform: translateY(-1px);
}

.icon-button:active {
  transform: translateY(0) scale(0.97);
}

.icon-button.active {
  border-color: var(--selection-accent);
  background: linear-gradient(180deg, #273243, #202732);
  box-shadow: 0 0 0 2px rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.85);
}

.nested-nav-button {
  border-color: rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.5);
}

.global-audio-now-playing-btn {
  border-color: rgba(111, 196, 132, 0.55);
  background: linear-gradient(180deg, #2a3e31, #23322a);
  color: #c8f4d5;
}

.global-audio-now-playing-btn:hover {
  border-color: rgba(111, 196, 132, 0.95);
  box-shadow: 0 0 0 2px rgba(111, 196, 132, 0.18);
}

.global-audio-now-playing-btn.active {
  border-color: rgba(111, 196, 132, 1);
  box-shadow:
    0 0 0 2px rgba(111, 196, 132, 0.22),
    0 10px 18px rgba(36, 68, 46, 0.3);
}

.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.file-label {
  position: relative;
  overflow: hidden;
}

.file-label input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.canvas-container {
  --grid-step: 24px;
  --grid-offset-x: 0px;
  --grid-offset-y: 0px;
  --viewport-frame-left: 0px;
  --viewport-frame-top: 0px;
  --viewport-frame-width: 100%;
  --viewport-frame-height: 100%;
  position: relative;
  margin: var(--cells-content-gap) 0 0 var(--cells-content-gap);
  border-top-left-radius: var(--cells-content-radius);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 0 0 1px rgba(5, 8, 12, 0.45);
  overflow: hidden;
  min-height: 0;
  background: #0f1319;
  transition:
    margin-top var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    border-top-left-radius var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease);
}

body.topbar-collapsed .canvas-container {
  margin-top: 0;
}

.canvas-container::after {
  content: "";
  position: absolute;
  left: var(--viewport-frame-left);
  top: var(--viewport-frame-top);
  width: var(--viewport-frame-width);
  height: var(--viewport-frame-height);
  border: 1px solid rgba(75, 163, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(5, 8, 12, 0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: calc(var(--z-excalidraw-chrome) + 3);
}

.canvas-container.viewport-match-active::after {
  opacity: 1;
}

.canvas-container.excalidraw-active {
  background: #0f1319;
}

.grid-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) var(--grid-offset-x) var(--grid-offset-y) / var(--grid-step) var(--grid-step),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) var(--grid-offset-x) var(--grid-offset-y) / var(--grid-step) var(--grid-step);
}

.canvas-container.excalidraw-active .grid-layer {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) var(--grid-offset-x) var(--grid-offset-y) / var(--grid-step) var(--grid-step),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) var(--grid-offset-x) var(--grid-offset-y) / var(--grid-step) var(--grid-step);
}

.edge-layer,
.snap-guide-layer,
.node-layer,
.cursor-layer {
  position: absolute;
  inset: 0;
  min-width: 24000px;
  min-height: 24000px;
}

.edge-layer {
  z-index: 11;
  pointer-events: none;
}

.snap-guide-layer {
  z-index: 13;
  pointer-events: none;
  overflow: visible;
  color: var(--selection-accent);
}

.snap-guide-layer .snap-guide-stroke {
  stroke: var(--selection-accent);
  fill: none;
}

.snap-guide-layer .snap-guide-label {
  fill: var(--selection-accent);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 11px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.node-layer {
  z-index: 12;
  pointer-events: none;
}

.node-layer .node {
  pointer-events: auto;
}

.selection-marquee {
  position: absolute;
  border: 1px dashed var(--marquee-accent-border);
  background: var(--marquee-accent-fill);
  pointer-events: none;
  z-index: calc(var(--z-excalidraw-chrome) + 2);
}

.selection-group-box {
  position: absolute;
  border: 1px dashed var(--selection-accent-group-border);
  background: var(--selection-accent-group-fill);
  pointer-events: none;
  z-index: 20;
}

.selection-group-box .selection-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--selection-accent-handle-fill);
  box-shadow: 0 0 0 2px rgba(10, 14, 20, 0.55);
  pointer-events: auto;
  padding: 0;
}

.cursor-layer {
  pointer-events: none;
  z-index: 13;
}

/* In sketch mode, keep canvas content below Excalidraw UI chrome. */

.collab-cursor {
  position: absolute;
  transform: translate3d(-1px, -1px, 0);
  transition: transform 70ms linear, opacity 140ms ease;
  will-change: transform, opacity;
}

.collab-cursor-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.collab-cursor-name {
  margin-top: 4px;
  margin-left: 8px;
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  color: #ffffff;
  background: rgba(12, 17, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.22);
  white-space: nowrap;
  transition: border-color 120ms ease, opacity 140ms ease;
}

.edge-line {
  stroke: rgba(177, 196, 216, 0.86);
  stroke-width: 1.7;
  fill: none;
  pointer-events: none;
}

.edge-line.dotted {
  stroke-dasharray: 6 6;
}

.edge-line.selected,
.edge-line.marquee-included {
  stroke: var(--selection-accent);
  stroke-width: 2.4;
}

.edge-hitbox {
  stroke: transparent;
  stroke-width: 64;
  fill: none;
  pointer-events: stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.edge-dot {
  fill: rgba(177, 196, 216, 0.95);
  r: 1.9;
  pointer-events: none;
}

.edge-preview {
  stroke: #4ba3ff;
  stroke-width: 2;
  stroke-dasharray: 4 4;
  fill: none;
  opacity: 0.95;
  pointer-events: none;
}

.edge-label {
  fill: #cdd8e3;
  font-size: 12px;
}

/* border-radius must stay in sync with CARD_CONNECTOR_RADIUS_PX in app.js (connector snapping). */
.node {
  position: absolute;
  border: 1px solid #3a4659;
  border-radius: 10px;
  background: #232b35;
  color: #fff;
  overflow: visible;
  user-select: none;
  cursor: move;
  will-change: left, top, width, height;
}

.node.media-node {
  background: transparent;
  border: 0;
  border-color: transparent;
}

body.is-dragging-card,
body.is-dragging-card * {
  cursor: move !important;
}

body.is-connect-ready,
body.is-connect-ready * {
  cursor: copy !important;
}

.node.selected {
  outline: 2px solid var(--selection-accent);
  outline-offset: 0;
  z-index: 2;
}

.node.marquee-included {
  outline: 2px dashed var(--json-canvas-purple);
  outline-offset: 0;
}

.node.dragging {
  z-index: 4;
}

.node.nested-drop-target {
  outline: 3px solid #4ba3ff;
  outline-offset: 4px;
  box-shadow:
    0 0 0 7px rgba(75, 163, 255, 0.16),
    0 12px 32px rgba(0, 0, 0, 0.35);
}

.node.media-node.selected {
  outline: none;
}

.node.media-node.selected {
  box-shadow: 0 0 0 2px var(--selection-accent);
  border-radius: 0;
}

.node.media-node.marquee-included {
  box-shadow: 0 0 0 2px var(--json-canvas-purple);
  border-radius: 0;
}

.node-content {
  padding: 8px;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.35;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: inherit;
}

.node.media-node .node-content,
.node-content.media-content {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.node-content.video-content {
  position: relative;
}

.video-drag-surface {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 44px;
  z-index: 3;
  background: transparent;
  cursor: move;
}

.nested-canvas-content {
  cursor: pointer;
}

.nested-canvas-preview {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  padding: 8px;
  height: 100%;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

.node.text .node-content.nested-canvas-preview {
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  text-align: left;
}

.nested-canvas-title {
  font-size: 11px;
  line-height: 1.2;
  color: rgba(236, 244, 252, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4px;
  padding: 1px 2px;
  cursor: text;
  justify-self: center;
  text-align: center;
  width: 100%;
}

.nested-canvas-title[contenteditable="true"] {
  outline: 1px solid rgba(75, 163, 255, 0.55);
  background: rgba(75, 163, 255, 0.12);
  white-space: normal;
}

.nested-canvas-viewport {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(180deg, rgba(14, 18, 24, 0.95), rgba(11, 15, 21, 0.95));
  overflow: hidden;
  position: relative;
}

.nested-canvas-viewport--aspect {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nested-canvas-mini {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.nested-canvas-edge {
  stroke: rgba(176, 199, 225, 0.58);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nested-canvas-edge-label {
  fill: #cdd8e3;
  font-size: 12px;
}

.nested-canvas-card-rect {
  fill: rgba(35, 43, 53, 0.95);
  stroke: #3a4659;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.nested-canvas-card-rect--group {
  stroke-dasharray: 4 3;
}

.nested-canvas-node {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #3a4659;
  /* border-radius set in JS so mini previews stay squarcle-like at any scale */
  border-radius: 2px;
  background: rgba(35, 43, 53, 0.95);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  pointer-events: none;
}

.nested-canvas-node.group {
  border-style: dashed;
}

.nested-canvas-node-text {
  color: rgba(239, 245, 252, 0.92);
  text-align: center;
  line-height: 1.2;
  white-space: pre-wrap;
  overflow: hidden;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nested-canvas-node--nested {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-content: stretch;
}

.nested-canvas-node-title {
  color: rgba(236, 244, 252, 0.9);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}

.nested-canvas-node-viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(180deg, rgba(14, 18, 24, 0.95), rgba(11, 15, 21, 0.95));
}

.nested-canvas-node-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(157, 176, 195, 0.85);
  white-space: nowrap;
}

.nested-canvas-node-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nested-canvas-scene {
  position: absolute;
  inset: 0;
}

.nested-canvas-scene--sized {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
}

.nested-canvas-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(157, 176, 195, 0.85);
  font-size: 11px;
}

.node-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  display: block;
  background: transparent;
}

.node-audio {
  width: 100%;
  min-height: 38px;
  height: 38px;
  margin: 0;
  display: block;
  background: rgba(12, 16, 22, 0.92);
  border-radius: 8px;
}

.node-embed {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.file-fallback {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.file-fallback strong {
  color: var(--text);
  font-size: 13px;
}

.collab-asset-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.audio-shell {
  height: 100%;
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, #1f2733, #1a212c);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px;
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
}

.audio-title {
  color: var(--text);
  font-size: 11px;
  letter-spacing: 0.02em;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-error {
  color: #ffb0b0;
  font-size: 11px;
}

.import-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 12, 0.48);
  display: grid;
  place-items: center;
  z-index: 70;
}

.import-card {
  width: 240px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #1a222e, #151d28);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
  padding: 14px;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.import-circle {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: conic-gradient(var(--accent) var(--fill, 0%), rgba(255, 255, 255, 0.12) 0);
  position: relative;
}

.import-circle::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: #171f2a;
}

.import-label {
  font-size: 12px;
  color: var(--muted);
}

.node-content.editable {
  user-select: text;
  cursor: text;
  min-height: 100%;
  outline: none;
  border: none;
  box-shadow: none;
  position: relative;
  caret-color: #ffffff;
}

.node-content.editable:focus,
.node-content.editable:focus-visible,
.node-content.editable:focus-within {
  outline: none;
  border: none;
  box-shadow: none;
}

.node-content.editable.empty-editing::before {
  content: "|";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  color: #ffffff;
  opacity: 0.95;
  pointer-events: none;
  animation: emptyCaretBlink 1s step-end infinite;
}

@keyframes emptyCaretBlink {
  0%, 45% {
    opacity: 0.95;
  }
  50%, 100% {
    opacity: 0;
  }
}

.node.text .node-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* Unlocked auto seed: grow with typed width — no mid-line wrap inside the shell. */
.node.text .node-content.text-card-single-line-grow {
  white-space: pre;
  word-break: normal;
  overflow-x: hidden;
  overflow-y: hidden;
}

.text-card-measure-host {
  position: fixed;
  left: -10000px;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  height: auto;
  overflow: visible;
  z-index: -1;
}

.text-card-measure-host .node-content {
  display: block;
  height: auto;
  overflow: visible;
}

/* Flashcard flip: reserve bottom space for the button. Match top/bottom padding so flex vertical
   centering isn’t biased upward (was 8px top vs 40px bottom). */
.node.text .node-content.has-flashcard-flip {
  padding: 40px 8px;
}

.node.text .flashcard-text-surface {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
}

.node.text .node-content .flashcard-text-surface.editable {
  user-select: text;
  cursor: text;
  outline: none;
  border: none;
  box-shadow: none;
  caret-color: #ffffff;
  position: relative;
}

.node.text .node-content .flashcard-text-surface.editable:focus,
.node.text .node-content .flashcard-text-surface.editable:focus-visible,
.node.text .node-content .flashcard-text-surface.editable:focus-within {
  outline: none;
  border: none;
  box-shadow: none;
}

.node.text .node-content .flashcard-text-surface.editable.empty-editing::before {
  content: "|";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  color: #ffffff;
  opacity: 0.95;
  pointer-events: none;
  animation: emptyCaretBlink 1s step-end infinite;
}

.flashcard-flip-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(8, 12, 18, 0.72);
  color: #d7e2ee;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 17;
  transition:
    transform 120ms ease,
    border-color 140ms ease,
    background-color 140ms ease;
}

.flashcard-flip-btn:hover {
  border-color: rgba(75, 163, 255, 0.72);
  background: rgba(18, 26, 36, 0.86);
  transform: translateY(-1px);
}

.flashcard-flip-btn:active {
  transform: translateY(0) scale(0.96);
}

.flashcard-flip-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flashcard-flip-icon.spin {
  animation: flashcardFlipSpin 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes flashcardFlipSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flashcard-flip-icon.spin {
    animation-duration: 1ms;
  }
}

.node-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  z-index: 5;
  padding: 0;
}

.node-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--selection-accent-resize-hint);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}

.node.media-node .node-handle {
  z-index: 18;
}

.node-handle:hover::after {
  opacity: 1;
}

.handle-n {
  top: -18px;
  left: calc(50% - 9px);
  height: 30px;
  cursor: n-resize;
}

.handle-s {
  bottom: -18px;
  left: calc(50% - 9px);
  height: 30px;
  cursor: s-resize;
}

.handle-e {
  right: -18px;
  top: calc(50% - 9px);
  width: 30px;
  cursor: e-resize;
}

.handle-w {
  left: -18px;
  top: calc(50% - 9px);
  width: 30px;
  cursor: w-resize;
}

.handle-ne {
  top: -16px;
  right: -16px;
  width: 28px;
  height: 28px;
  cursor: ne-resize;
}

.handle-se {
  bottom: -16px;
  right: -16px;
  width: 28px;
  height: 28px;
  cursor: se-resize;
}

.handle-sw {
  bottom: -16px;
  left: -16px;
  width: 28px;
  height: 28px;
  cursor: sw-resize;
}

.handle-nw {
  top: -16px;
  left: -16px;
  width: 28px;
  height: 28px;
  cursor: nw-resize;
}

.node.group {
  background: rgba(47, 58, 73, 0.45);
  border-style: dashed;
}

.node.link .node-content,
.node.file .node-content {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.inspector {
  width: 300px;
  border-left: 1px solid var(--border);
  background: var(--panel);
  padding: 12px;
  overflow: auto;
  transition:
    width var(--cells-blade-transform-duration) var(--cells-blade-ease),
    padding var(--cells-blade-transform-duration) var(--cells-blade-ease),
    opacity var(--cells-blade-opacity-duration) var(--cells-blade-ease),
    transform var(--cells-blade-transform-duration) var(--cells-blade-ease),
    border-color var(--cells-blade-transform-duration) var(--cells-blade-ease);
}

/* Feedback lives after library/settings in the shell so it can stack above them; fixed escapes workspace stacking. */
#feedbackPanel.inspector.feedback-panel {
  position: fixed;
  right: 0;
  top: var(--topbar-h);
  height: calc(100% - var(--topbar-h));
  z-index: calc(var(--z-sidebar) - 1);
}

.inspector.collapsed {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  border-left-color: transparent;
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  overflow: hidden;
}

.inspector h2 {
  margin: 0 0 12px;
  font-size: 16px;
}

.inspector form {
  display: grid;
  gap: 10px;
}

.inspector label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.inspector input,
.inspector textarea,
.inspector select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #141922;
  color: var(--text);
  padding: 8px;
  font: inherit;
}

.inspector select {
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

.feedback-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.feedback-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.feedback-panel-header h2 {
  margin: 0;
}

.feedback-add-note-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.feedback-tester-name-label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  flex-shrink: 0;
}

.feedback-notes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding-right: 2px;
}

.feedback-note-card {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(20, 25, 34, 0.55);
}

.feedback-note-card-select-row {
  width: 100%;
}

.feedback-note-card-select-row .feedback-note-type {
  width: 100%;
}

.feedback-note-remove {
  width: 100%;
  margin-top: 2px;
  padding: 8px 10px;
  font-size: 12px;
}

.feedback-note-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

/* Keep feedback draft buttons compact (avoid oversized pre-regression look). */
.feedback-note-card .feedback-note-submit,
.feedback-note-card .feedback-demo-capture-btn {
  width: 100%;
  padding: 4px 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 14px;
  line-height: 1.15;
}

/* Record a Demo states (Start green, Stop red). */
.feedback-note-card .feedback-demo-capture-btn.feedback-demo-capture--armed {
  border-color: rgba(76, 217, 100, 0.6);
  background: rgba(76, 217, 100, 0.12);
}

.feedback-note-card .feedback-demo-capture-btn.feedback-demo-capture--recording {
  border-color: rgba(201, 79, 79, 0.6);
  background: rgba(201, 79, 79, 0.12);
}

.feedback-note-card .feedback-demo-capture-btn.feedback-demo-capture--captured {
  opacity: 0.72;
}

/* Bottom-center pill while feedback demo recording is active (above collab toast). */
.cells-input-capture-indicator {
  position: fixed;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  z-index: 205;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 19, 25, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e9eef5;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  pointer-events: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.cells-input-capture-indicator__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e5484d;
  flex-shrink: 0;
  animation: cells-input-capture-dot-pulse 1s ease-in-out infinite;
}

@keyframes cells-input-capture-dot-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.92);
  }
}

.cells-input-capture-indicator__label {
  white-space: nowrap;
}

/* Current feedback panel markup (history + nametag). */
.feedback-name-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 3px 8px;
  border: 1px solid rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.6);
  border-radius: 999px;
  color: var(--text);
  background: rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.12);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feedback-draft-mount {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Feedback draft inputs should be slightly more compact than generic inspector inputs. */
.feedback-note-card .feedback-note-type {
  padding: 6px;
  font-size: 13px;
  line-height: 1.2;
}

.feedback-note-card .feedback-note-content {
  padding: 6px;
  font-size: 13px;
  line-height: 1.2;
}

.feedback-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding-right: 2px;
}

.feedback-submission-divider,
hr.feedback-submission-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 6px 0;
}

.feedback-history-boundary {
  margin-top: 2px;
}

.feedback-submitted-block {
  display: block;
}

.feedback-submitted-block--dismissed {
  opacity: 0.7;
}

.feedback-submission-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(20, 25, 34, 0.55);
}

.feedback-submission-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.feedback-submission-type-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feedback-submission-type-tag--problem {
  border-color: rgba(201, 79, 79, 0.6);
  background: rgba(201, 79, 79, 0.12);
}

.feedback-submission-type-tag--suggestion {
  border-color: rgba(75, 163, 255, 0.6);
  background: rgba(75, 163, 255, 0.12);
}

.feedback-submission-type-tag--praise {
  border-color: rgba(76, 217, 100, 0.55);
  background: rgba(76, 217, 100, 0.12);
}

.feedback-submission-type-tag--default {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.feedback-submission-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.feedback-submission-body--empty {
  color: var(--muted);
  font-style: italic;
}

.feedback-submission-meta {
  color: var(--muted);
  font-size: 11px;
}

.feedback-submission-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.feedback-submission-status--dismissed {
  opacity: 0.65;
}

.feedback-submission-status--acknowledged {
  border-color: rgba(255, 189, 46, 0.6);
  background: rgba(255, 189, 46, 0.12);
}

.feedback-submission-status--in_progress {
  border-color: rgba(75, 163, 255, 0.6);
  background: rgba(75, 163, 255, 0.12);
}

.feedback-submission-status--completed {
  border-color: rgba(76, 217, 100, 0.55);
  background: rgba(76, 217, 100, 0.12);
}

.feedback-panel-footer {
  flex-shrink: 0;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.feedback-submit-btn {
  width: 100%;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Width-collapse like .inspector (feedback blade), not horizontal slide. */
.settings-panel {
  position: fixed;
  left: var(--cells-sidebar-rail-width, 64px);
  top: var(--topbar-h);
  height: calc(100% - var(--topbar-h));
  width: 0;
  min-width: 0;
  max-width: 320px;
  padding: 0;
  background: #161d26;
  border-right: 1px solid transparent;
  opacity: 0;
  transform: translateX(-10px);
  pointer-events: none;
  transition:
    top var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    height var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    width var(--cells-blade-transform-duration) var(--cells-blade-ease),
    padding var(--cells-blade-transform-duration) var(--cells-blade-ease),
    opacity var(--cells-blade-opacity-duration) var(--cells-blade-ease),
    transform var(--cells-blade-transform-duration) var(--cells-blade-ease),
    border-color var(--cells-blade-transform-duration) var(--cells-blade-ease),
    box-shadow var(--cells-blade-transform-duration) var(--cells-blade-ease);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  z-index: var(--z-panel);
  backdrop-filter: none;
  box-shadow: none;
}

.settings-panel.open {
  width: 320px;
  padding: 12px;
  border-right-color: var(--border);
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    inset 0 0 20px rgba(0, 0, 0, 0.2),
    8px 0 24px rgba(0, 0, 0, 0.28);
  transition:
    top var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    height var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    width var(--cells-blade-transform-duration) var(--cells-blade-ease),
    padding var(--cells-blade-transform-duration) var(--cells-blade-ease),
    opacity var(--cells-blade-opacity-duration) var(--cells-blade-ease),
    transform var(--cells-blade-transform-duration) var(--cells-blade-ease),
    border-color var(--cells-blade-transform-duration) var(--cells-blade-ease),
    box-shadow var(--cells-blade-transform-duration) var(--cells-blade-ease);
}

.settings-panel > .settings-section.settings-action-list {
  min-height: 0;
  overflow-y: auto;
}

.settings-todos-placement {
  display: grid;
  gap: 6px;
  margin: 10px 0 4px;
}

.settings-todos-placement-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

.settings-todos-placement-select {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #141922;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.library-panel {
  position: fixed;
  left: var(--cells-sidebar-rail-width, 64px);
  top: var(--topbar-h);
  height: calc(100% - var(--topbar-h));
  width: 0;
  min-width: 0;
  max-width: 428px;
  padding: 0;
  background: linear-gradient(180deg, #151c25, #131a22);
  border-right: 1px solid transparent;
  opacity: 0;
  transform: translateX(-10px);
  pointer-events: none;
  transition:
    top var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    height var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    width var(--cells-blade-transform-duration) var(--cells-blade-ease),
    padding var(--cells-blade-transform-duration) var(--cells-blade-ease),
    opacity var(--cells-blade-opacity-duration) var(--cells-blade-ease),
    transform var(--cells-blade-transform-duration) var(--cells-blade-ease),
    border-color var(--cells-blade-transform-duration) var(--cells-blade-ease),
    box-shadow var(--cells-blade-transform-duration) var(--cells-blade-ease);
  box-shadow: none;
  z-index: var(--z-panel);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  overflow: hidden;
}

.library-panel.open {
  width: 428px;
  padding: 18px 18px 16px;
  border-right-color: var(--border);
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    inset 0 0 20px rgba(0, 0, 0, 0.2),
    8px 0 24px rgba(0, 0, 0, 0.28);
  transition:
    top var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    height var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    width var(--cells-blade-transform-duration) var(--cells-blade-ease),
    padding var(--cells-blade-transform-duration) var(--cells-blade-ease),
    opacity var(--cells-blade-opacity-duration) var(--cells-blade-ease),
    transform var(--cells-blade-transform-duration) var(--cells-blade-ease),
    border-color var(--cells-blade-transform-duration) var(--cells-blade-ease),
    box-shadow var(--cells-blade-transform-duration) var(--cells-blade-ease);
}

@media (prefers-reduced-motion: reduce) {
  .inspector,
  .inspector.collapsed,
  .settings-panel,
  .settings-panel.open,
  .library-panel,
  .library-panel.open,
  .todos-panel,
  .todos-panel.open {
    transition:
      top 1ms linear,
      height 1ms linear,
      width 1ms linear,
      padding 1ms linear,
      transform 1ms linear,
      opacity 1ms linear,
      border-color 1ms linear,
      box-shadow 1ms linear;
  }

  .todos-panel--overlay .todos-dock {
    transform: translateX(var(--todos-overlay-doc-align-dx, 0px));
  }
}

/* —— To-Dos panel (right / left / overlay) —— */
.todos-panel {
  /* One line = one todo row; multi-line body items not supported. */
  --todos-line-h: 28px;
  --todos-pad-pad-left: 22px;
  --todos-text-nudge-y: 2px;

  position: fixed;
  z-index: var(--z-panel);
  top: var(--topbar-h);
  height: calc(100% - var(--topbar-h));
  width: 0;
  min-width: 0;
  max-width: 360px;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition:
    top var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    height var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    width var(--cells-blade-transform-duration) var(--cells-blade-ease),
    padding var(--cells-blade-transform-duration) var(--cells-blade-ease),
    opacity var(--cells-blade-opacity-duration) var(--cells-blade-ease),
    transform var(--cells-blade-transform-duration) var(--cells-blade-ease),
    border-color var(--cells-blade-transform-duration) var(--cells-blade-ease),
    box-shadow var(--cells-blade-transform-duration) var(--cells-blade-ease);
}

.todos-panel.open {
  pointer-events: auto;
  opacity: 1;
  align-items: stretch;
}

/* Chrome variants (Library / Feedback / overlay) — Library uses real .library-header; right matches .feedback-panel layout */
.todos-chrome {
  display: none;
  flex-shrink: 0;
}

.todos-panel.todos-panel--left .todos-chrome--library {
  display: block;
}

.todos-panel.todos-panel--right .todos-chrome--inspector {
  display: block;
  flex-shrink: 0;
}

.todos-panel .todos-chrome--library .library-header {
  margin-bottom: 0;
  padding-bottom: 6px;
}

.todos-panel .todos-chrome--library .library-header-main {
  min-width: 0;
}

.todos-panel.todos-panel--right .feedback-panel-header h2 {
  margin: 0;
  font-size: 16px;
}

/* Right blade: match #feedbackPanel.inspector (width, padding, border, scroll, blade motion) */
.todos-panel.todos-panel--right {
  right: 0;
  left: auto;
  transform: translateX(10px);
  background: var(--panel);
  border-left: 1px solid transparent;
  box-shadow: none;
}

.todos-panel.todos-panel--right.open {
  width: 300px;
  padding: 12px;
  transform: translateX(0);
  border-left-color: var(--border);
  overflow: hidden;
}

.todos-panel.todos-panel--right.todos-panel--feedback-open.open {
  right: 300px;
}

/* Left blade: match #libraryPanel.library-panel (grid, gap, gradient, padding, shadows) */
.todos-panel.todos-panel--left {
  left: var(--cells-sidebar-rail-width, 64px);
  right: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  align-content: start;
  overflow: hidden;
  max-width: 428px;
  transform: translateX(-10px);
  background: linear-gradient(180deg, #151c25, #131a22);
  border-right: 1px solid transparent;
  box-shadow: none;
}

.todos-panel.todos-panel--left.open {
  width: 428px;
  padding: 18px 18px 16px;
  transform: translateX(0);
  border-right-color: var(--border);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    inset 0 0 20px rgba(0, 0, 0, 0.2),
    8px 0 24px rgba(0, 0, 0, 0.28);
}

.todos-panel.todos-panel--left .todos-dock {
  display: contents;
}

/* Middle region: flex column so pad fills row 2 (matches right blade) */
.todos-panel.todos-panel--left .todos-main-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 8px;
}

/* Right / overlay: body fills under header like .feedback-panel children */
.todos-panel.todos-panel--right .todos-main-body,
.todos-panel.todos-panel--overlay .todos-main-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Overlay: full-viewport dimmer; legal pad card — below sidebar/topbar so rail stays usable. */
.todos-panel.todos-panel--overlay {
  --todos-overlay-doc-align-dx: 0px;
  z-index: calc(var(--z-sidebar) - 1);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: none;
  min-width: 0;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  transform: none;
  opacity: 0;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  overflow: hidden;
}

.todos-panel.todos-panel--overlay.open {
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  opacity: 1;
  pointer-events: auto;
  padding: 20px 16px;
  box-sizing: border-box;
  visibility: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.todos-scrim {
  display: none;
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  cursor: default;
  pointer-events: auto;
  background: rgba(8, 12, 18, 0.55);
  backdrop-filter: blur(2px);
}

.todos-panel.todos-panel--overlay .todos-scrim {
  display: block;
}

.todos-panel.todos-panel--right .todos-scrim,
.todos-panel.todos-panel--left .todos-scrim {
  display: none !important;
}

.todos-dock {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

/* Same flex rhythm as .feedback-panel (see #feedbackPanel) */
.todos-panel.todos-panel--right .todos-dock {
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
  gap: 10px;
}

.todos-panel.todos-panel--overlay .todos-dock {
  flex: 0 1 auto;
  /* Base card was 420×640 (max); +40% linear scale ≈ 588×896. */
  width: min(588px, calc(100vw - 32px));
  max-width: min(588px, calc(100vw - 32px));
  height: auto;
  max-height: min(calc(72vh * 1.4), 896px);
  min-height: 392px;
  padding: 14px 16px 18px;
  box-sizing: border-box;
  perspective: 1200px;
  --todos-line-h: 39px;
  --todos-text-nudge-y: 3px;
  --todos-pad-pad-left: 31px;
}

.todos-panel.todos-panel--overlay .todos-line-input {
  font-size: calc(1.35rem * 1.4);
}

.todos-panel.todos-panel--overlay .todos-pad-title-input {
  font-size: calc(1.5rem * 1.4);
}

@media (prefers-reduced-motion: no-preference) {
  .todos-panel.todos-panel--overlay.open .todos-dock {
    transform: translateX(var(--todos-overlay-doc-align-dx, 0px)) rotateX(1.2deg) rotateY(-1.2deg);
    transform-style: preserve-3d;
  }
}

.todos-pad-stage {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  flex: 1;
}

.todos-spiral {
  flex-shrink: 0;
  margin: 0 2px -10px;
  padding: 4px 8px 12px;
  z-index: 2;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}

.todos-spiral-svg {
  display: block;
  width: 100%;
  height: 18px;
}

/* Skeuomorphic legal pad — fills overlay card; left/right blades override to plain panels above. */
.todos-pad {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border-radius: 2px 3px 4px 2px;
  padding: 8px 10px 12px var(--todos-pad-pad-left);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.38) 0%, transparent 42%),
    linear-gradient(180deg, #fdf6d0 0%, #f3e6a8 38%, #ecd98f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 1px 0 0 rgba(255, 255, 255, 0.25),
    0 1px 0 rgba(180, 150, 70, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.35),
    2px 3px 0 rgba(0, 0, 0, 0.12);
}

.todos-pad::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.todos-pad::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 5px;
  height: 98%;
  background: linear-gradient(90deg, transparent, rgba(120, 90, 40, 0.22));
  pointer-events: none;
  border-radius: 0 0 3px 0;
}

/* Continuous ruled lines for title row + body (same rhythm as --todos-line-h) */
.todos-pad-rules {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--todos-line-h) - 1px),
    rgba(100, 140, 200, 0.35) calc(var(--todos-line-h) - 1px),
    rgba(100, 140, 200, 0.35) var(--todos-line-h)
  );
  background-position: 0 0;
}

.todos-pad-rules::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(220, 100, 90, 0.55);
  z-index: 0;
  pointer-events: none;
}

.todos-pad-title-row {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  min-height: var(--todos-line-h);
  box-sizing: border-box;
  overflow: visible;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding-left: 6px;
  padding-right: 6px;
  margin-bottom: 2px;
  border-bottom: 3px solid rgba(15, 23, 42, 0.42);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.todos-pad-title-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: #0f172a;
  font-family: Caveat, "Segoe Script", "Apple Chancery", cursive;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: var(--todos-line-h);
  height: var(--todos-line-h);
  padding: 0 6px;
  padding-top: var(--todos-text-nudge-y);
  margin: 0;
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
  text-align: center;
  user-select: text;
}

.todos-pad-title-input::placeholder {
  color: rgba(15, 23, 42, 0.35);
}

.todos-list {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.todos-row {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  height: var(--todos-line-h);
  box-sizing: border-box;
  overflow: hidden;
  padding-left: 6px;
  /* Row chrome: dblclick = strikethrough; inputs opt back into text selection. */
  user-select: none;
}

.todos-line-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: #1e293b;
  font-family: Caveat, "Segoe Script", "Apple Chancery", cursive;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: var(--todos-line-h);
  height: 100%;
  padding: 0 4px;
  padding-top: var(--todos-text-nudge-y);
  margin: 0;
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
  user-select: text;
}

.todos-line-input::placeholder {
  color: rgba(30, 41, 59, 0.35);
}

.todos-row--struck .todos-line-input {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: rgba(30, 41, 59, 0.45);
}

/* Left / right blades: library + feedback look only — no spiral or legal-pad chrome. */
.todos-panel.todos-panel--left .todos-spiral,
.todos-panel.todos-panel--right .todos-spiral {
  display: none;
}

.todos-panel.todos-panel--left .todos-pad-stage,
.todos-panel.todos-panel--right .todos-pad-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}

.todos-panel.todos-panel--left .todos-pad,
.todos-panel.todos-panel--right .todos-pad {
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.todos-panel.todos-panel--left .todos-pad::before,
.todos-panel.todos-panel--left .todos-pad::after,
.todos-panel.todos-panel--right .todos-pad::before,
.todos-panel.todos-panel--right .todos-pad::after {
  opacity: 0;
}

.todos-panel.todos-panel--left .todos-pad-rules,
.todos-panel.todos-panel--right .todos-pad-rules {
  background-image: none;
}

.todos-panel.todos-panel--left .todos-pad-rules::before,
.todos-panel.todos-panel--right .todos-pad-rules::before {
  display: none;
}

.todos-panel.todos-panel--left .todos-pad-title-row,
.todos-panel.todos-panel--overlay .todos-pad-title-row {
  justify-content: center;
  align-items: center;
  border: none;
  margin: 0 0 10px;
  padding: 6px 4px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.todos-panel.todos-panel--left .todos-pad-title-input,
.todos-panel.todos-panel--overlay .todos-pad-title-input {
  text-align: center;
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    font-family 0.15s ease,
    font-size 0.15s ease;
}

.todos-panel.todos-panel--left .todos-pad-title-input:read-only:not(:focus),
.todos-panel.todos-panel--overlay .todos-pad-title-input:read-only:not(:focus) {
  font-family: "Inknut Antiqua", Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  text-shadow: none;
  padding: 6px 8px;
  min-height: auto;
  height: auto;
}

.todos-panel.todos-panel--overlay .todos-pad-title-input:read-only:not(:focus) {
  color: #0f172a;
}

.todos-panel.todos-panel--left .todos-pad-title-input:focus,
.todos-panel.todos-panel--overlay .todos-pad-title-input:focus {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}

.todos-panel.todos-panel--overlay .todos-pad-title-input:focus {
  color: var(--text);
  background: rgba(255, 255, 255, 0.92);
}

.todos-panel.todos-panel--left .todos-pad-title-input::placeholder,
.todos-panel.todos-panel--overlay .todos-pad-title-input::placeholder {
  color: var(--muted);
}

.todos-panel.todos-panel--overlay .todos-pad-title-input:focus::placeholder {
  color: rgba(15, 23, 42, 0.45);
}

/* Right blade: feedback-style title row + accent tag on the last word. */
.todos-panel.todos-panel--right .todos-pad-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: 0 0 10px;
  padding: 4px 2px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.todos-panel.todos-panel--right .todos-pad-title-input {
  flex: 1 1 220px;
  min-width: 0;
  text-align: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  padding: 8px 10px;
  min-height: 38px;
  line-height: 1.3;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(12, 16, 22, 0.45);
}

.todos-panel.todos-panel--right .todos-pad-title-input::placeholder {
  color: var(--muted);
}

.todos-pad-title-right-static {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  min-height: 38px;
  text-align: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(12, 16, 22, 0.35);
  cursor: text;
  user-select: none;
}

.todos-panel.todos-panel--right .todos-pad-title-right-static:not(.hidden) {
  display: flex;
}

.todos-pad-title-accent-tag {
  display: inline-flex;
  align-items: center;
  max-width: min(200px, 100%);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.65);
  background: rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.14);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lists stack at full intrinsic height; mount scrolls when content exceeds the blade (wheel / trackpad). */
.todos-lists-area {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.todos-lists-mount {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 8px 44px 4px;
  box-sizing: border-box;
}

.todos-lists-mount > .todos-list-block {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.todos-lists-mount .todos-list-block-body {
  flex: 0 0 auto;
  overflow: visible;
}

.todos-add-list-btn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 4;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(12, 16, 22, 0.85);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.todos-add-list-btn:hover {
  background: rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.18);
  border-color: rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.45);
  color: var(--text);
}

.todos-add-list-btn-glyph {
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  translate: 0 -1px;
}

.todos-panel.todos-panel--overlay .todos-add-list-btn {
  background: rgba(255, 252, 245, 0.95);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.todos-list-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.todos-panel.todos-panel--left .todos-list-block--card,
.todos-panel.todos-panel--right .todos-list-block--card {
  gap: 0;
  padding: 10px 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(20, 25, 34, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

.todos-panel.todos-panel--left .todos-list-block--card {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.04);
}

.todos-list-block--card .todos-list-block-head {
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.todos-list-block--card .todos-list-block-body {
  margin: 0 -2px;
  padding: 0 2px;
}

.todos-list-block--dragging {
  opacity: 0.55;
}

.todos-list-block--drop-target {
  outline: 2px dashed rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.65);
  outline-offset: 4px;
  border-radius: 8px;
}

.todos-list-block-head {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-height: 38px;
}

.todos-list-drag-handle {
  flex-shrink: 0;
  align-self: center;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: grab;
}

.todos-list-drag-handle:hover {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.04);
}

.todos-list-drag-handle:active {
  cursor: grabbing;
}

.todos-panel.todos-panel--overlay .todos-list-drag-handle {
  color: rgba(15, 23, 42, 0.45);
}

.todos-line-drag-handle {
  flex-shrink: 0;
  align-self: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0 0 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: grab;
}

.todos-line-drag-handle:hover {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.04);
}

.todos-line-drag-handle:active {
  cursor: grabbing;
}

.todos-row--line-dragging {
  opacity: 0.55;
}

.todos-row--line-drop-target {
  outline: 1px dashed rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.55);
  outline-offset: -1px;
  background: rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.08);
}

.todos-panel.todos-panel--overlay .todos-line-drag-handle {
  color: rgba(15, 23, 42, 0.45);
}

.todos-list-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.todos-list-title-wrap--editing .todos-list-title-input {
  width: 100%;
}

.todos-list-title-right-static {
  display: none;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 4px 2px 8px;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  border: none;
  background: transparent;
  cursor: text;
  user-select: none;
  box-sizing: border-box;
}

.todos-list-title-right-static:not(.hidden) {
  display: flex;
}

.todos-list-title-lead {
  flex-shrink: 0;
  color: rgb(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b));
  font-weight: 600;
  white-space: pre;
}

.todos-list-title-accent-pill {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.55);
  background: rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.16);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;
}

.todos-list-block-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.todos-list-context-menu {
  position: fixed;
  z-index: calc(var(--z-context-menu) + 4);
  min-width: 200px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(18, 22, 30, 0.98);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.todos-list-context-menu-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.todos-list-context-menu-item:hover {
  background: rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.14);
}

.todos-list-context-menu-item--hint {
  color: var(--muted);
  font-size: 12px;
  cursor: default;
}

.todos-list-context-menu-item--hint:hover {
  background: rgba(255, 255, 255, 0.04);
}

.todos-panel.todos-panel--left .todos-lists-mount {
  gap: 12px;
}

.todos-panel.todos-panel--left .todos-list-title-input {
  text-align: left;
  width: 100%;
}

.todos-panel.todos-panel--right .todos-list-block-head {
  align-items: center;
}

.todos-panel.todos-panel--overlay .todos-list-block-head {
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.todos-panel.todos-panel--right .todos-list-title-wrap {
  flex-direction: column;
  align-items: stretch;
}

.todos-panel.todos-panel--right .todos-list-title-input {
  width: 100%;
  text-align: center;
}

.todos-panel.todos-panel--overlay .todos-lists-mount {
  gap: 12px;
}

.todos-panel.todos-panel--right .todos-lists-mount {
  gap: 12px;
}

.todos-panel.todos-panel--left .todos-row,
.todos-panel.todos-panel--right .todos-row {
  width: 100%;
  box-sizing: border-box;
}

.todos-panel.todos-panel--left .todos-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: calc(var(--todos-line-h) + 2px);
  padding: 6px 4px 6px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.todos-panel.todos-panel--left .todos-row-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--selection-accent);
}

.todos-panel.todos-panel--right .todos-row-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0 2px 0 8px;
  align-self: center;
  cursor: pointer;
  accent-color: var(--selection-accent);
  border-radius: 50%;
}

.todos-panel.todos-panel--right .todos-row-check--radial {
  width: 20px;
  height: 20px;
  border-radius: 999px;
}

.todos-panel.todos-panel--right .todos-row {
  display: flex;
  align-items: stretch;
  min-height: auto;
  padding: 6px 2px 6px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.todos-list-block--card .todos-row:last-child {
  border-bottom: none;
}

.todos-panel.todos-panel--left .todos-line-input,
.todos-panel.todos-panel--right .todos-line-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  padding: 6px 4px;
  line-height: 1.35;
  border: none;
  background: transparent;
}

.todos-panel.todos-panel--right .todos-line-input {
  padding: 8px 10px;
}

.todos-panel.todos-panel--left .todos-row--struck .todos-line-input,
.todos-panel.todos-panel--right .todos-row--struck .todos-line-input {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}

.todos-panel.todos-panel--left .todos-row:last-child,
.todos-panel.todos-panel--right .todos-row:last-child {
  border-bottom: none;
}

/* Overlay: pad fills the centered card. */
.todos-panel.todos-panel--overlay .todos-main-body {
  flex: 1 1 auto;
  min-height: 0;
}

.todos-panel.todos-panel--overlay .todos-pad-stage {
  flex: 1 1 auto;
  min-height: 0;
}

.todos-panel.todos-panel--overlay .todos-pad {
  flex: 1 1 auto;
  min-height: 0;
}

.library-header {
  margin-bottom: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.library-header-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.library-header-trailing {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.library-close-btn {
  flex-shrink: 0;
}

.library-heading {
  margin: 0;
  min-width: 0;
  flex: 0 1 auto;
  font-size: 19px;
  font-weight: 600;
}

.library-header h2 {
  margin: 0;
  font-size: 19px;
}

.library-user-tag {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 190px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.library-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.library-list-wrap {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: clip;
  padding: 4px 8px 0 0;
  scrollbar-width: none;
  contain: inline-size;
}

.library-list-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.library-sort-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0 4px 10px;
  flex-shrink: 0;
  width: 48px;
  box-sizing: border-box;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1;
  align-self: stretch;
  background: linear-gradient(180deg, #151c25, #131a22);
}

.library-add-folder-glyph-btn {
  margin-bottom: 2px;
}

.library-sort-btn {
  width: 40px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  box-sizing: border-box;
}

.library-sort-btn:hover {
  color: var(--text);
}

.library-sort-icon {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.library-sort-letter {
  fill: currentColor;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.92;
}

.library-sort-btn.active {
  border-color: rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.55);
  color: #eaf2fb;
  background: rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.16);
}

.library-footer {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.library-file-row-layout {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.library-file-row-layout .filetree-file-card {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.library-panel .filetree-file-meta {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(220px, 58%);
  overflow: hidden;
}

.library-panel .filetree-owner-badge {
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filetree-item {
  list-style: none;
}

.filetree-folder-branch {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filetree-file-card--library-folder {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
}

.filetree-library-folder-titlecell {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0;
}

.filetree-library-folder-titlecell .filetree-file-name {
  min-width: 0;
}

.filetree-file-card--library-folder:hover {
  color: var(--text);
}

.filetree-file-card--library-folder.library-drop-hover {
  border: 1px solid rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.55);
  background: rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.1);
}

#libraryTree.library-drop-hover {
  outline: 1px dashed rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.45);
  outline-offset: 4px;
  border-radius: 8px;
}

.filetree-library-folder-lead {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin-right: 8px;
  color: var(--muted);
  vertical-align: middle;
}

.filetree-file-card--library-folder .filetree-library-folder-chevron-svg {
  display: block;
}

.filetree-library-folder-icon {
  display: block;
  flex-shrink: 0;
  opacity: 0.92;
}

.filetree-folder-members-shell {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease, opacity 0.18s ease;
  opacity: 0.9;
}

.filetree-folder-branch.is-folder-open > .filetree-folder-members-shell {
  grid-template-rows: 1fr;
  opacity: 1;
}

.filetree-folder-members-inner {
  min-height: 0;
  overflow: hidden;
}

.filetree.filetree-folder-members {
  margin: 0;
  /* Align nested canvas titles with the folder icon's left edge in the parent row. */
  padding: 4px 0 4px 17px;
}

.filetree-file-card--nested {
  padding-left: 4px;
}

.library-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 8px 2px;
}

.filetree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  overflow: visible;
  width: 100%;
}

.filetree-files {
  list-style: none;
  margin: 2px 0 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 2px;
}

.filetree-file-row {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 4px 2px;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
}

.filetree-file-row:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.filetree-file-row.active {
  color: #eaf2fb;
  background: rgba(var(--selection-accent-r), var(--selection-accent-g), var(--selection-accent-b), 0.18);
}

.filetree-file-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.filetree-file-name {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filetree-file-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.filetree-file-date {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.filetree-file-time {
  font-size: 10px;
  opacity: 0.8;
}

.filetree-file-date-value {
  color: var(--text);
  opacity: 0.9;
}

.filetree-owner-badge {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text);
  font-size: 11px;
  line-height: 1.2;
}

.caret {
  width: 10px;
  color: var(--muted);
}

.folder-name {
  color: var(--text);
  font-size: 13px;
}

.tiny-btn {
  border: 1px solid var(--border);
  background: #202a36;
  color: var(--text);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 11px;
  cursor: pointer;
}

.tiny-btn:hover {
  border-color: var(--accent);
}

.canvas-container.text-card-editing .cells-excalidraw-overlay.open {
  pointer-events: auto;
}

.canvas-container.text-card-editing .cells-excalidraw-overlay.open .excalidraw-root {
  pointer-events: none;
}

.cells-excalidraw-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-excalidraw-chrome);
  opacity: 1;
  pointer-events: none;
  transition: opacity 160ms ease;
}

/* Wrapper stays non-targetable; .excalidraw-root receives hits so sketch-off can still manipulate (INTERACTION_CONTRACT). */
.cells-excalidraw-overlay.open {
  opacity: 1;
  pointer-events: none;
}

.cells-excalidraw-overlay.open .excalidraw-root {
  pointer-events: auto;
}

/* Pass clicks through the raised overlay shell to canvas nodes; keep hits on sketch surface + chrome. */
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root {
  pointer-events: none;
}

.cells-excalidraw-overlay.open.palette-visible .excalidraw-root canvas.excalidraw__canvas,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .App-menu_top,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .App-menu__left,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .App-top-bar,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .App-bottom-bar,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .HintViewer,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .excalidraw-wysiwyg,
/* Radix + Excalidraw property editing surfaces (stroke/fill/color pickers). */
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .popover,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .color-picker-popover-container,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .color-picker-content,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .color-picker-swatch,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .color-input-container,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .range-wrapper,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .range-input,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .dropdown-menu,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .dropdown-menu-container,
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root [data-radix-popper-content-wrapper],
.cells-excalidraw-overlay.open.palette-visible .excalidraw-root [data-radix-portal] {
  pointer-events: auto;
}

.canvas-container.excalidraw-active .node-layer {
  z-index: calc(var(--z-excalidraw-chrome) + 1);
}

.canvas-container.cards-priority .node-layer {
  z-index: calc(var(--z-excalidraw-chrome) + 1);
}

/* Sketch on: Excalidraw surface below node-layer. .node-layer is pointer-events:none with .node auto, so empty
   canvas passes through to Excalidraw while cards/videos receive drags (not stolen by the overlay). */
.canvas-container.excalidraw-active:not(.cards-priority) .cells-excalidraw-overlay {
  z-index: calc(var(--z-excalidraw-chrome) + 2);
}

.canvas-container.excalidraw-active:not(.cards-priority) .node-layer {
  z-index: calc(var(--z-excalidraw-chrome) + 3);
}

.canvas-container.excalidraw-active:not(.cards-priority) .selection-marquee {
  z-index: calc(var(--z-excalidraw-chrome) + 4);
}

/* Selection palette (.App-menu__left) must paint above .node-layer; raise overlay only while palette is visible.
   Skip when sketch is off (.cards-priority) so cards stay above the Excalidraw canvas for drag/connect. */
.canvas-container.excalidraw-active:not(.cards-priority) .cells-excalidraw-overlay.palette-visible {
  z-index: calc(var(--z-excalidraw-chrome) + 6);
}

/* Remote collab cursors must stay above .node-layer when cards are raised into the Excalidraw stack. */
.canvas-container.excalidraw-active .cursor-layer,
.canvas-container.cards-priority .cursor-layer {
  z-index: calc(var(--z-excalidraw-chrome) + 2);
}

.canvas-container.excalidraw-active:not(.cards-priority) .cursor-layer {
  z-index: calc(var(--z-excalidraw-chrome) + 5);
}

.excalidraw-grid-overlay {
  display: none;
}

.excalidraw-root {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
}

.cells-excalidraw-overlay .excalidraw,
.cells-excalidraw-overlay .excalidraw.theme--dark {
  --color-selection: var(--selection-accent);
}

.cells-excalidraw-overlay,
.cells-excalidraw-overlay .excalidraw-root,
.cells-excalidraw-overlay .excalidraw-root > div,
.cells-excalidraw-overlay .excalidraw {
  width: 100%;
  height: 100%;
}

.cells-excalidraw-overlay .excalidraw,
.cells-excalidraw-overlay .App {
  overflow: hidden !important;
}

/* Excalidraw shape library: @excalidraw/excalidraw rebuilds UIOptions.tools to { image } only, so library cannot be disabled via props; hide in UI. */
.cells-excalidraw-overlay .default-sidebar-trigger,
.cells-excalidraw-overlay .default-sidebar .sidebar-triggers > button.sidebar-tab-trigger:nth-of-type(2),
.cells-excalidraw-overlay .excalidraw-root [data-testid="library"] {
  display: none !important;
}

/* No transform here: transform creates a containing block so position:fixed .App-menu__left
   (viewport dock) incorrectly uses this ~60px-tall bar — see debug menuLeftRect.y ≈ -544. */
.cells-excalidraw-overlay .App-menu_top {
  position: fixed;
  left: var(--cells-canvas-frame-client-left, var(--cells-sidebar-chrome-inset, 88px));
  width: var(--cells-canvas-frame-client-width, calc(100vw - var(--cells-sidebar-chrome-inset, 88px)));
  right: auto;
  top: calc(var(--topbar-h) + 8px);
  transform: none;
  box-sizing: border-box;
  z-index: var(--z-excalidraw-chrome);
  opacity: 0;
  pointer-events: none;
  transition:
    top var(--cells-chrome-collapse-duration) var(--cells-chrome-collapse-ease),
    left 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cells-excalidraw-overlay:not(.sketch-tools-visible) .App-menu_top {
  opacity: 0;
  pointer-events: none;
}

.cells-excalidraw-overlay.open.sketch-tools-visible .App-menu_top {
  opacity: 1;
  pointer-events: auto;
}

.cells-excalidraw-overlay .App-menu__left {
  margin-left: 0 !important;
  position: fixed;
  top: auto;
  right: auto;
  left: var(--cells-excalidraw-palette-anchor-x, calc(var(--cells-sidebar-chrome-inset, 88px) + 5.5rem));
  transform: translateX(-50%);
  bottom: calc(14px + 3.25rem + 12px);
  /* Fit full stroke/fill/layers stack without forced scroll chrome; scroll only if viewport is short. */
  max-height: calc(100vh - var(--topbar-h) - 14px - 3.25rem - 24px);
  width: max-content;
  max-width: min(320px, calc(100vw - var(--cells-sidebar-chrome-inset, 88px) - 24px));
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease;
}

.cells-excalidraw-overlay .App-menu__left .Island {
  width: max-content;
  min-width: 202px;
  max-width: 100%;
  box-sizing: border-box;
}

.cells-excalidraw-overlay .App-menu__left .control-label,
.cells-excalidraw-overlay .App-menu__left .buttonList,
.cells-excalidraw-overlay .App-menu__left .range-wrapper {
  max-width: 100%;
  box-sizing: border-box;
}

.cells-excalidraw-overlay .App-menu__left .range-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cells-excalidraw-overlay .App-menu__left .range-wrapper input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.cells-excalidraw-overlay.open.palette-visible .App-menu__left {
  opacity: 1;
  pointer-events: auto;
}

.cells-excalidraw-overlay.drag-connecting .App-menu__left {
  opacity: 0;
  pointer-events: none;
}

.cells-excalidraw-overlay.open.drag-connecting .App-menu__left {
  opacity: 0;
  pointer-events: none;
}

body.excalidraw-palette-locked .cells-excalidraw-overlay .App-menu__left {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Excalidraw mobile layout: .App-top-bar / .App-bottom-bar gate with sketch tools (like .App-menu_top).
   .HintViewer is shown only while the embed is .open so “scroll back to content” works with Sketch off. */
.cells-excalidraw-overlay .excalidraw-root .HintViewer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease;
}

.cells-excalidraw-overlay .excalidraw-root .App-top-bar,
.cells-excalidraw-overlay .excalidraw-root .App-bottom-bar {
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease;
}

.cells-excalidraw-overlay.open .excalidraw-root .HintViewer {
  opacity: 1;
  pointer-events: auto;
}

.cells-excalidraw-overlay.open.sketch-tools-visible .excalidraw-root .App-top-bar,
.cells-excalidraw-overlay.open.sketch-tools-visible .excalidraw-root .App-bottom-bar {
  opacity: 1;
  pointer-events: auto;
}

.cells-excalidraw-overlay .excalidraw-root .App-mobile-menu {
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease;
}

.cells-excalidraw-overlay.open.palette-visible .excalidraw-root .App-mobile-menu {
  opacity: 1;
  pointer-events: auto;
}

.cells-excalidraw-overlay.drag-connecting .excalidraw-root .App-mobile-menu,
.cells-excalidraw-overlay.open.drag-connecting .excalidraw-root .App-mobile-menu {
  opacity: 0;
  pointer-events: none;
}

body.excalidraw-palette-locked .cells-excalidraw-overlay .excalidraw-root .App-mobile-menu {
  opacity: 0 !important;
  pointer-events: none !important;
}

.cells-excalidraw-overlay .App-menu_top .Island {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Footer flex shell can span the viewport; keep it pass-through and re-enable only real controls.
   Zoom/undo/redo (footer-left) stay as the global control surface in both modes.
   Help / main-menu / welcome (footer-right + decor) are Sketch-only so Sketch-off reads as Cells. */
.cells-excalidraw-overlay .layer-ui__wrapper__footer {
  position: fixed;
  left: var(--cells-sidebar-chrome-inset, 88px);
  bottom: 14px;
  z-index: var(--z-excalidraw-chrome);
  opacity: 1;
  pointer-events: none;
  transition: left 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cells-excalidraw-overlay .layer-ui__wrapper__footer .Island,
.cells-excalidraw-overlay .layer-ui__wrapper__footer button,
.cells-excalidraw-overlay .layer-ui__wrapper__footer a,
.cells-excalidraw-overlay .layer-ui__wrapper__footer [role="button"],
.cells-excalidraw-overlay .layer-ui__wrapper__footer .dropdown-menu-button {
  pointer-events: auto;
}

.cells-excalidraw-overlay:not(.sketch-tools-visible) .layer-ui__wrapper__footer-right,
.cells-excalidraw-overlay:not(.sketch-tools-visible) .main-menu-trigger,
.cells-excalidraw-overlay:not(.sketch-tools-visible) .welcome-screen-center,
.cells-excalidraw-overlay:not(.sketch-tools-visible) .welcome-screen-decor,
.cells-excalidraw-overlay:not(.sketch-tools-visible) .welcome-screen-decor-hint {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Sketch off: never hit-test Excalidraw’s text editor surface (embed also clears editing state). */
.cells-excalidraw-overlay:not(.sketch-tools-visible) .excalidraw-wysiwyg {
  pointer-events: none !important;
}

/* Sketch off / tutorial: never block Cells with Excalidraw export or other modals. */
html[data-cells-tutorial="1"] #excalidrawRoot .Modal:has(.ImageExportModal),
.cells-excalidraw-overlay:not(.sketch-tools-visible) #excalidrawRoot .Modal:has(.ImageExportModal) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.settings-header h2 {
  margin: 0;
  font-size: 16px;
}

.settings-section h3 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--muted);
}

.settings-section {
  display: grid;
  gap: 10px;
}

.settings-action-list {
  align-content: start;
}

.settings-section label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.settings-section input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #141922;
  color: var(--text);
  padding: 8px;
  font: inherit;
}

.settings-section select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #141922;
  color: var(--text);
  padding: 8px;
  font: inherit;
}

.settings-row {
  display: grid;
  gap: 10px;
}

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

.settings-action-button {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  text-align: left;
}

.settings-disclosure-button {
  gap: 12px;
}

.settings-disclosure-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 140ms ease;
  opacity: 0.8;
  flex: 0 0 auto;
}

.settings-disclosure-button[aria-expanded="true"] .settings-disclosure-chevron {
  transform: rotate(225deg);
}

.settings-signout-wrap {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: grid;
  gap: 8px;
}

.settings-signout-button {
  width: 100%;
  font-weight: 600;
}

.settings-signout-note {
  margin: 0;
  line-height: 1.35;
}

.settings-disclosure-panel {
  display: grid;
  gap: 10px;
  padding: 4px 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.settings-profile-color {
  display: grid;
  gap: 8px;
}

.settings-toggle-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px !important;
}

.settings-toggle-row input[type="checkbox"],
.settings-toggle-row input[type="radio"] {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}

.settings-storage-mode-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 8px;
}

.settings-storage-mode-legend {
  margin: 0 0 4px;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
}

.settings-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.zoom-sensitivity-wrap {
  gap: 8px;
}

.zoom-sensitivity-control {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.zoom-glyph {
  font-size: 16px;
  line-height: 1;
  opacity: 0.9;
}

#pinchSensitivity {
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
}

.hidden {
  display: none !important;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 12, 0.58);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  z-index: var(--z-modal);
}

.theme-editor-overlay {
  backdrop-filter: none;
}

.theme-onboarding-overlay {
  backdrop-filter: blur(2px);
}

.theme-onboarding-card {
  width: min(520px, calc(100vw - 32px));
  max-height: min(90vh, 720px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.theme-onboarding-lede {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.88);
}

.theme-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.theme-onboarding-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(10, 14, 20, 0.55);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.theme-onboarding-tile:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.theme-onboarding-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-onboarding-tile--active {
  border-color: rgba(91, 163, 255, 0.65);
  box-shadow: 0 0 0 1px rgba(91, 163, 255, 0.35);
}

.theme-onboarding-tile-preview {
  display: block;
  width: 100%;
  aspect-ratio: 2.4 / 1;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.theme-onboarding-tile--customize .theme-onboarding-tile-preview--customize {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(72, 92, 118, 0.28) 0%,
    rgba(25, 34, 48, 0.72) 55%,
    rgba(18, 26, 36, 0.85) 100%
  );
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.22);
}

.theme-onboarding-tile--customize .theme-onboarding-tile-preview--customize::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 6px,
    rgba(255, 255, 255, 0.05) 6px,
    rgba(255, 255, 255, 0.05) 7px
  );
  pointer-events: none;
}

.theme-onboarding-tile-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(241, 245, 249, 0.95);
  line-height: 1.2;
}

.theme-onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.theme-onboarding-back-btn {
  margin-right: auto;
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

.theme-onboarding-back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

.theme-onboarding-confirm-btn {
  background: rgba(91, 163, 255, 0.22);
  border-color: rgba(91, 163, 255, 0.55);
}

.theme-onboarding-confirm-btn:hover {
  background: rgba(91, 163, 255, 0.32);
  border-color: rgba(91, 163, 255, 0.75);
}

.modal-card {
  width: min(520px, calc(100vw - 40px));
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #1b2430, #171f29);
  padding: 16px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
}

.theme-editor-card {
  width: min(460px, calc(100vw - 40px));
  display: grid;
  gap: 12px;
}

.theme-picker-gradient-wrap {
  width: 100%;
  display: grid;
  place-items: center;
}

.theme-picker-gradient {
  width: 360px;
  height: 360px;
  border-radius: 999px;
  position: relative;
  background:
    radial-gradient(circle at center, #ffffff 0%, rgba(255, 255, 255, 0) 45%),
    conic-gradient(
      #ff5f56 0deg,
      #ffbd2e 60deg,
      #4cd964 120deg,
      #00c7be 180deg,
      #5ac8fa 240deg,
      #af52de 300deg,
      #ff5f56 360deg
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 12px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  cursor: crosshair;
}

.theme-picker-dot {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  cursor: grab;
}

.theme-picker-dot.primary {
  width: 30px;
  height: 30px;
  z-index: 2;
}

.theme-picker-dot.dragging {
  cursor: grabbing;
}

.theme-picker-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

.theme-preset-save-row {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.theme-preset-save-row .button {
  flex: 1 1 140px;
  min-width: 0;
}

.theme-picker-preset-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(40vh, 280px);
  overflow-y: auto;
  padding-right: 2px;
}

.theme-picker-preset-strip--empty {
  max-height: none;
  overflow: visible;
  padding: 2px 0 4px;
}

.theme-picker-preset-empty-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.theme-picker-preset-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(20, 25, 34, 0.75);
}

.theme-picker-preset-tile.active {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 2px rgba(90, 200, 250, 0.35);
}

.theme-picker-preset-preview {
  flex-shrink: 0;
  width: min(120px, 28vw);
  height: 48px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.25);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.theme-picker-preset-preview:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.theme-picker-preset-preview:focus {
  outline: none;
}

.theme-picker-preset-preview:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-picker-preset-label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-picker-preset-remove {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.theme-picker-preset-remove:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.theme-editor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.modal-card h3:not(.identity-title) {
  margin: 0 0 8px;
  font-size: 18px;
}

.modal-card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
}

.nested-title-modal-card {
  width: min(440px, calc(100vw - 40px));
  display: grid;
  gap: 10px;
}

.library-delete-folder-card {
  border-color: rgba(201, 79, 79, 0.78);
  box-shadow:
    0 0 0 1px rgba(201, 79, 79, 0.3),
    0 16px 44px rgba(0, 0, 0, 0.4);
}

.library-delete-folder-card .button.danger {
  border-color: rgba(132, 48, 48, 0.72);
  background: rgba(104, 35, 35, 0.86);
  color: #f7dddd;
}

.library-delete-folder-card .button.danger:hover {
  border-color: rgba(176, 70, 70, 0.82);
  background: rgba(128, 42, 42, 0.92);
}

.nested-title-modal-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.nested-title-modal-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #141922;
  color: var(--text);
  padding: 8px;
  font: inherit;
}

.nested-title-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.shared-owner-picker-card {
  width: min(480px, calc(100vw - 40px));
  display: grid;
  gap: 12px;
}

.shared-owner-picker-list {
  display: grid;
  gap: 8px;
  max-height: min(40vh, 320px);
  overflow: auto;
  padding-right: 4px;
}

.shared-owner-picker-list[data-invalid="true"] {
  padding: 8px;
  border: 1px solid rgba(214, 92, 92, 0.7);
  border-radius: 10px;
  background: rgba(84, 22, 28, 0.22);
}

.shared-owner-picker-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(20, 25, 34, 0.9);
  cursor: pointer;
}

.shared-owner-picker-option:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.shared-owner-picker-option input {
  margin: 0;
}

.shared-owner-picker-option-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.shared-owner-picker-option-name {
  font-size: 13px;
  color: var(--text);
}

.shared-owner-picker-option-meta {
  font-size: 11px;
  color: var(--muted);
}

.shared-owner-picker-help {
  margin-top: -4px;
}

.identity-card {
  width: min(420px, calc(100vw - 40px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.identity-title {
  margin: 0 0 14px;
  text-align: center;
  font-family: "Inknut Antiqua", Georgia, serif;
  font-weight: 700;
  /* Join modal “Cells”; must beat .modal-card h3 (see :not(.identity-title)). */
  font-size: clamp(26px, 7vmin, var(--cells-identity-title-size));
  line-height: 1;
  color: #e4eaf3;
}

.identity-form {
  display: grid;
  gap: 10px;
}

#identityJoinBtn {
  margin-top: 12px;
}

#identityJoinSharedBtn {
  margin-top: 0;
}

#identityJoinBtn:disabled,
#identityJoinSharedBtn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--muted);
}

#identityJoinBtn:disabled:hover,
#identityJoinSharedBtn:disabled:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

/* No extra dimming: identity overlay already provides the backdrop.
   Use #identitySharedRoomOverlay so layout/stacking applies even if only the HTML id
   is present (avoids invisible layer under fixed #identityOverlay when class rules miss cache). */
#identitySharedRoomOverlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 1);
  display: grid;
  place-items: center;
  padding: 20px;
  box-sizing: border-box;
  background: transparent;
  pointer-events: auto;
}

.identity-shared-room-card {
  width: min(520px, calc(100vw - 32px));
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border-radius: 16px;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 24px 64px rgba(0, 0, 0, 0.45);
}

.identity-shared-room-top {
  margin-bottom: 6px;
}

.identity-shared-room-back {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  margin: -4px 0 0 -4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color 140ms ease;
}

.identity-shared-room-back:hover {
  color: var(--accent);
}

.identity-shared-room-back:focus-visible {
  outline: 2px solid rgba(75, 163, 255, 0.55);
  outline-offset: 2px;
}

.identity-shared-room-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: #f1f4f8;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.identity-shared-room-lede {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  max-width: 36em;
  align-self: center;
}

.identity-shared-room-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.identity-shared-room-hero-field {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.identity-shared-room-hero-field .identity-shared-room-hero-input {
  flex: 1;
  min-width: 0;
}

.identity-shared-room-refresh {
  flex-shrink: 0;
  width: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: linear-gradient(180deg, #1a222e, #141a22);
  color: rgba(233, 238, 245, 0.88);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.identity-shared-room-refresh:hover:not(:disabled) {
  border-color: rgba(75, 163, 255, 0.45);
  color: #9ccbf5;
}

.identity-shared-room-refresh:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.identity-shared-room-refresh:focus-visible {
  outline: 2px solid rgba(75, 163, 255, 0.55);
  outline-offset: 2px;
}

.identity-shared-room-refresh-icon {
  width: 22px;
  height: 22px;
}

.identity-shared-room-refresh-icon--spin {
  animation: identity-shared-room-refresh-spin 0.65s linear infinite;
}

@keyframes identity-shared-room-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes identity-room-hero-ltr-sweep {
  0% {
    background-position:
      0 0,
      -65% 0;
  }

  100% {
    background-position:
      0 0,
      165% 0;
  }
}

.identity-shared-room-hero-input--shuffling {
  color: rgba(233, 238, 245, 0.62);
  animation:
    identity-shared-room-shuffle-pulse 0.42s ease-in-out infinite,
    identity-room-hero-ltr-sweep 0.58s linear infinite;
  transform-origin: center center;
}

@keyframes identity-shared-room-shuffle-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(0.9);
  }

  50% {
    transform: scale(1.028);
    filter: brightness(1.08);
  }
}

.identity-shared-room-hero-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(233, 238, 245, 0.55);
  text-align: center;
}

.identity-shared-room-hero-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background-color: #121820;
  background-image:
    linear-gradient(180deg, #0f141c 0%, #121820 100%),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(90, 160, 255, 0) 32%,
      rgba(255, 255, 255, 0.22) 50%,
      rgba(90, 160, 255, 0) 68%,
      transparent 100%
    );
  background-size:
    100% 100%,
    52% 100%;
  background-position:
    0 0,
    -65% 0;
  background-repeat: no-repeat;
  color: #f1f4f8;
  padding: 16px 18px;
  font-size: clamp(12px, 5.2vw, 22px);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
  line-height: 1.25;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  animation: identity-room-hero-ltr-sweep 2.85s ease-in-out infinite;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    font-size 0.14s ease;
}

.identity-shared-room-hero-input::placeholder {
  color: rgba(233, 238, 245, 0.28);
  font-weight: 500;
}

.identity-shared-room-hero-input:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.identity-shared-room-hero-input:focus {
  outline: none;
  border-color: rgba(75, 163, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(75, 163, 255, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .identity-shared-room-hero-input {
    animation: none;
    background-image: linear-gradient(180deg, #0f141c 0%, #121820 100%);
  }

  .identity-shared-room-hero-input--shuffling {
    animation: none;
  }
}

.identity-shared-room-microcopy {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(233, 238, 245, 0.42);
  text-align: center;
}

.identity-shared-room-paste {
  margin-bottom: 20px;
}

.identity-shared-room-paste-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
}

.identity-shared-room-paste-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.identity-shared-room-paste-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #141922;
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
}

.identity-shared-room-paste-input:focus {
  outline: none;
  border-color: rgba(75, 163, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(75, 163, 255, 0.12);
}

.identity-shared-room-paste-btn {
  flex-shrink: 0;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 10px;
}

.identity-shared-room-continue {
  width: 100%;
  margin: 0 0 16px;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #4b9ae8 0%, #2d6eb8 100%);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(45, 110, 184, 0.35);
  transition:
    filter 140ms ease,
    transform 100ms ease,
    box-shadow 140ms ease;
}

.identity-shared-room-continue:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(45, 110, 184, 0.42);
}

.identity-shared-room-continue:active {
  transform: scale(0.99);
}

.identity-shared-room-continue:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.identity-shared-room-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  padding-top: 4px;
}

.identity-shared-room-linkish {
  border: none;
  background: transparent;
  padding: 6px 8px;
  margin: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  border-radius: 8px;
  transition: color 140ms ease, background 140ms ease;
}

.identity-shared-room-linkish:hover {
  color: #7eb8f0;
  background: rgba(75, 163, 255, 0.08);
}

.identity-shared-room-linkish:focus-visible {
  outline: 2px solid rgba(75, 163, 255, 0.55);
  outline-offset: 1px;
}

@media (max-width: 420px) {
  .identity-shared-room-paste-row {
    flex-direction: column;
  }

  .identity-shared-room-paste-btn {
    width: 100%;
  }
}

.identity-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.identity-form label + label {
  margin-top: 4px;
}

.identity-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.identity-field-label {
  line-height: 1.2;
}

.identity-form input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #141922;
  color: var(--text);
  padding: 8px;
  font: inherit;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  text-shadow: none;
  filter: none;
}

.identity-form input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(75, 163, 255, 0.22);
}

.identity-palette {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
}

.identity-swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: var(--swatch-color);
  cursor: pointer;
  position: relative;
  justify-self: center;
  box-shadow: none;
  transform: none;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .identity-swatch:hover:not(.active):not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: none;
  }
}

.identity-swatch:focus {
  outline: none;
  box-shadow: none;
}

.identity-swatch:focus-visible {
  outline: none;
  box-shadow: none;
}

.identity-swatch.active {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(75, 163, 255, 0.45);
}

.identity-swatch.active:focus {
  box-shadow: 0 0 0 2px rgba(75, 163, 255, 0.45);
}

.identity-swatch.in-use::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid #0f1319;
  background: #ffffff;
}

.identity-swatch.in-use {
  filter: grayscale(0.85) brightness(0.72);
  opacity: 0.5;
}

.identity-swatch:disabled {
  cursor: not-allowed;
  transform: none;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.modal-action {
  border: 1px solid var(--border);
  background: #222d3a;
  color: var(--text);
  border-radius: 12px;
  padding: 14px 10px;
  display: grid;
  place-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 140ms ease, border-color 180ms ease;
}

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

.modal-action.save:hover {
  border-color: var(--accent);
}

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

.modal-action span {
  font-size: 13px;
  font-weight: 600;
}

.icon.large {
  width: 28px;
  height: 28px;
}

.context-menu {
  position: fixed;
  min-width: 240px;
  max-width: 320px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #151d27;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
  padding: 6px;
  z-index: var(--z-context-menu);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.context-menu.context-menu-compact {
  min-width: 168px;
  max-width: 220px;
  padding: 4px;
  border-radius: 9px;
  gap: 4px;
}

.context-menu-top {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}

.context-menu-top .context-item {
  flex: 0 0 auto;
}

.context-menu-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.context-option-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.context-menu-main .context-item,
.context-menu-flyout .context-item {
  width: 100%;
}

.context-item.submenu-parent {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.context-menu-flyout {
  position: absolute;
  min-width: 220px;
  max-width: 280px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #151d27;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
  z-index: calc(var(--z-context-menu) + 2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.context-menu-flyout.hidden {
  display: none;
}

.context-item {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.context-menu.context-menu-compact .context-item {
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 12px;
}

.context-item:hover {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.05);
}

.context-item.context-item-option-pill {
  text-align: center;
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.03);
}

.context-item.context-item-option-pill.context-item-selected {
  color: var(--text);
  background: rgba(255, 255, 255, 0.09);
}

.context-item.context-item-muted {
  color: rgba(221, 227, 235, 0.58);
}

.context-item.context-item-muted:hover {
  color: var(--text);
  border-color: var(--border);
}

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

.context-item.danger:hover {
  border-color: var(--danger);
  color: #ffdede;
}

.context-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.context-item.hidden {
  display: none;
}

.build-stamp {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: calc(var(--z-excalidraw-chrome) + 10);
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #ff4da6;
  background: rgba(24, 4, 18, 0.9);
  color: #ff8fc6;
  font-size: 11px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.tutorial-beat1-hint {
  position: absolute;
  left: var(--viewport-frame-left, 0);
  top: var(--viewport-frame-top, 0);
  width: var(--viewport-frame-width, 100%);
  height: var(--viewport-frame-height, 100%);
  z-index: calc(var(--z-excalidraw-chrome) + 4);
  pointer-events: none;
}

.tutorial-beat1-hint.hidden {
  display: none;
}

/* BEAT1_FROZEN — do not retarget row geometry for beat 2+; label width reserve keeps arrow fixed. */
.tutorial-beat1-hint-row {
  position: absolute;
  left: calc(50% + 72px);
  top: 25%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #f5f5f5;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  transform: translate(-50%, -50%);
}

.tutorial-beat1-label {
  font-family: Excalifont, Virgil, "Segoe Print", "Comic Sans MS", cursive;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* Reserve beat-1 label width so "Nice!" does not re-center the row and move the arrow. */
  display: inline-block;
  min-width: 12.5em;
  text-align: left;
}

.tutorial-beat1-arrow {
  flex: 0 0 auto;
  overflow: visible;
}

.tutorial-connect-hit {
  position: absolute;
  z-index: calc(var(--z-excalidraw-chrome) + 5);
  box-sizing: border-box;
  border: 2px dashed rgba(245, 245, 245, 0.92);
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.tutorial-connect-hit.hidden {
  display: none;
}

.tutorial-make-another-hint {
  position: absolute;
  left: var(--viewport-frame-left, 0);
  top: var(--viewport-frame-top, 0);
  width: var(--viewport-frame-width, 100%);
  height: var(--viewport-frame-height, 100%);
  z-index: calc(var(--z-excalidraw-chrome) + 4);
  pointer-events: none;
}

.tutorial-make-another-hint.hidden {
  display: none;
}

.tutorial-make-another-stack {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: #f5f5f5;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.tutorial-make-another-label {
  font-family: Excalifont, Virgil, "Segoe Print", "Comic Sans MS", cursive;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-align: center;
  padding-top: 0;
}

.tutorial-make-another-arrow {
  flex: 0 0 auto;
  overflow: visible;
}

.tutorial-dev-badge {
  position: absolute;
  right: 10px;
  bottom: 42px;
  z-index: calc(var(--z-excalidraw-chrome) + 10);
  max-width: min(320px, calc(100% - 20px));
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #c5a065;
  background: rgba(18, 16, 10, 0.92);
  color: #e8d4a8;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

html[data-cells-tutorial="1"][data-cells-tutorial-beat="1"] .tutorial-dev-badge {
  animation: cells-tutorial-badge-pulse 2.4s ease-in-out infinite;
}

@keyframes cells-tutorial-badge-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}

.context-item.context-item-check {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.context-item .context-item-mark {
  flex: 0 0 auto;
  opacity: 0.55;
  font-size: 12px;
}

.clock-display.clock-display-hidden {
  opacity: 0;
  min-width: 52px;
  cursor: context-menu;
}

/* Transparent overlay to preserve right-click access to clock options when the clock is hidden via opacity. */
.clock-hitbox {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background: transparent;
  cursor: context-menu;
  z-index: var(--z-topbar);
  display: none;
}

.clock-hitbox.clock-hitbox-visible {
  display: block;
}

/* To-Dos gated off in app.js (CELLS_TODOS_ENABLED = false): hide rail, panel, and settings row. */
html[data-cells-todos-disabled="1"] #toggleTodosBtn,
html[data-cells-todos-disabled="1"] .sidebar-rail-item:has(#toggleTodosBtn),
html[data-cells-todos-disabled="1"] #todosPanel,
html[data-cells-todos-disabled="1"] .settings-todos-placement {
  display: none !important;
}

/* File history modal */
.file-history-modal-card {
  width: min(560px, calc(100vw - 40px));
  max-height: min(84vh, 720px);
  overflow: auto;
  display: grid;
  gap: 12px;
}

.file-history-lead {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted, #9aa0a8);
}

.file-history-milestone-create {
  display: grid;
  gap: 8px;
}

.file-history-section-title {
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #9aa0a8);
}

.file-history-list {
  display: grid;
  gap: 8px;
  min-height: 2rem;
  max-height: 220px;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--border, #2a2f38);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.file-history-trail-list {
  max-height: 180px;
}

.file-history-empty {
  margin: 0;
  padding: 10px 8px;
  font-size: 0.85rem;
  color: var(--muted, #9aa0a8);
}

.file-history-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
}

.file-history-row:hover {
  border-color: rgba(197, 160, 101, 0.25);
}

.file-history-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.file-history-row-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text, #e8eaed);
  overflow-wrap: anywhere;
}

.file-history-row-meta {
  font-size: 0.75rem;
  color: var(--muted, #9aa0a8);
}

.file-history-restore-btn {
  white-space: nowrap;
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
}


.awma-hosted-banner {
  position: sticky;
  top: 0;
  z-index: 100000;
  background: #3a1f1f;
  color: #ece8df;
  border-bottom: 2px solid #e06c75;
  padding: 0.55rem 1rem;
  font: 600 0.85rem/1.4 ui-sans-serif, system-ui, sans-serif;
}
.awma-result-panel {
  position: fixed;
  right: 0.75rem;
  bottom: 0.75rem;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: 40vh;
  overflow: auto;
  background: #14161a;
  border: 1px solid #c5a065;
  border-radius: 10px;
  padding: 0.75rem;
  z-index: 99999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.awma-result-title { margin: 0 0 0.5rem; font-size: 0.95rem; color: #c5a065; }
.awma-run-btn, .awma-download-btn {
  display: inline-block;
  margin: 0 0.35rem 0.5rem 0;
  padding: 0.35rem 0.65rem;
  border: 0;
  border-radius: 6px;
  background: #c5a065;
  color: #090b0f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.awma-download-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.awma-result-pre {
  margin: 0;
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  color: #aeb7c4;
}