@cancia/toolbar 0.5.2 → 0.12.0

package/dist/cancia.js

@@ -1,3 +1,149 @@
+// src/richtext.ts
+import { PT_STYLES, portableTextSubsetSchema } from "@cancia/astro/richtext";
+function parseRichValue(raw) {
+  if (raw === void 0) return null;
+  const trimmed = raw.trim();
+  if (trimmed === "") return [];
+  if (!trimmed.startsWith("[")) {
+    return [
+      {
+        _type: "block",
+        _key: "legacy",
+        style: "normal",
+        markDefs: [],
+        children: [{ _type: "span", _key: "legacy0", text: raw, marks: [] }]
+      }
+    ];
+  }
+  try {
+    const parsed = portableTextSubsetSchema.safeParse(JSON.parse(trimmed));
+    return parsed.success ? parsed.data : [];
+  } catch {
+    return [];
+  }
+}
+function serializeRichValue(blocks) {
+  return blocks.length === 0 ? "" : JSON.stringify(blocks);
+}
+var STYLE_TAG = {
+  normal: "p",
+  h2: "h2",
+  h3: "h3",
+  blockquote: "blockquote"
+};
+function renderRichToDom(target, blocks) {
+  target.replaceChildren();
+  let listWrap = null;
+  let listKind = null;
+  for (const block of blocks) {
+    if (block.listItem) {
+      const wantTag = block.listItem === "number" ? "ol" : "ul";
+      if (!listWrap || listKind !== block.listItem) {
+        listWrap = document.createElement(wantTag);
+        listKind = block.listItem;
+        target.appendChild(listWrap);
+      }
+      const li = document.createElement("li");
+      appendSpans(li, block);
+      listWrap.appendChild(li);
+      continue;
+    }
+    listWrap = null;
+    listKind = null;
+    const el = document.createElement(STYLE_TAG[block.style] ?? "p");
+    appendSpans(el, block);
+    target.appendChild(el);
+  }
+}
+function appendSpans(parent, block) {
+  const markDefs = new Map(
+    (block.markDefs ?? []).map((d) => [d._key, d])
+  );
+  for (const span of block.children) {
+    let node = document.createTextNode(span.text);
+    for (const mark of span.marks ?? []) {
+      if (mark === "strong" || mark === "em") {
+        const wrap = document.createElement(mark === "strong" ? "strong" : "em");
+        wrap.appendChild(node);
+        node = wrap;
+        continue;
+      }
+      const def = markDefs.get(mark);
+      if (def) {
+        const a = document.createElement("a");
+        a.setAttribute("href", def.href);
+        a.appendChild(node);
+        node = a;
+      }
+    }
+    parent.appendChild(node);
+  }
+}
+var STYLE_OF_TAG = {
+  P: "normal",
+  H2: "h2",
+  H3: "h3",
+  BLOCKQUOTE: "blockquote"
+};
+function domToRows(region) {
+  const rows = [];
+  const pushBlock = (el, style, listItem) => {
+    const text = inlineToShorthand(el);
+    if (text.trim() === "") return;
+    rows.push(listItem ? { text, style, listItem } : { text, style });
+  };
+  for (const child of region.children) {
+    const tag = child.tagName;
+    if (tag === "UL" || tag === "OL") {
+      const kind = tag === "OL" ? "number" : "bullet";
+      for (const li of child.children) {
+        if (li.tagName === "LI") pushBlock(li, "normal", kind);
+      }
+      continue;
+    }
+    if (child.classList.contains("cancia-richtext")) {
+      rows.push(...domToRows(child));
+      continue;
+    }
+    pushBlock(child, STYLE_OF_TAG[tag] ?? "normal");
+  }
+  if (rows.length === 0) {
+    const text = inlineToShorthand(region);
+    if (text.trim() !== "") rows.push({ text, style: "normal" });
+  }
+  return rows;
+}
+function inlineToShorthand(el) {
+  let out = "";
+  for (const node of el.childNodes) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      out += (node.textContent ?? "").replace(/\s+/g, " ");
+      continue;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) continue;
+    const child = node;
+    const inner = inlineToShorthand(child);
+    switch (child.tagName) {
+      case "STRONG":
+      case "B":
+        out += `**${inner}**`;
+        break;
+      case "EM":
+      case "I":
+        out += `*${inner}*`;
+        break;
+      case "A": {
+        const href = child.getAttribute("href") ?? "";
+        out += href ? `[${inner}](${href})` : inner;
+        break;
+      }
+      default:
+        out += inner;
+    }
+  }
+  return out;
+}
+
 // src/state.ts
 var state = {
   config: null,
@@ -53,6 +199,11 @@ function applyOverlay() {
       el.src = savedValue;
       return;
     }
+    if (el.dataset.cmsType === "richtext") {
+      const blocks = parseRichValue(savedValue);
+      if (blocks) renderRichToDom(el, blocks);
+      return;
+    }
     if (el.dataset.cmsType === "link") {
       const link = parseLinkOverlay(savedValue);
       if (link.href && el.tagName === "A") el.setAttribute("href", link.href);
@@ -71,14 +222,19 @@ function applyOverlay() {
   });
 }
 function revertPending() {
-  for (const [fullKey, { key, lang }] of state.pending) {
+  for (const [fullKey, { key }] of state.pending) {
     const savedValue = state.cmsData[fullKey] ?? "";
     document.querySelectorAll(`[data-cms="${key}"]`).forEach((el) => {
       if (el.tagName === "IMG") {
         el.src = savedValue;
-      } else {
-        el.textContent = savedValue;
+        return;
+      }
+      if (el.dataset.cmsType === "richtext") {
+        const blocks = parseRichValue(savedValue);
+        if (blocks) renderRichToDom(el, blocks);
+        return;
       }
+      el.textContent = savedValue;
     });
   }
   state.pending.clear();
@@ -242,21 +398,431 @@ async function flushPending() {
   if (failed > 0) throw new Error(`Cancia: ${failed} save(s) failed`);
 }
 
+// src/tokens.ts
+var tokens = {
+  // ── Surfaces ──────────────────────────────────────────────────────────────
+  // All three chrome levels are plain white. On a light theme, depth comes from
+  // the BORDER and the shadow, not from a lightness ramp: three subtly
+  // different off-whites just look like a rendering bug. The scale is still
+  // three names so component code keeps its layering vocabulary.
+  "surface-1": "#ffffff",
+  // the floating bar itself
+  "surface-2": "#ffffff",
+  // popups, panels
+  "surface-3": "#ffffff",
+  // the drawer / form (the topmost layer)
+  "surface-raised": "#f4f4f5",
+  // an input or row ON a surface — recessed, not raised
+  "surface-hover": "#f4f4f5",
+  "surface-active": "#e4e4e7",
+  // ── Text ──────────────────────────────────────────────────────────────────
+  // Four steps only. More than four and nothing reads as deliberate.
+  // Opaque hex, not white-alpha: these sit on white, and an alpha black over a
+  // translucent surface picks up whatever the page beneath happens to be.
+  "fg-strong": "#18181b",
+  // headings, input text
+  "fg": "#3f3f46",
+  // body
+  "fg-muted": "#71717a",
+  // labels, help text
+  "fg-faint": "#a1a1aa",
+  // placeholders, disabled
+  // ── Borders ───────────────────────────────────────────────────────────────
+  // On a light surface a 1px border does more work than a large shadow — it is
+  // the primary way a panel separates itself from the page behind it.
+  "border": "#e4e4e7",
+  "border-strong": "#d4d4d8",
+  // ── Accent ────────────────────────────────────────────────────────────────
+  // Near-black, NOT a brand colour. See the note on tokenCss(): the site's
+  // configured accentColor is opt-in, because a client's brand colour is
+  // frequently pale or neon and produces an unreadable button on light chrome.
+  "accent": "#18181b",
+  "accent-fg": "#ffffff",
+  "accent-soft": "rgba(24, 24, 27, 0.06)",
+  // recomputed when an accent is supplied
+  "accent-ring": "rgba(24, 24, 27, 0.28)",
+  // recomputed when an accent is supplied
+  // ── Status ────────────────────────────────────────────────────────────────
+  // Retuned for light: the dark theme used pastel-bright status colours that
+  // glowed on near-black and wash out to illegible on white. These are the
+  // mid-weight variants that hold contrast against a white surface.
+  "danger": "#dc2626",
+  "danger-soft": "rgba(220, 38, 38, 0.08)",
+  "success": "#16a34a",
+  // Amber. Marks an incomplete-but-not-broken state — chiefly a list entry that
+  // exists in another locale but is NOT translated into the active one.
+  "warning": "#d97706",
+  "warning-soft": "rgba(217, 119, 6, 0.10)",
+  // ── Radii ─────────────────────────────────────────────────────────────────
+  "radius-sm": "6px",
+  "radius": "10px",
+  "radius-lg": "14px",
+  "radius-full": "999px",
+  // ── Spacing ───────────────────────────────────────────────────────────────
+  // A 4px scale. Every gap/padding in the UI is one of these.
+  "space-1": "4px",
+  "space-2": "8px",
+  "space-3": "12px",
+  "space-4": "16px",
+  "space-5": "20px",
+  "space-6": "24px",
+  // ── Typography ────────────────────────────────────────────────────────────
+  // The system stack, so the editor never waits on a webfont or inherits a
+  // display face from the page it is injected into.
+  "font": '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  "text-xs": "11px",
+  "text-sm": "12px",
+  "text-base": "13px",
+  "text-lg": "15px",
+  // ── Elevation ─────────────────────────────────────────────────────────────
+  // Retuned for light surfaces. The dark theme's shadows were 0.3–0.5 alpha
+  // black, which on white reads as a grey smear rather than elevation. Light UI
+  // wants soft, low-opacity shadows in two layers — a tight contact shadow plus
+  // a wide ambient one — with the 1px `border` doing most of the separating.
+  // The `inset` top highlight is gone: it simulated light catching the top edge
+  // of a dark glass panel and is invisible (or dirty) on white.
+  "shadow-sm": "0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06)",
+  "shadow": "0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08)",
+  "shadow-lg": "0 4px 8px rgba(0, 0, 0, 0.05), 0 16px 48px rgba(0, 0, 0, 0.12)",
+  // ── Motion ────────────────────────────────────────────────────────────────
+  // Two curves, and a rule for choosing between them.
+  //
+  // `ease` is critically damped — it settles without overshoot, which is what
+  // almost all UI wants. Overshoot on a menu that simply appeared reads as
+  // noise; overshoot is only earned when the user's own gesture carried
+  // momentum into it (a flick, a drag release).
+  //
+  // `ease-spring` is the momentum curve: a slight overshoot that makes a
+  // element feel thrown rather than placed. Reserve it for motion the user
+  // initiated with a gesture, and for the toolbar's own entrance (which should
+  // feel like it arrives, not like it blinks on).
+  // Three curves, chosen by what the element is DOING — not by taste.
+  //
+  //   entering or exiting the screen  -> ease-out
+  //   already on screen, moving       -> ease-in-out
+  //   hover / colour change           -> ease
+  //
+  // `ease-in` is deliberately absent. Its slow start delays visual feedback,
+  // which reads as a sluggish interface; this file previously carried a
+  // cubic-bezier(0.7, 0, 0.84, 0) exit that did exactly that.
+  //
+  // These are named after the standard easing set so the intent is legible at
+  // the call site: `ease-out-quart` is a strong ease-out, not a magic tuple.
+  "ease": "cubic-bezier(0.25, 0.1, 0.25, 1)",
+  // hover, colour — gentle, asymmetric
+  "ease-out": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  // quart: enter/exit, the default
+  "ease-out-soft": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+  // quad: small/short moves
+  "ease-in-out": "cubic-bezier(0.645, 0.045, 0.355, 1)",
+  // cubic: on-screen movement
+  "ease-spring": "cubic-bezier(0.34, 1.35, 0.64, 1)",
+  // overshoot — momentum only
+  // Durations. UI animation stays under 300ms; past that an interface starts
+  // to feel like it is waiting on itself. Larger surfaces get the longer end,
+  // and an exit runs ~20% faster than the matching entrance because nobody
+  // wants to watch something leave.
+  "duration-fast": "0.12s",
+  // press feedback, hover — must feel instant
+  "duration": "0.2s",
+  // the default: popups, tooltips, panels
+  "duration-slow": "0.28s",
+  // the largest surfaces (drawer, list panel)
+  "duration-exit": "0.16s",
+  // exits: ~20% faster than the entrance
+  // ── Effects ───────────────────────────────────────────────────────────────
+  // Surfaces are opaque white now, so the blur is mostly inert — it is kept so
+  // a consumer who overrides a surface to a translucent value still gets the
+  // frosted treatment. The `saturate(180%)` boost is dropped: it existed to
+  // give dark glass richness, and over a light surface it pushes whatever page
+  // colour bleeds through toward the garish.
+  "blur": "blur(16px)",
+  // ── Layering ──────────────────────────────────────────────────────────────
+  // The toolbar must sit above the host page's own stacking contexts, so these
+  // live at the very top of the range.
+  "z-overlay": "2147483645",
+  "z-panel": "2147483646",
+  "z-bar": "2147483647"
+};
+function v(name) {
+  return `var(--cancia-${name})`;
+}
+function parseHex(hex) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+  return {
+    r: parseInt(h.slice(0, 2), 16),
+    g: parseInt(h.slice(2, 4), 16),
+    b: parseInt(h.slice(4, 6), 16)
+  };
+}
+function tokenCss(accent4, useAccent = false) {
+  const resolved = { ...tokens };
+  const rgb = accent4 ? parseHex(accent4) : null;
+  if (useAccent && accent4 && rgb) {
+    resolved["accent"] = accent4;
+    resolved["accent-soft"] = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.10)`;
+    resolved["accent-ring"] = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.35)`;
+  }
+  const decls = Object.entries(resolved).map(([k, val]) => `  --cancia-${k}: ${val};`).join("\n");
+  return `:root {
+${decls}
+}`;
+}
+
+// src/styles.ts
+var injected = false;
+function injectBaseStyles(accent4, useAccent = false) {
+  if (injected) return;
+  injected = true;
+  const style = document.createElement("style");
+  style.dataset.cancia = "tokens";
+  style.textContent = `
+${tokenCss(accent4, useAccent)}
+
+@keyframes cancia-in {
+  from { opacity: 0; transform: translateY(4px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes cancia-fade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes cancia-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Scoped reset. The toolbar is injected into somebody else's page, whose
+   global styles WILL otherwise reach our elements \u2014 a site-wide
+   \`button { text-transform: uppercase }\` would rewrite our labels. */
+[data-cancia-ui], [data-cancia-ui] * {
+  box-sizing: border-box;
+  font-family: ${v("font")};
+  text-transform: none;
+  letter-spacing: normal;
+  line-height: 1.45;
+  margin: 0;
+}
+[data-cancia-ui] button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+[data-cancia-ui] input,
+[data-cancia-ui] textarea,
+[data-cancia-ui] select {
+  font: inherit;
+  color: inherit;
+}
+[data-cancia-ui] ::placeholder { color: ${v("fg-faint")}; }
+
+/* Focus is shown with our own ring so it matches the accent and is consistent
+   across browsers, rather than inheriting whatever the host page's UA default
+   or global \`:focus\` rule happens to be. */
+[data-cancia-ui] :focus-visible {
+  outline: 2px solid ${v("accent-ring")};
+  outline-offset: 2px;
+}
+
+/* Reduced motion: neutralise every animation and transition on our subtree.
+   This is deliberately a blanket rule keyed on the [data-cancia-ui] marker \u2014
+   which is exactly why markUi() must be called on every top-level container we
+   create. Any new motion added anywhere in the toolbar is covered by this
+   automatically, as long as it lives inside a marked subtree and is expressed
+   as a CSS animation or transition (both of the mechanisms we use).
+
+   Note this zeroes DURATION, not the properties themselves: an element still
+   lands on its final state instantly, so nothing is left mid-transition. */
+@media (prefers-reduced-motion: reduce) {
+  [data-cancia-ui], [data-cancia-ui] * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+`;
+  document.head.appendChild(style);
+}
+function markUi(el) {
+  el.dataset.canciaUi = "";
+  return el;
+}
+var surface = (level = 2) => `
+  background: ${v(`surface-${level}`)};
+  backdrop-filter: ${v("blur")};
+  -webkit-backdrop-filter: ${v("blur")};
+  border: 1px solid ${v("border")};
+  border-radius: ${v("radius-lg")};
+  box-shadow: ${v("shadow")};
+  color: ${v("fg")};
+`;
+var button = (variant = "ghost") => {
+  const base = `
+    display: inline-flex; align-items: center; justify-content: center;
+    gap: ${v("space-2")};
+    height: 30px;
+    padding: 0 ${v("space-3")};
+    border-radius: ${v("radius-sm")};
+    font-size: ${v("text-sm")};
+    font-weight: 500;
+    white-space: nowrap;
+    transition: background ${v("duration-fast")} ${v("ease")},
+                color ${v("duration-fast")} ${v("ease")},
+                opacity ${v("duration-fast")} ${v("ease")};
+  `;
+  if (variant === "primary") {
+    return `${base}
+      background: ${v("accent")};
+      color: ${v("accent-fg")};
+    `;
+  }
+  if (variant === "danger") {
+    return `${base}
+      background: transparent;
+      color: ${v("danger")};
+    `;
+  }
+  return `${base}
+    background: transparent;
+    color: ${v("fg")};
+  `;
+};
+var iconButton = (size = 30) => `
+  display: inline-flex; align-items: center; justify-content: center;
+  width: ${size}px; height: ${size}px;
+  border-radius: ${v("radius-sm")};
+  color: ${v("fg-muted")};
+  transition: background ${v("duration-fast")} ${v("ease")},
+              color ${v("duration-fast")} ${v("ease")};
+`;
+var actionButton = () => `
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: ${v("space-2")};
+  height: 38px;
+  padding: 0 ${v("space-4")};
+  /* radius-pill so the button's curve echoes the pill-shaped bar containing
+     it. A small square radius inside a fully-round container reads as two
+     unrelated shapes. */
+  border-radius: ${v("radius-full")};
+  font-size: ${v("text-base")};
+  font-weight: 500;
+  color: ${v("fg")};
+  background: transparent;
+  white-space: nowrap;
+  transition: background ${v("duration-fast")} ${v("ease")},
+              color ${v("duration-fast")} ${v("ease")},
+              transform ${v("duration-fast")} ${v("ease")};
+`;
+var input = () => `
+  width: 100%;
+  padding: ${v("space-2")} ${v("space-3")};
+  background: ${v("surface-raised")};
+  color: ${v("fg-strong")};
+  border: 1px solid ${v("border")};
+  border-radius: ${v("radius-sm")};
+  font-size: ${v("text-base")};
+  outline: none;
+  caret-color: ${v("accent")};
+  transition: border-color ${v("duration-fast")} ${v("ease")},
+              background ${v("duration-fast")} ${v("ease")};
+`;
+var label = () => `
+  display: block;
+  font-size: ${v("text-sm")};
+  font-weight: 500;
+  letter-spacing: normal;
+  text-transform: none;
+  color: ${v("fg-strong")};
+`;
+var hint = () => `
+  font-size: ${v("text-xs")};
+  color: ${v("fg-muted")};
+  line-height: 1.5;
+`;
+var group = () => `
+  display: flex;
+  flex-direction: column;
+  gap: ${v("space-2")};
+  padding-left: ${v("space-3")};
+  border-left: 1px solid ${v("border")};
+  margin-left: 1px;
+`;
+var groupRow = () => `
+  display: flex;
+  align-items: flex-start;
+  gap: ${v("space-2")};
+`;
+function attachHover(el, opts = {}) {
+  const bg = opts.bg ?? v("surface-hover");
+  const color = opts.color;
+  const priorBg = el.style.background;
+  const priorColor = el.style.color;
+  el.addEventListener("mouseenter", () => {
+    el.style.background = bg;
+    if (color) el.style.color = color;
+  });
+  el.addEventListener("mouseleave", () => {
+    el.style.background = priorBg;
+    if (color) el.style.color = priorColor;
+  });
+}
+function attachPress(el, scale = 0.96) {
+  const down = (e) => {
+    if (el.disabled) return;
+    el.setPointerCapture?.(e.pointerId);
+    el.style.transform = `scale(${scale})`;
+  };
+  const up = () => {
+    el.style.transform = "";
+  };
+  el.addEventListener("pointerdown", down);
+  el.addEventListener("pointerup", up);
+  el.addEventListener("pointercancel", up);
+}
+function attachInputFocus(el) {
+  el.addEventListener("focus", () => {
+    el.style.borderColor = v("accent-ring");
+    el.style.background = v("surface-hover");
+  });
+  el.addEventListener("blur", () => {
+    el.style.borderColor = v("border");
+    el.style.background = v("surface-raised");
+  });
+}
+
 // src/highlight.ts
 var CMS_SELECTOR = "[data-cms], [data-cms-list]";
 var onSelect = null;
 var currentHighlighted = null;
 var cleanupFns = [];
 var scrollRAF = null;
+var scrollEndTimer = null;
 var overlayEl = null;
 var tooltipEl = null;
 var styleInjected = false;
 function accent() {
-  return state.config?.accentColor ?? "#6366f1";
+  const useAccent = state.config?.toolbarAccent === true;
+  return (useAccent ? state.config?.accentColor : void 0) ?? "#18181b";
+}
+function withAlpha(color, alpha) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim());
+  if (m) {
+    let h = m[1];
+    if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    const r = parseInt(h.slice(0, 2), 16);
+    const g = parseInt(h.slice(2, 4), 16);
+    const b = parseInt(h.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  return `rgba(24, 24, 27, ${alpha})`;
 }
 function fieldType(el) {
   if (el.dataset.cmsType === "image") return "image";
   if (el.dataset.cmsType === "link") return "link";
+  if (el.dataset.cmsType === "richtext") return "richtext";
   if (el.tagName === "IMG") return "image";
   return "text";
 }
@@ -268,9 +834,12 @@ function injectStyles() {
   styleInjected = true;
   const s = document.createElement("style");
   s.textContent = `
+    /* A plain fade. The marker used to scale from 0.98, which was right for a
+       box growing into place but wrong for an underline \u2014 a scaling underline
+       reads as sliding sideways from its centre. Opacity only. */
     @keyframes cancia-highlight-in {
-      from { opacity: 0; transform: scale(0.98); }
-      to   { opacity: 1; transform: scale(1); }
+      from { opacity: 0; }
+      to   { opacity: 1; }
     }
     @keyframes cancia-tooltip-in {
       from { opacity: 0; transform: scale(0.95) translateY(3px); }
@@ -283,15 +852,19 @@ function getOrCreateOverlay() {
   if (!overlayEl) {
     overlayEl = document.createElement("div");
     overlayEl.dataset.canciaOverlay = "1";
+    markUi(overlayEl);
     overlayEl.style.cssText = `
       position: fixed;
+      top: 0; left: 0;
       pointer-events: none !important;
       box-sizing: border-box;
-      border-radius: 5px;
+      background: transparent;
+      border: 0;
       z-index: 2147483644;
-      will-change: top, left, width, height, opacity;
-      transition: top 0.08s cubic-bezier(0.16,1,0.3,1), left 0.08s cubic-bezier(0.16,1,0.3,1),
-                  width 0.08s cubic-bezier(0.16,1,0.3,1), height 0.08s cubic-bezier(0.16,1,0.3,1);
+      will-change: transform, opacity;
+      contain: layout style;
+      transition: transform ${v("duration-fast")} ${v("ease-out-soft")},
+                  opacity ${v("duration-fast")} ${v("ease")};
     `;
     document.body.appendChild(overlayEl);
   }
@@ -301,37 +874,41 @@ function getOrCreateTooltip() {
   if (!tooltipEl) {
     tooltipEl = document.createElement("div");
     tooltipEl.dataset.canciaTooltip = "1";
+    markUi(tooltipEl);
     tooltipEl.style.cssText = `
       position: fixed;
       pointer-events: none !important;
-      z-index: 2147483645;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      font-size: 11px;
+      z-index: ${v("z-overlay")};
+      font-family: ${v("font")};
+      font-size: ${v("text-xs")};
       font-weight: 500;
       letter-spacing: 0.02em;
-      color: #fff;
-      background: rgba(10,10,12,0.92);
-      backdrop-filter: blur(8px);
-      -webkit-backdrop-filter: blur(8px);
-      border: 1px solid rgba(255,255,255,0.1);
-      padding: 4px 8px;
-      border-radius: 6px;
+      color: ${v("fg-strong")};
+      background: ${v("surface-1")};
+      backdrop-filter: ${v("blur")};
+      -webkit-backdrop-filter: ${v("blur")};
+      border: 1px solid ${v("border-strong")};
+      padding: ${v("space-1")} ${v("space-2")};
+      border-radius: ${v("radius-sm")};
       white-space: nowrap;
       max-width: 260px;
       overflow: hidden;
       text-overflow: ellipsis;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+      box-shadow: ${v("shadow-sm")};
     `;
     document.body.appendChild(tooltipEl);
   }
   return tooltipEl;
 }
 var lastOverlayEl = null;
+var LIST_FALLBACK = "#059669";
 function listAccent(hex) {
-  if (!/^#[0-9a-f]{6}$/i.test(hex)) return "#059669";
+  if (!/^#[0-9a-f]{6}$/i.test(hex)) return LIST_FALLBACK;
   const r = parseInt(hex.slice(1, 3), 16);
   const g = parseInt(hex.slice(3, 5), 16);
   const b = parseInt(hex.slice(5, 7), 16);
+  const spread = Math.max(r, g, b) - Math.min(r, g, b);
+  if (spread < 24) return LIST_FALLBACK;
   const shifted = [g, b, r].map((c) => c.toString(16).padStart(2, "0")).join("");
   return `#${shifted}`;
 }
@@ -352,52 +929,54 @@ var LIST_ICON = `<svg width="10" height="10" viewBox="0 0 14 14" fill="none" str
   <rect x="1" y="7.5" width="3" height="3" rx="0.5"/>
   <path d="M6 3.5h7M6 9h7"/>
 </svg>`;
+var KIND_LABEL = {
+  text: "Text",
+  image: "Image",
+  link: "Link",
+  richtext: "Rich text"
+};
 function positionOverlay(el, animate = false) {
   const rect = el.getBoundingClientRect();
   const mode = elementMode(el);
-  const a = mode === "list" ? listAccent(accent()) : accent();
+  const isList = mode === "list";
+  const a = isList ? listAccent(accent()) : accent();
   const overlay = getOrCreateOverlay();
   const tooltip = getOrCreateTooltip();
   const padding = 3;
-  overlay.style.top = `${rect.top - padding}px`;
-  overlay.style.left = `${rect.left - padding}px`;
+  overlay.style.transform = `translate(${rect.left - padding}px, ${rect.top - padding}px)`;
   overlay.style.width = `${rect.width + padding * 2}px`;
   overlay.style.height = `${rect.height + padding * 2}px`;
   if (lastOverlayEl !== el) {
     lastOverlayEl = el;
-    overlay.style.border = `2px ${mode === "list" ? "dashed" : "solid"} ${a}`;
-    overlay.style.background = `${a}12`;
-    let badgeIcon;
-    let badgeLabel;
+    if (isList) {
+      overlay.style.border = `1px dashed ${a}`;
+      overlay.style.borderRadius = "6px";
+    } else {
+      overlay.style.border = "0";
+      overlay.style.borderRadius = "0";
+    }
+    let tagIcon;
+    let tagLabel;
     let tooltipText;
-    if (mode === "list") {
-      badgeIcon = LIST_ICON;
-      badgeLabel = "list";
+    if (isList) {
+      tagIcon = LIST_ICON;
+      tagLabel = "List";
       tooltipText = `list: ${el.dataset.cmsList}`;
     } else {
       const type = fieldType(el);
-      badgeIcon = type === "image" ? IMAGE_ICON : type === "link" ? LINK_ICON : FIELD_ICON;
-      badgeLabel = type;
+      tagIcon = type === "image" ? IMAGE_ICON : type === "link" ? LINK_ICON : FIELD_ICON;
+      tagLabel = KIND_LABEL[type];
       tooltipText = el.dataset.cms ?? "";
     }
-    overlay.innerHTML = `
-      <div style="
-        position: absolute; top: -1px; left: -1px;
-        background: ${a}; color: #fff;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-        font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
-        padding: 2px 6px; border-radius: 3px 0 4px 0;
-        display: flex; align-items: center; gap: 4px;
-        line-height: 1;
-      ">
-        ${badgeIcon}
-        ${badgeLabel}
-      </div>
-    `;
-    tooltip.textContent = tooltipText;
+    overlay.style.border = `2px solid ${withAlpha(a, isList ? 0.55 : 0.45)}`;
+    overlay.style.background = withAlpha(a, 0.05);
+    overlay.style.borderRadius = "4px";
+    overlay.style.borderStyle = isList ? "dashed" : "solid";
+    overlay.innerHTML = "";
+    tooltip.textContent = tagLabel ? `${tagLabel}  ${tooltipText}` : tooltipText;
   }
   overlay.style.display = "block";
-  if (animate) overlay.style.animation = "cancia-highlight-in 0.12s ease-out forwards";
+  if (animate) overlay.style.animation = `cancia-highlight-in ${v("duration-fast")} ${v("ease-out")} forwards`;
   tooltip.style.display = "block";
   if (animate) tooltip.style.animation = "cancia-tooltip-in 0.1s ease-out forwards";
   const tooltipMargin = 8;
@@ -422,13 +1001,19 @@ function hideOverlay() {
   }
 }
 function handleScroll() {
-  if (scrollRAF !== null) return;
-  scrollRAF = requestAnimationFrame(() => {
-    scrollRAF = null;
-    if (currentHighlighted) {
+  if (overlayEl && overlayEl.style.display !== "none") {
+    overlayEl.style.opacity = "0";
+    if (tooltipEl) tooltipEl.style.opacity = "0";
+  }
+  if (scrollEndTimer) clearTimeout(scrollEndTimer);
+  scrollEndTimer = setTimeout(() => {
+    scrollEndTimer = null;
+    if (currentHighlighted && document.contains(currentHighlighted)) {
       positionOverlay(currentHighlighted);
+      if (overlayEl) overlayEl.style.opacity = "1";
+      if (tooltipEl) tooltipEl.style.opacity = "1";
     }
-  });
+  }, 140);
 }
 function handleMouseOver(e) {
   const target = e.target.closest(CMS_SELECTOR);
@@ -524,13 +1109,18 @@ function onPendingChange(cb) {
 }
 
 // src/popup.ts
+import {
+  portableTextToRows,
+  rowsToPortableText
+} from "@cancia/astro/richtext";
 var popupEl = null;
 var outsideListener = null;
 var keyListener = null;
 var dragover = false;
 var inputHandlers = /* @__PURE__ */ new WeakMap();
 function accent2() {
-  return state.config?.accentColor ?? "#6366f1";
+  const useAccent = state.config?.toolbarAccent === true;
+  return (useAccent ? state.config?.accentColor : void 0) ?? "#18181b";
 }
 function getPopupPosition(anchor) {
   const rect = anchor.getBoundingClientRect();
@@ -565,15 +1155,15 @@ function buildHeader(key, onClose) {
   const keyParts = key.split(".");
   titleEl.textContent = keyParts[keyParts.length - 1].replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
   titleEl.style.cssText = `
-    font-size: 13px; font-weight: 600;
-    color: rgba(255,255,255,0.9);
+    font-size: ${v("text-base")}; font-weight: 600;
+    color: ${v("fg")};
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
   `;
   const keyEl = document.createElement("span");
   keyEl.textContent = key;
   keyEl.style.cssText = `
     font-size: 10px; font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
-    color: rgba(255,255,255,0.22); letter-spacing: 0.03em;
+    color: ${v("fg-faint")}; letter-spacing: 0.03em;
     overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   `;
   titleWrap.appendChild(titleEl);
@@ -591,7 +1181,7 @@ function buildTextPopup(key, anchorEl, onClose) {
   wrap.appendChild(buildHeader(key, onClose));
   if (langs.length > 1) {
     const tabs = document.createElement("div");
-    tabs.style.cssText = `display: flex; gap: 0; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06);`;
+    tabs.style.cssText = `display: flex; gap: 0; margin-bottom: ${v("space-3")}; border-bottom: 1px solid ${v("border")};`;
     const renderTabs2 = () => {
       tabs.innerHTML = "";
       langs.forEach((lang) => {
@@ -601,17 +1191,17 @@ function buildTextPopup(key, anchorEl, onClose) {
         tab.style.cssText = `
           padding: 5px 10px 6px; border: none; border-bottom: 2px solid;
           margin-bottom: -1px;
-          font-size: 11px; font-weight: 600; cursor: pointer; letter-spacing: 0.06em;
+          font-size: ${v("text-xs")}; font-weight: 600; cursor: pointer; letter-spacing: 0.06em;
           background: transparent;
-          border-bottom-color: ${isActive ? accent2() : "transparent"};
-          color: ${isActive ? "#fff" : "rgba(255,255,255,0.3)"};
-          transition: color 0.15s, border-color 0.15s;
+          border-bottom-color: ${isActive ? v("accent") : "transparent"};
+          color: ${isActive ? v("fg-strong") : v("fg-faint")};
+          transition: color ${v("duration-fast")} ${v("ease")}, border-color ${v("duration-fast")} ${v("ease")};
         `;
         tab.addEventListener("mouseenter", () => {
-          if (!isActive) tab.style.color = "rgba(255,255,255,0.6)";
+          if (!isActive) tab.style.color = v("fg");
         });
         tab.addEventListener("mouseleave", () => {
-          if (!isActive) tab.style.color = "rgba(255,255,255,0.3)";
+          if (!isActive) tab.style.color = v("fg-faint");
         });
         tab.addEventListener("click", () => {
           const current = wrap.querySelector("textarea");
@@ -649,8 +1239,8 @@ function buildTextPopup(key, anchorEl, onClose) {
   const renderTextarea = (isInit = false) => {
     if (!isInit && textarea) {
       textarea.value = getValue(key, activeLang) || anchorEl.textContent?.trim() || "";
-      textarea.style.borderColor = `${accent2()}66`;
-      textarea.style.background = "rgba(255,255,255,0.05)";
+      textarea.style.borderColor = v("accent-ring");
+      textarea.style.background = v("surface-hover");
       attachInputHandler();
       return;
     }
@@ -660,23 +1250,13 @@ function buildTextPopup(key, anchorEl, onClose) {
     textarea.rows = 4;
     textarea.placeholder = "Enter text\u2026";
     textarea.style.cssText = `
-      width: 100%; box-sizing: border-box;
-      background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.9);
-      border: 1px solid rgba(255,255,255,0.07); border-radius: 10px;
-      padding: 10px 12px;
-      font-size: 13px; font-family: inherit; resize: none; outline: none;
-      transition: border-color 0.18s, background 0.18s;
+      ${input()}
+      border-radius: ${v("radius")};
+      padding: 10px ${v("space-3")};
+      font-family: inherit; resize: none;
       line-height: 1.55;
-      caret-color: ${accent2()};
     `;
-    textarea.addEventListener("focus", () => {
-      textarea.style.borderColor = `${accent2()}66`;
-      textarea.style.background = "rgba(255,255,255,0.05)";
-    });
-    textarea.addEventListener("blur", () => {
-      textarea.style.borderColor = "rgba(255,255,255,0.07)";
-      textarea.style.background = "rgba(255,255,255,0.03)";
-    });
+    attachInputFocus(textarea);
     attachInputHandler();
     if (footerEl) {
       wrap.insertBefore(textarea, footerEl);
@@ -752,31 +1332,21 @@ function buildLinkPopup(key, anchorEl, onClose) {
     };
   };
   const inputStyle = `
-    width: 100%; box-sizing: border-box;
-    background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.9);
-    border: 1px solid rgba(255,255,255,0.07); border-radius: 10px;
-    padding: 9px 12px;
-    font-size: 13px; font-family: inherit; outline: none;
-    transition: border-color 0.18s, background 0.18s;
-    caret-color: ${accent2()};
+    ${input()}
+    border-radius: ${v("radius")};
+    padding: 9px ${v("space-3")};
+    font-family: inherit;
   `;
-  const makeLabelled = (text, input) => {
+  const makeLabelled = (text, input2) => {
     const field = document.createElement("div");
     field.style.cssText = `display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px;`;
     const lab = document.createElement("div");
     lab.textContent = text;
-    lab.style.cssText = `font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.35);`;
-    input.style.cssText = inputStyle;
-    input.addEventListener("focus", () => {
-      input.style.borderColor = `${accent2()}66`;
-      input.style.background = "rgba(255,255,255,0.05)";
-    });
-    input.addEventListener("blur", () => {
-      input.style.borderColor = "rgba(255,255,255,0.07)";
-      input.style.background = "rgba(255,255,255,0.03)";
-    });
+    lab.style.cssText = label();
+    input2.style.cssText = inputStyle;
+    attachInputFocus(input2);
     field.appendChild(lab);
-    field.appendChild(input);
+    field.appendChild(input2);
     return field;
   };
   const labelInput = document.createElement("input");
@@ -791,7 +1361,7 @@ function buildLinkPopup(key, anchorEl, onClose) {
   hrefInput.value = current.href;
   if (langs.length > 1) {
     const tabs = document.createElement("div");
-    tabs.style.cssText = `display: flex; gap: 0; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06);`;
+    tabs.style.cssText = `display: flex; gap: 0; margin-bottom: ${v("space-3")}; border-bottom: 1px solid ${v("border")};`;
     const renderTabs2 = () => {
       tabs.innerHTML = "";
       langs.forEach((lang) => {
@@ -801,11 +1371,11 @@ function buildLinkPopup(key, anchorEl, onClose) {
         tab.style.cssText = `
           padding: 5px 10px 6px; border: none; border-bottom: 2px solid;
           margin-bottom: -1px;
-          font-size: 11px; font-weight: 600; cursor: pointer; letter-spacing: 0.06em;
+          font-size: ${v("text-xs")}; font-weight: 600; cursor: pointer; letter-spacing: 0.06em;
           background: transparent;
-          border-bottom-color: ${isActive ? accent2() : "transparent"};
-          color: ${isActive ? "#fff" : "rgba(255,255,255,0.3)"};
-          transition: color 0.15s, border-color 0.15s;
+          border-bottom-color: ${isActive ? v("accent") : "transparent"};
+          color: ${isActive ? v("fg-strong") : v("fg-faint")};
+          transition: color ${v("duration-fast")} ${v("ease")}, border-color ${v("duration-fast")} ${v("ease")};
         `;
         tab.addEventListener("click", () => {
           stage(activeLang);
@@ -823,12 +1393,12 @@ function buildLinkPopup(key, anchorEl, onClose) {
   }
   wrap.appendChild(makeLabelled("Label", labelInput));
   wrap.appendChild(makeLabelled("URL", hrefInput));
-  const hint = document.createElement("div");
-  hint.style.cssText = `font-size:11px;color:rgba(255,255,255,0.28);margin:-4px 0 10px;line-height:1.45;`;
-  hint.textContent = langs.length > 1 ? "Relative (/start), #anchor, mailto: and tel: all work. The URL is shared across languages." : "Relative (/start), #anchor, mailto: and tel: all work.";
-  wrap.appendChild(hint);
+  const hint2 = document.createElement("div");
+  hint2.style.cssText = `${hint()} margin:-${v("space-1")} 0 10px;`;
+  hint2.textContent = langs.length > 1 ? "Relative (/start), #anchor, mailto: and tel: all work. The URL is shared across languages." : "Relative (/start), #anchor, mailto: and tel: all work.";
+  wrap.appendChild(hint2);
   const warn = document.createElement("div");
-  warn.style.cssText = `font-size:11px;color:#f0a; margin:-4px 0 10px; display:none;`;
+  warn.style.cssText = `font-size:${v("text-xs")};color:${v("danger")}; margin:-${v("space-1")} 0 10px; display:none;`;
   wrap.appendChild(warn);
   const paint = () => {
     labelNodes.forEach((n) => n.textContent = labelInput.value);
@@ -885,8 +1455,8 @@ function buildImagePopup(key, anchorEl, onClose) {
   if (currentSrc && !currentSrc.startsWith("data:")) {
     const previewWrap = document.createElement("div");
     previewWrap.style.cssText = `
-      border-radius: 10px; overflow: hidden; margin-bottom: 10px;
-      border: 1px solid rgba(255,255,255,0.06);
+      border-radius: ${v("radius")}; overflow: hidden; margin-bottom: 10px;
+      border: 1px solid ${v("border")};
       position: relative; height: 100px;
     `;
     const previewImg = document.createElement("img");
@@ -896,8 +1466,8 @@ function buildImagePopup(key, anchorEl, onClose) {
     previewLabel.textContent = "Current";
     previewLabel.style.cssText = `
       position: absolute; bottom: 0; left: 0; right: 0;
-      font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 0.04em;
-      padding: 16px 8px 6px;
+      font-size: 10px; color: rgba(255,255,255,0.85); letter-spacing: 0.04em;
+      padding: ${v("space-4")} ${v("space-2")} 6px;
       background: linear-gradient(transparent, rgba(0,0,0,0.55));
     `;
     previewWrap.appendChild(previewImg);
@@ -907,23 +1477,23 @@ function buildImagePopup(key, anchorEl, onClose) {
   const dropZone = document.createElement("label");
   dropZone.style.cssText = `
     display: flex; flex-direction: column; align-items: center; justify-content: center;
-    gap: 8px;
-    border: 1.5px dashed rgba(255,255,255,0.1); border-radius: 10px;
-    padding: 24px 20px;
+    gap: ${v("space-2")};
+    border: 1.5px dashed ${v("border-strong")}; border-radius: ${v("radius")};
+    padding: ${v("space-6")} ${v("space-5")};
     cursor: pointer;
-    transition: border-color 0.18s, background 0.18s;
-    background: rgba(255,255,255,0.015);
+    transition: border-color ${v("duration-fast")} ${v("ease")}, background ${v("duration-fast")} ${v("ease")};
+    background: ${v("surface-raised")};
   `;
   const uploadIcon = document.createElement("div");
-  uploadIcon.style.cssText = `color: rgba(255,255,255,0.35); transition: color 0.18s;`;
+  uploadIcon.style.cssText = `color: ${v("fg-muted")}; transition: color ${v("duration-fast")} ${v("ease")};`;
   uploadIcon.innerHTML = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
     <path d="M12 15V3m0 0L8 7m4-4l4 4M2 17l.621 2.485A2 2 0 004.561 21h14.878a2 2 0 001.94-1.515L22 17"/>
   </svg>`;
   const dropText = document.createElement("div");
   dropText.style.cssText = `text-align: center;`;
   dropText.innerHTML = `
-    <div style="font-size:12px;font-weight:500;color:rgba(255,255,255,0.5);">Drop an image</div>
-    <div style="font-size:11px;color:rgba(255,255,255,0.25);margin-top:2px;">or click to browse</div>
+    <div style="font-size:${v("text-sm")};font-weight:500;color:${v("fg-muted")};">Drop an image</div>
+    <div style="font-size:${v("text-xs")};color:${v("fg-faint")};margin-top:2px;">or click to browse</div>
   `;
   dropZone.appendChild(uploadIcon);
   dropZone.appendChild(dropText);
@@ -933,18 +1503,18 @@ function buildImagePopup(key, anchorEl, onClose) {
   fileInput.style.display = "none";
   dropZone.appendChild(fileInput);
   const statusWrap = document.createElement("div");
-  statusWrap.style.cssText = `margin-top: 8px; min-height: 18px;`;
+  statusWrap.style.cssText = `margin-top: ${v("space-2")}; min-height: 18px;`;
   const statusMsg = document.createElement("p");
-  statusMsg.style.cssText = `font-size: 11px; color: rgba(255,255,255,0.35); margin: 0; text-align: center; transition: color 0.2s;`;
+  statusMsg.style.cssText = `font-size: ${v("text-xs")}; color: ${v("fg-muted")}; margin: 0; text-align: center; transition: color ${v("duration")} ${v("ease")};`;
   const progressBar = document.createElement("div");
   progressBar.style.cssText = `
-    height: 2px; border-radius: 2px; background: rgba(255,255,255,0.05);
+    height: 2px; border-radius: 2px; background: ${v("surface-raised")};
     overflow: hidden; margin-top: 6px; display: none;
   `;
   const progressFill = document.createElement("div");
   progressFill.style.cssText = `
-    height: 100%; border-radius: 2px; background: ${accent2()};
-    width: 0%; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    height: 100%; border-radius: 2px; background: ${v("accent")};
+    width: 0%; transition: width ${v("duration-slow")} ${v("ease-out")};
   `;
   progressBar.appendChild(progressFill);
   statusWrap.appendChild(statusMsg);
@@ -952,20 +1522,20 @@ function buildImagePopup(key, anchorEl, onClose) {
   const handleFile = async (file) => {
     if (!file.type.startsWith("image/")) {
       statusMsg.textContent = "Only image files are supported";
-      statusMsg.style.color = "#f87171";
+      statusMsg.style.color = v("danger");
       return;
     }
     const maxMb = 10;
     if (file.size > maxMb * 1024 * 1024) {
       statusMsg.textContent = `File too large (max ${maxMb}MB)`;
-      statusMsg.style.color = "#f87171";
+      statusMsg.style.color = v("danger");
       return;
     }
-    dropZone.style.borderColor = `${accent2()}55`;
-    dropZone.style.background = `${accent2()}0a`;
-    uploadIcon.style.color = accent2();
+    dropZone.style.borderColor = v("accent-ring");
+    dropZone.style.background = v("accent-soft");
+    uploadIcon.style.color = v("accent");
     statusMsg.textContent = "Uploading\u2026";
-    statusMsg.style.color = "rgba(255,255,255,0.45)";
+    statusMsg.style.color = v("fg-muted");
     progressBar.style.display = "block";
     progressFill.style.width = "0%";
     try {
@@ -989,16 +1559,16 @@ function buildImagePopup(key, anchorEl, onClose) {
       }
       setTimeout(() => {
         statusMsg.textContent = "Done";
-        statusMsg.style.color = "#4ade80";
+        statusMsg.style.color = v("success");
         setTimeout(onClose, 600);
       }, 200);
     } catch {
       progressBar.style.display = "none";
       statusMsg.textContent = "Upload failed \u2014 try again";
-      statusMsg.style.color = "#f87171";
-      dropZone.style.borderColor = "rgba(255,255,255,0.1)";
-      dropZone.style.background = "rgba(255,255,255,0.015)";
-      uploadIcon.style.color = "rgba(255,255,255,0.35)";
+      statusMsg.style.color = v("danger");
+      dropZone.style.borderColor = v("border-strong");
+      dropZone.style.background = v("surface-raised");
+      uploadIcon.style.color = v("fg-muted");
     }
   };
   fileInput.addEventListener("change", () => {
@@ -1008,35 +1578,35 @@ function buildImagePopup(key, anchorEl, onClose) {
     e.preventDefault();
     if (!dragover) {
       dragover = true;
-      dropZone.style.borderColor = `${accent2()}88`;
-      dropZone.style.background = `${accent2()}0d`;
-      uploadIcon.style.color = accent2();
+      dropZone.style.borderColor = v("accent-ring");
+      dropZone.style.background = v("accent-soft");
+      uploadIcon.style.color = v("accent");
     }
   });
   dropZone.addEventListener("dragleave", () => {
     dragover = false;
-    dropZone.style.borderColor = "rgba(255,255,255,0.1)";
-    dropZone.style.background = "rgba(255,255,255,0.015)";
-    uploadIcon.style.color = "rgba(255,255,255,0.35)";
+    dropZone.style.borderColor = v("border-strong");
+    dropZone.style.background = v("surface-raised");
+    uploadIcon.style.color = v("fg-muted");
   });
   dropZone.addEventListener("drop", (e) => {
     e.preventDefault();
     dragover = false;
-    dropZone.style.borderColor = "rgba(255,255,255,0.1)";
-    dropZone.style.background = "rgba(255,255,255,0.015)";
+    dropZone.style.borderColor = v("border-strong");
+    dropZone.style.background = v("surface-raised");
     const file = e.dataTransfer?.files[0];
     if (file) handleFile(file);
   });
   dropZone.addEventListener("mouseenter", () => {
     if (!dragover) {
-      dropZone.style.borderColor = "rgba(255,255,255,0.18)";
-      dropZone.style.background = "rgba(255,255,255,0.03)";
+      dropZone.style.borderColor = v("border-strong");
+      dropZone.style.background = v("surface-hover");
     }
   });
   dropZone.addEventListener("mouseleave", () => {
     if (!dragover) {
-      dropZone.style.borderColor = "rgba(255,255,255,0.1)";
-      dropZone.style.background = "rgba(255,255,255,0.015)";
+      dropZone.style.borderColor = v("border-strong");
+      dropZone.style.background = v("surface-raised");
     }
   });
   wrap.appendChild(dropZone);
@@ -1047,67 +1617,246 @@ function makeCloseButton(onClose) {
   const btn = document.createElement("button");
   btn.style.cssText = `
     display: flex; align-items: center; justify-content: center;
-    width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
-    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
-    cursor: pointer; color: rgba(255,255,255,0.35); padding: 0;
-    transition: background 0.15s, color 0.15s;
+    width: 24px; height: 24px; border-radius: ${v("radius-sm")}; flex-shrink: 0;
+    background: ${v("surface-raised")}; border: 1px solid ${v("border")};
+    cursor: pointer; color: ${v("fg-muted")}; padding: 0;
+    transition: background ${v("duration-fast")} ${v("ease")}, color ${v("duration-fast")} ${v("ease")};
   `;
   btn.innerHTML = `<svg width="9" height="9" viewBox="0 0 10 10" fill="none">
     <path d="M1 1l8 8M9 1L1 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
   </svg>`;
-  btn.addEventListener("mouseenter", () => {
-    btn.style.background = "rgba(255,255,255,0.08)";
-    btn.style.color = "rgba(255,255,255,0.75)";
-  });
-  btn.addEventListener("mouseleave", () => {
-    btn.style.background = "rgba(255,255,255,0.04)";
-    btn.style.color = "rgba(255,255,255,0.35)";
-  });
+  attachHover(btn, { color: v("fg") });
   btn.addEventListener("click", onClose);
   return btn;
 }
-function makePrimaryButton(label, color) {
+function makePrimaryButton(label2, color) {
   const btn = document.createElement("button");
-  btn.textContent = label;
+  markUi(btn);
+  btn.textContent = label2;
   btn.style.cssText = `
-    padding: 7px 16px; border-radius: 8px; border: none; cursor: pointer;
-    background: #fff; color: #0c0c0e;
-    font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
-    transition: opacity 0.15s, transform 0.1s cubic-bezier(0.2, 0, 0, 1);
+    padding: 7px ${v("space-4")}; border-radius: ${v("radius-sm")}; border: none; cursor: pointer;
+    background: ${v("accent")}; color: ${v("accent-fg")};
+    font-size: ${v("text-sm")}; font-weight: 600; letter-spacing: 0.01em;
+    transition: opacity ${v("duration-fast")} ${v("ease")}, transform ${v("duration-fast")} ${v("ease")};
   `;
   btn.addEventListener("mouseenter", () => btn.style.opacity = "0.88");
   btn.addEventListener("mouseleave", () => btn.style.opacity = "1");
+  attachPress(btn);
   return btn;
 }
 function applyPopupStyles(el) {
+  markUi(el);
   el.style.cssText = `
+    ${surface(2)}
     position: absolute;
-    z-index: 2147483646;
+    z-index: ${v("z-panel")};
     width: 320px;
-    background: rgba(14, 14, 16, 0.97);
-    backdrop-filter: blur(24px) saturate(180%);
-    -webkit-backdrop-filter: blur(24px) saturate(180%);
-    border: 1px solid rgba(255,255,255,0.07);
-    border-radius: 14px;
+    box-shadow: ${v("shadow-lg")};
     padding: 14px;
-    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5), 0 24px 64px rgba(0,0,0,0.4);
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    animation: cancia-popup-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
+    font-family: ${v("font")};
+    opacity: 0;
+    transform: scale(0.93);
+    transition: opacity ${v("duration")} ${v("ease")}, transform ${v("duration")} ${v("ease")};
   `;
 }
+function buildRichPopup(key, anchorEl, onClose) {
+  const langs = state.config?.languages ?? ["en"];
+  let activeLang = state.activeLang || langs[0];
+  const wrap = document.createElement("div");
+  wrap.dataset.canciaPopup = "1";
+  applyPopupStyles(wrap);
+  wrap.style.width = "460px";
+  wrap.appendChild(buildHeader(key, onClose));
+  const rowsWrap = document.createElement("div");
+  rowsWrap.style.cssText = `display: flex; flex-direction: column; gap: ${v("space-2")}; max-height: 46vh; overflow-y: auto;`;
+  wrap.appendChild(rowsWrap);
+  let rows = [];
+  function initialRows() {
+    const stored = getValue(key, activeLang);
+    if (stored) {
+      const blocks = parseRichValue(stored);
+      if (blocks && blocks.length) return portableTextToRows(blocks);
+      if (blocks && blocks.length === 0) return [{ text: "", style: "normal" }];
+    }
+    const authored = domToRows(anchorEl);
+    return authored.length ? authored : [{ text: "", style: "normal" }];
+  }
+  function makeRow(initial) {
+    const row = document.createElement("div");
+    row.style.cssText = `display: flex; gap: 6px; align-items: flex-start;`;
+    const main = document.createElement("div");
+    main.style.cssText = `flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px;`;
+    const ta = document.createElement("textarea");
+    ta.value = initial.text;
+    ta.rows = 2;
+    ta.placeholder = "Text \u2014 **bold**, *italic*, [label](https://\u2026)";
+    ta.style.cssText = `
+      ${input()}
+      border-radius: ${v("radius")};
+      padding: 8px 10px;
+      font-family: inherit; resize: vertical;
+      min-height: 46px; line-height: 1.55;
+    `;
+    attachInputFocus(ta);
+    ta.addEventListener("input", commit);
+    const controls = document.createElement("div");
+    controls.style.cssText = `display: flex; gap: 6px;`;
+    const styleSel = document.createElement("select");
+    styleSel.style.cssText = `${input()} width: auto; flex: 1; padding: 4px 8px; font-size: ${v("text-xs")}; cursor: pointer;`;
+    for (const [value, labelText] of [
+      ["normal", "Normal"],
+      ["h2", "Heading 2"],
+      ["h3", "Heading 3"],
+      ["blockquote", "Quote"]
+    ]) {
+      const o = document.createElement("option");
+      o.value = value;
+      o.textContent = labelText;
+      if (initial.style === value) o.selected = true;
+      styleSel.appendChild(o);
+    }
+    styleSel.addEventListener("change", commit);
+    const listSel = document.createElement("select");
+    listSel.style.cssText = styleSel.style.cssText;
+    for (const [value, labelText] of [
+      ["", "No list"],
+      ["bullet", "Bulleted"],
+      ["number", "Numbered"]
+    ]) {
+      const o = document.createElement("option");
+      o.value = value;
+      o.textContent = labelText;
+      if ((initial.listItem ?? "") === value) o.selected = true;
+      listSel.appendChild(o);
+    }
+    listSel.addEventListener("change", commit);
+    controls.appendChild(styleSel);
+    controls.appendChild(listSel);
+    main.appendChild(ta);
+    main.appendChild(controls);
+    const removeBtn = document.createElement("button");
+    removeBtn.type = "button";
+    removeBtn.textContent = "\xD7";
+    removeBtn.title = "Remove this block";
+    removeBtn.style.cssText = `
+      ${button("ghost")}
+      flex-shrink: 0; height: auto; padding: 6px 9px;
+      font-size: 15px; line-height: 1; color: ${v("fg-faint")};
+    `;
+    attachHover(removeBtn);
+    removeBtn.addEventListener("click", () => {
+      if (rows.length === 1) {
+        ta.value = "";
+        commit();
+        return;
+      }
+      rows = rows.filter((r) => r.el !== row);
+      row.remove();
+      commit();
+    });
+    row.appendChild(main);
+    row.appendChild(removeBtn);
+    return {
+      el: row,
+      read: () => {
+        const listItem = listSel.value;
+        return {
+          text: ta.value,
+          style: styleSel.value,
+          ...listItem ? { listItem } : {}
+        };
+      }
+    };
+  }
+  function commit() {
+    const docRows = rows.map((r) => r.read());
+    const meaningful = docRows.filter((r) => r.text.trim() !== "");
+    const blocks = meaningful.length ? rowsToPortableText(meaningful) : [];
+    setPending(key, activeLang, serializeRichValue(blocks));
+    onPendingChange();
+    renderRichToDom(anchorEl, blocks);
+  }
+  function renderRows() {
+    rowsWrap.replaceChildren();
+    rows = initialRows().map(makeRow);
+    for (const r of rows) rowsWrap.appendChild(r.el);
+  }
+  if (langs.length > 1) {
+    const tabs = document.createElement("div");
+    tabs.style.cssText = `display: flex; gap: 0; margin-bottom: ${v("space-3")}; border-bottom: 1px solid ${v("border")};`;
+    const renderTabs2 = () => {
+      tabs.replaceChildren();
+      for (const lang of langs) {
+        const isActive = lang === activeLang;
+        const tab = document.createElement("button");
+        tab.textContent = lang.toUpperCase();
+        tab.style.cssText = `
+          padding: 5px 10px 6px; border: none; border-bottom: 2px solid;
+          margin-bottom: -1px;
+          font-size: ${v("text-xs")}; font-weight: 600; cursor: pointer; letter-spacing: 0.06em;
+          background: transparent;
+          border-bottom-color: ${isActive ? v("accent") : "transparent"};
+          color: ${isActive ? v("fg-strong") : v("fg-faint")};
+        `;
+        tab.addEventListener("click", () => {
+          commit();
+          activeLang = lang;
+          state.activeLang = lang;
+          applyOverlay();
+          renderTabs2();
+          renderRows();
+        });
+        tabs.appendChild(tab);
+      }
+    };
+    renderTabs2();
+    wrap.insertBefore(tabs, rowsWrap);
+  }
+  renderRows();
+  const footer = document.createElement("div");
+  footer.dataset.canciaFooter = "1";
+  footer.style.cssText = `display: flex; justify-content: space-between; align-items: center; gap: ${v("space-2")}; margin-top: 10px;`;
+  const addBtn = document.createElement("button");
+  addBtn.type = "button";
+  addBtn.textContent = "+ Add block";
+  addBtn.style.cssText = `${button("ghost")} font-size: ${v("text-xs")};`;
+  attachHover(addBtn);
+  attachPress(addBtn);
+  addBtn.addEventListener("click", () => {
+    const r = makeRow({ text: "", style: "normal" });
+    rows.push(r);
+    rowsWrap.appendChild(r.el);
+    r.el.querySelector("textarea")?.focus();
+  });
+  const saveBtn = makePrimaryButton("Save", accent2());
+  saveBtn.dataset.canciaSave = "1";
+  saveBtn.title = "Save (\u2318S)";
+  saveBtn.addEventListener("click", () => {
+    commit();
+    onClose();
+  });
+  footer.appendChild(addBtn);
+  footer.appendChild(saveBtn);
+  wrap.appendChild(footer);
+  return wrap;
+}
 function openPopup(key, fieldType2, anchorEl, onClose) {
   closePopup();
   const done = () => {
     onClose();
     closePopup();
   };
-  const popup = fieldType2 === "image" ? buildImagePopup(key, anchorEl, done) : fieldType2 === "link" ? buildLinkPopup(key, anchorEl, done) : buildTextPopup(key, anchorEl, done);
+  const popup = fieldType2 === "image" ? buildImagePopup(key, anchorEl, done) : fieldType2 === "link" ? buildLinkPopup(key, anchorEl, done) : fieldType2 === "richtext" ? buildRichPopup(key, anchorEl, done) : buildTextPopup(key, anchorEl, done);
   document.body.appendChild(popup);
   popupEl = popup;
   const { top, left, origin } = getPopupPosition(anchorEl);
   popup.style.top = `${top}px`;
   popup.style.left = `${left}px`;
   popup.style.transformOrigin = origin;
+  requestAnimationFrame(() => {
+    popup.style.opacity = "1";
+    popup.style.transform = "scale(1)";
+  });
   outsideListener = (e) => {
     if (!popup.contains(e.target)) {
       closePopup();
@@ -1142,17 +1891,17 @@ function closePopup() {
   if (popupEl) {
     const el = popupEl;
     popupEl = null;
-    el.style.animation = "none";
-    el.style.transition = "opacity 0.18s cubic-bezier(0.4, 0, 1, 1), transform 0.18s cubic-bezier(0.4, 0, 1, 1)";
+    el.style.transition = `opacity ${v("duration-exit")} ${v("ease-out")}, transform ${v("duration-exit")} ${v("ease-out")}`;
     el.style.opacity = "0";
-    el.style.transform = "scale(0.96) translateY(3px)";
+    el.style.transform = "scale(0.93)";
     setTimeout(() => el.remove(), 200);
   }
 }
 
 // src/list-panel.ts
-var PANEL_Z = 2147483646;
-var BACKDROP_Z = 2147483646;
+var PANEL_Z = v("z-panel");
+var TOOLBAR_RESERVE = "100px";
+var BACKDROP_Z = v("z-overlay");
 var panelEl = null;
 var backdropEl = null;
 var styleInjected2 = false;
@@ -1165,6 +1914,7 @@ var currentOnTranslateEntry = null;
 function injectStyles2() {
   if (styleInjected2) return;
   styleInjected2 = true;
+  injectBaseStyles(state.config?.accentColor, state.config?.toolbarAccent === true);
   const s = document.createElement("style");
   s.textContent = `
     @keyframes cancia-panel-in {
@@ -1182,9 +1932,6 @@ function injectStyles2() {
   `;
   document.head.appendChild(s);
 }
-function accent3() {
-  return state.config?.accentColor ?? "#6366f1";
-}
 function escapeHtml(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
@@ -1230,9 +1977,9 @@ function derivePreview(schema, data) {
   let thumbnail = "";
   for (const f of schema.fields) {
     if (f.widget !== "image") continue;
-    const v = data[f.name];
-    if (typeof v === "string" && v.trim()) {
-      thumbnail = v.trim();
+    const v2 = data[f.name];
+    if (typeof v2 === "string" && v2.trim()) {
+      thumbnail = v2.trim();
       break;
     }
   }
@@ -1244,52 +1991,73 @@ function locales() {
 function buildShell(schema) {
   const panel = document.createElement("div");
   panel.dataset.canciaListPanel = "1";
+  markUi(panel);
   panel.style.cssText = `
+    ${surface(2)}
     position: fixed;
     top: 0; right: 0; bottom: 0;
+    padding-bottom: ${TOOLBAR_RESERVE};
     width: min(420px, 100vw);
-    background: #fff;
-    color: #1a1a1d;
+    color: ${v("fg")};
     z-index: ${PANEL_Z};
-    box-shadow: -8px 0 32px rgba(0,0,0,0.18);
+    border: 0;
+    border-left: 1px solid ${v("border")};
+    border-radius: 0;
+    box-shadow: ${v("shadow-lg")};
     display: flex;
     flex-direction: column;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    animation: cancia-panel-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    font-family: ${v("font")};
+    /* The fixed positioning above also makes this the containing block for the
+       absolutely-positioned list view and the form view that slides in over
+       it; overflow:hidden clips both while they are off-stage. */
+    overflow: hidden;
+    animation: cancia-panel-in ${v("duration")} ${v("ease")} forwards;
   `;
-  panel.innerHTML = `
+  const listView = document.createElement("div");
+  listView.dataset.canciaListView = "1";
+  listView.style.cssText = `
+    position: absolute; inset: 0;
+    display: flex; flex-direction: column;
+    transition: transform ${v("duration")} ${v("ease")}, opacity ${v("duration")} ${v("ease")};
+  `;
+  listView.innerHTML = `
     <header style="
       display: flex; align-items: center; justify-content: space-between;
-      padding: 16px 20px;
-      border-bottom: 1px solid #eaeaea;
+      padding: ${v("space-4")} ${v("space-5")};
+      border-bottom: 1px solid ${v("border")};
     ">
       <div>
-        <div style="font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #777;">List</div>
-        <div style="font-size: 17px; font-weight: 600; margin-top: 2px;">${escapeHtml(schema.label)}</div>
+        <div style="font-size: ${v("text-xs")}; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: ${v("fg-muted")};">List</div>
+        <div style="font-size: 17px; font-weight: 600; margin-top: 2px; color: ${v("fg-strong")};">${escapeHtml(schema.label)}</div>
       </div>
       <button data-cancia-close style="
+        ${iconButton()}
         appearance: none; border: 0; background: transparent;
-        cursor: pointer; padding: 6px; border-radius: 6px;
-        color: #555; transition: background 0.12s, color 0.12s;
+        cursor: pointer;
       " aria-label="Close panel">
         <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
           <path d="M4 4l10 10M14 4L4 14"/>
         </svg>
       </button>
     </header>
+    <!-- No overflow-x here. This row holds one short tab per configured
+         locale \u2014 two or three at most \u2014 so a scroll container was solving a
+         problem that does not occur, while permanently costing a scrollbar
+         gutter and (on Windows, where scrollbars are not overlaid) a visible
+         bar under the tabs. If a site ever ships enough locales to overflow,
+         wrapping is the right answer, not scrolling. -->
     <div data-cancia-tabs style="
-      display: flex; gap: 4px;
-      padding: 8px 16px 0;
-      border-bottom: 1px solid #f3f3f3;
-      overflow-x: auto;
+      display: flex; flex-wrap: wrap; gap: ${v("space-1")};
+      padding: ${v("space-2")} ${v("space-4")} 0;
+      border-bottom: 1px solid ${v("border")};
     "></div>
-    <div style="padding: 12px 20px; border-bottom: 1px solid #f3f3f3;">
+    <div style="padding: ${v("space-3")} ${v("space-5")}; border-bottom: 1px solid ${v("border")};">
       <button data-cancia-add style="
-        appearance: none; border: 1px dashed ${accent3()}; background: ${accent3()}10;
-        color: ${accent3()}; font-weight: 600; font-size: 13px;
-        padding: 10px 14px; border-radius: 8px; width: 100%; cursor: pointer;
+        ${button("ghost")}
+        appearance: none; border: 1px dashed ${v("border-strong")}; background: ${v("accent-soft")};
+        color: ${v("accent")}; font-weight: 600; font-size: ${v("text-base")};
+        padding: 10px 14px; height: auto; width: 100%; cursor: pointer;
         display: flex; align-items: center; justify-content: center; gap: 6px;
-        transition: background 0.12s;
       ">
         <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
           <path d="M7 2v10M2 7h10"/>
@@ -1299,13 +2067,18 @@ function buildShell(schema) {
     </div>
     <div data-cancia-entries style="
       flex: 1; overflow-y: auto;
-      padding: 8px 12px 16px;
+      padding: ${v("space-2")} ${v("space-3")} ${v("space-4")};
     ">
-      <div data-cancia-loading style="text-align: center; padding: 32px 12px; color: #888; font-size: 13px;">Loading\u2026</div>
+      <div data-cancia-loading style="text-align: center; padding: 32px ${v("space-3")}; color: ${v("fg-muted")}; font-size: ${v("text-base")};">Loading\u2026</div>
     </div>
   `;
-  const body = panel.querySelector("[data-cancia-entries]");
-  const tabsRow = panel.querySelector("[data-cancia-tabs]");
+  panel.appendChild(listView);
+  const body = listView.querySelector("[data-cancia-entries]");
+  const tabsRow = listView.querySelector("[data-cancia-tabs]");
+  const closeBtn = listView.querySelector("[data-cancia-close]");
+  if (closeBtn) attachHover(closeBtn, { bg: v("surface-hover"), color: v("fg-strong") });
+  const addBtn = listView.querySelector("[data-cancia-add]");
+  if (addBtn) attachHover(addBtn, { bg: v("accent-soft") });
   return { panel, body, tabsRow };
 }
 function renderTabs(tabsRow, activeLocale, onSwitch) {
@@ -1321,22 +2094,22 @@ function renderTabs(tabsRow, activeLocale, onSwitch) {
     const isActive = loc === activeLocale;
     tab.style.cssText = `
       appearance: none; border: 0; background: transparent;
-      font-family: inherit; font-size: 12px; font-weight: 600;
+      font-family: inherit; font-size: ${v("text-sm")}; font-weight: 600;
       letter-spacing: 0.04em; text-transform: uppercase;
-      padding: 8px 10px 9px;
+      padding: ${v("space-2")} 10px 9px;
       cursor: ${isActive ? "default" : "pointer"};
-      color: ${isActive ? accent3() : "#777"};
-      border-bottom: 2px solid ${isActive ? accent3() : "transparent"};
+      color: ${isActive ? v("accent") : v("fg-muted")};
+      border-bottom: 2px solid ${isActive ? v("accent") : "transparent"};
       margin-bottom: -1px;
       transition: color 0.12s, border-color 0.12s;
     `;
     tab.textContent = loc;
     if (!isActive) {
       tab.addEventListener("mouseenter", () => {
-        tab.style.color = "#333";
+        tab.style.color = v("fg-strong");
       });
       tab.addEventListener("mouseleave", () => {
-        tab.style.color = "#777";
+        tab.style.color = v("fg-muted");
       });
       tab.addEventListener("click", () => onSwitch(loc));
     }
@@ -1365,7 +2138,7 @@ function renderEntries(body, schema, activeLocale, entriesInLocale, translations
   });
   if (rows.length === 0) {
     body.innerHTML = `
-      <div style="text-align: center; padding: 40px 12px; color: #888; font-size: 13px;">
+      <div style="text-align: center; padding: 40px ${v("space-3")}; color: ${v("fg-muted")}; font-size: ${v("text-base")};">
         No entries yet. Click "Add ${escapeHtml(schema.labelSingular.toLowerCase())}" above to create one.
       </div>
     `;
@@ -1391,7 +2164,7 @@ function renderEntries(body, schema, activeLocale, entriesInLocale, translations
       }
       const err = document.createElement("div");
       err.textContent = "Couldn't save the new order. Reverted.";
-      err.style.cssText = `text-align:center; padding:8px; color:#c0392b; font-size:12px;`;
+      err.style.cssText = `text-align:center; padding:${v("space-2")}; color:${v("danger")}; font-size:${v("text-sm")};`;
       body.insertBefore(err, body.firstChild);
       setTimeout(() => err.remove(), 3e3);
     }
@@ -1399,7 +2172,7 @@ function renderEntries(body, schema, activeLocale, entriesInLocale, translations
   rows.forEach((row) => {
     const isStub = row.entry === null;
     const wrap = document.createElement("div");
-    wrap.style.cssText = `display: flex; align-items: stretch; gap: 4px; margin-bottom: 6px;`;
+    wrap.style.cssText = `display: flex; align-items: stretch; gap: ${v("space-1")}; margin-bottom: 6px;`;
     const handle = document.createElement("div");
     handle.textContent = "\u22EE\u22EE";
     handle.title = "Drag to reorder";
@@ -1407,14 +2180,22 @@ function renderEntries(body, schema, activeLocale, entriesInLocale, translations
     handle.style.cssText = `
       cursor: grab; user-select: none;
       display: flex; align-items: center; justify-content: center;
-      color: #bbb; font-size: 13px; letter-spacing: -2px;
+      color: ${v("fg-faint")}; font-size: ${v("text-base")}; letter-spacing: -2px;
       padding: 0 2px; flex-shrink: 0;
+      transition: color 0.12s;
     `;
+    handle.addEventListener("mouseenter", () => {
+      handle.style.color = v("accent");
+    });
+    handle.addEventListener("mouseleave", () => {
+      handle.style.color = v("fg-faint");
+    });
     const item = document.createElement("button");
     item.style.cssText = `
-      appearance: none; border: 1px solid transparent; background: ${isStub ? "#fff8ee" : "#fafafa"};
+      appearance: none; border: 1px solid transparent;
+      background: ${isStub ? v("warning-soft") : v("surface-raised")};
       text-align: left; flex: 1; min-width: 0;
-      padding: 12px 14px; border-radius: 8px; cursor: pointer;
+      padding: ${v("space-3")} 14px; border-radius: ${v("radius-sm")}; cursor: pointer;
       transition: background 0.12s, border-color 0.12s, transform 0.12s;
       display: block;
     `;
@@ -1458,27 +2239,36 @@ function renderEntries(body, schema, activeLocale, entriesInLocale, translations
       const titleValue = row.entry.data[schema.titleField];
       const title = typeof titleValue === "string" && titleValue.trim().length > 0 ? titleValue : `(untitled ${schema.labelSingular.toLowerCase()})`;
       const { subtitle, thumbnail } = derivePreview(schema, row.entry.data);
+      const isDraftRow = !!schema.draftField && row.entry.data[schema.draftField] === true;
+      const draftBadge = isDraftRow ? `<span style="
+            flex-shrink: 0; margin-left: ${v("space-2")}; padding: 1px 6px;
+            font-size: 11px; font-weight: 600; line-height: 1.5;
+            border-radius: ${v("radius-sm")}; color: ${v("fg-muted")};
+            background: ${v("surface-raised")}; border: 1px solid ${v("border")};
+          ">Draft</span>` : "";
       const textCol = `
         <div style="min-width: 0; flex: 1;">
-          <div style="font-weight: 600; font-size: 14px; color: #1a1a1d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${escapeHtml(title)}</div>
-          ${subtitle ? `<div style="font-size: 12px; color: #666; margin-top: 4px; line-height: 1.4;">${escapeHtml(subtitle)}</div>` : ""}
+          <div style="display: flex; align-items: center;">
+            <span style="font-weight: 600; font-size: 14px; color: ${v("fg-strong")}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${escapeHtml(title)}</span>${draftBadge}
+          </div>
+          ${subtitle ? `<div style="font-size: ${v("text-sm")}; color: ${v("fg-muted")}; margin-top: ${v("space-1")}; line-height: 1.4;">${escapeHtml(subtitle)}</div>` : ""}
         </div>
       `;
       const thumb = thumbnail ? `<img src="${escapeHtml(thumbnail)}" alt="" loading="lazy" style="
             width: 44px; height: 44px; flex-shrink: 0; object-fit: cover;
-            border-radius: 6px; background: #eee; border: 1px solid #eaeaea;
+            border-radius: ${v("radius-sm")}; background: ${v("surface-raised")}; border: 1px solid ${v("border")};
           " onerror="this.style.display='none'" />` : "";
       item.innerHTML = `
-        <div style="display: flex; align-items: center; gap: 12px;">
+        <div style="display: flex; align-items: center; gap: ${v("space-3")};">
           ${thumb}${textCol}
         </div>
       `;
       item.addEventListener("mouseenter", () => {
-        item.style.background = "#f3f3f3";
-        item.style.borderColor = "#e3e3e3";
+        item.style.background = v("surface-hover");
+        item.style.borderColor = v("border-strong");
       });
       item.addEventListener("mouseleave", () => {
-        item.style.background = "#fafafa";
+        item.style.background = v("surface-raised");
         item.style.borderColor = "transparent";
       });
       item.addEventListener("click", () => currentOnEditEntry?.(row.entry, activeLocale));
@@ -1488,23 +2278,26 @@ function renderEntries(body, schema, activeLocale, entriesInLocale, translations
       const sourceTitleValue = sourceEntry?.data[schema.titleField];
       const sourceTitle = typeof sourceTitleValue === "string" && sourceTitleValue.trim().length > 0 ? sourceTitleValue : row.id;
       item.innerHTML = `
-        <div style="display: flex; align-items: center; gap: 8px;">
+        <div style="display: flex; align-items: center; gap: ${v("space-2")};">
           <span style="
             font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
-            background: #f5b400; color: #fff;
+            /* The light theme's warning token is a mid amber (#d97706), dark
+               enough to carry WHITE text \u2014 so the chip now uses accent-fg and
+               the near-black literal that used to live here is gone. */
+            background: ${v("warning")}; color: ${v("accent-fg")};
             padding: 2px 6px; border-radius: 4px;
           ">Not translated</span>
-          <span style="font-size: 11px; color: #888;">from ${escapeHtml(sourceLocale)}</span>
+          <span style="font-size: ${v("text-xs")}; color: ${v("fg-muted")};">from ${escapeHtml(sourceLocale)}</span>
         </div>
-        <div style="font-weight: 600; font-size: 14px; color: #6b5616; margin-top: 6px;">${escapeHtml(sourceTitle)}</div>
-        <div style="font-size: 11px; color: #b08800; margin-top: 4px;">Click to translate into ${escapeHtml(activeLocale)}</div>
+        <div style="font-weight: 600; font-size: 14px; color: ${v("fg-strong")}; margin-top: 6px;">${escapeHtml(sourceTitle)}</div>
+        <div style="font-size: ${v("text-xs")}; color: ${v("warning")}; margin-top: ${v("space-1")};">Click to translate into ${escapeHtml(activeLocale)}</div>
       `;
       item.addEventListener("mouseenter", () => {
-        item.style.background = "#fff2d5";
-        item.style.borderColor = "#f5d27a";
+        item.style.background = "rgba(217, 119, 6, 0.18)";
+        item.style.borderColor = v("warning");
       });
       item.addEventListener("mouseleave", () => {
-        item.style.background = "#fff8ee";
+        item.style.background = v("warning-soft");
         item.style.borderColor = "transparent";
       });
       item.addEventListener(
@@ -1523,11 +2316,12 @@ async function openListPanel(opts) {
   injectStyles2();
   const backdrop = document.createElement("div");
   backdrop.dataset.canciaPanelBackdrop = "1";
+  markUi(backdrop);
   backdrop.style.cssText = `
     position: fixed; inset: 0;
-    background: rgba(10,10,12,0.32);
+    background: rgba(10,10,12,0.20);
     z-index: ${BACKDROP_Z};
-    animation: cancia-backdrop-in 0.18s ease-out forwards;
+    animation: cancia-backdrop-in ${v("duration")} ${v("ease-out")} forwards;
   `;
   backdrop.addEventListener("click", () => closeListPanel());
   document.body.appendChild(backdrop);
@@ -1577,7 +2371,7 @@ async function refreshListPanel() {
   } catch (err) {
     if (!panelEl) return;
     body.innerHTML = `
-      <div style="text-align: center; padding: 32px 12px; color: #c0392b; font-size: 13px;">
+      <div style="text-align: center; padding: 32px ${v("space-3")}; color: ${v("danger")}; font-size: ${v("text-base")};">
         Failed to load entries: ${escapeHtml(err instanceof Error ? err.message : String(err))}
       </div>
     `;
@@ -1585,7 +2379,7 @@ async function refreshListPanel() {
 }
 function closeListPanel() {
   if (panelEl) {
-    panelEl.style.animation = "cancia-panel-out 0.18s cubic-bezier(0.7, 0, 0.84, 0) forwards";
+    panelEl.style.animation = `cancia-panel-out ${v("duration-exit")} ${v("ease-out")} forwards`;
     const el = panelEl;
     setTimeout(() => el.remove(), 180);
     panelEl = null;
@@ -1593,7 +2387,7 @@ function closeListPanel() {
   if (backdropEl) {
     const el = backdropEl;
     el.style.opacity = "0";
-    el.style.transition = "opacity 0.18s ease-out";
+    el.style.transition = `opacity ${v("duration-exit")} ${v("ease-out")}`;
     setTimeout(() => el.remove(), 180);
     backdropEl = null;
   }
@@ -1607,65 +2401,146 @@ function closeListPanel() {
 function isListPanelOpen() {
   return panelEl !== null;
 }
+function listViewEl() {
+  return panelEl?.querySelector("[data-cancia-list-view]") ?? null;
+}
+function pushPanelView(view) {
+  const panel = panelEl;
+  const list = listViewEl();
+  if (!panel || !list) return false;
+  view.style.position = "absolute";
+  view.style.inset = "0";
+  view.style.display = "flex";
+  view.style.flexDirection = "column";
+  view.style.background = v("surface-3");
+  view.style.transform = "translateX(100%)";
+  view.style.transition = `transform ${v("duration")} ${v("ease")}`;
+  panel.appendChild(view);
+  void view.offsetWidth;
+  view.style.transform = "translateX(0)";
+  list.style.transition = `transform ${v("duration")} ${v("ease")}, opacity ${v("duration")} ${v("ease")}`;
+  void list.offsetWidth;
+  list.style.transform = "translateX(-25%)";
+  list.style.opacity = "0.4";
+  list.setAttribute("aria-hidden", "true");
+  list.style.pointerEvents = "none";
+  return true;
+}
+function popPanelView(view) {
+  const list = listViewEl();
+  view.style.transition = `transform ${v("duration-exit")} ${v("ease-out")}`;
+  view.style.transform = "translateX(100%)";
+  if (list) {
+    list.style.transition = `transform ${v("duration-exit")} ${v("ease-out")}, opacity ${v("duration-exit")} ${v("ease-out")}`;
+    list.style.transform = "translateX(0)";
+    list.style.opacity = "1";
+    list.removeAttribute("aria-hidden");
+    list.style.pointerEvents = "";
+  }
+  let removed = false;
+  const done = () => {
+    if (removed) return;
+    removed = true;
+    view.remove();
+  };
+  view.addEventListener("transitionend", done, { once: true });
+  setTimeout(done, 400);
+}
 
 // src/entry-modal.ts
 import {
-  rowsToPortableText,
-  portableTextToRows,
-  portableTextSubsetSchema,
-  PT_STYLES
+  rowsToPortableText as rowsToPortableText2,
+  portableTextToRows as portableTextToRows2,
+  portableTextSubsetSchema as portableTextSubsetSchema2,
+  PT_STYLES as PT_STYLES2
 } from "@cancia/astro/richtext";
 import { slugify } from "@cancia/astro/schema";
-var MODAL_Z = 2147483647;
-var BACKDROP_Z2 = 2147483646;
+var MODAL_Z = v("z-bar");
+var BACKDROP_Z2 = v("z-panel");
 var modalEl = null;
 var backdropEl2 = null;
 var escListener = null;
 var styleInjected3 = false;
+var mountedInPanel = false;
 function injectStyles3() {
   if (styleInjected3) return;
   styleInjected3 = true;
+  injectBaseStyles(state.config?.accentColor, state.config?.toolbarAccent === true);
   const s = document.createElement("style");
   s.textContent = `
-    @keyframes cancia-modal-in {
-      from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.985); }
-      to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
-    }
-    @keyframes cancia-modal-out {
-      from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
-      to   { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.985); }
-    }
     .cancia-form-input:focus,
     .cancia-form-textarea:focus,
     .cancia-form-select:focus {
-      border-color: var(--cancia-accent-border, rgba(99,102,241,0.6));
-      background: rgba(255,255,255,0.05);
+      border-color: var(--cancia-accent-border, ${v("accent-ring")});
+      background: ${v("surface-hover")};
       outline: none;
     }
     .cancia-form-input::placeholder,
     .cancia-form-textarea::placeholder {
-      color: rgba(255,255,255,0.25);
+      color: ${v("fg-faint")};
     }
     .cancia-form-select option {
-      background: #15151a;
-      color: rgba(255,255,255,0.9);
+      /* An <option> is painted by the OS, so it cannot be translucent \u2014 this
+         stays an opaque hex matching surface-3 (now white). */
+      background: #ffffff;
+      color: ${v("fg")};
     }
     .cancia-field-error {
-      color: #ff8786;
-      font-size: 11px;
+      color: ${v("danger")};
+      font-size: ${v("text-xs")};
       margin-top: 5px;
       line-height: 1.35;
     }
   `;
   document.head.appendChild(s);
 }
-function accent4() {
-  return state.config?.accentColor ?? "#6366f1";
+function accent3() {
+  const useAccent = state.config?.toolbarAccent === true;
+  return (useAccent ? state.config?.accentColor : void 0) ?? "#18181b";
 }
 function accentBorder() {
-  const a = accent4();
+  const a = accent3();
   if (/^#[0-9a-f]{6}$/i.test(a)) return `${a}99`;
-  return "rgba(99,102,241,0.6)";
+  return "rgba(24,24,27,0.28)";
+}
+function attachRowReveal(row, targets) {
+  const apply = () => {
+    const on = row.dataset.canciaHover === "1" || row.contains(document.activeElement);
+    for (const t of targets) {
+      t.style.opacity = on ? "1" : "0";
+      if (t.dataset.canciaCollapsible === "1") {
+        t.style.maxHeight = on ? "40px" : "0";
+      }
+    }
+  };
+  row.addEventListener("pointerenter", () => {
+    row.dataset.canciaHover = "1";
+    apply();
+  });
+  row.addEventListener("pointerleave", () => {
+    row.dataset.canciaHover = "0";
+    apply();
+  });
+  row.addEventListener("focusin", apply);
+  row.addEventListener("focusout", () => requestAnimationFrame(apply));
+  apply();
+}
+function humanise(label2) {
+  if (!label2) return label2;
+  if (/\s/.test(label2)) return label2;
+  const PROPER = {
+    linkedin: "LinkedIn",
+    github: "GitHub",
+    youtube: "YouTube",
+    tiktok: "TikTok",
+    whatsapp: "WhatsApp",
+    facebook: "Facebook",
+    instagram: "Instagram"
+  };
+  const exact = PROPER[label2.toLowerCase()];
+  if (exact) return exact;
+  const spaced = label2.replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
 }
 function isoToLocalInput(iso) {
   if (!iso) return "";
@@ -1681,44 +2556,39 @@ function localInputToIso(local) {
   return d.toISOString();
 }
 var INPUT_BASE = `
-  width: 100%; box-sizing: border-box;
-  background: rgba(255,255,255,0.03);
-  color: rgba(255,255,255,0.9);
-  border: 1px solid rgba(255,255,255,0.07);
-  border-radius: 8px;
-  padding: 8px 11px;
-  font-size: 13px;
+  ${input()}
+  box-sizing: border-box;
   font-family: inherit;
   line-height: 1.5;
-  outline: none;
-  transition: border-color 0.18s, background 0.18s;
 `;
+var SELECT_CHEVRON = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2.5 3.75l2.5 2.5 2.5-2.5' stroke='%2371717a' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")`;
 var MAX_FIELD_DEPTH = 6;
 function renderField(field, initial, depth = 0) {
   const wrapper = document.createElement("div");
-  wrapper.style.cssText = `margin-bottom: 14px;`;
+  wrapper.style.cssText = `margin-bottom: ${v("space-4")};`;
   const labelRow = document.createElement("label");
   labelRow.style.cssText = `
+    ${label()}
     display: flex; align-items: baseline; justify-content: space-between;
-    gap: 8px;
-    font-size: 11px; font-weight: 600;
-    color: rgba(255,255,255,0.75);
-    letter-spacing: 0.04em;
+    gap: ${v("space-2")};
     margin-bottom: 5px;
   `;
   const labelText = document.createElement("span");
-  labelText.textContent = field.label;
-  if (field.required) {
-    const star = document.createElement("span");
-    star.textContent = " *";
-    star.style.color = "rgba(255,135,134,0.8)";
-    labelText.appendChild(star);
-  }
+  labelText.textContent = humanise(field.label);
   labelRow.appendChild(labelText);
+  if (!field.required) {
+    const opt = document.createElement("span");
+    opt.textContent = "Optional";
+    opt.style.cssText = `
+      font-size: ${v("text-xs")}; font-weight: 400;
+      color: ${v("fg-faint")}; text-transform: none; letter-spacing: normal;
+    `;
+    labelRow.appendChild(opt);
+  }
   if (field.label) wrapper.appendChild(labelRow);
   if (field.description) {
     const help = document.createElement("div");
-    help.style.cssText = `font-size: 11px; color: rgba(255,255,255,0.35); margin-bottom: 6px; line-height: 1.4;`;
+    help.style.cssText = `${hint()} margin-bottom: 6px;`;
     help.textContent = field.description;
     wrapper.appendChild(help);
   }
@@ -1769,7 +2639,7 @@ function renderField(field, initial, depth = 0) {
     case "textarea": {
       const ta = document.createElement("textarea");
       ta.className = "cancia-form-textarea";
-      ta.style.cssText = `${INPUT_BASE} resize: vertical; min-height: 110px; max-height: 320px; caret-color: ${accent4()};`;
+      ta.style.cssText = `${INPUT_BASE} resize: vertical; min-height: 110px; max-height: 320px; caret-color: ${v("accent")};`;
       ta.rows = 5;
       if (field.placeholder) ta.placeholder = field.placeholder;
       if (typeof initial === "string") ta.value = initial;
@@ -1782,10 +2652,10 @@ function renderField(field, initial, depth = 0) {
       row.style.cssText = `display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; padding: 6px 0;`;
       const cb = document.createElement("input");
       cb.type = "checkbox";
-      cb.style.cssText = `width: 16px; height: 16px; accent-color: ${accent4()};`;
+      cb.style.cssText = `width: 16px; height: 16px; accent-color: ${v("accent")};`;
       if (initial === true) cb.checked = true;
       const txt = document.createElement("span");
-      txt.style.cssText = `font-size: 13px; color: rgba(255,255,255,0.7);`;
+      txt.style.cssText = `font-size: ${v("text-base")}; color: ${v("fg")};`;
       txt.textContent = field.placeholder ?? `Enable ${field.label.toLowerCase()}`;
       row.appendChild(cb);
       row.appendChild(txt);
@@ -1796,7 +2666,7 @@ function renderField(field, initial, depth = 0) {
     case "select": {
       const sel = document.createElement("select");
       sel.className = "cancia-form-select";
-      sel.style.cssText = `${INPUT_BASE} appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2.5 3.75l2.5 2.5 2.5-2.5' stroke='rgba(255,255,255,0.4)' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer;`;
+      sel.style.cssText = `${INPUT_BASE} appearance: none; padding-right: 30px; background-image: ${SELECT_CHEVRON}; background-repeat: no-repeat; background-position: right 10px center; cursor: pointer;`;
       if (!field.required) {
         const empty = document.createElement("option");
         empty.value = "";
@@ -1820,19 +2690,19 @@ function renderField(field, initial, depth = 0) {
       const container = document.createElement("div");
       container.style.cssText = `
         display: flex; gap: 10px; align-items: stretch;
-        background: rgba(255,255,255,0.02);
-        border: 1px dashed rgba(255,255,255,0.1);
-        border-radius: 10px;
+        background: ${v("surface-raised")};
+        border: 1px dashed ${v("border-strong")};
+        border-radius: ${v("radius")};
         padding: 10px;
       `;
       const preview = document.createElement("div");
       preview.style.cssText = `
         width: 72px; height: 72px; flex-shrink: 0;
-        background: rgba(255,255,255,0.04) no-repeat center / cover;
-        border: 1px solid rgba(255,255,255,0.06);
-        border-radius: 6px;
+        background: ${v("surface-raised")} no-repeat center / cover;
+        border: 1px solid ${v("border")};
+        border-radius: ${v("radius-sm")};
         display: flex; align-items: center; justify-content: center;
-        color: rgba(255,255,255,0.25);
+        color: ${v("fg-faint")};
       `;
       const updatePreview = (url) => {
         if (url) {
@@ -1855,29 +2725,28 @@ function renderField(field, initial, depth = 0) {
       const uploadBtn = document.createElement("button");
       uploadBtn.type = "button";
       uploadBtn.style.cssText = `
-        appearance: none; cursor: pointer;
-        background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85);
-        border: 1px solid rgba(255,255,255,0.07);
-        font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
-        padding: 5px 10px; border-radius: 6px;
-        transition: background 0.15s;
+        ${button("ghost")}
+        background: ${v("surface-hover")};
+        color: ${v("fg")};
+        border: 1px solid ${v("border")};
+        height: auto;
+        font-size: ${v("text-xs")}; letter-spacing: 0.02em;
+        padding: 5px 10px;
+        cursor: pointer;
       `;
       uploadBtn.textContent = "Upload\u2026";
-      uploadBtn.addEventListener("mouseenter", () => {
-        uploadBtn.style.background = "rgba(255,255,255,0.1)";
-      });
-      uploadBtn.addEventListener("mouseleave", () => {
-        uploadBtn.style.background = "rgba(255,255,255,0.06)";
-      });
+      attachHover(uploadBtn, { bg: v("surface-active") });
       uploadBtn.addEventListener("click", () => fileInput.click());
       const clearBtn = document.createElement("button");
       clearBtn.type = "button";
       clearBtn.style.cssText = `
-        appearance: none; cursor: pointer;
-        background: transparent; color: rgba(255,255,255,0.4);
+        ${button("ghost")}
+        color: ${v("fg-muted")};
         border: 1px solid transparent;
-        font-size: 11px;
-        padding: 5px 8px; border-radius: 6px;
+        height: auto;
+        font-size: ${v("text-xs")};
+        padding: 5px 8px;
+        cursor: pointer;
       `;
       clearBtn.textContent = "Clear";
       clearBtn.addEventListener("click", () => {
@@ -1890,7 +2759,7 @@ function renderField(field, initial, depth = 0) {
       const urlField = document.createElement("input");
       urlField.type = "url";
       urlField.className = "cancia-form-input";
-      urlField.style.cssText = `${INPUT_BASE} font-size: 11px; padding: 6px 9px;`;
+      urlField.style.cssText = `${INPUT_BASE} font-size: ${v("text-xs")}; padding: 6px 9px;`;
       urlField.placeholder = "https://\u2026 or upload";
       urlField.value = initialUrl;
       urlField.addEventListener("input", () => {
@@ -1898,7 +2767,7 @@ function renderField(field, initial, depth = 0) {
         updatePreview(currentUrl);
       });
       const progressEl = document.createElement("div");
-      progressEl.style.cssText = `font-size: 10px; color: rgba(255,255,255,0.5); height: 12px;`;
+      progressEl.style.cssText = `font-size: 10px; color: ${v("fg-muted")}; height: 12px;`;
       right.appendChild(btnRow);
       right.appendChild(urlField);
       right.appendChild(progressEl);
@@ -1910,7 +2779,7 @@ function renderField(field, initial, depth = 0) {
         const file = fileInput.files?.[0];
         if (!file) return;
         uploadBtn.disabled = true;
-        progressEl.style.color = "rgba(255,255,255,0.5)";
+        progressEl.style.color = v("fg-muted");
         try {
           const url = await uploadImage(file, (pct) => {
             progressEl.textContent = `Uploading\u2026 ${pct}%`;
@@ -1924,7 +2793,7 @@ function renderField(field, initial, depth = 0) {
           }, 1500);
         } catch (err) {
           progressEl.textContent = `Upload failed: ${err instanceof Error ? err.message : String(err)}`;
-          progressEl.style.color = "#ff8786";
+          progressEl.style.color = v("danger");
         } finally {
           uploadBtn.disabled = false;
           fileInput.value = "";
@@ -1934,51 +2803,51 @@ function renderField(field, initial, depth = 0) {
       break;
     }
     case "datetime": {
-      const input = document.createElement("input");
-      input.type = "datetime-local";
-      input.className = "cancia-form-input";
-      input.style.cssText = `${INPUT_BASE} color-scheme: dark; caret-color: ${accent4()};`;
-      if (typeof initial === "string") input.value = isoToLocalInput(initial);
-      wrapper.appendChild(input);
+      const input2 = document.createElement("input");
+      input2.type = "datetime-local";
+      input2.className = "cancia-form-input";
+      input2.style.cssText = `${INPUT_BASE} color-scheme: light; caret-color: ${v("accent")};`;
+      if (typeof initial === "string") input2.value = isoToLocalInput(initial);
+      wrapper.appendChild(input2);
       getValue2 = () => {
-        const v = input.value.trim();
-        if (!v) return void 0;
-        return localInputToIso(v);
+        const v2 = input2.value.trim();
+        if (!v2) return void 0;
+        return localInputToIso(v2);
       };
       break;
     }
     case "number": {
-      const input = document.createElement("input");
-      input.type = "number";
-      input.className = "cancia-form-input";
-      input.style.cssText = `${INPUT_BASE} caret-color: ${accent4()};`;
-      if (field.min !== void 0) input.min = String(field.min);
-      if (field.max !== void 0) input.max = String(field.max);
-      if (typeof initial === "number") input.value = String(initial);
-      else if (typeof initial === "string" && initial !== "") input.value = initial;
-      wrapper.appendChild(input);
+      const input2 = document.createElement("input");
+      input2.type = "number";
+      input2.className = "cancia-form-input";
+      input2.style.cssText = `${INPUT_BASE} caret-color: ${v("accent")};`;
+      if (field.min !== void 0) input2.min = String(field.min);
+      if (field.max !== void 0) input2.max = String(field.max);
+      if (typeof initial === "number") input2.value = String(initial);
+      else if (typeof initial === "string" && initial !== "") input2.value = initial;
+      wrapper.appendChild(input2);
       getValue2 = () => {
-        const v = input.value.trim();
-        if (v === "") return void 0;
-        const n = Number(v);
+        const v2 = input2.value.trim();
+        if (v2 === "") return void 0;
+        const n = Number(v2);
         return Number.isNaN(n) ? void 0 : n;
       };
       break;
     }
     default: {
-      const input = document.createElement("input");
-      input.type = field.widget === "url" ? "url" : field.widget === "email" ? "email" : "text";
-      input.className = "cancia-form-input";
-      input.style.cssText = `${INPUT_BASE} caret-color: ${accent4()};`;
-      if (field.placeholder) input.placeholder = field.placeholder;
-      if (field.minLength !== void 0) input.minLength = field.minLength;
-      if (field.maxLength !== void 0) input.maxLength = field.maxLength;
-      if (typeof initial === "string") input.value = initial;
-      wrapper.appendChild(input);
-      getValue2 = () => input.value;
-      onInput = (cb) => input.addEventListener("input", cb);
-      setValue = (v) => {
-        input.value = v;
+      const input2 = document.createElement("input");
+      input2.type = field.widget === "url" ? "url" : field.widget === "email" ? "email" : "text";
+      input2.className = "cancia-form-input";
+      input2.style.cssText = `${INPUT_BASE} caret-color: ${v("accent")};`;
+      if (field.placeholder) input2.placeholder = field.placeholder;
+      if (field.minLength !== void 0) input2.minLength = field.minLength;
+      if (field.maxLength !== void 0) input2.maxLength = field.maxLength;
+      if (typeof initial === "string") input2.value = initial;
+      wrapper.appendChild(input2);
+      getValue2 = () => input2.value;
+      onInput = (cb) => input2.addEventListener("input", cb);
+      setValue = (v2) => {
+        input2.value = v2;
       };
       break;
     }
@@ -2007,18 +2876,14 @@ function renderArrayField(field, initial, setOwnError, depth) {
   const itemSchema = field.of;
   const container = document.createElement("div");
   container.style.cssText = `
-    display: flex; flex-direction: column; gap: 8px;
-    background: rgba(255,255,255,0.02);
-    border: 1px solid rgba(255,255,255,0.07);
-    border-radius: 10px;
-    padding: 10px;
+    ${group()}
   `;
   const rowsWrap = document.createElement("div");
-  rowsWrap.style.cssText = `display: flex; flex-direction: column; gap: 8px;`;
+  rowsWrap.style.cssText = `display: flex; flex-direction: column; gap: ${v("space-2")};`;
   container.appendChild(rowsWrap);
   if (!itemSchema || depth >= MAX_FIELD_DEPTH) {
     const note = document.createElement("div");
-    note.style.cssText = `font-size: 11px; color: rgba(255,255,255,0.4);`;
+    note.style.cssText = `font-size: ${v("text-xs")}; color: ${v("fg-muted")};`;
     note.textContent = itemSchema ? "Nesting too deep to edit here." : "This array has no item schema.";
     container.appendChild(note);
     return { control: container, getValue: () => [], validate: () => ({ value: [], ok: true }) };
@@ -2028,11 +2893,7 @@ function renderArrayField(field, initial, setOwnError, depth) {
   function makeRow(itemValue) {
     const row = document.createElement("div");
     row.style.cssText = `
-      display: flex; align-items: flex-start; gap: 8px;
-      background: rgba(255,255,255,0.02);
-      border: 1px solid rgba(255,255,255,0.06);
-      border-radius: 8px;
-      padding: 8px;
+      ${groupRow()}
     `;
     const handle = document.createElement("div");
     handle.textContent = "\u22EE\u22EE";
@@ -2040,10 +2901,12 @@ function renderArrayField(field, initial, setOwnError, depth) {
     handle.draggable = true;
     handle.style.cssText = `
       cursor: grab; user-select: none;
-      color: rgba(255,255,255,0.35);
-      font-size: 13px; line-height: 1.2;
-      padding: 4px 2px; flex-shrink: 0;
+      color: ${v("fg-faint")};
+      font-size: ${v("text-base")}; line-height: 1.2;
+      padding: ${v("space-1")} 2px; flex-shrink: 0;
       letter-spacing: -2px;
+      opacity: 0;
+      transition: opacity ${v("duration-fast")} ${v("ease")};
     `;
     const { wrapper, fieldState } = renderField(itemSchema, itemValue, depth + 1);
     wrapper.style.marginBottom = "0";
@@ -2054,19 +2917,16 @@ function renderArrayField(field, initial, setOwnError, depth) {
     removeBtn.textContent = "\xD7";
     removeBtn.title = "Remove";
     removeBtn.style.cssText = `
-      appearance: none; cursor: pointer; flex-shrink: 0;
-      background: transparent; border: 1px solid transparent;
-      color: rgba(255,135,134,0.7);
+      ${button("danger")}
+      flex-shrink: 0;
+      border: 1px solid transparent;
+      height: auto;
       font-size: 16px; line-height: 1;
-      padding: 2px 7px; border-radius: 6px;
-      transition: background 0.15s;
+      padding: 2px 7px;
+      cursor: pointer;
     `;
-    removeBtn.addEventListener("mouseenter", () => {
-      removeBtn.style.background = "rgba(255,135,134,0.1)";
-    });
-    removeBtn.addEventListener("mouseleave", () => {
-      removeBtn.style.background = "transparent";
-    });
+    attachHover(removeBtn, { bg: v("danger-soft") });
+    attachRowReveal(row, [handle, removeBtn]);
     row.appendChild(handle);
     row.appendChild(wrapper);
     row.appendChild(removeBtn);
@@ -2118,19 +2978,18 @@ function renderArrayField(field, initial, setOwnError, depth) {
   const itemLabel = itemSchema.label || "item";
   addBtn.textContent = `+ Add ${itemLabel.toLowerCase()}`;
   addBtn.style.cssText = `
-    appearance: none; cursor: pointer; align-self: flex-start;
-    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8);
-    border: 1px solid rgba(255,255,255,0.08);
-    font-size: 11px; font-weight: 500;
-    padding: 6px 11px; border-radius: 7px;
-    transition: background 0.15s;
+    ${button("ghost")}
+    align-self: flex-start;
+    background: transparent;
+    color: ${v("fg-muted")};
+    border: 0;
+    height: auto;
+    font-size: ${v("text-sm")};
+    font-weight: 500;
+    padding: 4px 0;
+    cursor: pointer;
   `;
-  addBtn.addEventListener("mouseenter", () => {
-    addBtn.style.background = "rgba(255,255,255,0.1)";
-  });
-  addBtn.addEventListener("mouseleave", () => {
-    addBtn.style.background = "rgba(255,255,255,0.05)";
-  });
+  attachHover(addBtn, { bg: v("surface-active") });
   addBtn.addEventListener("click", () => addRow(defaultForField(itemSchema)));
   container.appendChild(addBtn);
   const collect = () => rows.map((r) => r.state.getValue());
@@ -2160,15 +3019,12 @@ function renderObjectField(field, initial, setOwnError, depth) {
   const subInitial = initial && typeof initial === "object" && !Array.isArray(initial) ? initial : {};
   const fieldset = document.createElement("div");
   fieldset.style.cssText = `
-    display: flex; flex-direction: column; gap: 2px;
-    background: rgba(255,255,255,0.02);
-    border: 1px solid rgba(255,255,255,0.07);
-    border-radius: 10px;
-    padding: 10px 10px 0;
+    ${group()}
+    gap: 2px;
   `;
   if (depth >= MAX_FIELD_DEPTH) {
     const note = document.createElement("div");
-    note.style.cssText = `font-size: 11px; color: rgba(255,255,255,0.4); padding-bottom: 10px;`;
+    note.style.cssText = `font-size: ${v("text-xs")}; color: ${v("fg-muted")}; padding-bottom: 10px;`;
     note.textContent = "Nesting too deep to edit here.";
     fieldset.appendChild(note);
     return { control: fieldset, getValue: () => ({}), validate: () => ({ value: {}, ok: true }) };
@@ -2182,8 +3038,8 @@ function renderObjectField(field, initial, setOwnError, depth) {
   const collect = () => {
     const out = {};
     for (const c of childStates) {
-      const v = c.getValue();
-      if (v !== void 0 && v !== "") out[c.field.name] = v;
+      const v2 = c.getValue();
+      if (v2 !== void 0 && v2 !== "") out[c.field.name] = v2;
     }
     return out;
   };
@@ -2206,7 +3062,7 @@ function renderReferenceField(field, initial) {
   const targetList = field.referenceList;
   const sel = document.createElement("select");
   sel.className = "cancia-form-select";
-  sel.style.cssText = `${INPUT_BASE} appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2.5 3.75l2.5 2.5 2.5-2.5' stroke='rgba(255,255,255,0.4)' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer;`;
+  sel.style.cssText = `${INPUT_BASE} appearance: none; padding-right: 30px; background-image: ${SELECT_CHEVRON}; background-repeat: no-repeat; background-position: right 10px center; cursor: pointer;`;
   const opt = (value, text, selected = false) => {
     const o = document.createElement("option");
     o.value = value;
@@ -2229,8 +3085,8 @@ function renderReferenceField(field, initial) {
   const titleField = state.schemas[targetList]?.titleField;
   const titleOf = (entry) => {
     if (titleField) {
-      const v = entry.data[titleField];
-      if (typeof v === "string" && v.trim()) return v;
+      const v2 = entry.data[titleField];
+      if (typeof v2 === "string" && v2.trim()) return v2;
     }
     return `(untitled \xB7 ${entry.id})`;
   };
@@ -2277,25 +3133,17 @@ function renderRichTextField(field, initial, setOwnError) {
   ];
   const container = document.createElement("div");
   container.style.cssText = `
-    display: flex; flex-direction: column; gap: 8px;
-    background: rgba(255,255,255,0.02);
-    border: 1px solid rgba(255,255,255,0.07);
-    border-radius: 10px;
-    padding: 10px;
+    ${group()}
   `;
   const rowsWrap = document.createElement("div");
-  rowsWrap.style.cssText = `display: flex; flex-direction: column; gap: 8px;`;
+  rowsWrap.style.cssText = `display: flex; flex-direction: column; gap: ${v("space-2")};`;
   container.appendChild(rowsWrap);
   const rows = [];
   let dragging = null;
   function makeRow(initialRow) {
     const row = document.createElement("div");
     row.style.cssText = `
-      display: flex; align-items: flex-start; gap: 8px;
-      background: rgba(255,255,255,0.02);
-      border: 1px solid rgba(255,255,255,0.06);
-      border-radius: 8px;
-      padding: 8px;
+      ${groupRow()}
     `;
     const handle = document.createElement("div");
     handle.textContent = "\u22EE\u22EE";
@@ -2303,25 +3151,33 @@ function renderRichTextField(field, initial, setOwnError) {
     handle.draggable = true;
     handle.style.cssText = `
       cursor: grab; user-select: none;
-      color: rgba(255,255,255,0.35);
-      font-size: 13px; line-height: 1.2;
-      padding: 4px 2px; flex-shrink: 0;
+      color: ${v("fg-faint")};
+      font-size: ${v("text-base")}; line-height: 1.2;
+      padding: ${v("space-1")} 2px; flex-shrink: 0;
       letter-spacing: -2px;
+      opacity: 0;
+      transition: opacity ${v("duration-fast")} ${v("ease")};
     `;
     const main = document.createElement("div");
     main.style.cssText = `flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px;`;
     const ta = document.createElement("textarea");
     ta.className = "cancia-form-textarea";
-    ta.style.cssText = `${INPUT_BASE} resize: vertical; min-height: 54px; max-height: 240px; caret-color: ${accent4()};`;
+    ta.style.cssText = `${INPUT_BASE} resize: vertical; min-height: 54px; max-height: 240px; caret-color: ${v("accent")};`;
     ta.rows = 2;
     ta.placeholder = "Text \u2014 use **bold**, *italic*, [label](https://\u2026)";
     ta.value = initialRow.text;
     const controls = document.createElement("div");
-    controls.style.cssText = `display: flex; gap: 6px;`;
+    controls.style.cssText = `
+      display: flex; gap: 6px;
+      max-height: 0; opacity: 0; overflow: hidden;
+      transition: max-height ${v("duration-fast")} ${v("ease-out")},
+                  opacity ${v("duration-fast")} ${v("ease")};
+    `;
+    controls.dataset.canciaCollapsible = "1";
     const styleSel = document.createElement("select");
     styleSel.className = "cancia-form-select";
-    styleSel.style.cssText = `${INPUT_BASE} width: auto; flex: 1; appearance: none; padding: 5px 26px 5px 9px; font-size: 11px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2.5 3.75l2.5 2.5 2.5-2.5' stroke='rgba(255,255,255,0.4)' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 9px center; cursor: pointer;`;
-    for (const s of PT_STYLES) {
+    styleSel.style.cssText = `${INPUT_BASE} width: auto; flex: 1; appearance: none; padding: 5px 26px 5px 9px; font-size: ${v("text-xs")}; background-image: ${SELECT_CHEVRON}; background-repeat: no-repeat; background-position: right 9px center; cursor: pointer;`;
+    for (const s of PT_STYLES2) {
       const o = document.createElement("option");
       o.value = s;
       o.textContent = STYLE_LABELS[s];
@@ -2331,10 +3187,10 @@ function renderRichTextField(field, initial, setOwnError) {
     const listSel = document.createElement("select");
     listSel.className = "cancia-form-select";
     listSel.style.cssText = styleSel.style.cssText;
-    for (const { value, label } of LIST_LABELS) {
+    for (const { value, label: label2 } of LIST_LABELS) {
       const o = document.createElement("option");
       o.value = value;
-      o.textContent = label;
+      o.textContent = label2;
       if ((initialRow.listItem ?? "") === value) o.selected = true;
       listSel.appendChild(o);
     }
@@ -2347,19 +3203,16 @@ function renderRichTextField(field, initial, setOwnError) {
     removeBtn.textContent = "\xD7";
     removeBtn.title = "Remove block";
     removeBtn.style.cssText = `
-      appearance: none; cursor: pointer; flex-shrink: 0;
-      background: transparent; border: 1px solid transparent;
-      color: rgba(255,135,134,0.7);
+      ${button("danger")}
+      flex-shrink: 0;
+      border: 1px solid transparent;
+      height: auto;
       font-size: 16px; line-height: 1;
-      padding: 2px 7px; border-radius: 6px;
-      transition: background 0.15s;
+      padding: 2px 7px;
+      cursor: pointer;
     `;
-    removeBtn.addEventListener("mouseenter", () => {
-      removeBtn.style.background = "rgba(255,135,134,0.1)";
-    });
-    removeBtn.addEventListener("mouseleave", () => {
-      removeBtn.style.background = "transparent";
-    });
+    attachHover(removeBtn, { bg: v("danger-soft") });
+    attachRowReveal(row, [handle, removeBtn, controls]);
     row.appendChild(handle);
     row.appendChild(main);
     row.appendChild(removeBtn);
@@ -2414,8 +3267,8 @@ function renderRichTextField(field, initial, setOwnError) {
     rowsWrap.appendChild(rec.el);
   }
   const initialRows = (() => {
-    const parsed = portableTextSubsetSchema.safeParse(initial);
-    if (parsed.success && parsed.data.length > 0) return portableTextToRows(parsed.data);
+    const parsed = portableTextSubsetSchema2.safeParse(initial);
+    if (parsed.success && parsed.data.length > 0) return portableTextToRows2(parsed.data);
     return [{ text: "", style: "normal" }];
   })();
   for (const r of initialRows) addRow(r);
@@ -2423,24 +3276,23 @@ function renderRichTextField(field, initial, setOwnError) {
   addBtn.type = "button";
   addBtn.textContent = "+ Add block";
   addBtn.style.cssText = `
-    appearance: none; cursor: pointer; align-self: flex-start;
-    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8);
-    border: 1px solid rgba(255,255,255,0.08);
-    font-size: 11px; font-weight: 500;
-    padding: 6px 11px; border-radius: 7px;
-    transition: background 0.15s;
+    ${button("ghost")}
+    align-self: flex-start;
+    background: transparent;
+    color: ${v("fg-muted")};
+    border: 0;
+    height: auto;
+    font-size: ${v("text-sm")};
+    font-weight: 500;
+    padding: 4px 0;
+    cursor: pointer;
   `;
-  addBtn.addEventListener("mouseenter", () => {
-    addBtn.style.background = "rgba(255,255,255,0.1)";
-  });
-  addBtn.addEventListener("mouseleave", () => {
-    addBtn.style.background = "rgba(255,255,255,0.05)";
-  });
+  attachHover(addBtn, { bg: v("surface-active") });
   addBtn.addEventListener("click", () => addRow({ text: "", style: "normal" }));
   container.appendChild(addBtn);
   const serialise = () => {
     const editorRows = rows.map((r) => r.read()).filter((r) => r.text.trim() !== "");
-    return rowsToPortableText(editorRows);
+    return rowsToPortableText2(editorRows);
   };
   return {
     control: container,
@@ -2448,7 +3300,7 @@ function renderRichTextField(field, initial, setOwnError) {
     validate: () => {
       setOwnError(null);
       const value = serialise();
-      const parsed = portableTextSubsetSchema.safeParse(value);
+      const parsed = portableTextSubsetSchema2.safeParse(value);
       if (!parsed.success) {
         setOwnError("This rich-text content is not valid. Check links and formatting.");
         return { value, ok: false };
@@ -2568,77 +3420,106 @@ function openEntryModal(opts) {
   const isEdit = opts.entry !== null;
   const isTranslate = !isEdit && (opts.translateFromEntry ?? null) !== null;
   document.documentElement.style.setProperty("--cancia-accent-border", accentBorder());
-  const backdrop = document.createElement("div");
-  backdrop.dataset.canciaModalBackdrop = "1";
-  backdrop.style.cssText = `
-    position: fixed; inset: 0;
-    background: rgba(8,8,10,0.55);
-    backdrop-filter: blur(3px);
-    -webkit-backdrop-filter: blur(3px);
-    z-index: ${BACKDROP_Z2};
-    opacity: 0;
-    transition: opacity 0.2s ease-out;
-  `;
-  document.body.appendChild(backdrop);
-  requestAnimationFrame(() => {
-    backdrop.style.opacity = "1";
-  });
-  backdropEl2 = backdrop;
   const modal = document.createElement("div");
   modal.dataset.canciaModal = "1";
-  modal.style.cssText = `
-    position: fixed;
-    top: 50%; left: 50%;
-    transform: translate(-50%, -50%);
-    width: min(480px, calc(100vw - 32px));
-    max-height: min(680px, calc(100vh - 48px));
-    display: flex; flex-direction: column;
-    background: rgba(14, 14, 16, 0.97);
-    backdrop-filter: blur(24px) saturate(180%);
-    -webkit-backdrop-filter: blur(24px) saturate(180%);
-    border: 1px solid rgba(255,255,255,0.07);
-    border-radius: 14px;
-    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5), 0 24px 64px rgba(0,0,0,0.4);
-    z-index: ${MODAL_Z};
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    color: rgba(255,255,255,0.9);
-    animation: cancia-modal-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-    overflow: hidden;
-  `;
-  document.body.appendChild(modal);
+  markUi(modal);
+  document.documentElement.style.setProperty("--cancia-accent-border", accentBorder());
+  mountedInPanel = pushPanelView(modal);
+  if (!mountedInPanel) {
+    const backdrop = document.createElement("div");
+    backdrop.dataset.canciaModalBackdrop = "1";
+    markUi(backdrop);
+    backdrop.style.cssText = `
+      position: fixed; inset: 0;
+      background: rgba(8,8,10,0.45);
+      backdrop-filter: blur(3px);
+      -webkit-backdrop-filter: blur(3px);
+      z-index: ${BACKDROP_Z2};
+      opacity: 0;
+      transition: opacity ${v("duration")} ${v("ease-out")};
+    `;
+    document.body.appendChild(backdrop);
+    requestAnimationFrame(() => {
+      backdrop.style.opacity = "1";
+    });
+    backdropEl2 = backdrop;
+    backdrop.addEventListener("click", () => closeEntryModal());
+    modal.style.cssText = `
+      ${surface(3)}
+      position: fixed;
+      top: 50%; left: 50%;
+      width: min(480px, calc(100vw - 32px));
+      max-height: min(680px, calc(100vh - 48px));
+      display: flex; flex-direction: column;
+      box-shadow: ${v("shadow-lg")};
+      z-index: ${MODAL_Z};
+      overflow: hidden;
+      opacity: 0;
+      transform: translate(-50%, calc(-50% + 8px)) scale(0.985);
+      transition: opacity ${v("duration")} ${v("ease")}, transform ${v("duration")} ${v("ease")};
+    `;
+    document.body.appendChild(modal);
+    requestAnimationFrame(() => {
+      modal.style.opacity = "1";
+      modal.style.transform = "translate(-50%, -50%) scale(1)";
+    });
+  }
   modalEl = modal;
   const header = document.createElement("div");
   header.style.cssText = `
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 14px 16px 12px;
-    border-bottom: 1px solid rgba(255,255,255,0.06);
+    display: flex; align-items: center; gap: ${v("space-2")};
+    padding: 14px ${v("space-4")} ${v("space-3")};
+    border-bottom: 1px solid ${v("border")};
     flex-shrink: 0;
   `;
+  if (mountedInPanel) {
+    const backBtn = document.createElement("button");
+    backBtn.type = "button";
+    backBtn.setAttribute("aria-label", "Back to list");
+    backBtn.title = "Back to list";
+    backBtn.style.cssText = `
+      ${iconButton(28)}
+      flex-shrink: 0; padding: 0; cursor: pointer;
+      background: transparent; border: 0;
+    `;
+    backBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
+    </svg>`;
+    attachHover(backBtn, { bg: v("surface-hover"), color: v("fg-strong") });
+    attachPress(backBtn);
+    backBtn.addEventListener("click", () => closeEntryModal());
+    header.appendChild(backBtn);
+  }
   const titleWrap = document.createElement("div");
-  titleWrap.style.cssText = `display: flex; flex-direction: column; gap: 2px; min-width: 0;`;
+  titleWrap.style.cssText = `display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;`;
   const eyebrow = document.createElement("span");
-  eyebrow.style.cssText = `
-    font-size: 10px; font-weight: 600;
-    color: rgba(255,255,255,0.32);
-    letter-spacing: 0.08em; text-transform: uppercase;
-  `;
+  eyebrow.style.cssText = `${label()} display: inline;`;
   const action = isEdit ? "Edit" : isTranslate ? "Translate" : "New";
   eyebrow.textContent = `${action} ${opts.schema.labelSingular.toLowerCase()} \xB7 ${opts.locale}`;
   const titleEl = document.createElement("span");
   titleEl.style.cssText = `
     font-size: 14px; font-weight: 600;
-    color: rgba(255,255,255,0.92);
+    color: ${v("fg-strong")};
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
   `;
   titleEl.textContent = opts.schema.label;
   titleWrap.appendChild(eyebrow);
   titleWrap.appendChild(titleEl);
   header.appendChild(titleWrap);
-  header.appendChild(makeCloseButton(() => closeEntryModal()));
+  header.appendChild(
+    makeCloseButton(() => {
+      if (mountedInPanel) {
+        closeEntryModal();
+        closeListPanel();
+      } else {
+        closeEntryModal();
+      }
+    })
+  );
   modal.appendChild(header);
   const body = document.createElement("div");
   body.style.cssText = `
-    padding: 14px 16px 4px;
+    padding: 14px ${v("space-4")} ${v("space-1")};
     overflow-y: auto;
     flex: 1 1 auto;
     min-height: 0;
@@ -2647,14 +3528,14 @@ function openEntryModal(opts) {
   const formError = document.createElement("div");
   formError.style.cssText = `
     display: none;
-    background: rgba(255,135,134,0.08);
-    color: #ff8786;
-    border: 1px solid rgba(255,135,134,0.18);
-    border-radius: 8px;
+    background: ${v("danger-soft")};
+    color: ${v("danger")};
+    border: 1px solid ${v("danger-soft")};
+    border-radius: ${v("radius-sm")};
     padding: 9px 11px;
-    font-size: 12px;
+    font-size: ${v("text-sm")};
     line-height: 1.4;
-    margin-bottom: 12px;
+    margin-bottom: ${v("space-3")};
   `;
   body.appendChild(formError);
   function showFormError(msg) {
@@ -2668,14 +3549,14 @@ function openEntryModal(opts) {
   if (isTranslate) {
     const banner = document.createElement("div");
     banner.style.cssText = `
-      background: rgba(245,180,0,0.1);
-      color: #f5b400;
-      border: 1px solid rgba(245,180,0,0.25);
-      border-radius: 8px;
+      background: ${v("warning-soft")};
+      color: ${v("warning")};
+      border: 1px solid ${v("warning-soft")};
+      border-radius: ${v("radius-sm")};
       padding: 9px 11px;
-      font-size: 12px;
+      font-size: ${v("text-sm")};
       line-height: 1.4;
-      margin-bottom: 12px;
+      margin-bottom: ${v("space-3")};
     `;
     const src = opts.translateFromEntry;
     banner.textContent = `Translating from ${src.locale} into ${opts.locale}. Fields are pre-filled from the source.`;
@@ -2694,32 +3575,26 @@ function openEntryModal(opts) {
   footer.style.cssText = `
     display: flex; align-items: center; justify-content: space-between;
     gap: 10px;
-    padding: 12px 16px;
-    border-top: 1px solid rgba(255,255,255,0.06);
-    background: rgba(0,0,0,0.18);
+    padding: ${v("space-3")} ${v("space-4")};
+    border-top: 1px solid ${v("border")};
+    background: ${v("surface-raised")};
     flex-shrink: 0;
   `;
   const leftActions = document.createElement("div");
   const rightActions = document.createElement("div");
-  rightActions.style.cssText = `display: flex; gap: 8px;`;
+  rightActions.style.cssText = `display: flex; gap: ${v("space-2")};`;
   if (isEdit) {
     const deleteBtn = document.createElement("button");
     deleteBtn.type = "button";
     deleteBtn.style.cssText = `
-      appearance: none; cursor: pointer;
-      background: transparent; border: 1px solid transparent;
-      color: #ff8786;
-      font-size: 12px; font-weight: 500;
-      padding: 6px 10px; border-radius: 7px;
-      transition: background 0.15s;
+      ${button("danger")}
+      border: 1px solid transparent;
+      height: auto;
+      padding: 6px 10px;
+      cursor: pointer;
     `;
     deleteBtn.textContent = "Delete";
-    deleteBtn.addEventListener("mouseenter", () => {
-      deleteBtn.style.background = "rgba(255,135,134,0.08)";
-    });
-    deleteBtn.addEventListener("mouseleave", () => {
-      deleteBtn.style.background = "transparent";
-    });
+    attachHover(deleteBtn, { bg: v("danger-soft") });
     deleteBtn.addEventListener("click", async () => {
       if (!confirm(`Delete the ${opts.locale} version of this ${opts.schema.labelSingular.toLowerCase()}? This can't be undone.`)) return;
       deleteBtn.disabled = true;
@@ -2737,25 +3612,17 @@ function openEntryModal(opts) {
   const cancelBtn = document.createElement("button");
   cancelBtn.type = "button";
   cancelBtn.style.cssText = `
-    appearance: none; cursor: pointer;
-    background: rgba(255,255,255,0.04);
-    border: 1px solid rgba(255,255,255,0.07);
-    color: rgba(255,255,255,0.75);
-    font-size: 12px; font-weight: 500;
-    padding: 7px 14px; border-radius: 8px;
-    transition: background 0.15s, color 0.15s;
+    ${button("ghost")}
+    background: ${v("surface-raised")};
+    border: 1px solid ${v("border")};
+    height: auto;
+    padding: 7px 14px;
+    cursor: pointer;
   `;
   cancelBtn.textContent = "Cancel";
-  cancelBtn.addEventListener("mouseenter", () => {
-    cancelBtn.style.background = "rgba(255,255,255,0.08)";
-    cancelBtn.style.color = "rgba(255,255,255,0.9)";
-  });
-  cancelBtn.addEventListener("mouseleave", () => {
-    cancelBtn.style.background = "rgba(255,255,255,0.04)";
-    cancelBtn.style.color = "rgba(255,255,255,0.75)";
-  });
+  attachHover(cancelBtn, { bg: v("surface-hover"), color: v("fg-strong") });
   cancelBtn.addEventListener("click", () => closeEntryModal());
-  const saveBtn = makePrimaryButton(isEdit ? "Save" : "Create", accent4());
+  const saveBtn = makePrimaryButton(isEdit ? "Save" : "Create", accent3());
   saveBtn.addEventListener("click", async () => {
     clearFormError();
     const { data, ok } = preValidate(fieldStates);
@@ -2798,7 +3665,6 @@ function openEntryModal(opts) {
   footer.appendChild(leftActions);
   footer.appendChild(rightActions);
   modal.appendChild(footer);
-  backdrop.addEventListener("click", () => closeEntryModal());
   escListener = (e) => {
     if (e.key === "Escape") {
       e.stopPropagation();
@@ -2813,11 +3679,18 @@ function openEntryModal(opts) {
 }
 function closeEntryModal() {
   if (modalEl) {
-    modalEl.style.animation = "cancia-modal-out 0.16s cubic-bezier(0.7, 0, 0.84, 0) forwards";
     const el = modalEl;
-    setTimeout(() => el.remove(), 160);
     modalEl = null;
+    if (mountedInPanel) {
+      popPanelView(el);
+    } else {
+      el.style.transition = `opacity 0.16s ${v("ease-out")}, transform 0.16s ${v("ease-out")}`;
+      el.style.opacity = "0";
+      el.style.transform = "translate(-50%, calc(-50% + 8px)) scale(0.985)";
+      setTimeout(() => el.remove(), 180);
+    }
   }
+  mountedInPanel = false;
   if (backdropEl2) {
     const el = backdropEl2;
     el.style.opacity = "0";
@@ -2838,13 +3711,12 @@ var toolbarEl = null;
 var pendingPanelEl = null;
 var isExpanded = false;
 var expandedEscListener = null;
-function accent5() {
-  return state.config?.accentColor ?? "#6366f1";
-}
+var revealTimer = null;
 var styleInjected4 = false;
 function injectStyles4() {
   if (styleInjected4) return;
   styleInjected4 = true;
+  injectBaseStyles(state.config?.accentColor, state.config?.toolbarAccent === true);
   const s = document.createElement("style");
   s.textContent = `
     @keyframes cancia-enter {
@@ -2885,20 +3757,30 @@ function injectStyles4() {
       to   { opacity: 1; transform: translateX(-50%) translateY(0); }
     }
     [data-cancia-toolbar] * { box-sizing: border-box; }
-    [data-cancia-toolbar] button:active:not(:disabled) { transform: scale(0.92) !important; }
     [data-cancia-popup] * { box-sizing: border-box; }
-    [data-cancia-popup] button:active:not(:disabled) { transform: scale(0.94) !important; }
+    /* Press feedback for popup buttons. The TOOLBAR's buttons deliberately do
+       NOT use :active \u2014 they use attachPress() on pointerdown instead, because
+       :active only lands after the browser's own hit-test and reads as lag.
+       An !important here would also override that inline transform. */
+    [data-cancia-popup] button:active:not(:disabled) { transform: scale(0.96); }
     /* Protect stroke-based icons from host page "svg { fill: currentColor }" rules */
     [data-cancia-toolbar] svg[fill="none"] { fill: none !important; }
     [data-cancia-toolbar] svg[fill="none"] :not([fill]) { fill: none !important; }
     [data-cancia-popup] svg[fill="none"] { fill: none !important; }
     [data-cancia-popup] svg[fill="none"] :not([fill]) { fill: none !important; }
-    /* Reset cosmetic host CSS leaking into toolbar buttons */
+    /* Reset cosmetic host CSS leaking into toolbar buttons.
+       NOTE: font-* and color are deliberately NOT unset here \u2014 the buttons now
+       carry visible text labels, and unsetting those would strip the label's
+       typography back to the UA default. The scoped reset in styles.ts already
+       neutralises host typography for [data-cancia-ui] subtrees. */
     [data-cancia-toolbar] :where(button) {
       background: unset; border: unset; border-radius: unset; padding: unset;
-      margin: unset; color: unset; font-family: unset; font-weight: unset;
-      font-size: unset; line-height: unset; letter-spacing: unset;
-      box-shadow: unset; outline: unset; text-transform: unset;
+      margin: unset; box-shadow: unset; outline: unset;
+    }
+    /* Labels must never be transformed by a host \`button { text-transform }\`. */
+    [data-cancia-toolbar] [data-cancia-label] {
+      text-transform: none;
+      letter-spacing: normal;
     }
   `;
   document.head.appendChild(s);
@@ -2910,27 +3792,28 @@ var tooltipVisible = false;
 function getOrCreateBtnTooltip() {
   if (!btnTooltipEl) {
     btnTooltipEl = document.createElement("div");
+    markUi(btnTooltipEl);
     btnTooltipEl.style.cssText = `
       position: fixed;
       pointer-events: none;
-      z-index: 2147483646;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
-      color: #fff;
-      background: rgba(10,10,12,0.92);
-      backdrop-filter: blur(8px);
-      -webkit-backdrop-filter: blur(8px);
-      border: 1px solid rgba(255,255,255,0.1);
-      padding: 4px 8px; border-radius: 6px;
+      z-index: ${v("z-panel")};
+      font-size: ${v("text-xs")}; font-weight: 500; letter-spacing: 0.02em;
+      color: ${v("fg-strong")};
+      background: ${v("surface-1")};
+      backdrop-filter: ${v("blur")};
+      -webkit-backdrop-filter: ${v("blur")};
+      border: 1px solid ${v("border-strong")};
+      padding: ${v("space-1")} ${v("space-2")};
+      border-radius: ${v("radius-sm")};
       white-space: nowrap;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+      box-shadow: ${v("shadow-sm")};
       display: none;
     `;
     document.body.appendChild(btnTooltipEl);
   }
   return btnTooltipEl;
 }
-function showBtnTooltip(btn, label) {
+function showBtnTooltip(btn, label2) {
   if (tooltipHideTimer) {
     clearTimeout(tooltipHideTimer);
     tooltipHideTimer = null;
@@ -2942,9 +3825,9 @@ function showBtnTooltip(btn, label) {
   const doShow = () => {
     tooltipVisible = true;
     const tooltip = getOrCreateBtnTooltip();
-    tooltip.textContent = label;
+    tooltip.textContent = label2;
     tooltip.style.display = "block";
-    tooltip.style.animation = "cancia-tooltip-in 0.12s cubic-bezier(0.16,1,0.3,1) both";
+    tooltip.style.animation = `cancia-tooltip-in ${v("duration-fast")} ${v("ease-out")} both`;
     const rect = btn.getBoundingClientRect();
     const tooltipH = 26;
     const gap = 8;
@@ -2972,37 +3855,39 @@ function buildToolbar() {
   injectStyles4();
   const bar = document.createElement("div");
   bar.dataset.canciaToolbar = "1";
+  markUi(bar);
   bar.style.cssText = `
     position: fixed;
-    bottom: 24px;
-    right: 24px;
-    z-index: 2147483647;
-    width: 44px;
-    height: 44px;
-    border-radius: 22px;
-    background: rgba(12, 12, 14, 0.92);
-    backdrop-filter: blur(16px) saturate(180%);
-    -webkit-backdrop-filter: blur(16px) saturate(180%);
-    border: 1px solid rgba(255,255,255,0.08);
-    box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    font-size: 13px;
-    color: #f0f0f0;
+    bottom: ${v("space-6")};
+    right: ${v("space-6")};
+    z-index: ${v("z-bar")};
+    width: 52px;
+    height: 52px;
+    border-radius: ${v("radius-full")};
+    background: ${v("surface-1")};
+    backdrop-filter: ${v("blur")};
+    -webkit-backdrop-filter: ${v("blur")};
+    border: 1px solid ${v("border")};
+    box-shadow: ${v("shadow")};
+    font-size: ${v("text-base")};
+    color: ${v("fg")};
     user-select: none;
     cursor: pointer;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: width 0.45s cubic-bezier(0.19, 1, 0.22, 1), border-radius 0.45s cubic-bezier(0.19, 1, 0.22, 1);
-    animation: cancia-enter 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) both;
+    transition: width ${v("duration-slow")} ${v("ease")},
+                border-radius ${v("duration-slow")} ${v("ease")};
+    animation: cancia-enter ${v("duration-slow")} ${v("ease-spring")} both;
   `;
   const collapseIcon = document.createElement("div");
   collapseIcon.style.cssText = `
     position: absolute;
     display: flex; align-items: center; justify-content: center;
-    color: rgba(255,255,255,0.7);
-    transition: opacity 0.15s, transform 0.15s cubic-bezier(0.2,0,0,1);
+    color: ${v("fg")};
+    transition: opacity ${v("duration-fast")} ${v("ease")},
+                transform ${v("duration-fast")} ${v("ease")};
     pointer-events: none;
   `;
   collapseIcon.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -3013,16 +3898,17 @@ function buildToolbar() {
   controls.style.cssText = `
     display: flex;
     align-items: center;
-    gap: 0.375rem;
+    gap: ${v("space-1")};
     padding: 5px;
     white-space: nowrap;
     opacity: 0;
+    transform: scale(0.6);
     pointer-events: none;
     transform-origin: right center;
   `;
   let editActive = false;
-  const editBtn = makeIconButton(
-    `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  const editBtn = makeActionButton(
+    `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
       <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
       <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
     </svg>`,
@@ -3031,38 +3917,43 @@ function buildToolbar() {
   );
   controls.appendChild(editBtn);
   const canPublish = state.config?.canPublish ?? true;
-  const publishBtn = makeIconButton(
-    `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  const publishBtn = makeActionButton(
+    `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
       <path d="M22 2L11 13"/>
       <path d="M22 2L15 22l-4-9-9-4 20-7z"/>
     </svg>`,
-    canPublish ? "Publish" : "Publish (no publish method configured)",
+    "Publish",
     () => handlePublish(publishBtn)
   );
+  if (!canPublish) {
+    publishBtn.title = "No publish method is configured for this site.";
+  }
   if (!canPublish) {
     publishBtn.disabled = true;
     publishBtn.style.opacity = "0.3";
     publishBtn.style.cursor = "not-allowed";
   }
   controls.appendChild(publishBtn);
-  const logoutBtn = makeIconButton(
-    `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  const logoutBtn = makeActionButton(
+    `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
       <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
       <path d="M16 17l5-5-5-5"/>
       <path d="M21 12H9"/>
     </svg>`,
-    "Log out",
+    "Sign out",
     () => state.onLogout?.()
   );
   controls.appendChild(logoutBtn);
   controls.appendChild(makeDivider());
   const collapseBtn = makeIconButton(
-    `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+    `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
       <path d="M6 6l12 12M18 6L6 18"/>
     </svg>`,
     "Close",
     () => collapse(bar, collapseIcon, controls)
   );
+  collapseBtn.style.width = "38px";
+  collapseBtn.style.height = "38px";
   controls.appendChild(collapseBtn);
   bar.appendChild(collapseIcon);
   bar.appendChild(controls);
@@ -3070,10 +3961,10 @@ function buildToolbar() {
     if (!isExpanded) expand(bar, collapseIcon, controls);
   });
   bar.addEventListener("mouseenter", () => {
-    if (!isExpanded) bar.style.background = "rgba(24, 24, 28, 0.96)";
+    if (!isExpanded) bar.style.background = v("surface-2");
   });
   bar.addEventListener("mouseleave", () => {
-    bar.style.background = "rgba(12, 12, 14, 0.92)";
+    bar.style.background = v("surface-1");
   });
   onPendingChange(() => {
     const count = state.pending.size;
@@ -3089,9 +3980,10 @@ function buildToolbar() {
     state.editMode = editActive;
     const svgEl = editBtn.querySelector("svg");
     if (editActive) {
-      editBtn.style.background = `${accent5()}22`;
-      editBtn.style.color = accent5();
-      if (svgEl) svgEl.style.stroke = accent5();
+      editBtn.dataset.canciaActive = "1";
+      editBtn.style.background = v("accent-soft");
+      editBtn.style.color = v("accent");
+      if (svgEl) svgEl.style.stroke = v("accent");
       editBtn.dataset.canciaTooltip = "Stop editing (Esc)";
       attachHighlight((selection) => {
         if (selection.kind === "field") {
@@ -3155,8 +4047,9 @@ function buildToolbar() {
       };
       document.addEventListener("keydown", editModeEscListener, true);
     } else {
+      delete editBtn.dataset.canciaActive;
       editBtn.style.background = "transparent";
-      editBtn.style.color = "rgba(255,255,255,0.85)";
+      editBtn.style.color = v("fg-strong");
       if (svgEl) svgEl.style.stroke = "";
       editBtn.dataset.canciaTooltip = "Edit";
       detachHighlight();
@@ -3183,40 +4076,49 @@ function expand(bar, icon, controls) {
   controls.style.visibility = "hidden";
   controls.style.opacity = "0";
   controls.style.pointerEvents = "none";
-  bar.style.width = "max-content";
   bar.style.borderRadius = "100px";
-  requestAnimationFrame(() => {
-    const naturalW = bar.scrollWidth;
-    bar.style.width = "44px";
+  bar.style.width = "max-content";
+  const naturalW = bar.scrollWidth;
+  bar.style.width = "52px";
+  controls.style.visibility = "";
+  void bar.offsetWidth;
+  bar.style.width = `${naturalW}px`;
+  bar.style.cursor = "default";
+  icon.style.opacity = "0";
+  icon.style.transform = "scale(0.5) rotate(-90deg)";
+  revealTimer = setTimeout(() => {
+    revealTimer = null;
+    if (!isExpanded) return;
+    controls.style.pointerEvents = "auto";
     controls.style.visibility = "";
-    requestAnimationFrame(() => {
-      bar.style.width = `${naturalW}px`;
-      bar.style.borderRadius = "100px";
-      bar.style.cursor = "default";
-      icon.style.opacity = "0";
-      icon.style.transform = "scale(0.5) rotate(-90deg)";
-      setTimeout(() => {
-        controls.style.pointerEvents = "auto";
-        controls.style.animation = "cancia-controls-in 0.4s cubic-bezier(0.19, 1, 0.22, 1) both";
-        controls.style.opacity = "1";
-      }, 80);
-    });
-  });
+    controls.style.animation = "none";
+    controls.style.transition = `opacity ${v("duration")} ${v("ease")}, transform ${v("duration")} ${v("ease")}`;
+    void controls.offsetWidth;
+    controls.style.opacity = "1";
+    controls.style.transform = "scale(1)";
+  }, 80);
 }
 function collapse(bar, icon, controls) {
   if (!isExpanded) return;
   isExpanded = false;
   hideBtnTooltip();
+  if (revealTimer !== null) {
+    clearTimeout(revealTimer);
+    revealTimer = null;
+  }
   if (expandedEscListener) {
     document.removeEventListener("keydown", expandedEscListener, true);
     expandedEscListener = null;
   }
   controls.style.pointerEvents = "none";
-  controls.style.animation = "cancia-controls-out 0.15s cubic-bezier(0.4, 0, 1, 1) both";
+  controls.style.animation = "none";
+  controls.style.transition = `opacity ${v("duration-fast")} ${v("ease-out")}, transform ${v("duration-fast")} ${v("ease-out")}`;
+  controls.style.opacity = "0";
+  controls.style.transform = "scale(0.6)";
   setTimeout(() => {
-    controls.style.opacity = "0";
-    bar.style.width = "44px";
-    bar.style.borderRadius = "22px";
+    if (isExpanded) return;
+    bar.style.width = "52px";
+    bar.style.borderRadius = "26px";
     bar.style.cursor = "pointer";
     icon.style.opacity = "1";
     icon.style.transform = "scale(1) rotate(0deg)";
@@ -3260,42 +4162,87 @@ async function handlePublish(btn) {
 }
 function showToast(message, type) {
   const toast = document.createElement("div");
-  const color = type === "success" ? "#4ade80" : "#f87171";
+  markUi(toast);
+  const color = type === "success" ? v("success") : v("danger");
   toast.style.cssText = `
-    position: fixed; bottom: 80px; right: 24px; z-index: 2147483647;
-    display: flex; align-items: center; gap: 8px;
-    background: rgba(12, 12, 14, 0.95);
-    backdrop-filter: blur(16px);
-    border: 1px solid rgba(255,255,255,0.08);
-    border-radius: 10px; padding: 10px 14px;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    font-size: 13px; font-weight: 500; color: #f0f0f0;
-    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
+    position: fixed; bottom: 80px; right: ${v("space-6")}; z-index: ${v("z-bar")};
+    display: flex; align-items: center; gap: ${v("space-2")};
+    background: ${v("surface-1")};
+    backdrop-filter: ${v("blur")};
+    -webkit-backdrop-filter: ${v("blur")};
+    border: 1px solid ${v("border")};
+    border-radius: ${v("radius")}; padding: 10px 14px;
+    font-size: ${v("text-base")}; font-weight: 500; color: ${v("fg-strong")};
+    box-shadow: ${v("shadow")};
     pointer-events: none;
-    animation: cancia-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+    opacity: 0; transform: translateY(4px);
+    transition: opacity ${v("duration")} ${v("ease")}, transform ${v("duration")} ${v("ease")};
   `;
   const dot = document.createElement("span");
   dot.style.cssText = `width: 7px; height: 7px; border-radius: 50%; background: ${color}; flex-shrink: 0;`;
-  const label = document.createElement("span");
-  label.textContent = message;
+  const label2 = document.createElement("span");
+  label2.textContent = message;
   toast.appendChild(dot);
-  toast.appendChild(label);
+  toast.appendChild(label2);
   document.body.appendChild(toast);
+  requestAnimationFrame(() => {
+    toast.style.opacity = "1";
+    toast.style.transform = "translateY(0)";
+  });
   setTimeout(() => {
-    toast.style.transition = "opacity 0.25s cubic-bezier(0.4,0,1,1), transform 0.25s cubic-bezier(0.4,0,1,1)";
+    toast.style.transition = `opacity ${v("duration-fast")} ${v("ease-out")}, transform ${v("duration-fast")} ${v("ease-out")}`;
     toast.style.opacity = "0";
     toast.style.transform = "translateY(4px)";
     setTimeout(() => toast.remove(), 300);
   }, 2e3);
 }
+function makeActionButton(svg, labelText, onClick) {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.style.cssText = actionButton();
+  btn.setAttribute("aria-label", labelText);
+  const icon = document.createElement("span");
+  icon.style.cssText = `display: flex; flex-shrink: 0;`;
+  icon.innerHTML = svg;
+  const svgEl = icon.querySelector("svg");
+  if (svgEl) {
+    svgEl.style.cssText = "display:block;flex-shrink:0;overflow:visible;";
+    svgEl.setAttribute("stroke-width", "1.6");
+  }
+  const label2 = document.createElement("span");
+  label2.textContent = labelText;
+  label2.dataset.canciaLabel = "1";
+  btn.appendChild(icon);
+  btn.appendChild(label2);
+  btn.addEventListener("mouseenter", () => {
+    if (!btn.disabled && btn.dataset.canciaActive !== "1") {
+      btn.style.background = v("surface-hover");
+      btn.style.color = v("fg-strong");
+    }
+  });
+  btn.addEventListener("mouseleave", () => {
+    if (btn.dataset.canciaActive !== "1") {
+      btn.style.background = "transparent";
+      btn.style.color = v("fg");
+    }
+  });
+  attachPress(btn);
+  btn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    onClick();
+  });
+  return btn;
+}
 function makeIconButton(svg, title, onClick) {
   const btn = document.createElement("button");
   btn.style.cssText = `
-    display: flex; align-items: center; justify-content: center;
-    width: 34px; height: 34px; border-radius: 50%;
-    border: none; background: transparent;
-    cursor: pointer; color: rgba(255,255,255,0.85); flex-shrink: 0; padding: 0;
-    transition: color 0.15s, background 0.15s, transform 0.1s cubic-bezier(0.2,0,0,1);
+    ${iconButton(34)}
+    border-radius: ${v("radius-full")};
+    color: ${v("fg-strong")};
+    flex-shrink: 0; padding: 0;
+    transition: color ${v("duration-fast")} ${v("ease")},
+                background ${v("duration-fast")} ${v("ease")},
+                transform 0.1s ${v("ease")};
   `;
   btn.innerHTML = svg;
   const svgEl = btn.querySelector("svg");
@@ -3306,15 +4253,12 @@ function makeIconButton(svg, title, onClick) {
   btn.dataset.canciaTooltip = title;
   btn.addEventListener("mouseenter", () => {
     if (!btn.disabled) {
-      btn.style.background = "rgba(255,255,255,0.1)";
+      btn.style.background = v("surface-active");
       showBtnTooltip(btn, btn.dataset.canciaTooltip ?? title);
     }
   });
   btn.addEventListener("mouseleave", () => {
-    const activeColor = state.config?.accentColor ?? "#6366f1";
-    if (!btn.style.background.includes(activeColor.slice(1, 7))) {
-      btn.style.background = "transparent";
-    }
+    if (btn.dataset.canciaActive !== "1") btn.style.background = "transparent";
     hideBtnTooltip();
   });
   btn.addEventListener("click", (e) => {
@@ -3326,45 +4270,45 @@ function makeIconButton(svg, title, onClick) {
 }
 function makeDivider() {
   const d = document.createElement("span");
-  d.style.cssText = `width: 1px; height: 14px; background: rgba(255,255,255,0.08); flex-shrink: 0; margin: 0 1px;`;
+  d.style.cssText = `width: 1px; height: 14px; background: ${v("border")}; flex-shrink: 0; margin: 0 1px;`;
   return d;
 }
 function showPendingPanel(count) {
   if (!pendingPanelEl) {
     pendingPanelEl = document.createElement("div");
+    markUi(pendingPanelEl);
     pendingPanelEl.style.cssText = `
       position: fixed;
       bottom: 80px;
-      right: 24px;
-      z-index: 2147483646;
+      right: ${v("space-6")};
+      z-index: ${v("z-panel")};
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 12px;
-      background: rgba(12, 12, 14, 0.92);
-      backdrop-filter: blur(16px) saturate(180%);
-      -webkit-backdrop-filter: blur(16px) saturate(180%);
-      border: 1px solid rgba(255,255,255,0.08);
-      border-radius: 12px;
+      gap: ${v("space-3")};
+      background: ${v("surface-1")};
+      backdrop-filter: ${v("blur")};
+      -webkit-backdrop-filter: ${v("blur")};
+      border: 1px solid ${v("border")};
+      border-radius: ${v("radius")};
       padding: 0;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.4);
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      animation: cancia-fade-in 0.25s cubic-bezier(0.16,1,0.3,1) both;
+      box-shadow: ${v("shadow")};
       width: max-content;
       overflow: hidden;
+      opacity: 0; transform: translateY(4px);
+      transition: opacity ${v("duration")} ${v("ease")}, transform ${v("duration")} ${v("ease")};
     `;
-    const label2 = document.createElement("span");
-    label2.dataset.canciaPendingLabel = "1";
-    label2.style.cssText = `font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`;
+    const label3 = document.createElement("span");
+    label3.dataset.canciaPendingLabel = "1";
+    label3.style.cssText = `font-size: ${v("text-sm")}; font-weight: 500; color: ${v("fg-muted")}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`;
     const saveBtn = document.createElement("button");
     saveBtn.dataset.canciaSaveBtn = "1";
     saveBtn.title = "Save changes";
     saveBtn.style.cssText = `
-      padding: 5px 10px; border-radius: 7px; border: none; cursor: pointer;
-      background: #fff; color: #0c0c0e;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
-      transition: opacity 0.15s, transform 0.1s cubic-bezier(0.2,0,0,1);
+      padding: 5px 10px; border-radius: ${v("radius-sm")}; border: none; cursor: pointer;
+      background: ${v("accent")}; color: ${v("accent-fg")};
+      font-size: ${v("text-sm")}; font-weight: 600; letter-spacing: 0.01em;
+      transition: opacity ${v("duration-fast")} ${v("ease")}, transform ${v("duration-fast")} ${v("ease")};
       flex-shrink: 0;
     `;
     saveBtn.textContent = "Save";
@@ -3374,6 +4318,7 @@ function showPendingPanel(count) {
     saveBtn.addEventListener("mouseleave", () => {
       saveBtn.style.opacity = "1";
     });
+    attachPress(saveBtn);
     saveBtn.addEventListener("click", (e) => {
       e.stopPropagation();
       handleSave(saveBtn);
@@ -3381,22 +4326,22 @@ function showPendingPanel(count) {
     const undoBtn = document.createElement("button");
     undoBtn.title = "Discard changes";
     undoBtn.style.cssText = `
-      padding: 5px 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
-      background: transparent; color: rgba(255,255,255,0.5);
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
-      transition: color 0.15s, border-color 0.15s;
+      padding: 5px 10px; border-radius: ${v("radius-sm")}; border: 1px solid ${v("border")}; cursor: pointer;
+      background: transparent; color: ${v("fg-muted")};
+      font-size: ${v("text-sm")}; font-weight: 500; letter-spacing: 0.01em;
+      transition: color ${v("duration-fast")} ${v("ease")}, border-color ${v("duration-fast")} ${v("ease")};
       flex-shrink: 0;
     `;
     undoBtn.textContent = "Discard";
     undoBtn.addEventListener("mouseenter", () => {
-      undoBtn.style.color = "rgba(255,255,255,0.8)";
-      undoBtn.style.borderColor = "rgba(255,255,255,0.2)";
+      undoBtn.style.color = v("fg-strong");
+      undoBtn.style.borderColor = v("border-strong");
     });
     undoBtn.addEventListener("mouseleave", () => {
-      undoBtn.style.color = "rgba(255,255,255,0.5)";
-      undoBtn.style.borderColor = "rgba(255,255,255,0.1)";
+      undoBtn.style.color = v("fg-muted");
+      undoBtn.style.borderColor = v("border");
     });
+    attachPress(undoBtn);
     undoBtn.addEventListener("click", (e) => {
       e.stopPropagation();
       revertPending();
@@ -3411,32 +4356,36 @@ function showPendingPanel(count) {
     row.style.cssText = `
       grid-area: 1/1; display: flex; align-items: center; gap: 6px;
       padding: 7px 7px 7px 12px;
-      transition: transform 200ms cubic-bezier(0.785,0.135,0.15,0.86);
+      transition: transform ${v("duration")} ${v("ease-out")};
     `;
-    row.appendChild(label2);
+    row.appendChild(label3);
     row.appendChild(undoBtn);
     row.appendChild(saveBtn);
     const flash = document.createElement("div");
     flash.dataset.canciaPanelFlash = "1";
     flash.style.cssText = `
       grid-area: 1/1; display: flex; align-items: center; gap: 7px;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.8); white-space: nowrap;
-      padding: 7px 12px;
+      font-size: ${v("text-sm")}; font-weight: 500; color: ${v("fg-strong")}; white-space: nowrap;
+      padding: 7px ${v("space-3")};
       transform: translateY(-150%);
-      transition: transform 200ms cubic-bezier(0.785,0.135,0.15,0.86);
+      transition: transform ${v("duration")} ${v("ease-out")};
     `;
     slot.appendChild(row);
     slot.appendChild(flash);
     pendingPanelEl.appendChild(slot);
     document.body.appendChild(pendingPanelEl);
+    const panel = pendingPanelEl;
+    requestAnimationFrame(() => {
+      panel.style.opacity = "1";
+      panel.style.transform = "translateY(0)";
+    });
   }
-  const label = pendingPanelEl.querySelector("[data-cancia-pending-label]");
-  if (label) label.textContent = `${count} unsaved change${count === 1 ? "" : "s"}`;
+  const label2 = pendingPanelEl.querySelector("[data-cancia-pending-label]");
+  if (label2) label2.textContent = `${count} unsaved change${count === 1 ? "" : "s"}`;
 }
 function flashPanelMessage(message, type) {
   if (!pendingPanelEl) return;
-  const color = type === "success" ? "#4ade80" : "#f87171";
+  const color = type === "success" ? v("success") : v("danger");
   const row = pendingPanelEl.querySelector("[data-cancia-panel-row]");
   const flash = pendingPanelEl.querySelector("[data-cancia-panel-flash]");
   if (!row || !flash) return;
@@ -3449,7 +4398,7 @@ function hidePendingPanel() {
   if (!pendingPanelEl) return;
   const panel = pendingPanelEl;
   pendingPanelEl = null;
-  panel.style.transition = "opacity 0.2s cubic-bezier(0.4,0,1,1), transform 0.2s cubic-bezier(0.4,0,1,1)";
+  panel.style.transition = `opacity 0.2s ${v("ease-out")}, transform 0.2s ${v("ease-out")}`;
   panel.style.opacity = "0";
   panel.style.transform = "translateY(4px)";
   setTimeout(() => panel.remove(), 220);
@@ -3469,7 +4418,7 @@ function unmountToolbar() {
   pendingPanelEl?.remove();
   pendingPanelEl = null;
   if (toolbarEl) {
-    toolbarEl.style.animation = "cancia-exit 0.25s cubic-bezier(0.4, 0, 1, 1) both";
+    toolbarEl.style.animation = `cancia-exit ${v("duration-exit")} ${v("ease-out")} both`;
     setTimeout(() => {
       toolbarEl?.remove();
       toolbarEl = null;