diff --git a/apps/daemon/src/inline-assets.ts b/apps/daemon/src/inline-assets.ts
index bd1cccc38..cd4f63bec 100644
--- a/apps/daemon/src/inline-assets.ts
+++ b/apps/daemon/src/inline-assets.ts
@@ -410,4 +410,3 @@ export function escapeHtmlAttr(value: string): string {
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;');
 }
-
diff --git a/apps/web/src/components/FileViewer.tsx b/apps/web/src/components/FileViewer.tsx
index 7c1bce248..da0cdcfab 100644
--- a/apps/web/src/components/FileViewer.tsx
+++ b/apps/web/src/components/FileViewer.tsx
@@ -78,18 +78,25 @@ import type {
 import { ManualEditPanel, emptyManualEditDraft, type ManualEditDraft } from './ManualEditPanel';
 import {
   applyManualEditPatch,
+  isManualEditFullHtmlDocument,
   readManualEditAttributes,
   readManualEditFields,
   readManualEditOuterHtml,
   readManualEditStyles,
 } from '../edit-mode/source-patches';
-import type { ManualEditBridgeMessage, ManualEditHistoryEntry, ManualEditPatch, ManualEditStyles, ManualEditTarget } from '../edit-mode/types';
+import { MANUAL_EDIT_STYLE_PROPS, type ManualEditBridgeMessage, type ManualEditHistoryEntry, type ManualEditPatch, type ManualEditStyles, type ManualEditTarget } from '../edit-mode/types';
 import { isRenderableSketchJson, SketchPreview } from './SketchPreview';
 
 type TranslateFn = (key: keyof Dict, vars?: Record<string, string | number>) => string;
 type SlideState = { active: number; count: number };
 type BoardTool = 'inspect' | 'pod';
 type StrokePoint = { x: number; y: number };
+export type ManualEditPendingStyleSave = {
+  id: string;
+  styles: Partial<ManualEditStyles>;
+  label: string;
+  version: number;
+};
 type PreviewViewportId = 'desktop' | 'tablet' | 'mobile';
 type PreviewCanvasSize = { width: number; height: number };
 type PreviewViewportPreset = {
@@ -215,6 +222,57 @@ const DEPLOY_PROVIDER_OPTIONS: DeployProviderOption[] = [
   },
 ];
 
+function mergeManualEditInspectorStyles(
+  sourceStyles: ManualEditStyles,
+  previewStyles: ManualEditStyles,
+): ManualEditStyles {
+  return MANUAL_EDIT_STYLE_PROPS.reduce<ManualEditStyles>((acc, key) => {
+    const sourceValue = sourceStyles[key]?.trim();
+    const previewValue = previewStyles[key]?.trim();
+    const value = sourceValue || previewValue || '';
+    acc[key] = manualEditInspectorStyleValue(key, value);
+    return acc;
+  }, {} as ManualEditStyles);
+}
+
+function manualEditInspectorStyleValue(key: keyof ManualEditStyles, value: string): string {
+  if (!value) return '';
+  if (key === 'color' || key === 'backgroundColor' || key === 'borderColor') {
+    return normalizeManualEditInspectorColor(value);
+  }
+  return value;
+}
+
+function normalizeManualEditInspectorColor(value: string): string {
+  const trimmed = value.trim();
+  if (/^#[0-9a-f]{6}$/i.test(trimmed)) return trimmed.toLowerCase();
+  if (/^#[0-9a-f]{3}$/i.test(trimmed)) {
+    const r = trimmed[1]!, g = trimmed[2]!, b = trimmed[3]!;
+    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+  }
+  const rgba = trimmed.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i);
+  if (!rgba) return trimmed;
+  if (rgba[4] !== undefined && Number(rgba[4]) === 0) return '';
+  const toHex = (raw: string) => Math.max(0, Math.min(255, Math.round(Number(raw))))
+    .toString(16)
+    .padStart(2, '0');
+  return `#${toHex(rgba[1]!)}${toHex(rgba[2]!)}${toHex(rgba[3]!)}`;
+}
+
+function manualEditPersistedValueMatchesSavedSnapshot(
+  key: keyof ManualEditStyles,
+  persistedValue: string,
+  savedValue: string,
+): boolean {
+  return canonicalManualEditStyleValue(key, persistedValue) === canonicalManualEditStyleValue(key, savedValue);
+}
+
+function canonicalManualEditStyleValue(key: keyof ManualEditStyles, value: string): string {
+  const normalized = manualEditInspectorStyleValue(key, value).trim();
+  if (!normalized) return '';
+  return normalized.toLowerCase();
+}
+
 function getDeployProviderOption(providerId: WebDeployProviderId): DeployProviderOption {
   return DEPLOY_PROVIDER_OPTIONS.find((option) => option.id === providerId) ?? DEPLOY_PROVIDER_OPTIONS[0]!;
 }
@@ -379,6 +437,34 @@ function previewScaleShellStyle(
   };
 }
 
+function manualEditPreviewShellStyle(
+  viewport: PreviewViewportId,
+  previewScale: number,
+  frozenWidth: number | null,
+): CSSProperties & Record<string, string | number> {
+  if (viewport === 'desktop' && frozenWidth) {
+    return {
+      width: `${frozenWidth / previewScale}px`,
+      height: `${100 / previewScale}%`,
+      transform: `scale(${previewScale})`,
+      transformOrigin: '0 0',
+    };
+  }
+  return previewScaleShellStyle(viewport, previewScale);
+}
+
+export function cancelManualEditPendingStyleSnapshot(
+  pending: ManualEditPendingStyleSave | null,
+  id: string,
+  keys: Array<keyof ManualEditStyles>,
+): ManualEditPendingStyleSave | null {
+  if (!pending || pending.id !== id || keys.length === 0) return pending;
+  const nextStyles = { ...pending.styles };
+  for (const key of keys) delete nextStyles[key];
+  if (Object.keys(nextStyles).length === 0) return null;
+  return { ...pending, styles: nextStyles };
+}
+
 function usePreviewCanvasSize<T extends HTMLElement>() {
   const ref = useRef<T | null>(null);
   const [size, setSize] = useState<PreviewCanvasSize | undefined>(undefined);
@@ -3353,7 +3439,7 @@ function HtmlViewer({
   const [inTabPresent, setInTabPresent] = useState(false);
   const [reloadKey, setReloadKey] = useState(0);
   const [boardMode, setBoardMode] = useState(false);
-  const boardTool: BoardTool = 'inspect';
+  const [boardTool, setBoardTool] = useState<BoardTool>('inspect');
   const [inspectMode, setInspectMode] = useState(false);
   const [palettePopoverOpen, setPalettePopoverOpen] = useState(false);
   const [selectedPalette, setSelectedPalette] = useState<PaletteId | null>(null);
@@ -3364,21 +3450,31 @@ function HtmlViewer({
   const [openHintBox, setOpenHintBox] = useState(true);
   const [manualEditMode, setManualEditModeRaw] = useState(false);
   const [manualEditFrozenSource, setManualEditFrozenSource] = useState<string | null>(null);
+  const [manualEditViewportWidth, setManualEditViewportWidth] = useState<number | null>(null);
   const setManualEditMode = useCallback((next: boolean | ((prev: boolean) => boolean)) => {
     setManualEditModeRaw((prev) => {
       const value = typeof next === 'function' ? (next as (p: boolean) => boolean)(prev) : next;
-      if (value !== prev && !value) setManualEditFrozenSource(null);
+      if (value !== prev && !value) {
+        setManualEditFrozenSource(null);
+        setManualEditViewportWidth(null);
+      }
       return value;
     });
   }, []);
   const [manualEditTargets, setManualEditTargets] = useState<ManualEditTarget[]>([]);
   const [selectedManualEditTarget, setSelectedManualEditTarget] = useState<ManualEditTarget | null>(null);
+  const selectedManualEditTargetIdRef = useRef<string | null>(null);
   const [manualEditDraft, setManualEditDraft] = useState<ManualEditDraft>(() => emptyManualEditDraft());
   const [manualEditHistory, setManualEditHistory] = useState<ManualEditHistoryEntry[]>([]);
   const [manualEditUndone, setManualEditUndone] = useState<ManualEditHistoryEntry[]>([]);
   const [manualEditError, setManualEditError] = useState<string | null>(null);
   const [manualEditSaving, setManualEditSaving] = useState(false);
   const manualEditSavingRef = useRef(false);
+  const manualEditPendingStyleRef = useRef<ManualEditPendingStyleSave | null>(null);
+  const manualEditStyleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const manualEditPreviewVersionRef = useRef(0);
+  const sourceRef = useRef<string | null>(source);
+  const sourceFileKeyRef = useRef<string | null>(null);
   const templateNameId = useId();
   const templateDescriptionId = useId();
   // Opt back into the legacy inline-asset srcDoc path via `?forceInline=1`
@@ -3559,14 +3655,25 @@ function HtmlViewer({
   }, [liveCommentTargets]);
 
   useEffect(() => {
+    const sourceFileKey = `${projectId}\0${file.name}\0${liveHtml === undefined ? 'raw' : 'live'}`;
     if (liveHtml !== undefined) {
+      sourceFileKeyRef.current = sourceFileKey;
       setSource(liveHtml);
+      sourceRef.current = liveHtml;
       return;
     }
-    setSource(null);
+    const fileChanged = sourceFileKeyRef.current !== sourceFileKey;
+    sourceFileKeyRef.current = sourceFileKey;
+    if (fileChanged) {
+      setSource(null);
+      sourceRef.current = null;
+    }
     let cancelled = false;
     void fetchProjectFileText(projectId, file.name).then((text) => {
-      if (!cancelled) setSource(text);
+      if (!cancelled) {
+        setSource(text);
+        sourceRef.current = text;
+      }
     });
     return () => {
       cancelled = true;
@@ -3614,6 +3721,7 @@ function HtmlViewer({
   const previewSource = (manualEditMode && manualEditFrozenSource !== null)
     ? manualEditFrozenSource
     : livePreviewSource;
+  const manualEditPageStylesEnabled = typeof source === 'string' && isManualEditFullHtmlDocument(source);
   const drawClickSelectionMode = drawOverlayOpen && drawOverlayMode === 'click' && !manualEditMode;
   // When we URL-load the iframe directly, skip every in-host inlining /
   // srcDoc-rebuilding step. The browser does the asset resolution itself,
@@ -3694,13 +3802,21 @@ function HtmlViewer({
     const win = iframeRef.current?.contentWindow;
     if (!win) return;
     win.postMessage({ type: 'od-edit-mode', enabled: manualEditMode }, '*');
-  }, [manualEditMode, srcDoc]);
+    postSelectedManualEditTargetToIframe(manualEditMode ? selectedManualEditTarget?.id ?? null : null);
+  }, [manualEditMode, selectedManualEditTarget?.id, srcDoc]);
 
-  const previewStyleToIframe = useCallback((id: string, styles: Partial<ManualEditStyles>) => {
+  const previewStyleToIframe = useCallback((id: string, styles: Partial<ManualEditStyles>, version: number) => {
+    const win = iframeRef.current?.contentWindow;
+    if (!win) return false;
+    win.postMessage({ type: 'od-edit-preview-style', id, styles, version }, '*');
+    return true;
+  }, []);
+
+  function postSelectedManualEditTargetToIframe(id: string | null) {
     const win = iframeRef.current?.contentWindow;
     if (!win) return;
-    win.postMessage({ type: 'od-edit-preview-style', id, styles }, '*');
-  }, []);
+    win.postMessage({ type: 'od-edit-selected-target', id }, '*');
+  }
 
   function syncBridgeModes() {
     const win = iframeRef.current?.contentWindow;
@@ -3711,6 +3827,7 @@ function HtmlViewer({
       mode: drawClickSelectionMode ? 'picker' : boardTool,
     }, '*');
     win.postMessage({ type: 'od-edit-mode', enabled: manualEditMode }, '*');
+    postSelectedManualEditTargetToIframe(manualEditMode ? selectedManualEditTarget?.id ?? null : null);
   }
 
   useEffect(() => {
@@ -3789,12 +3906,17 @@ function HtmlViewer({
     setInspectError(null);
     setQueuedBoardNotes([]);
     setStrokePoints([]);
+    setManualEditFrozenSource(null);
+    setManualEditViewportWidth(null);
     setManualEditTargets([]);
     setSelectedManualEditTarget(null);
+    selectedManualEditTargetIdRef.current = null;
     setManualEditDraft(emptyManualEditDraft());
     setManualEditHistory([]);
     setManualEditUndone([]);
     setManualEditError(null);
+    manualEditPendingStyleRef.current = null;
+    clearManualEditStyleTimer();
   }, [file.name]);
 
   // Selecting a new file or turning inspect off resets the panel target.
@@ -3828,12 +3950,17 @@ function HtmlViewer({
   }
 
   useEffect(() => {
+    sourceRef.current = source;
     if (source == null) return;
     setManualEditDraft((current) => (
       current.fullSource === source ? current : { ...current, fullSource: source }
     ));
   }, [source]);
 
+  useEffect(() => {
+    selectedManualEditTargetIdRef.current = selectedManualEditTarget?.id ?? null;
+  }, [selectedManualEditTarget?.id]);
+
   useEffect(() => {
     const selectionMode = boardMode || drawClickSelectionMode;
     if (!selectionMode) {
@@ -3960,6 +4087,11 @@ function HtmlViewer({
       setManualEditTargets([]);
       setSelectedManualEditTarget(null);
       setManualEditError(null);
+      manualEditPendingStyleRef.current = null;
+      if (manualEditStyleTimerRef.current) {
+        clearTimeout(manualEditStyleTimerRef.current);
+        manualEditStyleTimerRef.current = null;
+      }
       return;
     }
     function onMessage(ev: MessageEvent) {
@@ -3968,21 +4100,126 @@ function HtmlViewer({
       if (!data?.type) return;
       if (data.type === 'od-edit-targets' && Array.isArray(data.targets)) {
         setManualEditTargets(data.targets);
+        // Target broadcasts can be briefly empty while the iframe/save path is
+        // settling; keep the user's inspector selection unless a fresh copy is
+        // available to update its metadata.
         setSelectedManualEditTarget((current) =>
-          current ? data.targets.find((target) => target.id === current.id) ?? null : current,
+          current ? data.targets.find((target) => target.id === current.id) ?? current : current,
         );
+        const selectedId = selectedManualEditTargetIdRef.current;
+        if (selectedId) setTimeout(() => postSelectedManualEditTargetToIframe(selectedId), 0);
         return;
       }
       if (data.type === 'od-edit-select') {
-        selectManualEditTarget(data.target);
+        void selectManualEditTarget(data.target);
+        return;
       }
     }
     window.addEventListener('message', onMessage);
     return () => window.removeEventListener('message', onMessage);
   }, [manualEditMode, source]);
 
-  function selectManualEditTarget(target: ManualEditTarget) {
-    const base = source ?? '';
+  function nextManualEditPreviewVersion(): number {
+    manualEditPreviewVersionRef.current += 1;
+    return manualEditPreviewVersionRef.current;
+  }
+
+  function inspectorManualEditStyles(target: ManualEditTarget, baseSource: string): ManualEditStyles {
+    const inlineStyles = readManualEditStyles(baseSource, target.id);
+    return mergeManualEditInspectorStyles(inlineStyles, target.styles);
+  }
+
+  function reconcileManualEditStyleSave(
+    id: string,
+    savedStyles: Partial<ManualEditStyles>,
+    savedSource: string,
+  ) {
+    if (id !== '__body__' && !readManualEditOuterHtml(savedSource, id)) {
+      setManualEditError('The selected target no longer exists in the saved source. Refreshing the preview.');
+      setSelectedManualEditTarget(null);
+      setManualEditFrozenSource(null);
+      setReloadKey((key) => key + 1);
+      return;
+    }
+    const sourceStyles = readManualEditStyles(savedSource, id);
+    const supersededStyles = manualEditPendingStyleRef.current?.id === id
+      ? manualEditPendingStyleRef.current.styles
+      : {};
+    const repairStyles: Partial<ManualEditStyles> = {};
+    for (const key of Object.keys(savedStyles) as Array<keyof ManualEditStyles>) {
+      if (Object.prototype.hasOwnProperty.call(supersededStyles, key)) continue;
+      const sourceValue = manualEditInspectorStyleValue(key, sourceStyles[key] ?? '');
+      const savedValue = savedStyles[key] ?? '';
+      if (manualEditPersistedValueMatchesSavedSnapshot(key, sourceValue, savedValue)) continue;
+      repairStyles[key] = sourceValue;
+    }
+    if (Object.keys(repairStyles).length === 0) return;
+    previewStyleToIframe(id, repairStyles, nextManualEditPreviewVersion());
+    setManualEditDraft((current) => ({
+      ...current,
+      styles: { ...current.styles, ...repairStyles },
+    }));
+    setManualEditError('Saved styles differed from the active preview. Reconciled the selected target from source.');
+  }
+
+  function scheduleManualEditStyleSave() {
+    if (manualEditStyleTimerRef.current) clearTimeout(manualEditStyleTimerRef.current);
+    manualEditStyleTimerRef.current = setTimeout(() => {
+      manualEditStyleTimerRef.current = null;
+      void flushManualEditStyleSave();
+    }, 1000);
+  }
+
+  function clearManualEditStyleTimer() {
+    if (!manualEditStyleTimerRef.current) return;
+    clearTimeout(manualEditStyleTimerRef.current);
+    manualEditStyleTimerRef.current = null;
+  }
+
+  function cancelManualEditPendingStyles(id: string, keys: Array<keyof ManualEditStyles>) {
+    const nextPending = cancelManualEditPendingStyleSnapshot(manualEditPendingStyleRef.current, id, keys);
+    if (!nextPending) {
+      manualEditPendingStyleRef.current = null;
+      clearManualEditStyleTimer();
+      return;
+    }
+    manualEditPendingStyleRef.current = nextPending;
+  }
+
+  async function handleManualEditStyleChange(id: string, styles: Partial<ManualEditStyles>, label: string) {
+    const version = nextManualEditPreviewVersion();
+    const currentPending = manualEditPendingStyleRef.current;
+    const pendingStyles = currentPending?.id === id
+      ? { ...currentPending.styles, ...styles }
+      : styles;
+    const pending: ManualEditPendingStyleSave = { id, styles: pendingStyles, label, version };
+    manualEditPendingStyleRef.current = pending;
+    setManualEditError(null);
+    previewStyleToIframe(id, styles, version);
+    scheduleManualEditStyleSave();
+  }
+
+  async function flushManualEditStyleSave(): Promise<boolean> {
+    const pending = manualEditPendingStyleRef.current;
+    if (!pending) return true;
+    if (manualEditSavingRef.current) {
+      scheduleManualEditStyleSave();
+      return false;
+    }
+    manualEditPendingStyleRef.current = null;
+    return applyManualEdit({ id: pending.id, kind: 'set-style', styles: pending.styles }, pending.label);
+  }
+
+  async function exitManualEditModeAfterFlush(): Promise<boolean> {
+    const ok = await flushManualEditStyleSave();
+    if (!ok) return false;
+    setManualEditMode(false);
+    return true;
+  }
+
+  async function selectManualEditTarget(target: ManualEditTarget) {
+    if (!(await flushManualEditStyleSave())) return;
+    const base = sourceRef.current ?? '';
     const fields = readManualEditFields(base, target.id);
     setSelectedManualEditTarget(target);
     setManualEditDraft({
@@ -3990,7 +4227,7 @@ function HtmlViewer({
       href: fields.href ?? target.fields.href ?? '',
       src: fields.src ?? target.fields.src ?? '',
       alt: fields.alt ?? target.fields.alt ?? '',
-      styles: readManualEditStyles(base, target.id),
+      styles: inspectorManualEditStyles(target, base),
       attributesText: JSON.stringify(readManualEditAttributes(base, target.id), null, 2),
       outerHtml: readManualEditOuterHtml(base, target.id) || target.outerHtml,
       fullSource: base,
@@ -3998,29 +4235,36 @@ function HtmlViewer({
     setManualEditError(null);
   }
 
-  async function applyManualEdit(patch: ManualEditPatch, label: string) {
-    if (manualEditSavingRef.current) return;
-    if (source == null) return;
+  async function clearManualEditTargetSelection() {
+    if (!(await flushManualEditStyleSave())) return;
+    setSelectedManualEditTarget(null);
+    setManualEditDraft(emptyManualEditDraft(sourceRef.current ?? ''));
+    setManualEditError(null);
+  }
+
+  async function applyManualEdit(patch: ManualEditPatch, label: string): Promise<boolean> {
+    if (manualEditSavingRef.current) return false;
+    if (sourceRef.current == null) return false;
     manualEditSavingRef.current = true;
     setManualEditSaving(true);
     setManualEditError(null);
     try {
-      const baseSource = source;
+      const baseSource = sourceRef.current;
       const result = applyManualEditPatch(baseSource, patch);
       if (!result.ok) {
         setManualEditError(result.error ?? 'Could not apply edit.');
-        return;
+        return false;
       }
       if (!(await confirmManualEditHistorySource(
         baseSource,
         'The file changed outside manual edit mode. Refreshing before applying manual edits.',
-      ))) return;
+      ))) return false;
       const saved = await writeProjectTextFile(projectId, file.name, result.source, {
         artifactManifest: file.artifactManifest,
       });
       if (!saved) {
         setManualEditError('Could not save the edited file.');
-        return;
+        return false;
       }
       const entry: ManualEditHistoryEntry = {
         id: `${Date.now()}-${manualEditHistory.length}`,
@@ -4031,14 +4275,20 @@ function HtmlViewer({
         createdAt: Date.now(),
       };
       setSource(result.source);
+      sourceRef.current = result.source;
       setInlinedSource(null);
       setManualEditHistory((current) => [entry, ...current]);
       setManualEditUndone([]);
       setManualEditDraft((current) => ({ ...current, fullSource: result.source }));
+      if (patch.kind === 'set-style') {
+        reconcileManualEditStyleSave(patch.id, patch.styles, result.source);
+      }
       await onFileSaved?.();
+      return true;
     } finally {
       manualEditSavingRef.current = false;
       setManualEditSaving(false);
+      if (manualEditPendingStyleRef.current) scheduleManualEditStyleSave();
     }
   }
 
@@ -4049,9 +4299,11 @@ function HtmlViewer({
     });
     if (persisted == null || persisted === expectedSource) return true;
     setSource(persisted);
+    sourceRef.current = persisted;
     setInlinedSource(null);
     setManualEditHistory([]);
     setManualEditUndone([]);
+    manualEditPendingStyleRef.current = null;
     setManualEditDraft((current) => ({ ...current, fullSource: persisted }));
     setManualEditError(message);
     return false;
@@ -4076,6 +4328,7 @@ function HtmlViewer({
         return;
       }
       setSource(latest.beforeSource);
+      sourceRef.current = latest.beforeSource;
       setInlinedSource(null);
       setManualEditHistory(rest);
       setManualEditUndone((current) => [latest, ...current]);
@@ -4106,6 +4359,7 @@ function HtmlViewer({
         return;
       }
       setSource(latest.afterSource);
+      sourceRef.current = latest.afterSource;
       setInlinedSource(null);
       setManualEditUndone(rest);
       setManualEditHistory((current) => [latest, ...current]);
@@ -4565,6 +4819,12 @@ function HtmlViewer({
     setStrokePoints([]);
   }
 
+  function activateBoard(tool: BoardTool) {
+    setBoardTool(tool);
+    setDrawOverlayOpen(false);
+    setBoardMode(true);
+  }
+
   function queueCurrentDraft() {
     const note = commentDraft.trim();
     if (!note) return;
@@ -4704,6 +4964,7 @@ function HtmlViewer({
     if (state === 'failed') return t('fileViewer.deployLinkFailed');
     return t('fileViewer.deployLinkPreparingLabel');
   };
+  const boardAvailable = mode === 'preview' && source !== null;
 
   return (
     <div className="viewer html-viewer">
@@ -4821,8 +5082,11 @@ function HtmlViewer({
                 setInspectMode(false);
                 setDrawOverlayOpen(false);
                 setMode('preview');
+                setManualEditViewportWidth(previewBodyRef.current?.clientWidth ?? null);
+                setManualEditMode(true);
+                return;
               }
-              setManualEditMode((value) => !value);
+              void exitManualEditModeAfterFlush();
             }}
           >
             <Icon name="edit" size={13} />
@@ -4836,15 +5100,25 @@ function HtmlViewer({
             aria-pressed={drawOverlayOpen}
             onClick={() => {
               const next = !drawOverlayOpen;
-              if (next) {
-                setManualEditMode(false);
+              if (!next) {
+                setDrawOverlayOpen(false);
+                return;
+              }
+              const activateDraw = () => {
                 setBoardMode(false);
                 clearBoardComposer();
                 setInspectMode(false);
                 setDrawOverlayMode('draw');
                 setMode('preview');
+                setDrawOverlayOpen(true);
+              };
+              if (manualEditMode) {
+                void exitManualEditModeAfterFlush().then((ok) => {
+                  if (ok) activateDraw();
+                });
+                return;
               }
-              setDrawOverlayOpen(next);
+              activateDraw();
             }}
           >
             <Icon name="draw" size={13} />
@@ -5123,13 +5397,20 @@ function HtmlViewer({
                 canUndo={manualEditHistory.length > 0}
                 canRedo={manualEditUndone.length > 0}
                 busy={manualEditSaving}
+                pageStylesEnabled={manualEditPageStylesEnabled}
                 onSelectTarget={selectManualEditTarget}
                 onDraftChange={setManualEditDraft}
-                onPreviewStyle={previewStyleToIframe}
+                onStyleChange={(id, styles, label) => {
+                  void handleManualEditStyleChange(id, styles, label);
+                }}
+                onInvalidStyle={cancelManualEditPendingStyles}
                 onApplyPatch={(patch, label) => {
                   void applyManualEdit(patch, label);
                 }}
                 onError={setManualEditError}
+                onClearSelection={() => {
+                  void clearManualEditTargetSelection();
+                }}
                 onCancelDraft={() => {
                   if (selectedManualEditTarget) selectManualEditTarget(selectedManualEditTarget);
                 }}
@@ -5143,7 +5424,11 @@ function HtmlViewer({
             ) : null}
             <div className={manualEditMode ? 'manual-edit-canvas' : 'comment-frame-clip'}>
               <div
-                style={previewScaleShellStyle(previewViewport, previewScale)}
+                style={
+                  manualEditMode
+                    ? manualEditPreviewShellStyle(previewViewport, previewScale, manualEditViewportWidth)
+                    : previewScaleShellStyle(previewViewport, previewScale)
+                }
               >
                 <PreviewDrawOverlay
                   active={drawOverlayOpen}
diff --git a/apps/web/src/components/ManualEditPanel.tsx b/apps/web/src/components/ManualEditPanel.tsx
index 34edb3abd..f45febe5b 100644
--- a/apps/web/src/components/ManualEditPanel.tsx
+++ b/apps/web/src/components/ManualEditPanel.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react';
-import { useT } from '../i18n';
 import { emptyManualEditStyles, type ManualEditHistoryEntry, type ManualEditPatch, type ManualEditStyles, type ManualEditTarget } from '../edit-mode/types';
 
 export interface ManualEditDraft {
@@ -13,8 +12,6 @@ export interface ManualEditDraft {
   fullSource: string;
 }
 
-export type ManualEditTab = 'content' | 'style' | 'attributes' | 'html' | 'source';
-
 export function emptyManualEditDraft(source = ''): ManualEditDraft {
   return {
     text: '', href: '', src: '', alt: '',
@@ -24,22 +21,15 @@ export function emptyManualEditDraft(source = ''): ManualEditDraft {
 }
 
 export function ManualEditPanel({
-  targets,
   selectedTarget,
   draft,
-  history,
   error,
-  canUndo,
-  canRedo,
-  busy = false,
-  onSelectTarget,
   onDraftChange,
-  onPreviewStyle,
-  onApplyPatch,
+  onStyleChange,
+  onInvalidStyle,
   onError,
-  onCancelDraft,
-  onUndo,
-  onRedo,
+  onClearSelection,
+  pageStylesEnabled = true,
 }: {
   targets: ManualEditTarget[];
   selectedTarget: ManualEditTarget | null;
@@ -49,241 +39,123 @@ export function ManualEditPanel({
   canUndo: boolean;
   canRedo: boolean;
   busy?: boolean;
+  pageStylesEnabled?: boolean;
   onSelectTarget: (target: ManualEditTarget) => void;
   onDraftChange: (draft: ManualEditDraft) => void;
-  onPreviewStyle?: (id: string, styles: Partial<ManualEditStyles>) => void;
+  onStyleChange?: (id: string, styles: Partial<ManualEditStyles>, label: string) => void;
+  onInvalidStyle?: (id: string, keys: Array<keyof ManualEditStyles>) => void;
   onApplyPatch: (patch: ManualEditPatch, label: string) => void;
   onError: (message: string) => void;
+  onClearSelection: () => void;
   onCancelDraft: () => void;
   onUndo: () => void;
   onRedo: () => void;
 }) {
-  const t = useT();
-  const [tab, setTab] = useState<ManualEditTab>('style');
-  const [advancedOpen, setAdvancedOpen] = useState(false);
-
-  useEffect(() => { setTab('style'); }, [selectedTarget?.id]);
-
-  // Live preview: every style change goes to the iframe via postMessage so the
-  // canvas updates instantly without an iframe reload. The 1.5s debounced
-  // source-rewrite still happens via onApplyPatch for persistence.
-  const lastPreviewedRef = useRef<string>('');
-  const lastAppliedRef = useRef<string>('');
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  useEffect(() => {
-    if (!selectedTarget || tab !== 'style') return;
-    const key = JSON.stringify(draft.styles);
-    if (key !== lastPreviewedRef.current) {
-      lastPreviewedRef.current = key;
-      onPreviewStyle?.(selectedTarget.id, draft.styles);
-    }
-    if (key === lastAppliedRef.current) return;
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => {
-      lastAppliedRef.current = key;
-      onApplyPatch({ id: selectedTarget.id, kind: 'set-style', styles: draft.styles }, `Style: ${selectedTarget.label}`);
-    }, 1500);
-    return () => { if (debounceRef.current) clearTimeout(debounceRef.current); };
-  }, [draft.styles, selectedTarget?.id, tab, onPreviewStyle, onApplyPatch]);
-
-  useEffect(() => {
-    lastAppliedRef.current = JSON.stringify(draft.styles);
-    lastPreviewedRef.current = lastAppliedRef.current;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedTarget?.id]);
-
   const targetForInspector = selectedTarget;
+  const changeTargetStyle = (key: keyof ManualEditStyles, value: string) => {
+    const nextStyles = { ...draft.styles, [key]: value };
+    onDraftChange({ ...draft, styles: nextStyles });
+    if (!targetForInspector) return;
+    const normalized = normalizeManualEditStyles({ [key]: value }, {
+      layoutEnabled: targetForInspector.isLayoutContainer,
+    });
+    if (!normalized.ok) {
+      onError(normalized.error);
+      onInvalidStyle?.(targetForInspector.id, [key]);
+      return;
+    }
+    onError('');
+    onStyleChange?.(targetForInspector.id, normalized.styles, `Style: ${targetForInspector.label}`);
+  };
 
   return (
     <aside className="manual-edit-right">
       <section className="manual-edit-modal cc-panel">
-        {targetForInspector && tab === 'style' ? (
+        {targetForInspector ? (
           <StyleInspector
             styles={draft.styles}
-            onChange={(styles) => onDraftChange({ ...draft, styles })}
+            layoutEnabled={targetForInspector.isLayoutContainer}
+            onClearSelection={onClearSelection}
+            onChange={changeTargetStyle}
           />
         ) : !targetForInspector ? (
-          <PageInspector onPreviewStyle={onPreviewStyle} onApplyPatch={onApplyPatch} />
-        ) : tab === 'content' ? (
-          <ContentEditor target={targetForInspector} draft={draft} onDraftChange={onDraftChange} />
-        ) : tab === 'attributes' ? (
-          <label className="manual-edit-field">
-            <span>{t('manualEdit.attributesJson')}</span>
-            <textarea className="manual-edit-code" value={draft.attributesText}
-              onChange={(event) => onDraftChange({ ...draft, attributesText: event.currentTarget.value })} />
-          </label>
-        ) : tab === 'html' ? (
-          <label className="manual-edit-field">
-            <span>{t('manualEdit.selectedHtml')}</span>
-            <textarea className="manual-edit-code tall" value={draft.outerHtml}
-              onChange={(event) => onDraftChange({ ...draft, outerHtml: event.currentTarget.value })} />
-          </label>
-        ) : tab === 'source' ? (
-          <label className="manual-edit-field">
-            <span>{t('manualEdit.fullSource')}</span>
-            <textarea className="manual-edit-code tall" value={draft.fullSource}
-              onChange={(event) => onDraftChange({ ...draft, fullSource: event.currentTarget.value })} />
-          </label>
+          <PageInspector
+            enabled={pageStylesEnabled}
+            onStyleChange={(styles) => {
+              const normalized = normalizeManualEditStyles(styles, { layoutEnabled: true });
+              if (!normalized.ok) {
+                onError(normalized.error);
+                onInvalidStyle?.('__body__', Object.keys(styles) as Array<keyof ManualEditStyles>);
+                return;
+              }
+              onError('');
+              onStyleChange?.('__body__', normalized.styles, 'Page styles');
+            }}
+          />
         ) : null}
 
         {error ? <div className="manual-edit-error">{error}</div> : null}
-
-        {targetForInspector ? (
-          <div className="cc-advanced">
-            <button type="button" className="cc-advanced-toggle" onClick={() => setAdvancedOpen((v) => !v)}>
-              {advancedOpen ? '▾' : '▸'} Advanced
-            </button>
-            {advancedOpen ? (
-              <>
-                <div className="manual-edit-tabs" role="tablist">
-                  <EditTabButton label={t('manualEdit.tabStyle')} tab="style" active={tab === 'style'} onClick={setTab} />
-                  <EditTabButton label={t('manualEdit.tabContent')} tab="content" active={tab === 'content'} onClick={setTab} />
-                  <EditTabButton label={t('manualEdit.tabAttributes')} tab="attributes" active={tab === 'attributes'} onClick={setTab} />
-                  <EditTabButton label={t('manualEdit.tabHtml')} tab="html" active={tab === 'html'} onClick={setTab} />
-                  <EditTabButton label={t('manualEdit.tabSource')} tab="source" active={tab === 'source'} onClick={setTab} />
-                </div>
-                <div className="manual-edit-actions">
-                  <button type="button" onClick={onCancelDraft} disabled={busy}>{t('common.cancel')}</button>
-                  <button type="button" onClick={onUndo} disabled={busy || !canUndo}>↶</button>
-                  <button type="button" onClick={onRedo} disabled={busy || !canRedo}>↷</button>
-                  {tab === 'content' ? (
-                    <button type="button" className="primary" disabled={busy}
-                      onClick={() => onApplyPatch(contentPatch(targetForInspector, draft), `Content: ${targetForInspector.label}`)}>
-                      {t('manualEdit.applyContent')}
-                    </button>
-                  ) : null}
-                  {tab === 'attributes' ? (
-                    <button type="button" className="primary" disabled={busy}
-                      onClick={() => {
-                        try { onApplyPatch(parseAttributesPatch(targetForInspector.id, draft.attributesText), `Attributes: ${targetForInspector.label}`); }
-                        catch (err) { onError(err instanceof Error ? err.message : t('manualEdit.invalidAttributes')); }
-                      }}>
-                      {t('manualEdit.applyAttributes')}
-                    </button>
-                  ) : null}
-                  {tab === 'html' ? (
-                    <button type="button" className="primary" disabled={busy}
-                      onClick={() => onApplyPatch({ id: targetForInspector.id, kind: 'set-outer-html', html: draft.outerHtml }, `HTML: ${targetForInspector.label}`)}>
-                      {t('manualEdit.applyHtml')}
-                    </button>
-                  ) : null}
-                  {tab === 'source' ? (
-                    <button type="button" className="primary" disabled={busy}
-                      onClick={() => onApplyPatch({ kind: 'set-full-source', source: draft.fullSource }, 'Full source')}>
-                      {t('manualEdit.applySource')}
-                    </button>
-                  ) : null}
-                </div>
-                <details className="cc-disclosure">
-                  <summary>Layers ({targets.length})</summary>
-                  <div className="manual-edit-layer-list">
-                    {targets.map((target) => (
-                      <button key={target.id} type="button"
-                        className={`manual-edit-layer-row ${targetForInspector?.id === target.id ? 'selected' : ''}`}
-                        onClick={() => onSelectTarget(target)}>
-                        <strong>{target.label}</strong>
-                        <span>{target.kind} - {target.id}</span>
-                      </button>
-                    ))}
-                  </div>
-                </details>
-                <details className="cc-disclosure">
-                  <summary>Changes ({history.length})</summary>
-                  {history.length === 0 ? (
-                    <div className="manual-edit-empty">No changes yet.</div>
-                  ) : (
-                    <div className="manual-edit-history-list">
-                      {history.map((entry) => (
-                        <article key={entry.id} className="manual-edit-history-entry">
-                          <strong>{entry.label}</strong>
-                          <code>{manualEditPatchSummary(entry.patch)}</code>
-                        </article>
-                      ))}
-                    </div>
-                  )}
-                </details>
-              </>
-            ) : null}
-          </div>
-        ) : null}
       </section>
     </aside>
   );
 }
 
 function PageInspector({
-  onPreviewStyle, onApplyPatch,
+  enabled,
+  onStyleChange,
 }: {
-  onPreviewStyle?: (id: string, styles: Partial<ManualEditStyles>) => void;
-  onApplyPatch: (patch: ManualEditPatch, label: string) => void;
+  enabled: boolean;
+  onStyleChange: (styles: Partial<ManualEditStyles>) => void;
 }) {
   const [bg, setBg] = useState('');
   const [font, setFont] = useState('');
   const [size, setSize] = useState('');
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const lastAppliedRef = useRef<string>('');
-
-  useEffect(() => {
-    const styles: Partial<ManualEditStyles> = {
-      backgroundColor: bg,
-      fontFamily: font,
-      fontSize: size ? (/^\d+(\.\d+)?$/.test(size.trim()) ? `${size.trim()}px` : size.trim()) : '',
-    };
-    const key = JSON.stringify(styles);
-    onPreviewStyle?.('__body__', styles);
-    if (key === lastAppliedRef.current) return;
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => {
-      lastAppliedRef.current = key;
-      onApplyPatch({ id: '__body__', kind: 'set-style', styles }, 'Page styles');
-    }, 1500);
-    return () => { if (debounceRef.current) clearTimeout(debounceRef.current); };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [bg, font, size]);
+  const update = (next: { bg?: string; font?: string; size?: string }) => {
+    if ('bg' in next) {
+      const value = next.bg ?? '';
+      setBg(value);
+      onStyleChange({ backgroundColor: value });
+    }
+    if ('font' in next) {
+      const value = next.font ?? '';
+      setFont(value);
+      onStyleChange({ fontFamily: value });
+    }
+    if ('size' in next) {
+      const value = next.size ?? '';
+      setSize(value);
+      onStyleChange({ fontSize: value });
+    }
+  };
 
   return (
     <div className="cc-inspector">
       <Section title="PAGE">
-        <ColorRow label="Background" value={bg} onChange={setBg} />
-        <DropdownRow label="Font" value={font} onChange={setFont} options={['', 'Space Grotesk', 'Inter', 'Times', 'Arial']} placeholder="Space Grotesk" />
-        <UnitRow label="Base size" value={size} onChange={setSize} unit="px" />
+        {enabled ? (
+          <>
+            <ColorRow label="Background" value={bg} onChange={(value) => update({ bg: value })} />
+            <FontRow value={font} onChange={(value) => update({ font: value })} />
+            <UnitRow label="Base size" value={size} onChange={(value) => update({ size: value })} unit="px" autoUnit />
+          </>
+        ) : (
+          <p className="cc-section-hint">Page styles are available only for full HTML documents.</p>
+        )}
       </Section>
     </div>
   );
 }
 
-function ContentEditor({ target, draft, onDraftChange }: {
-  target: ManualEditTarget; draft: ManualEditDraft; onDraftChange: (draft: ManualEditDraft) => void;
-}) {
-  const t = useT();
-  if (target.kind === 'image') {
-    return (
-      <>
-        <label className="manual-edit-field"><span>{t('manualEdit.imageUrl')}</span>
-          <input value={draft.src} onChange={(event) => onDraftChange({ ...draft, src: event.currentTarget.value })} />
-        </label>
-        <label className="manual-edit-field"><span>{t('manualEdit.altText')}</span>
-          <input value={draft.alt} onChange={(event) => onDraftChange({ ...draft, alt: event.currentTarget.value })} />
-        </label>
-      </>
-    );
-  }
-  return (
-    <>
-      <label className="manual-edit-field">
-        <span>{target.kind === 'link' ? t('manualEdit.label') : t('manualEdit.text')}</span>
-        <textarea value={draft.text} onChange={(event) => onDraftChange({ ...draft, text: event.currentTarget.value })} />
-      </label>
-      {target.kind === 'link' ? (
-        <label className="manual-edit-field"><span>{t('manualEdit.href')}</span>
-          <input value={draft.href} onChange={(event) => onDraftChange({ ...draft, href: event.currentTarget.value })} />
-        </label>
-      ) : null}
-    </>
-  );
-}
-
-const FONT_OPTS = ['', 'Space Grotesk', 'Inter', 'Times', 'Arial', 'Roboto', 'Helvetica', 'Georgia', 'monospace'];
+const FONT_OPTS = [
+  { label: 'inherit', value: '' },
+  { label: 'Space Grotesk', value: '"Space Grotesk", Inter, system-ui, sans-serif' },
+  { label: 'Inter', value: 'Inter, system-ui, sans-serif' },
+  { label: 'Times', value: '"Times New Roman", Times, serif' },
+  { label: 'Arial', value: 'Arial, Helvetica, sans-serif' },
+  { label: 'Roboto', value: 'Roboto, Arial, sans-serif' },
+  { label: 'Helvetica', value: 'Helvetica, Arial, sans-serif' },
+  { label: 'Georgia', value: 'Georgia, serif' },
+  { label: 'monospace', value: 'SFMono-Regular, Consolas, "Liberation Mono", monospace' },
+] as const;
 const WEIGHT_OPTS = ['', '100', '200', '300', '400', '500', '600', '700', '800', '900'];
 const ALIGN_OPTS = ['', 'left', 'center', 'right', 'justify', 'start', 'end'];
 const DIRECTION_OPTS = ['', 'row', 'column', 'row-reverse', 'column-reverse'];
@@ -305,19 +177,127 @@ const EDITOR_SWATCH_COLORS = [
   '#ec4899',
 ] as const;
 
+type NormalizeResult =
+  | { ok: true; styles: Partial<ManualEditStyles> }
+  | { ok: false; error: string };
+
+const PX_STYLE_PROPS = new Set<keyof ManualEditStyles>([
+  'fontSize', 'letterSpacing', 'width', 'height', 'minHeight', 'gap',
+  'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+  'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+  'border', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth',
+  'borderRadius',
+]);
+const COLOR_STYLE_PROPS = new Set<keyof ManualEditStyles>(['color', 'backgroundColor', 'borderColor']);
+const SELECT_STYLE_OPTIONS: Partial<Record<keyof ManualEditStyles, ReadonlyArray<string>>> = {
+  fontFamily: FONT_OPTS.map((option) => option.value),
+  fontWeight: WEIGHT_OPTS,
+  textAlign: ALIGN_OPTS,
+  flexDirection: DIRECTION_OPTS,
+  justifyContent: JUSTIFY_OPTS,
+  alignItems: ITEMS_OPTS,
+  borderStyle: BORDER_STYLE_OPTS,
+};
+const LAYOUT_STYLE_PROPS = new Set<keyof ManualEditStyles>(['gap', 'flexDirection', 'justifyContent', 'alignItems']);
+
+export function normalizeManualEditStyles(
+  styles: Partial<ManualEditStyles>,
+  { layoutEnabled }: { layoutEnabled: boolean },
+): NormalizeResult {
+  const normalized: Partial<ManualEditStyles> = {};
+  for (const [rawKey, rawValue] of Object.entries(styles) as Array<[keyof ManualEditStyles, string]>) {
+    if (LAYOUT_STYLE_PROPS.has(rawKey) && !layoutEnabled) continue;
+    const value = rawValue.trim();
+    if (value === '') {
+      normalized[rawKey] = '';
+      continue;
+    }
+    if (PX_STYLE_PROPS.has(rawKey)) {
+      const px = normalizePxValue(value);
+      if (!px) return { ok: false, error: `${styleLabel(rawKey)} must be a number or px value.` };
+      normalized[rawKey] = px;
+      continue;
+    }
+    if (COLOR_STYLE_PROPS.has(rawKey)) {
+      const color = normalizeHexColor(value);
+      if (!color) return { ok: false, error: `${styleLabel(rawKey)} must be a hex color.` };
+      normalized[rawKey] = color;
+      continue;
+    }
+    if (rawKey === 'opacity') {
+      const n = Number(value);
+      if (!Number.isFinite(n)) return { ok: false, error: 'Opacity must be a number.' };
+      normalized.opacity = String(Math.max(0, Math.min(1, n)));
+      continue;
+    }
+    if (rawKey === 'lineHeight') {
+      const lineHeight = normalizeLineHeightValue(value);
+      if (!lineHeight) return { ok: false, error: 'Line height must be a positive number or px value.' };
+      normalized.lineHeight = lineHeight;
+      continue;
+    }
+    const options = SELECT_STYLE_OPTIONS[rawKey];
+    if (options) {
+      if (!options.includes(value)) return { ok: false, error: `${styleLabel(rawKey)} has an unsupported value.` };
+      normalized[rawKey] = value;
+      continue;
+    }
+    normalized[rawKey] = value;
+  }
+  return { ok: true, styles: normalized };
+}
+
+function normalizePxValue(value: string): string | null {
+  if (/^-?\d+(\.\d+)?$/.test(value)) return `${value}px`;
+  if (/^-?\d+(\.\d+)?px$/i.test(value)) return value.toLowerCase();
+  return null;
+}
+
+function normalizeLineHeightValue(value: string): string | null {
+  if (/^\d+(\.\d+)?$/.test(value)) {
+    const n = Number(value);
+    return n > 0 ? String(n) : null;
+  }
+  if (/^\d+(\.\d+)?px$/i.test(value)) {
+    const n = Number(value.slice(0, -2));
+    return n > 0 ? value.toLowerCase() : null;
+  }
+  return null;
+}
+
+function normalizeHexColor(value: string): string | null {
+  const trimmed = value.trim();
+  if (/^#[0-9a-f]{6}$/i.test(trimmed)) return trimmed.toLowerCase();
+  if (/^#[0-9a-f]{3}$/i.test(trimmed)) {
+    const r = trimmed[1]!, g = trimmed[2]!, b = trimmed[3]!;
+    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+  }
+  return null;
+}
+
+function styleLabel(key: keyof ManualEditStyles): string {
+  return key.replace(/[A-Z]/g, (match) => ` ${match.toLowerCase()}`);
+}
+
 function StyleInspector({
-  styles, onChange,
+  styles, layoutEnabled, onClearSelection, onChange,
 }: {
   styles: ManualEditStyles;
-  onChange: (styles: ManualEditStyles) => void;
+  layoutEnabled: boolean;
+  onClearSelection: () => void;
+  onChange: (key: keyof ManualEditStyles, value: string) => void;
 }) {
-  const u = (key: keyof ManualEditStyles, value: string) => onChange({ ...styles, [key]: value });
-  const um = (patch: Partial<ManualEditStyles>) => onChange({ ...styles, ...patch });
+  const u = (key: keyof ManualEditStyles, value: string) => onChange(key, value);
 
   return (
     <div className="cc-inspector">
+      <div className="cc-inspector-nav">
+        <button type="button" className="cc-inspector-page" onClick={onClearSelection} aria-label="Show page inspector">
+          Page
+        </button>
+      </div>
       <Section title="TYPOGRAPHY">
-        <DropdownRow label="Font" value={styles.fontFamily} onChange={(v) => u('fontFamily', v)} options={FONT_OPTS} placeholder="inherit" />
+        <FontRow value={styles.fontFamily} onChange={(v) => u('fontFamily', v)} />
         <PairRow>
           <UnitRow label="Size" value={styles.fontSize} onChange={(v) => u('fontSize', v)} unit="px" autoUnit />
           <DropdownRow label="Weight" value={styles.fontWeight} onChange={(v) => u('fontWeight', v)} options={WEIGHT_OPTS} />
@@ -339,14 +319,17 @@ function StyleInspector({
         </PairRow>
       </Section>
 
-      <Section title="LAYOUT">
+      <Section title="LAYOUT" inactive={!layoutEnabled}>
+        {!layoutEnabled ? (
+          <p className="cc-section-hint">Select a container or group to edit layout.</p>
+        ) : null}
         <PairRow>
-          <UnitRow label="Gap" value={styles.gap} onChange={(v) => u('gap', v)} unit="px" autoUnit />
-          <DropdownRow label="Direction" value={styles.flexDirection} onChange={(v) => u('flexDirection', v)} options={DIRECTION_OPTS} />
+          <UnitRow label="Gap" value={styles.gap} onChange={(v) => u('gap', v)} unit="px" autoUnit disabled={!layoutEnabled} />
+          <DropdownRow label="Direction" value={styles.flexDirection} onChange={(v) => u('flexDirection', v)} options={DIRECTION_OPTS} disabled={!layoutEnabled} />
         </PairRow>
         <PairRow>
-          <DropdownRow label="Justify" value={styles.justifyContent} onChange={(v) => u('justifyContent', v)} options={JUSTIFY_OPTS} />
-          <DropdownRow label="Align" value={styles.alignItems} onChange={(v) => u('alignItems', v)} options={ITEMS_OPTS} />
+          <DropdownRow label="Justify" value={styles.justifyContent} onChange={(v) => u('justifyContent', v)} options={JUSTIFY_OPTS} disabled={!layoutEnabled} />
+          <DropdownRow label="Align" value={styles.alignItems} onChange={(v) => u('alignItems', v)} options={ITEMS_OPTS} disabled={!layoutEnabled} />
         </PairRow>
       </Section>
 
@@ -378,9 +361,9 @@ function StyleInspector({
   );
 }
 
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
+function Section({ title, children, inactive }: { title: string; children: React.ReactNode; inactive?: boolean }) {
   return (
-    <section className="cc-section">
+    <section className={`cc-section${inactive ? ' cc-section-inactive' : ''}`}>
       <header className="cc-section-head">{title}</header>
       <div className="cc-section-body">{children}</div>
     </section>
@@ -391,36 +374,50 @@ function PairRow({ children }: { children: React.ReactNode }) {
   return <div className="cc-pair">{children}</div>;
 }
 
-function UnitRow({ label, value, onChange, unit, autoUnit }: {
+function UnitRow({ label, value, onChange, unit, autoUnit, disabled }: {
   label: string; value: string; onChange: (v: string) => void;
-  unit: string; autoUnit?: boolean;
+  unit: string; autoUnit?: boolean; disabled?: boolean;
 }) {
-  const display = value;
-  const handle = (raw: string) => {
+  const display = unit === 'px' ? stripPxUnit(value) : value;
+  const step = unit === 'px' ? 1 : 0.1;
+  const canStep = !disabled && isNumericInput(display);
+  const valueFromDisplay = (raw: string) => {
     const trimmed = raw.trim();
-    if (autoUnit && trimmed && /^-?\d+(\.\d+)?$/.test(trimmed)) onChange(`${trimmed}px`);
-    else onChange(raw);
+    if (autoUnit && trimmed && isNumericInput(trimmed)) return `${trimmed}px`;
+    if (autoUnit && /^-?\d+(\.\d+)?px$/i.test(trimmed)) return trimmed.toLowerCase();
+    return raw;
+  };
+  const handle = (raw: string) => {
+    const next = valueFromDisplay(raw);
+    if (next !== value) onChange(next);
+  };
+  const stepBy = (direction: -1 | 1) => {
+    if (!canStep) return;
+    const next = formatSteppedNumber(Number(display) + direction * step, display, step);
+    onChange(valueFromDisplay(next));
   };
   return (
     <label className="cc-row">
       <span className="cc-label">{label}</span>
       <span className="cc-value">
-        <input value={display} placeholder="" onChange={(e) => onChange(e.currentTarget.value)} onBlur={(e) => handle(e.currentTarget.value)} />
+        <button type="button" className="cc-step" disabled={!canStep} aria-label={`${label} decrease`} onClick={() => stepBy(-1)}>−</button>
+        <input value={display} placeholder="" disabled={disabled} onChange={(e) => onChange(valueFromDisplay(e.currentTarget.value))} onBlur={(e) => handle(e.currentTarget.value)} />
+        <button type="button" className="cc-step" disabled={!canStep} aria-label={`${label} increase`} onClick={() => stepBy(1)}>+</button>
         {unit ? <em className="cc-unit">{unit}</em> : null}
       </span>
     </label>
   );
 }
 
-function DropdownRow({ label, value, onChange, options, placeholder }: {
+function DropdownRow({ label, value, onChange, options, placeholder, disabled }: {
   label: string; value: string; onChange: (v: string) => void;
-  options: ReadonlyArray<string>; placeholder?: string;
+  options: ReadonlyArray<string>; placeholder?: string; disabled?: boolean;
 }) {
   return (
     <label className="cc-row">
       <span className="cc-label">{label}</span>
       <span className="cc-value cc-select">
-        <select value={value} onChange={(e) => onChange(e.currentTarget.value)}>
+        <select value={value} disabled={disabled} onChange={(e) => onChange(e.currentTarget.value)}>
           {!options.includes(value) && value ? <option value={value}>{value}</option> : null}
           {options.map((opt) => <option key={opt || '__'} value={opt}>{opt || (placeholder ?? '–')}</option>)}
         </select>
@@ -430,6 +427,56 @@ function DropdownRow({ label, value, onChange, options, placeholder }: {
   );
 }
 
+function FontRow({ value, onChange }: {
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const normalizedValue = normalizeFontFamilyForSelect(value);
+  const customValue = normalizedValue === value ? value : '';
+  return (
+    <label className="cc-row">
+      <span className="cc-label">Font</span>
+      <span className="cc-value cc-select">
+        <select value={normalizedValue} onChange={(event) => onChange(event.currentTarget.value)}>
+          {customValue && !FONT_OPTS.some((option) => option.value === customValue) ? (
+            <option value={customValue}>{fontFamilyLabel(customValue)}</option>
+          ) : null}
+          {FONT_OPTS.map((option) => (
+            <option key={option.label} value={option.value}>{option.label}</option>
+          ))}
+        </select>
+        <em className="cc-chevron">▾</em>
+      </span>
+    </label>
+  );
+}
+
+function normalizeFontFamilyForSelect(value: string): string {
+  const trimmed = value.trim();
+  if (!trimmed) return '';
+  const direct = FONT_OPTS.find((option) => option.value === trimmed);
+  if (direct) return direct.value;
+  const families = parseFontFamilies(trimmed);
+  const primaryFamily = families[0];
+  const match = FONT_OPTS.find((option) => {
+    if (!option.value) return false;
+    const optionFamilies = parseFontFamilies(option.value);
+    return optionFamilies[0] === primaryFamily;
+  });
+  return match?.value ?? trimmed;
+}
+
+function fontFamilyLabel(value: string): string {
+  return parseFontFamilies(value)[0] ?? value;
+}
+
+function parseFontFamilies(value: string): string[] {
+  return value
+    .split(',')
+    .map((family) => family.trim().replace(/^['"]|['"]$/g, '').toLowerCase())
+    .filter(Boolean);
+}
+
 function ColorRow({ label, value, onChange, compact }: {
   label: string; value: string; onChange: (v: string) => void; compact?: boolean;
 }) {
@@ -498,20 +545,56 @@ function QuadRow({ label, values, onChange }: {
 }
 
 function QuadCell({ axis, value, onChange }: { axis: string; value: string; onChange: (v: string) => void }) {
+  const display = stripPxUnit(value);
+  const canStep = isNumericInput(display);
+  const stepBy = (direction: -1 | 1) => {
+    if (!canStep) return;
+    onChange(`${formatSteppedNumber(Number(display) + direction, display, 1)}px`);
+  };
   return (
     <span className="cc-quad-cell">
       <em className="cc-quad-axis">{axis}</em>
-      <input value={value} placeholder="0"
-        onChange={(e) => onChange(e.currentTarget.value)}
+      <button type="button" className="cc-step cc-step-quad" disabled={!canStep} aria-label={`${axis} decrease`} onClick={() => stepBy(-1)}>−</button>
+      <input value={display} placeholder="0"
+        onChange={(e) => {
+          const raw = e.currentTarget.value.trim();
+          if (raw === '') onChange('');
+          else if (isNumericInput(raw)) onChange(`${raw}px`);
+          else if (/^-?\d+(\.\d+)?px$/i.test(raw)) onChange(raw.toLowerCase());
+          else onChange(e.currentTarget.value);
+        }}
         onBlur={(e) => {
           const v = e.currentTarget.value.trim();
-          if (v && /^-?\d+(\.\d+)?$/.test(v)) onChange(`${v}px`);
+          const next = v && isNumericInput(v) ? `${v}px` : e.currentTarget.value;
+          if (next !== value) onChange(next);
         }} />
+      <button type="button" className="cc-step cc-step-quad" disabled={!canStep} aria-label={`${axis} increase`} onClick={() => stepBy(1)}>+</button>
       <em className="cc-quad-unit">px</em>
     </span>
   );
 }
 
+function stripPxUnit(value: string): string {
+  const match = value.trim().match(/^(-?\d+(?:\.\d+)?)px$/i);
+  return match?.[1] ?? value;
+}
+
+function isNumericInput(value: string): boolean {
+  return /^-?\d+(\.\d+)?$/.test(value.trim());
+}
+
+function formatSteppedNumber(value: number, current: string, step: number): string {
+  const decimals = Math.max(decimalPlaces(current), decimalPlaces(String(step)));
+  return decimals > 0
+    ? value.toFixed(decimals).replace(/\.?0+$/, '')
+    : String(Math.round(value));
+}
+
+function decimalPlaces(value: string): number {
+  const match = value.match(/\.(\d+)/);
+  return match?.[1]?.length ?? 0;
+}
+
 function sideToProp(base: 'padding' | 'margin', side: 't' | 'r' | 'b' | 'l'): keyof ManualEditStyles {
   return `${base}${sideUpper(side)}` as keyof ManualEditStyles;
 }
@@ -536,34 +619,8 @@ function normalizeColorForPicker(value: string): string {
   return '#000000';
 }
 
-function EditTabButton({ tab, label, active, onClick }: {
-  tab: ManualEditTab; label: string; active: boolean; onClick: (tab: ManualEditTab) => void;
-}) {
-  return (
-    <button type="button" className={active ? 'active' : ''} role="tab" aria-selected={active} onClick={() => onClick(tab)}>
-      {label}
-    </button>
-  );
-}
-
-function contentPatch(target: ManualEditTarget, draft: ManualEditDraft): ManualEditPatch {
-  if (target.kind === 'link') return { id: target.id, kind: 'set-link', text: draft.text, href: draft.href };
-  if (target.kind === 'image') return { id: target.id, kind: 'set-image', src: draft.src, alt: draft.alt };
-  return { id: target.id, kind: 'set-text', value: draft.text };
-}
-
 export function manualEditPatchSummary(patch: ManualEditPatch): string {
   if (patch.kind === 'set-full-source') return JSON.stringify({ kind: patch.kind, bytes: patch.source.length });
   if (patch.kind === 'set-outer-html') return JSON.stringify({ id: patch.id, kind: patch.kind, bytes: patch.html.length });
   return JSON.stringify(patch);
 }
-
-function parseAttributesPatch(id: string, attributesText: string): ManualEditPatch {
-  const parsed = JSON.parse(attributesText) as unknown;
-  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
-    throw new Error('Attributes must be a JSON object.');
-  }
-  return { id, kind: 'set-attributes',
-    attributes: Object.fromEntries(Object.entries(parsed).map(([key, value]) => [key, String(value)])),
-  };
-}
diff --git a/apps/web/src/edit-mode/bridge.ts b/apps/web/src/edit-mode/bridge.ts
index d4b769269..d7d2d8f4f 100644
--- a/apps/web/src/edit-mode/bridge.ts
+++ b/apps/web/src/edit-mode/bridge.ts
@@ -106,7 +106,7 @@ export function buildManualEditBridge(enabled: boolean): string {
     var attrs = {};
     for (var i = 0; i < el.attributes.length; i++) {
       var attr = el.attributes[i];
-      if (!attr || attr.name.indexOf('data-od-runtime') === 0) continue;
+      if (!attr || attr.name.indexOf('data-od-runtime') === 0 || attr.name === 'data-od-edit-selected') continue;
       attrs[attr.name] = attr.value;
     }
     return attrs;
@@ -117,6 +117,10 @@ export function buildManualEditBridge(enabled: boolean): string {
     styleProps.forEach(function(prop){ styles[prop] = el.style[prop] || computed[prop] || ''; });
     return styles;
   }
+  function isLayoutContainer(el){
+    var display = window.getComputedStyle(el).display || '';
+    return display.indexOf('flex') >= 0 || display.indexOf('grid') >= 0;
+  }
   function targetFrom(el, includeOuterHtml){
     var rect = el.getBoundingClientRect();
     var kind = inferKind(el);
@@ -142,7 +146,8 @@ export function buildManualEditBridge(enabled: boolean): string {
       fields: fields,
       attributes: attrsFor(el),
       styles: stylesFor(el),
-      outerHtml: includeOuterHtml ? (el.outerHTML || '').replace(/\\sdata-od-runtime-id="[^"]*"/g, '').replace(/\\sdata-od-source-path="[^"]*"/g, '') : ''
+      isLayoutContainer: isLayoutContainer(el),
+      outerHtml: includeOuterHtml ? (el.outerHTML || '').replace(/\\sdata-od-runtime-id="[^"]*"/g, '').replace(/\\sdata-od-source-path="[^"]*"/g, '').replace(/\\sdata-od-edit-selected="[^"]*"/g, '') : ''
     };
   }
   function allTargets(){
@@ -160,6 +165,16 @@ export function buildManualEditBridge(enabled: boolean): string {
     if (!enabled) return;
     window.parent.postMessage({ type: 'od-edit-targets', targets: allTargets() }, '*');
   }
+  function clearSelectedTarget(){
+    var selected = document.querySelectorAll('[data-od-edit-selected]');
+    for (var i = 0; i < selected.length; i++) selected[i].removeAttribute('data-od-edit-selected');
+  }
+  function setSelectedTarget(id){
+    clearSelectedTarget();
+    if (!id) return;
+    var el = findById(id);
+    if (el) el.setAttribute('data-od-edit-selected', 'true');
+  }
   function closestTarget(event){
     var el = event.target;
     var fallback = null;
@@ -195,18 +210,24 @@ export function buildManualEditBridge(enabled: boolean): string {
     }
     return null;
   }
-  function applyPreviewStyles(id, styles){
+  function applyPreviewStyles(id, styles, version){
     var el = findById(id);
-    if (!el) return;
+    if (!el) {
+      window.parent.postMessage({ type: 'od-edit-preview-style-applied', id: id || '', version: Number(version) || 0, ok: false, error: 'Target not found' }, '*');
+      return;
+    }
     var keys = Object.keys(styles || {});
-    for (var i = 0; i < keys.length; i++) {
-      var key = keys[i];
-      var value = styles[key];
-      var cssName = camelToKebab(key);
-      try {
+    try {
+      for (var i = 0; i < keys.length; i++) {
+        var key = keys[i];
+        var value = styles[key];
+        var cssName = camelToKebab(key);
         if (typeof value !== 'string' || value.trim() === '') el.style.removeProperty(cssName);
         else el.style.setProperty(cssName, value.trim());
-      } catch (_e) {}
+      }
+      window.parent.postMessage({ type: 'od-edit-preview-style-applied', id: id, version: Number(version) || 0, ok: true }, '*');
+    } catch (e) {
+      window.parent.postMessage({ type: 'od-edit-preview-style-applied', id: id, version: Number(version) || 0, ok: false, error: e && e.message ? String(e.message) : 'Could not apply preview styles' }, '*');
     }
   }
   window.addEventListener('message', function(ev){
@@ -214,11 +235,16 @@ export function buildManualEditBridge(enabled: boolean): string {
     if (ev.data.type === 'od-edit-mode') {
       enabled = !!ev.data.enabled;
       document.documentElement.toggleAttribute('data-od-edit-mode', enabled);
+      if (!enabled) clearSelectedTarget();
       if (enabled) setTimeout(postTargets, 0);
       return;
     }
+    if (ev.data.type === 'od-edit-selected-target') {
+      setSelectedTarget(ev.data.id || null);
+      return;
+    }
     if (ev.data.type === 'od-edit-preview-style') {
-      applyPreviewStyles(ev.data.id, ev.data.styles || {});
+      applyPreviewStyles(ev.data.id, ev.data.styles || {}, ev.data.version);
       return;
     }
   });
@@ -244,5 +270,10 @@ html[data-od-edit-mode] [data-od-id],
 html[data-od-edit-mode] [data-od-runtime-id] { outline: 1px dashed rgba(37, 99, 235, 0.35); outline-offset: 3px; }
 html[data-od-edit-mode] [data-od-id]:hover,
 html[data-od-edit-mode] [data-od-runtime-id]:hover { outline: 2px solid #2563eb; }
+html[data-od-edit-mode] [data-od-edit-selected] {
+  outline: 2px solid #2563eb !important;
+  outline-offset: 4px;
+  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
+}
 </style>`;
 }
diff --git a/apps/web/src/edit-mode/source-patches.ts b/apps/web/src/edit-mode/source-patches.ts
index 9debe9360..c5f3eabfa 100644
--- a/apps/web/src/edit-mode/source-patches.ts
+++ b/apps/web/src/edit-mode/source-patches.ts
@@ -113,11 +113,11 @@ function parseSource(source: string): Document | null {
 }
 
 function serializeSource(doc: Document, originalSource: string): string {
-  if (!isFullHtmlDocument(originalSource)) return doc.body.innerHTML;
+  if (!isManualEditFullHtmlDocument(originalSource)) return doc.body.innerHTML;
   return `<!doctype html>\n${doc.documentElement.outerHTML}`;
 }
 
-function isFullHtmlDocument(source: string): boolean {
+export function isManualEditFullHtmlDocument(source: string): boolean {
   const normalized = firstSourceToken(source).slice(0, 32).toLowerCase();
   return normalized.startsWith('<!doctype') || normalized.startsWith('<html');
 }
diff --git a/apps/web/src/edit-mode/types.ts b/apps/web/src/edit-mode/types.ts
index a00f6ce0e..27acc6a6d 100644
--- a/apps/web/src/edit-mode/types.ts
+++ b/apps/web/src/edit-mode/types.ts
@@ -62,6 +62,7 @@ export interface ManualEditTarget {
   fields: ManualEditFields;
   attributes: Record<string, string>;
   styles: ManualEditStyles;
+  isLayoutContainer: boolean;
   outerHtml: string;
 }
 
@@ -94,7 +95,18 @@ export interface ManualEditSelectMessage {
   target: ManualEditTarget;
 }
 
-export type ManualEditBridgeMessage = ManualEditTargetMessage | ManualEditSelectMessage;
+export interface ManualEditPreviewAppliedMessage {
+  type: 'od-edit-preview-style-applied';
+  id: string;
+  version: number;
+  ok: boolean;
+  error?: string;
+}
+
+export type ManualEditBridgeMessage =
+  | ManualEditTargetMessage
+  | ManualEditSelectMessage
+  | ManualEditPreviewAppliedMessage;
 
 export const MANUAL_EDIT_STYLE_PROPS: readonly (keyof ManualEditStyles)[] = [
   'fontFamily', 'fontSize', 'fontWeight', 'color', 'textAlign', 'lineHeight', 'letterSpacing',
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 55bff024a..5c7051bcd 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1,108 +1,4 @@
-@layer theme, base, utilities;
 @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
-
-/* Open Design Tailwind token vocabulary.
-   Colors intentionally clear Tailwind's default palette and expose only
-   project-approved tokens backed by the runtime CSS variables below. Use
-   native Tailwind utilities for spacing and standard type sizes; use the
-   `text-ui-*` aliases only when matching existing compact UI text exactly.
-
-   Examples:
-   - `bg-panel text-text border border-border rounded-card shadow-token-sm`
-   - `bg-accent text-accent-foreground hover:bg-accent-hover`
-   - `bg-selection-overlay border-selection-outline ring-selection-outline`
-
-   The local base-layer border reset below keeps examples like
-   `border border-border` rendering solid borders while Preflight is omitted. */
-@theme {
-  --color-*: initial;
-
-  /* Surfaces */
-  --color-bg: var(--bg);
-  --color-app: var(--bg-app);
-  --color-panel: var(--bg-panel);
-  --color-subtle: var(--bg-subtle);
-  --color-muted-surface: var(--bg-muted);
-  --color-elevated: var(--bg-elevated);
-
-  /* Borders */
-  --color-border: var(--border);
-  --color-border-strong: var(--border-strong);
-  --color-border-soft: var(--border-soft);
-
-  /* Text */
-  --color-text: var(--text);
-  --color-strong: var(--text-strong);
-  --color-muted: var(--text-muted);
-  --color-soft: var(--text-soft);
-  --color-faint: var(--text-faint);
-
-  /* Accent */
-  --color-accent: var(--accent);
-  --color-accent-strong: var(--accent-strong);
-  --color-accent-soft: var(--accent-soft);
-  --color-accent-tint: var(--accent-tint);
-  --color-accent-hover: var(--accent-hover);
-  --color-accent-wash: var(--accent-wash);
-  --color-accent-foreground: var(--accent-foreground);
-
-  /* Semantic status */
-  --color-success: var(--green);
-  --color-success-surface: var(--green-bg);
-  --color-success-border: var(--green-border);
-  --color-info: var(--blue);
-  --color-info-surface: var(--blue-bg);
-  --color-info-border: var(--blue-border);
-  --color-discovery: var(--purple);
-  --color-discovery-surface: var(--purple-bg);
-  --color-discovery-border: var(--purple-border);
-  --color-danger: var(--red);
-  --color-danger-surface: var(--red-bg);
-  --color-danger-border: var(--red-border);
-  --color-danger-foreground: var(--bg-panel);
-  --color-warning: var(--amber);
-  --color-warning-surface: var(--amber-bg);
-  --color-warning-border: var(--warning-border);
-
-  /* Interaction and overlays */
-  --color-focus: var(--accent);
-  --color-focus-ring: var(--accent-soft);
-  --color-overlay: var(--overlay);
-  --color-selection-overlay: var(--selection-overlay);
-  --color-selection-outline: var(--selection-outline);
-  --color-inspect-overlay: var(--inspect-overlay);
-  --color-control-hover: var(--bg-subtle);
-  --color-control-active: var(--bg-muted);
-
-  /* Radius */
-  --radius-control: var(--radius-sm);
-  --radius-card: var(--radius);
-  --radius-panel: var(--radius-lg);
-  --radius-token-pill: var(--radius-pill);
-
-  /* Shadows */
-  --shadow-token-xs: var(--shadow-xs);
-  --shadow-token-sm: var(--shadow-sm);
-  --shadow-token-md: var(--shadow-md);
-  --shadow-token-lg: var(--shadow-lg);
-
-  /* Fonts */
-  --font-sans: var(--sans);
-  --font-serif: var(--serif);
-  --font-mono: var(--mono);
-
-  /* Exact existing UI type sizes */
-  --text-ui-9: 9px;
-  --text-ui-10: 10px;
-  --text-ui-10_5: 10.5px;
-  --text-ui-11: 11px;
-  --text-ui-11_5: 11.5px;
-  --text-ui-12_5: 12.5px;
-  --text-ui-13: 13px;
-  --text-ui-13_5: 13.5px;
-}
 
 /* ============================================================
    Open Design — neutral product workspace
@@ -133,8 +29,6 @@
   --accent-soft: #f5d8cb;
   --accent-tint: #fbeee5;
   --accent-hover: #b45a3b;
-  --accent-wash: color-mix(in srgb, var(--accent) 12%, transparent);
-  --accent-foreground: #fff;
 
   /* Semantic accent tints used by tool / status pills. */
   --green: #1f7a3a;
@@ -151,12 +45,6 @@
   --red-border: #f5c6c2;
   --amber: #b26200;
   --amber-bg: #fff3e0;
-  --warning-border: color-mix(in srgb, var(--amber) 35%, transparent);
-
-  --overlay: rgba(28, 27, 26, 0.42);
-  --selection-overlay: rgba(22, 119, 255, 0.18);
-  --selection-outline: rgba(22, 119, 255, 0.55);
-  --inspect-overlay: rgba(37, 99, 235, 0.12);
 
   --shadow-xs: 0 1px 0 rgba(28, 27, 26, 0.04);
   --shadow-sm: 0 1px 2px rgba(28, 27, 26, 0.05), 0 1px 3px rgba(28, 27, 26, 0.04);
@@ -277,20 +165,6 @@
   }
 }
 
-/* Tailwind foundation policy: Preflight stays out of this slice. Retained
-   element/reset rules that may conflict with migrated utilities must live in
-   @layer base, be constrained to non-migrated scopes, or be removed before the
-   affected elements migrate. */
-@layer base {
-  *,
-  ::before,
-  ::after,
-  ::backdrop,
-  ::file-selector-button {
-    border: 0 solid;
-  }
-}
-
 * { box-sizing: border-box; }
 
 html, body, #root { height: 100%; margin: 0; }
@@ -1372,21 +1246,6 @@ code {
   font-size: 11.5px;
   box-shadow: var(--shadow-xs);
 }
-.staged-preview-trigger {
-  min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: zoom-in;
-}
-.staged-preview-trigger:hover .staged-name {
-  color: var(--accent);
-  text-decoration: underline;
-}
 .staged-chip img {
   width: 28px;
   height: 28px;
@@ -1396,46 +1255,47 @@ code {
 .staged-preview-modal {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: 1200;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 28px;
-  background: rgba(0, 0, 0, 0.56);
+  padding: 24px;
+  background: rgba(17, 24, 39, 0.44);
 }
 .staged-preview-card {
-  max-width: min(920px, 92vw);
-  max-height: min(760px, 88vh);
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  gap: 10px;
+  width: min(720px, calc(100vw - 48px));
+  max-height: calc(100vh - 48px);
+  padding: 12px;
+  background: var(--bg-panel);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  background: var(--bg-panel);
   box-shadow: var(--shadow-lg);
 }
 .staged-preview-head {
   display: flex;
   align-items: center;
-  gap: 12px;
   justify-content: space-between;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-  color: var(--text);
-  font-size: 12px;
-  font-weight: 600;
+  gap: 12px;
+  min-width: 0;
 }
 .staged-preview-head span {
-  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
 }
 .staged-preview-card > img {
+  display: block;
   max-width: 100%;
-  max-height: calc(88vh - 48px);
+  max-height: min(70vh, 640px);
   object-fit: contain;
-  background: var(--bg-subtle);
+  border-radius: var(--radius);
+  background: var(--bg);
 }
 .staged-comment {
   border-radius: var(--radius-pill);
@@ -11446,10 +11306,8 @@ button.ghost.mcp-copy-btn:hover:not(:disabled) {
   z-index: 1001;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
   padding: 6px 12px;
   font-size: 12px;
-  line-height: 1;
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
@@ -12823,7 +12681,7 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
 
 /* ---------------------------------------------------------------------
  * Critique Theater (Phase 8). Role-keyed tinting via `data-role` so the
- * components hold no hex literals — the lane just declares which role
+ * components hold no hex literals - the lane just declares which role
  * it represents and the cascade picks the right hue from
  * existing semantic tokens. Phase 9 will add the settings toggle that
  * gates the surrounding mount points.
@@ -12941,10 +12799,10 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
   background: color-mix(in srgb, var(--accent) 6%, var(--bg-panel));
 }
 .theater-lane[data-role="designer"] { border-left-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
-.theater-lane[data-role="critic"]   { border-left-color: color-mix(in srgb, var(--amber) 60%, var(--border)); }
-.theater-lane[data-role="brand"]    { border-left-color: color-mix(in srgb, var(--purple, var(--accent)) 60%, var(--border)); }
-.theater-lane[data-role="a11y"]     { border-left-color: color-mix(in srgb, var(--green, var(--accent)) 60%, var(--border)); }
-.theater-lane[data-role="copy"]     { border-left-color: color-mix(in srgb, var(--blue, var(--accent)) 60%, var(--border)); }
+.theater-lane[data-role="critic"] { border-left-color: color-mix(in srgb, var(--amber) 60%, var(--border)); }
+.theater-lane[data-role="brand"] { border-left-color: color-mix(in srgb, var(--purple, var(--accent)) 60%, var(--border)); }
+.theater-lane[data-role="a11y"] { border-left-color: color-mix(in srgb, var(--green, var(--accent)) 60%, var(--border)); }
+.theater-lane[data-role="copy"] { border-left-color: color-mix(in srgb, var(--blue, var(--accent)) 60%, var(--border)); }
 .theater-lane-head {
   display: flex;
   align-items: baseline;
@@ -13219,6 +13077,7 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
     transform: rotate(var(--burst-angle, 0deg)) translate(18px, 0) scale(0.9);
   }
 }
+
 .assistant-feedback-reasons {
   width: min(340px, 100%);
   padding: 8px;
@@ -16470,17 +16329,50 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
   background: var(--bg);
 }
 .manual-edit-workspace > .manual-edit-canvas { grid-column: 1; grid-row: 1; }
-.manual-edit-workspace > .manual-edit-right { grid-column: 2; grid-row: 1; min-height: 0; }
+.manual-edit-workspace > .manual-edit-right {
+  grid-column: 2;
+  grid-row: 1;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
 
 /* Claude Code-style edit inspector panel. */
 .cc-panel { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; overflow: auto; background: var(--bg-panel); }
 .cc-inspector { display: flex; flex-direction: column; gap: 12px; padding: 6px 12px; }
+.cc-inspector-nav {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: -4px;
+}
+.cc-inspector-page {
+  height: 24px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg-panel);
+  color: var(--text-muted);
+  font-size: 11px;
+  font-weight: 600;
+}
+.cc-inspector-page:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  color: var(--text);
+  background: var(--bg-subtle);
+}
 .cc-section { display: flex; flex-direction: column; gap: 6px; }
+.cc-section-inactive { opacity: 0.58; }
 .cc-section-head {
   font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
   color: var(--text-muted); padding: 4px 0 2px;
 }
 .cc-section-body { display: flex; flex-direction: column; gap: 4px; }
+.cc-section-hint {
+  margin: -1px 0 2px;
+  color: var(--text-muted);
+  font-size: 11px;
+  line-height: 1.3;
+}
 .cc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
 .cc-row {
   display: flex; align-items: center;
@@ -16500,6 +16392,28 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
   flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end;
   gap: 2px; min-width: 0;
 }
+.cc-step {
+  flex: 0 0 14px;
+  width: 14px;
+  height: 18px;
+  border: 0;
+  border-radius: 3px;
+  padding: 0;
+  background: transparent;
+  color: var(--text-muted);
+  font: inherit;
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+}
+.cc-step:hover:not(:disabled) {
+  background: var(--surface-hover, rgba(0,0,0,0.06));
+  color: var(--text);
+}
+.cc-step:disabled {
+  opacity: 0.28;
+  cursor: default;
+}
 .cc-value > input,
 .cc-value > select {
   flex: 1 1 auto; min-width: 0; border: none; outline: none;
@@ -16523,14 +16437,20 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
 }
 .cc-color > input { text-align: right; }
 .cc-color-popover {
-  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
+  position: absolute; top: calc(100% + 6px); left: 0; z-index: 100;
   background: var(--bg-panel); border: 1px solid var(--border);
   border-radius: 6px; padding: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.12);
-  display: flex; flex-direction: column; gap: 8px; min-width: 168px;
+  display: flex; flex-direction: column; gap: 8px;
+  width: min(168px, calc(100vw - 32px));
+  max-width: calc(100vw - 32px);
 }
-.cc-color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
+.cc-color-compact .cc-color-popover {
+  left: auto;
+  right: 0;
+}
+.cc-color-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
 .cc-color-tile {
-  width: 22px; height: 22px; border-radius: 4px; padding: 0;
+  width: 100%; aspect-ratio: 1; border-radius: 4px; padding: 0;
   border: 1px solid rgba(0,0,0,0.08); cursor: pointer;
 }
 .cc-color-native {
@@ -16554,6 +16474,10 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
   padding: 0 6px; height: 26px; font-size: 12px; gap: 2px;
 }
 .cc-quad-axis { color: var(--text-muted); font-style: normal; font-size: 10px; flex: 0 0 auto; }
+.cc-step-quad {
+  flex-basis: 12px;
+  width: 12px;
+}
 .cc-quad-cell input {
   flex: 1 1 auto; min-width: 0; border: none; outline: none;
   background: transparent; font: inherit; padding: 0;
@@ -16561,14 +16485,6 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
 }
 .cc-quad-unit { color: var(--text-muted); font-style: normal; font-size: 10px; }
 
-.cc-advanced {
-  border-top: 1px solid var(--border); margin-top: 6px;
-  padding: 6px 12px; display: flex; flex-direction: column; gap: 6px;
-}
-.cc-advanced-toggle {
-  align-self: flex-start; background: transparent; border: none;
-  padding: 2px 0; font-size: 11px; color: var(--text-muted); cursor: pointer;
-}
 .cc-disclosure { font-size: 11px; color: var(--text-muted); }
 .cc-disclosure > summary { cursor: pointer; padding: 4px 0; }
 
@@ -16581,7 +16497,7 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
   position: relative;
   min-width: 0;
   min-height: 0;
-  overflow: hidden;
+  overflow: auto;
   border: 1px solid var(--border);
   border-radius: 8px;
   background: var(--bg-panel);
@@ -16682,6 +16598,16 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
   box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
 }
 
+.manual-edit-modal.cc-panel {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-bottom: 72px;
+  scrollbar-gutter: stable;
+}
+
 .manual-edit-modal-head {
   display: flex;
   align-items: flex-start;
@@ -16758,26 +16684,6 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
   white-space: nowrap;
 }
 
-.manual-edit-tabs {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 5px;
-  padding: 0 12px 12px;
-}
-
-.manual-edit-tabs button {
-  min-height: 30px;
-  padding: 0 6px;
-  font-size: 11px;
-  text-transform: capitalize;
-}
-
-.manual-edit-tabs button.active {
-  color: var(--bg-panel);
-  border-color: var(--accent);
-  background: var(--accent);
-}
-
 .manual-edit-tab-body {
   display: grid;
   gap: 10px;
@@ -16856,22 +16762,6 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
   font-size: 12px;
 }
 
-.manual-edit-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: auto;
-  padding: 12px;
-  border-top: 1px solid var(--border);
-  background: var(--bg-subtle);
-}
-
-.manual-edit-actions .primary {
-  color: var(--bg-panel);
-  border-color: var(--accent);
-  background: var(--accent);
-}
-
 .manual-edit-changes {
   flex: 1;
   min-height: 0;
@@ -18658,9 +18548,7 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
   top: 0;
   background: var(--bg-panel);
   padding: 8px 10px 4px;
-  min-height: 32px;
   z-index: 1;
-  border-bottom: 1px solid var(--border);
 }
 
 .palette-tweaks-anchor { position: relative; display: inline-flex; }
diff --git a/apps/web/tests/components/ChatComposer.search.test.tsx b/apps/web/tests/components/ChatComposer.search.test.tsx
index 0b8bdc995..b3d3f9f6e 100644
--- a/apps/web/tests/components/ChatComposer.search.test.tsx
+++ b/apps/web/tests/components/ChatComposer.search.test.tsx
@@ -1,6 +1,8 @@
 // @vitest-environment jsdom
 
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { ChatComposer } from '../../src/components/ChatComposer';
@@ -92,13 +94,29 @@ describe('ChatComposer /search command', () => {
 
     const dialog = screen.getByRole('dialog', { name: 'drawing.png' });
     expect(dialog).toBeTruthy();
+    expect(dialog.classList.contains('staged-preview-modal')).toBe(true);
+    expect(dialog.querySelector('.staged-preview-card')).toBeTruthy();
+    expect(dialog.querySelector('.staged-preview-head')).toBeTruthy();
     const previewImage = screen.getByRole('img', { name: 'drawing.png' }) as HTMLImageElement;
     expect(previewImage.src).toContain('/api/projects/project-1/raw/uploads/drawing.png');
+    expect(dialog.querySelector('.staged-preview-card > img')).toBe(previewImage);
 
     fireEvent.click(screen.getByRole('button', { name: 'Close' }));
     expect(screen.queryByRole('dialog', { name: 'drawing.png' })).toBeNull();
   });
 
+  it('keeps staged image preview modal styling available', () => {
+    const css = readFileSync(join(process.cwd(), 'src/index.css'), 'utf8');
+
+    expect(css).toContain('.staged-preview-modal');
+    expect(css).toContain('position: fixed;');
+    expect(css).toContain('.staged-preview-card');
+    expect(css).toContain('max-height: calc(100vh - 48px);');
+    expect(css).toContain('.staged-preview-head');
+    expect(css).toContain('.staged-preview-card > img');
+    expect(css).toContain('object-fit: contain;');
+  });
+
   it('expands /search into a first-action research command prompt', () => {
     const onSend = vi.fn();
 
diff --git a/apps/web/tests/components/FileViewer.manual-edit-history.test.tsx b/apps/web/tests/components/FileViewer.manual-edit-history.test.tsx
new file mode 100644
index 000000000..1855afc6c
--- /dev/null
+++ b/apps/web/tests/components/FileViewer.manual-edit-history.test.tsx
@@ -0,0 +1,178 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { ComponentProps } from 'react';
+import type { ProjectFile } from '../../src/types';
+
+const panelState = vi.hoisted(() => ({
+  props: null as ComponentProps<typeof import('../../src/components/ManualEditPanel').ManualEditPanel> | null,
+}));
+
+vi.mock('../../src/components/ManualEditPanel', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../src/components/ManualEditPanel')>();
+  return {
+    ...actual,
+    ManualEditPanel: (props: ComponentProps<typeof actual.ManualEditPanel>) => {
+      panelState.props = props;
+      return <div data-testid="mock-manual-edit-panel" />;
+    },
+  };
+});
+
+import { FileViewer } from '../../src/components/FileViewer';
+
+afterEach(() => {
+  cleanup();
+  panelState.props = null;
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe('FileViewer manual edit history regressions', () => {
+  it('flushes pending style edits before activating draw mode from manual edit', async () => {
+    const initialSource = '<!doctype html><html><body><h1 data-od-id="hero" style="color: #111111">Hero</h1></body></html>';
+    let saveResolve!: (value: Response) => void;
+    const saveResponse = new Promise<Response>((resolve) => {
+      saveResolve = resolve;
+    });
+    const savedSources: string[] = [];
+    const fetchMock = vi.fn(async (input: string | URL | Request, init?: RequestInit) => {
+      const url = typeof input === 'string' ? input : input instanceof Request ? input.url : String(input);
+      if (url.includes('/api/projects/project-1/deployments')) {
+        return new Response(JSON.stringify({ deployments: [] }), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        });
+      }
+      if (url.includes('/api/projects/project-1/files') && init?.method === 'POST') {
+        const payload = JSON.parse(String(init.body)) as { content: string };
+        savedSources.push(payload.content);
+        return saveResponse;
+      }
+      if (url.includes('/api/projects/project-1/raw/preview.html')) {
+        return new Response(initialSource, { status: 200 });
+      }
+      return new Response('{}', { status: 200, headers: { 'Content-Type': 'application/json' } });
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    render(
+      <FileViewer
+        projectId="project-1"
+        file={htmlPreviewFile()}
+        liveHtml={initialSource}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId('manual-edit-mode-toggle'));
+    await waitFor(() => expect(panelState.props).not.toBeNull());
+
+    act(() => {
+      panelState.props?.onStyleChange?.('hero', { color: '#ef4444' }, 'Style: Hero');
+    });
+    fireEvent.click(screen.getByTestId('draw-overlay-toggle'));
+
+    await waitFor(() => expect(savedSources).toHaveLength(1));
+    expect(savedSources[0]).toContain('rgb(239, 68, 68)');
+    expect(screen.getByTestId('manual-edit-mode-toggle').getAttribute('aria-pressed')).toBe('true');
+    expect(screen.getByTestId('draw-overlay-toggle').getAttribute('aria-pressed')).toBe('false');
+
+    await act(async () => {
+      saveResolve(new Response(JSON.stringify({ file: htmlPreviewFile() }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      }));
+      await saveResponse;
+    });
+
+    await waitFor(() => expect(screen.getByTestId('manual-edit-mode-toggle').getAttribute('aria-pressed')).toBe('false'));
+    expect(screen.getByTestId('draw-overlay-toggle').getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('uses the undone source snapshot for a follow-up edit after undo', async () => {
+    const initialSource = '<!doctype html><html><body><h1 data-od-id="hero" style="color: #111111">Hero</h1></body></html>';
+    let persistedSource = initialSource;
+    const savedSources: string[] = [];
+    const fetchMock = vi.fn(async (input: string | URL | Request, init?: RequestInit) => {
+      const url = typeof input === 'string' ? input : input instanceof Request ? input.url : String(input);
+      if (url.includes('/api/projects/project-1/deployments')) {
+        return new Response(JSON.stringify({ deployments: [] }), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        });
+      }
+      if (url.includes('/api/projects/project-1/files') && init?.method === 'POST') {
+        const payload = JSON.parse(String(init.body)) as { content: string };
+        persistedSource = payload.content;
+        savedSources.push(payload.content);
+        return new Response(JSON.stringify({ file: htmlPreviewFile() }), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        });
+      }
+      if (url.includes('/api/projects/project-1/raw/preview.html')) {
+        return new Response(persistedSource, { status: 200 });
+      }
+      return new Response('{}', { status: 200, headers: { 'Content-Type': 'application/json' } });
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    render(
+      <FileViewer
+        projectId="project-1"
+        file={htmlPreviewFile()}
+        liveHtml={initialSource}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId('manual-edit-mode-toggle'));
+    await waitFor(() => expect(panelState.props).not.toBeNull());
+
+    act(() => {
+      panelState.props?.onApplyPatch(
+        { kind: 'set-style', id: 'hero', styles: { color: '#ef4444' } },
+        'Style: Hero',
+      );
+    });
+    await waitFor(() => expect(savedSources).toHaveLength(1));
+    expect(savedSources[0]).toContain('rgb(239, 68, 68)');
+
+    act(() => {
+      panelState.props?.onUndo();
+    });
+    await waitFor(() => expect(savedSources).toHaveLength(2));
+    expect(savedSources[1]).toBe(initialSource);
+
+    act(() => {
+      panelState.props?.onApplyPatch(
+        { kind: 'set-style', id: 'hero', styles: { backgroundColor: '#f97316' } },
+        'Style: Hero',
+      );
+    });
+    await waitFor(() => expect(savedSources).toHaveLength(3));
+
+    expect(savedSources[2]).toContain('background-color: rgb(249, 115, 22)');
+    expect(savedSources[2]).not.toContain('rgb(239, 68, 68)');
+  });
+});
+
+function htmlPreviewFile(): ProjectFile {
+  return {
+    name: 'preview.html',
+    path: 'preview.html',
+    type: 'file',
+    size: 1024,
+    mtime: 1710000000,
+    mime: 'text/html',
+    kind: 'html',
+    artifactManifest: {
+      version: 1,
+      kind: 'html',
+      title: 'Preview',
+      entry: 'preview.html',
+      renderer: 'html',
+      exports: ['html'],
+    },
+  };
+}
diff --git a/apps/web/tests/components/FileViewer.manual-edit.test.tsx b/apps/web/tests/components/FileViewer.manual-edit.test.tsx
new file mode 100644
index 000000000..0bac0d528
--- /dev/null
+++ b/apps/web/tests/components/FileViewer.manual-edit.test.tsx
@@ -0,0 +1,167 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  FileViewer,
+  cancelManualEditPendingStyleSnapshot,
+} from '../../src/components/FileViewer';
+import type { ProjectFile } from '../../src/types';
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe('FileViewer manual edit regressions', () => {
+  it('removes invalid fields from pending manual edit style saves without dropping unrelated fields', () => {
+    expect(cancelManualEditPendingStyleSnapshot({
+      id: 'hero',
+      label: 'Style: Hero',
+      version: 1,
+      styles: { fontSize: '4px', color: '#111111' },
+    }, 'hero', ['fontSize'])).toEqual({
+      id: 'hero',
+      label: 'Style: Hero',
+      version: 1,
+      styles: { color: '#111111' },
+    });
+
+    expect(cancelManualEditPendingStyleSnapshot({
+      id: 'hero',
+      label: 'Style: Hero',
+      version: 1,
+      styles: { fontSize: '4px' },
+    }, 'hero', ['fontSize'])).toBeNull();
+
+    const otherTargetPending = {
+      id: 'hero',
+      label: 'Style: Hero',
+      version: 1,
+      styles: { fontSize: '4px' },
+    };
+    expect(cancelManualEditPendingStyleSnapshot(otherTargetPending, 'cta', ['fontSize'])).toBe(otherTargetPending);
+  });
+
+  it('does not let a pending manual edit style save survive a file switch', () => {
+    vi.useFakeTimers();
+    const fetchMock = vi.fn(async (input: string | URL | Request, init?: RequestInit) => {
+      const url = typeof input === 'string' ? input : input instanceof Request ? input.url : String(input);
+      if (url.includes('/api/projects/project-1/files') && init?.method === 'POST') {
+        return new Response(JSON.stringify({ file: htmlPreviewFile() }), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        });
+      }
+      return new Response('<!doctype html><html><body></body></html>', { status: 200 });
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    try {
+      const first = htmlPreviewFile();
+      const second = { ...htmlPreviewFile(), name: 'second.html', path: 'second.html' };
+      const { rerender } = render(
+        <FileViewer
+          projectId="project-1"
+          file={first}
+          liveHtml='<!doctype html><html><body><main data-od-id="hero">Hero</main></body></html>'
+        />,
+      );
+
+      fireEvent.click(screen.getByTestId('manual-edit-mode-toggle'));
+      const baseSizeInput = Array.from(document.querySelectorAll('.cc-row'))
+        .find((row) => row.textContent?.includes('Base size'))
+        ?.querySelector('input') as HTMLInputElement | null;
+      if (!baseSizeInput) throw new Error('Base size input not found');
+      fireEvent.change(baseSizeInput, { target: { value: '18' } });
+
+      rerender(
+        <FileViewer
+          projectId="project-1"
+          file={second}
+          liveHtml='<!doctype html><html><body><main data-od-id="second">Second</main></body></html>'
+        />,
+      );
+
+      act(() => {
+        vi.advanceTimersByTime(1100);
+      });
+
+      expect(fetchMock).not.toHaveBeenCalledWith(
+        '/api/projects/project-1/files',
+        expect.objectContaining({ method: 'POST' }),
+      );
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('clears loaded source immediately on file switch without liveHtml before manual edit can save', async () => {
+    let secondResolve!: (value: Response) => void;
+    const secondFetch = new Promise<Response>((resolve) => {
+      secondResolve = resolve;
+    });
+    const fetchMock = vi.fn(async (input: string | URL | Request, init?: RequestInit) => {
+      const url = typeof input === 'string' ? input : input instanceof Request ? input.url : String(input);
+      if (url.includes('/api/projects/project-1/files') && init?.method === 'POST') {
+        return new Response(JSON.stringify({ file: htmlPreviewFile() }), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        });
+      }
+      if (url.includes('/api/projects/project-1/raw/second.html')) return secondFetch;
+      return new Response('<!doctype html><html><body><main data-od-id="hero">First</main></body></html>', { status: 200 });
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    try {
+      const first = htmlPreviewFile();
+      const second = { ...htmlPreviewFile(), name: 'second.html', path: 'second.html' };
+      const { rerender } = render(<FileViewer projectId="project-1" file={first} />);
+
+      await waitFor(() => expect(fetchMock).toHaveBeenCalledWith('/api/projects/project-1/raw/preview.html', {}));
+      fireEvent.click(screen.getByTestId('manual-edit-mode-toggle'));
+      const baseSizeInput = await waitFor(() => {
+        const input = Array.from(document.querySelectorAll('.cc-row'))
+          .find((row) => row.textContent?.includes('Base size'))
+          ?.querySelector('input') as HTMLInputElement | null;
+        if (!input) throw new Error('Base size input not found');
+        return input;
+      });
+      fireEvent.change(baseSizeInput, { target: { value: '18' } });
+
+      rerender(<FileViewer projectId="project-1" file={second} />);
+      fireEvent.click(screen.getByTestId('manual-edit-mode-toggle'));
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 1100));
+      });
+
+      expect(fetchMock).not.toHaveBeenCalledWith(
+        '/api/projects/project-1/files',
+        expect.objectContaining({ method: 'POST' }),
+      );
+      secondResolve(new Response('<!doctype html><html><body><main data-od-id="second">Second</main></body></html>', { status: 200 }));
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});
+
+function htmlPreviewFile(): ProjectFile {
+  return {
+    name: 'preview.html',
+    path: 'preview.html',
+    type: 'file',
+    size: 1024,
+    mtime: 1710000000,
+    mime: 'text/html',
+    kind: 'html',
+    artifactManifest: {
+      version: 1,
+      kind: 'html',
+      title: 'Preview',
+      entry: 'preview.html',
+      renderer: 'html',
+      exports: ['html'],
+    },
+  };
+}
diff --git a/apps/web/tests/components/ManualEditPanel.test.tsx b/apps/web/tests/components/ManualEditPanel.test.tsx
index f7fa3dbf2..649fc2699 100644
--- a/apps/web/tests/components/ManualEditPanel.test.tsx
+++ b/apps/web/tests/components/ManualEditPanel.test.tsx
@@ -1,8 +1,9 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
+import { Simulate } from 'react-dom/test-utils';
 import { JSDOM } from 'jsdom';
-import { ManualEditPanel, emptyManualEditDraft, manualEditPatchSummary } from '../../src/components/ManualEditPanel';
+import { ManualEditPanel, emptyManualEditDraft, manualEditPatchSummary, normalizeManualEditStyles } from '../../src/components/ManualEditPanel';
 import { emptyManualEditStyles, type ManualEditTarget } from '../../src/edit-mode/types';
 
 const target: ManualEditTarget = {
@@ -16,6 +17,7 @@ const target: ManualEditTarget = {
   fields: { text: 'Original' },
   attributes: { 'data-od-id': 'hero-title' },
   styles: emptyManualEditStyles(),
+  isLayoutContainer: false,
   outerHtml: '<h1 data-od-id="hero-title">Original</h1>',
 };
 
@@ -43,47 +45,371 @@ describe('ManualEditPanel', () => {
     Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT');
   });
 
-  it('opens with target metadata and calls selection from the layers list', () => {
-    const onSelectTarget = vi.fn();
-    renderPanel({ onSelectTarget });
+  it('renders the style inspector without the advanced editor entry', () => {
+    renderPanel();
 
-    click(buttonByText('▸ Advanced'));
-    const summaries = Array.from(host.querySelectorAll('details > summary'));
-    const layersSummary = summaries.find((s) => s.textContent?.includes('Layers')) as HTMLElement | undefined;
-    if (layersSummary) {
-      const details = layersSummary.parentElement as HTMLDetailsElement;
-      act(() => { details.open = true; });
-    }
-    click(buttonByText('Hero Title'));
-
-    expect(onSelectTarget).toHaveBeenCalledWith(target);
+    expect(host.textContent).toContain('TYPOGRAPHY');
+    expect(host.textContent).not.toContain('Advanced');
+    expect(host.textContent).not.toContain('Content');
   });
 
-  it('builds content patches from the active target', () => {
-    const onApplyPatch = vi.fn();
-    renderPanel({ onApplyPatch });
+  it('allows returning from an element inspector to the page inspector', () => {
+    const onClearSelection = vi.fn();
+    renderPanel({ onClearSelection });
 
-    click(buttonByText('▸ Advanced'));
-    click(buttonByText('Content'));
-    click(buttonByText('Apply Content'));
+    const pageButton = host.querySelector('button[aria-label="Show page inspector"]') as HTMLButtonElement | null;
+    if (!pageButton) throw new Error('Page inspector button not found');
 
-    expect(onApplyPatch).toHaveBeenCalledWith(
-      { id: 'hero-title', kind: 'set-text', value: 'Updated copy' },
-      'Content: Hero Title',
+    act(() => {
+      pageButton.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
+    });
+
+    expect(onClearSelection).toHaveBeenCalledTimes(1);
+  });
+
+  it('normalizes font stacks and writes a usable font-family value', () => {
+    const onDraftChange = vi.fn();
+    const onStyleChange = vi.fn();
+    renderPanel({
+      onDraftChange,
+      onStyleChange,
+      styles: {
+        ...emptyManualEditStyles(),
+        fontFamily: '"Roboto", sans-serif',
+        fontSize: '32px',
+        color: '#111111',
+        paddingTop: '8px',
+      },
+    });
+
+    const fontSelect = host.querySelector('select') as HTMLSelectElement | null;
+    if (!fontSelect) throw new Error('Font select not found');
+    expect(fontSelect.value).toBe('Roboto, Arial, sans-serif');
+
+    act(() => {
+      fontSelect.value = 'Georgia, serif';
+      fontSelect.dispatchEvent(new dom.window.Event('change', { bubbles: true }));
+    });
+
+    expect(onDraftChange).toHaveBeenCalledWith(expect.objectContaining({
+      styles: expect.objectContaining({ fontFamily: 'Georgia, serif' }),
+    }));
+    expect(onStyleChange).toHaveBeenCalledWith('hero-title', { fontFamily: 'Georgia, serif' }, 'Style: Hero Title');
+    expect(onStyleChange).not.toHaveBeenCalledWith(
+      'hero-title',
+      expect.objectContaining({ fontSize: '32px', color: '#111111', paddingTop: '8px' }),
+      'Style: Hero Title',
     );
   });
 
-  it('shows invalid attribute JSON without applying a write patch', () => {
-    const onApplyPatch = vi.fn();
+  it('shows px-backed values without px in numeric inputs', () => {
+    renderPanel({
+      styles: {
+        ...emptyManualEditStyles(),
+        fontSize: '32px',
+      },
+    });
+
+    const sizeRow = Array.from(host.querySelectorAll('.cc-row'))
+      .find((row) => row.textContent?.includes('Size'));
+    const sizeInput = sizeRow?.querySelector('input') as HTMLInputElement | null;
+    if (!sizeInput) throw new Error('Size input not found');
+
+    expect(sizeInput.value).toBe('32');
+  });
+
+  it('increments normal rows and quad cells with normalized values', () => {
+    const onStyleChange = vi.fn();
+    renderPanel({
+      onStyleChange,
+      styles: {
+        ...emptyManualEditStyles(),
+        fontSize: '32px',
+        opacity: '0.5',
+        paddingTop: '8px',
+      },
+    });
+
+    const sizeIncrease = host.querySelector('button[aria-label="Size increase"]') as HTMLButtonElement | null;
+    const opacityIncrease = host.querySelector('button[aria-label="Opacity increase"]') as HTMLButtonElement | null;
+    const paddingTopDecrease = host.querySelector('.cc-quad button[aria-label="T decrease"]') as HTMLButtonElement | null;
+    if (!sizeIncrease || !opacityIncrease || !paddingTopDecrease) throw new Error('Stepper button not found');
+
+    act(() => {
+      sizeIncrease.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
+      opacityIncrease.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
+      paddingTopDecrease.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
+    });
+
+    expect(onStyleChange).toHaveBeenCalledWith('hero-title', { fontSize: '33px' }, 'Style: Hero Title');
+    expect(onStyleChange).toHaveBeenCalledWith('hero-title', { opacity: '0.6' }, 'Style: Hero Title');
+    expect(onStyleChange).toHaveBeenCalledWith('hero-title', { paddingTop: '7px' }, 'Style: Hero Title');
+  });
+
+  it('does not persist an unchanged target style when the inspector opens', () => {
+    vi.useFakeTimers();
+    try {
+      const onApplyPatch = vi.fn();
+      renderPanel({ onApplyPatch });
+
+      act(() => {
+        vi.advanceTimersByTime(1600);
+      });
+
+      expect(onApplyPatch).not.toHaveBeenCalled();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('normalizes valid style values before host preview/persistence', () => {
+    expect(normalizeManualEditStyles({
+      fontSize: '48',
+      color: '#f00',
+      opacity: '2',
+      lineHeight: '1.4',
+    }, { layoutEnabled: true })).toEqual({
+      ok: true,
+      styles: {
+        fontSize: '48px',
+        color: '#ff0000',
+        opacity: '1',
+        lineHeight: '1.4',
+      },
+    });
+    expect(normalizeManualEditStyles({ lineHeight: '49px' }, { layoutEnabled: true })).toEqual({
+      ok: true,
+      styles: { lineHeight: '49px' },
+    });
+  });
+
+  it('rejects invalid style values before host preview/persistence', () => {
+    expect(normalizeManualEditStyles({ color: 'tomato' }, { layoutEnabled: true })).toEqual({
+      ok: false,
+      error: 'color must be a hex color.',
+    });
+    expect(normalizeManualEditStyles({ lineHeight: '-1px' }, { layoutEnabled: true })).toEqual({
+      ok: false,
+      error: 'Line height must be a positive number or px value.',
+    });
+  });
+
+  it('treats empty values as inline style clears', () => {
+    expect(normalizeManualEditStyles({ fontSize: '', color: '' }, { layoutEnabled: true })).toEqual({
+      ok: true,
+      styles: { fontSize: '', color: '' },
+    });
+  });
+
+  it('does not validate unchanged computed line-height values on blur', () => {
     const onError = vi.fn();
-    renderPanel({ onApplyPatch, onError, attributesText: '{bad' });
+    const onStyleChange = vi.fn();
+    renderPanel({
+      onError,
+      onStyleChange,
+      styles: {
+        ...emptyManualEditStyles(),
+        lineHeight: '48.96px',
+      },
+    });
 
-    click(buttonByText('▸ Advanced'));
-    click(buttonByText('Attributes'));
-    click(buttonByText('Apply Attributes'));
+    const lineInput = Array.from(host.querySelectorAll('.cc-row'))
+      .find((row) => row.textContent?.includes('Line'))
+      ?.querySelector('input') as HTMLInputElement | null;
+    if (!lineInput) throw new Error('Line input not found');
 
-    expect(onError).toHaveBeenCalled();
-    expect(onApplyPatch).not.toHaveBeenCalled();
+    act(() => {
+      lineInput.dispatchEvent(new dom.window.FocusEvent('blur', { bubbles: true }));
+    });
+
+    expect(onError).not.toHaveBeenCalled();
+    expect(onStyleChange).not.toHaveBeenCalled();
+  });
+
+  it('accepts edited computed pixel line-height values', () => {
+    const onError = vi.fn();
+    const onStyleChange = vi.fn();
+    renderPanel({
+      onError,
+      onStyleChange,
+      styles: {
+        ...emptyManualEditStyles(),
+        lineHeight: '48.96px',
+      },
+    });
+
+    const lineInput = Array.from(host.querySelectorAll('.cc-row'))
+      .find((row) => row.textContent?.includes('Line'))
+      ?.querySelector('input') as HTMLInputElement | null;
+    if (!lineInput) throw new Error('Line input not found');
+
+    act(() => {
+      lineInput.value = '49px';
+      Simulate.change(lineInput);
+    });
+
+    expect(onError).toHaveBeenCalledWith('');
+    expect(onStyleChange).toHaveBeenCalledWith('hero-title', { lineHeight: '49px' }, 'Style: Hero Title');
+  });
+
+  it('does not persist unchanged page styles when no target is selected', () => {
+    vi.useFakeTimers();
+    try {
+      const onApplyPatch = vi.fn();
+      renderPanel({ onApplyPatch, selectedTarget: null });
+
+      act(() => {
+        vi.advanceTimersByTime(1600);
+      });
+
+      expect(onApplyPatch).not.toHaveBeenCalled();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('emits only the changed page style field', () => {
+    const onStyleChange = vi.fn();
+    renderPanel({ onStyleChange, selectedTarget: null });
+
+    const bgSwatch = host.querySelector('button[aria-label="Pick Background"]') as HTMLButtonElement | null;
+    if (!bgSwatch) throw new Error('Background swatch not found');
+
+    act(() => {
+      bgSwatch.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
+    });
+    const colorTile = host.querySelector('button[aria-label="#3b82f6"]') as HTMLButtonElement | null;
+    if (!colorTile) throw new Error('Background color tile not found');
+    act(() => {
+      colorTile.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
+    });
+
+    expect(onStyleChange).toHaveBeenCalledWith('__body__', { backgroundColor: '#3b82f6' }, 'Page styles');
+    expect(onStyleChange).not.toHaveBeenCalledWith(
+      '__body__',
+      expect.objectContaining({ fontFamily: expect.any(String) }),
+      'Page styles',
+    );
+    expect(onStyleChange).not.toHaveBeenCalledWith(
+      '__body__',
+      expect.objectContaining({ fontSize: expect.any(String) }),
+      'Page styles',
+    );
+  });
+
+  it('does not emit untouched page fields when changing the page font', () => {
+    const onStyleChange = vi.fn();
+    renderPanel({ onStyleChange, selectedTarget: null });
+
+    const fontSelect = host.querySelector('.cc-row select') as HTMLSelectElement | null;
+    if (!fontSelect) throw new Error('Font select not found');
+
+    act(() => {
+      fontSelect.value = 'Georgia, serif';
+      fontSelect.dispatchEvent(new dom.window.Event('change', { bubbles: true }));
+    });
+
+    expect(onStyleChange).toHaveBeenCalledWith('__body__', { fontFamily: 'Georgia, serif' }, 'Page styles');
+    expect(onStyleChange).not.toHaveBeenCalledWith(
+      '__body__',
+      expect.objectContaining({ backgroundColor: expect.any(String) }),
+      'Page styles',
+    );
+    expect(onStyleChange).not.toHaveBeenCalledWith(
+      '__body__',
+      expect.objectContaining({ fontSize: expect.any(String) }),
+      'Page styles',
+    );
+  });
+
+  it('shows an inactive Page inspector for fragment HTML sources', () => {
+    const onStyleChange = vi.fn();
+    renderPanel({ onStyleChange, selectedTarget: null, pageStylesEnabled: false });
+
+    expect(host.textContent).toContain('Page styles are available only for full HTML documents.');
+    expect(host.textContent).not.toContain('Background');
+    expect(host.querySelector('input')).toBeNull();
+    expect(host.querySelector('select')).toBeNull();
+    expect(onStyleChange).not.toHaveBeenCalled();
+  });
+
+  it('keeps explicit empty page values as field-specific clears', () => {
+    const onStyleChange = vi.fn();
+    renderPanel({ onStyleChange, selectedTarget: null });
+
+    const fontSelect = host.querySelector('.cc-row select') as HTMLSelectElement | null;
+    if (!fontSelect) throw new Error('Font select not found');
+
+    act(() => {
+      fontSelect.value = '';
+      fontSelect.dispatchEvent(new dom.window.Event('change', { bubbles: true }));
+    });
+
+    expect(onStyleChange).toHaveBeenCalledWith('__body__', { fontFamily: '' }, 'Page styles');
+    expect(onStyleChange).not.toHaveBeenCalledWith(
+      '__body__',
+      expect.objectContaining({ backgroundColor: expect.any(String), fontFamily: expect.any(String) }),
+      'Page styles',
+    );
+  });
+
+  it('renders layout as inactive for non-layout single targets', () => {
+    const onStyleChange = vi.fn();
+    renderPanel({
+      onStyleChange,
+      styles: {
+        ...emptyManualEditStyles(),
+        gap: 'normal',
+        flexDirection: 'row',
+      },
+    });
+
+    const layoutSection = sectionByTitle('LAYOUT');
+    expect(layoutSection.classList.contains('cc-section-inactive')).toBe(true);
+    expect(layoutSection.textContent).toContain('Select a container or group to edit layout.');
+    const gapInput = layoutSection.querySelector('input') as HTMLInputElement | null;
+    const directionSelect = layoutSection.querySelector('select') as HTMLSelectElement | null;
+    if (!gapInput || !directionSelect) throw new Error('Layout controls not found');
+
+    expect(gapInput.disabled).toBe(true);
+    expect(directionSelect.disabled).toBe(true);
+    expect(normalizeManualEditStyles({ gap: '12', flexDirection: 'column' }, { layoutEnabled: false })).toEqual({
+      ok: true,
+      styles: {},
+    });
+  });
+
+  it('enables layout controls for flex or grid containers', () => {
+    const onStyleChange = vi.fn();
+    renderPanel({
+      onStyleChange,
+      selectedTarget: { ...target, isLayoutContainer: true },
+      styles: {
+        ...emptyManualEditStyles(),
+        gap: '8px',
+        flexDirection: 'row',
+      },
+    });
+
+    const layoutSection = sectionByTitle('LAYOUT');
+    expect(layoutSection.classList.contains('cc-section-inactive')).toBe(false);
+    expect(layoutSection.textContent).not.toContain('Select a container or group to edit layout.');
+    const gapInput = layoutSection.querySelector('input') as HTMLInputElement | null;
+    const directionSelect = layoutSection.querySelector('select') as HTMLSelectElement | null;
+    const gapIncrease = layoutSection.querySelector('button[aria-label="Gap increase"]') as HTMLButtonElement | null;
+    if (!gapInput || !directionSelect) throw new Error('Layout controls not found');
+    expect(gapInput.disabled).toBe(false);
+    expect(directionSelect.disabled).toBe(false);
+    if (!gapIncrease) throw new Error('Gap increase control not found');
+
+    act(() => {
+      gapIncrease.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
+      directionSelect.value = 'column';
+      directionSelect.dispatchEvent(new dom.window.Event('change', { bubbles: true }));
+    });
+
+    expect(onStyleChange).toHaveBeenCalledWith('hero-title', { gap: '9px' }, 'Style: Hero Title');
+    expect(onStyleChange).toHaveBeenCalledWith('hero-title', { flexDirection: 'column' }, 'Style: Hero Title');
   });
 
   it('summarizes full-source history entries without rendering the full file', () => {
@@ -95,37 +421,61 @@ describe('ManualEditPanel', () => {
     expect(manualEditPatchSummary({ kind: 'set-full-source', source })).not.toContain('x'.repeat(100));
   });
 
+  function sectionByTitle(title: string): HTMLElement {
+    const section = Array.from(host.querySelectorAll('.cc-section'))
+      .find((candidate) => candidate.querySelector('.cc-section-head')?.textContent === title) as HTMLElement | undefined;
+    if (!section) throw new Error(`${title} section not found`);
+    return section;
+  }
+
   function renderPanel({
-    onSelectTarget = vi.fn(),
+    onDraftChange = vi.fn(),
     onApplyPatch = vi.fn(),
     onError = vi.fn(),
+    onStyleChange = vi.fn(),
+    onInvalidStyle = vi.fn(),
+    onClearSelection = vi.fn(),
     attributesText = '{}',
+    selectedTarget = target,
+    styles = emptyManualEditStyles(),
+    pageStylesEnabled = true,
   }: {
-    onSelectTarget?: ReturnType<typeof vi.fn>;
+    onDraftChange?: ReturnType<typeof vi.fn>;
     onApplyPatch?: ReturnType<typeof vi.fn>;
     onError?: ReturnType<typeof vi.fn>;
+    onStyleChange?: ReturnType<typeof vi.fn>;
+    onInvalidStyle?: ReturnType<typeof vi.fn>;
+    onClearSelection?: ReturnType<typeof vi.fn>;
     attributesText?: string;
-  }) {
+    selectedTarget?: ManualEditTarget | null;
+    styles?: ReturnType<typeof emptyManualEditStyles>;
+    pageStylesEnabled?: boolean;
+  } = {}) {
     const draft = {
       ...emptyManualEditDraft('<html></html>'),
       text: 'Updated copy',
       attributesText,
+      styles,
       outerHtml: target.outerHtml,
     };
     act(() => {
       root.render(
         <ManualEditPanel
           targets={[target]}
-          selectedTarget={target}
+          selectedTarget={selectedTarget}
           draft={draft}
           history={[]}
           error={null}
           canUndo={false}
           canRedo={false}
-          onSelectTarget={onSelectTarget}
-          onDraftChange={vi.fn()}
+          pageStylesEnabled={pageStylesEnabled}
+          onSelectTarget={vi.fn()}
+          onDraftChange={onDraftChange}
+          onStyleChange={onStyleChange}
+          onInvalidStyle={onInvalidStyle}
           onApplyPatch={onApplyPatch}
           onError={onError}
+          onClearSelection={onClearSelection}
           onCancelDraft={vi.fn()}
           onUndo={vi.fn()}
           onRedo={vi.fn()}
@@ -134,16 +484,4 @@ describe('ManualEditPanel', () => {
     });
   }
 
-  function buttonByText(text: string): HTMLButtonElement {
-    const buttons = Array.from(host.querySelectorAll('button'));
-    const button = buttons.find((item) => item.textContent?.includes(text));
-    if (!button) throw new Error(`Button not found: ${text}`);
-    return button as HTMLButtonElement;
-  }
-
-  function click(button: HTMLButtonElement): void {
-    act(() => {
-      button.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true, cancelable: true }));
-    });
-  }
 });
diff --git a/apps/web/tests/components/Theater/styles.test.ts b/apps/web/tests/components/Theater/styles.test.ts
new file mode 100644
index 000000000..741c6c49d
--- /dev/null
+++ b/apps/web/tests/components/Theater/styles.test.ts
@@ -0,0 +1,16 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+describe('Critique Theater styles', () => {
+  it('keeps the Theater UI selectors in the global stylesheet', () => {
+    const css = readFileSync(join(process.cwd(), 'src/index.css'), 'utf8');
+
+    expect(css).toContain('.theater-stage');
+    expect(css).toContain('.theater-lane');
+    expect(css).toContain('.theater-score-ticker');
+    expect(css).toContain('.theater-interrupt');
+    expect(css).toContain('.theater-transcript');
+    expect(css.indexOf('.theater-stage')).toBeLessThan(css.indexOf('.assistant-feedback-wrap'));
+  });
+});
diff --git a/apps/web/tests/edit-mode/bridge.test.ts b/apps/web/tests/edit-mode/bridge.test.ts
index 92868564a..459d8b2e0 100644
--- a/apps/web/tests/edit-mode/bridge.test.ts
+++ b/apps/web/tests/edit-mode/bridge.test.ts
@@ -66,4 +66,81 @@ describe('manual edit bridge target normalization', () => {
     expect(bridge).toContain('if (!isSourceMappable(nodes[i])) continue;');
     expect(bridge).toContain('if (isPrimaryTarget(el)) return el;');
   });
+
+  it('acks live preview style patches by id and version', () => {
+    const bridge = buildManualEditBridge(true);
+
+    expect(bridge).toContain("type: 'od-edit-preview-style-applied'");
+    expect(bridge).toContain('version: Number(version) || 0, ok: true');
+    expect(bridge).toContain("ok: false, error: 'Target not found'");
+  });
+
+  it('moves the runtime selected marker between selected targets', () => {
+    const dom = new JSDOM(
+      `<main>
+        <h1 data-od-id="title">Title</h1>
+        <p data-od-id="body">Body</p>
+      </main>${buildManualEditBridge(true)}`,
+      { runScripts: 'dangerously', url: 'http://localhost' },
+    );
+    const title = dom.window.document.querySelector('[data-od-id="title"]')!;
+    const body = dom.window.document.querySelector('[data-od-id="body"]')!;
+
+    dom.window.dispatchEvent(new dom.window.MessageEvent('message', {
+      data: { type: 'od-edit-selected-target', id: 'title' },
+    }));
+    expect(title.getAttribute('data-od-edit-selected')).toBe('true');
+    expect(body.hasAttribute('data-od-edit-selected')).toBe(false);
+
+    dom.window.dispatchEvent(new dom.window.MessageEvent('message', {
+      data: { type: 'od-edit-selected-target', id: 'body' },
+    }));
+    expect(title.hasAttribute('data-od-edit-selected')).toBe(false);
+    expect(body.getAttribute('data-od-edit-selected')).toBe('true');
+
+    dom.window.close();
+  });
+
+  it('clears runtime selected markers for null selection and edit-mode exit', () => {
+    const dom = new JSDOM(
+      `<main>
+        <h1 data-od-id="title">Title</h1>
+        <p data-od-id="body" data-od-edit-selected="true">Body</p>
+      </main>${buildManualEditBridge(true)}`,
+      { runScripts: 'dangerously', url: 'http://localhost' },
+    );
+    const body = dom.window.document.querySelector('[data-od-id="body"]')!;
+
+    dom.window.dispatchEvent(new dom.window.MessageEvent('message', {
+      data: { type: 'od-edit-selected-target', id: null },
+    }));
+    expect(body.hasAttribute('data-od-edit-selected')).toBe(false);
+
+    dom.window.dispatchEvent(new dom.window.MessageEvent('message', {
+      data: { type: 'od-edit-selected-target', id: 'body' },
+    }));
+    expect(body.getAttribute('data-od-edit-selected')).toBe('true');
+
+    dom.window.dispatchEvent(new dom.window.MessageEvent('message', {
+      data: { type: 'od-edit-mode', enabled: false },
+    }));
+    expect(body.hasAttribute('data-od-edit-selected')).toBe(false);
+
+    dom.window.close();
+  });
+
+  it('keeps runtime selection marker out of source-shaped target data', () => {
+    const bridge = buildManualEditBridge(true);
+
+    expect(bridge).toContain("attr.name === 'data-od-edit-selected'");
+    expect(bridge).toContain('replace(/\\sdata-od-edit-selected="[^"]*"/g, \'\')');
+    expect(bridge).toContain('[data-od-edit-selected]');
+  });
+
+  it('marks flex/grid targets as layout containers', () => {
+    const bridge = buildManualEditBridge(true);
+
+    expect(bridge).toContain('isLayoutContainer: isLayoutContainer(el)');
+    expect(bridge).toContain("display.indexOf('flex') >= 0 || display.indexOf('grid') >= 0");
+  });
 });
diff --git a/apps/web/tests/edit-mode/source-patches.test.ts b/apps/web/tests/edit-mode/source-patches.test.ts
index 7330257d1..5a40b382c 100644
--- a/apps/web/tests/edit-mode/source-patches.test.ts
+++ b/apps/web/tests/edit-mode/source-patches.test.ts
@@ -2,6 +2,7 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { JSDOM } from 'jsdom';
 import {
   applyManualEditPatch,
+  isManualEditFullHtmlDocument,
   readManualEditAttributes,
   readManualEditFields,
   readManualEditOuterHtml,
@@ -92,15 +93,33 @@ describe('manual edit source patches', () => {
     const result = applyManualEditPatch(baseSource, {
       kind: 'set-style',
       id: 'card',
-      styles: { color: '', backgroundColor: 'blue', fontSize: '24px' },
+      styles: {
+        color: '',
+        backgroundColor: '#ff0000',
+        fontSize: '24px',
+        paddingTop: '12px',
+        marginLeft: '4px',
+        borderTopWidth: '2px',
+        borderStyle: 'solid',
+        borderColor: '#000000',
+        borderRadius: '8px',
+        opacity: '0.5',
+      },
     });
 
     expect(result.ok).toBe(true);
     const styles = readManualEditStyles(result.source, 'card');
     expect(styles.color).toBe('');
-    expect(styles.backgroundColor).toBe('blue');
+    expect(styles.backgroundColor).toBe('rgb(255, 0, 0)');
     expect(styles.fontSize).toBe('24px');
-    expect(styles.padding).toBe('8px');
+    expect(styles.padding).toBe('12px 8px 8px');
+    expect(styles.paddingTop).toBe('12px');
+    expect(styles.marginLeft).toBe('4px');
+    expect(styles.borderTopWidth).toBe('2px');
+    expect(styles.borderStyle).toBe('solid');
+    expect(styles.borderColor).toBe('rgb(0, 0, 0)');
+    expect(styles.borderRadius).toBe('8px');
+    expect(styles.opacity).toBe('0.5');
   });
 
   it('applies attributes additively and preserves class/style unless explicitly updated', () => {
@@ -157,6 +176,12 @@ describe('manual edit source patches', () => {
     expect(result.source).not.toContain('<body');
   });
 
+  it('detects full documents after leading comments and keeps fragments distinct', () => {
+    expect(isManualEditFullHtmlDocument('<!-- generated -->\n<!doctype html><html></html>')).toBe(true);
+    expect(isManualEditFullHtmlDocument('<?xml version="1.0"?>\n<html></html>')).toBe(true);
+    expect(isManualEditFullHtmlDocument('<main><h1>Fragment</h1></main>')).toBe(false);
+  });
+
   it('preserves full documents with leading comments when saving patches', () => {
     const source = [
       '<!-- generated by open design -->',
diff --git a/e2e/ui/app-manual-edit.test.ts b/e2e/ui/app-manual-edit.test.ts
index 26c3a3a75..c6f4ceb07 100644
--- a/e2e/ui/app-manual-edit.test.ts
+++ b/e2e/ui/app-manual-edit.test.ts
@@ -24,7 +24,7 @@ test.beforeEach(async ({ page }) => {
   }, STORAGE_KEY);
 });
 
-test('manual edit mode applies content, style, attribute, HTML, source, undo, and redo patches', async ({ page }) => {
+test('manual edit inspector previews and persists page and selected element styles', async ({ page }) => {
   await routeMockAgents(page);
   const projectId = await createEmptyProject(page, 'Manual edit smoke');
   await seedHtmlArtifact(page, projectId, 'manual-edit.html', manualEditHtml());
@@ -34,60 +34,92 @@ test('manual edit mode applies content, style, attribute, HTML, source, undo, an
   await expect(page.getByTestId('artifact-preview-frame')).toBeVisible();
   const frame = page.frameLocator('[data-testid="artifact-preview-frame"]');
   await expect(frame.getByRole('heading', { name: 'Original Hero' })).toBeVisible();
+  const responsivePair = frame.locator('[data-od-id="responsive-pair"]');
+  await expect.poll(async () => responsivePair.evaluate((el) => getComputedStyle(el).flexDirection)).toBe('row');
 
   await page.getByTestId('manual-edit-mode-toggle').click();
+  await expect.poll(async () => responsivePair.evaluate((el) => getComputedStyle(el).flexDirection)).toBe('row');
+
+  await expect(page.locator('.manual-edit-modal')).toContainText('PAGE');
+  await expect(page.locator('.manual-edit-tabs')).toHaveCount(0);
+  await expect(page.locator('.manual-edit-layer-row')).toHaveCount(0);
+
+  await inspectorRow(page, 'Background').locator('input').fill('#eef2ff');
+  await inspectorRow(page, 'Font').locator('select').selectOption('Georgia, serif');
+  await inspectorRow(page, 'Base size').locator('input').fill('18');
+  await expect
+    .poll(async () => frame.locator('body').evaluate((el) => getComputedStyle(el).backgroundColor))
+    .toBe('rgb(238, 242, 255)');
+  await expectFileSource(page, projectId, 'manual-edit.html', [
+    'background-color:',
+    'font-family: Georgia, serif',
+    'font-size: 18px',
+    'letter-spacing: 0.01em',
+  ]);
+
   await frame.getByRole('heading', { name: 'Original Hero' }).click();
-  await expect(page.locator('.manual-edit-modal')).toContainText('Hero title');
+  await expect(page.locator('.manual-edit-modal')).toContainText('TYPOGRAPHY');
+  await expect(page.locator('.manual-edit-modal')).toContainText('SIZE');
+  await expect(page.locator('.manual-edit-modal')).toContainText('LAYOUT');
+  await expect(page.locator('.manual-edit-modal')).toContainText('BOX');
+  const selectedTitleMarker = frame.locator('[data-od-id="hero-title"][data-od-edit-selected="true"]');
+  await expect(selectedTitleMarker).toHaveCount(1);
+  const fontSizeInput = inspectorSection(page, 'TYPOGRAPHY').locator('.cc-row').filter({ hasText: 'Size' }).locator('input');
+  await fontSizeInput.click();
+  await expect(selectedTitleMarker).toHaveCount(1);
+  await expect(fontSizeInput).not.toHaveValue('');
+  await expect(fontSizeInput).not.toHaveValue(/px/i);
+  await page.getByRole('button', { name: 'Show page inspector' }).click();
+  await expect(page.locator('.manual-edit-modal')).toContainText('PAGE');
+  await expect(page.locator('.manual-edit-modal')).not.toContainText('TYPOGRAPHY');
+  await expect(selectedTitleMarker).toHaveCount(0);
+  await frame.getByRole('heading', { name: 'Original Hero' }).click();
+  await expect(page.locator('.manual-edit-modal')).toContainText('TYPOGRAPHY');
+  await expect(selectedTitleMarker).toHaveCount(1);
+  await expect(inspectorSection(page, 'TYPOGRAPHY').locator('.cc-row').filter({ hasText: 'Color' }).locator('input')).toHaveValue(/^#[0-9a-f]{6}$/);
+  const lineInput = inspectorSection(page, 'TYPOGRAPHY').locator('.cc-row').filter({ hasText: 'Line' }).locator('input');
+  await lineInput.click();
+  await lineInput.blur();
+  await expect(page.locator('.manual-edit-error')).toHaveCount(0);
+  await frame.locator('body').evaluate(() => {
+    window.parent.postMessage({ type: 'od-edit-targets', targets: [] }, '*');
+  });
+  await expect(page.locator('.manual-edit-modal')).toContainText('TYPOGRAPHY');
+  await expect(page.locator('.manual-edit-modal')).not.toContainText('PAGE');
+  await frame.locator('body').evaluate(() => {
+    (window as Window & typeof globalThis & { __manualEditSmokeMarker?: string }).__manualEditSmokeMarker = 'stable-frame';
+  });
 
-  await page.locator('.manual-edit-modal textarea').first().fill('Edited Hero');
-  await page.getByRole('button', { name: 'Apply Content' }).click();
-  await expect(frame.getByRole('heading', { name: 'Edited Hero' })).toBeVisible();
-  await expectFileSource(page, projectId, 'manual-edit.html', ['Edited Hero']);
+  await fontSizeInput.fill('48');
+  await inspectorSection(page, 'TYPOGRAPHY').locator('.cc-row').filter({ hasText: 'Color' }).locator('input').fill('#ef4444');
+  await inspectorSection(page, 'BOX').locator('.cc-row').filter({ hasText: 'Fill' }).locator('input').fill('#f97316');
+  const paddingTopInput = inspectorSection(page, 'BOX').locator('.cc-quad').filter({ hasText: 'Padding' }).locator('input').first();
+  await paddingTopInput.fill('12');
+  await inspectorSection(page, 'BOX').locator('.cc-row').filter({ hasText: 'Radius' }).locator('input').fill('8');
+  await expect(fontSizeInput).toHaveValue('48');
+  await expect(paddingTopInput).toHaveValue('12');
 
-  await page.locator('.manual-edit-tabs').getByRole('tab', { name: 'Style', exact: true }).click();
-  await page.locator('.manual-edit-field').filter({ hasText: 'Font size' }).locator('input').fill('48px');
-  await page.getByRole('button', { name: 'Apply Style' }).click();
-  await expectFileSource(page, projectId, 'manual-edit.html', ['font-size: 48px']);
-
-  await page.locator('.manual-edit-layer-row').filter({ hasText: 'Primary CTA' }).click();
-  await page.locator('.manual-edit-tabs').getByRole('tab', { name: 'Content', exact: true }).click();
-  const contentFields = page.locator('.manual-edit-tab-body');
-  await contentFields.locator('textarea').fill('Launch now');
-  await contentFields.locator('input').fill('/launch');
-  await page.getByRole('button', { name: 'Apply Content' }).click();
-  await expect(frame.getByRole('link', { name: 'Launch now' })).toHaveAttribute('href', /\/launch$/);
-
-  await page.locator('.manual-edit-layer-row').filter({ hasText: 'Hero image' }).click();
-  await contentFields.locator('input').first().fill('/edited.png');
-  await contentFields.locator('input').nth(1).fill('Edited alt');
-  await page.getByRole('button', { name: 'Apply Content' }).click();
-  await expectFileSource(page, projectId, 'manual-edit.html', ['/edited.png', 'Edited alt']);
-
-  await page.locator('.manual-edit-layer-row').filter({ hasText: 'Hero title' }).click();
-  await page.locator('.manual-edit-tabs').getByRole('tab', { name: 'Attributes', exact: true }).click();
-  await page.locator('.manual-edit-tab-body textarea').fill('{"aria-label":"Edited headline"}');
-  await page.getByRole('button', { name: 'Apply Attributes' }).click();
-  await expectFileSource(page, projectId, 'manual-edit.html', ['aria-label="Edited headline"', 'font-size: 48px']);
-
-  await page.locator('.manual-edit-tabs').getByRole('tab', { name: 'Html', exact: true }).click();
-  await page.locator('.manual-edit-tab-body textarea').fill('<h1 class="replacement">HTML Hero</h1>');
-  await page.getByRole('button', { name: 'Apply HTML' }).click();
-  await expectFileSource(page, projectId, 'manual-edit.html', ['data-od-id="hero-title"', 'HTML Hero']);
-
-  await page.locator('.manual-edit-tabs').getByRole('tab', { name: 'Source', exact: true }).click();
-  await page.locator('.manual-edit-tab-body textarea').fill(manualEditHtml().replace('Original Hero', 'Full Source Hero'));
-  await page.getByRole('button', { name: 'Apply Source' }).click();
-  await expect(frame.getByRole('heading', { name: 'Full Source Hero' })).toBeVisible();
-
-  await page.getByRole('button', { name: 'Undo' }).click();
-  await expect(frame.getByRole('heading', { name: 'HTML Hero' })).toBeVisible();
-  await page.getByRole('button', { name: 'Redo' }).click();
-  await expect(frame.getByRole('heading', { name: 'Full Source Hero' })).toBeVisible();
-
-  await page.getByRole('button', { name: /Tweaks/ }).click();
-  await expect(page.getByTestId('comment-mode-toggle')).toBeVisible();
-  await frame.getByRole('heading', { name: 'Full Source Hero' }).click();
-  await expect(page.getByTestId('comment-popover')).toBeVisible();
+  const title = frame.getByRole('heading', { name: 'Original Hero' });
+  await expect.poll(async () => title.evaluate((el) => getComputedStyle(el).fontSize)).toBe('48px');
+  await expect(title).toHaveCSS('color', 'rgb(239, 68, 68)');
+  await expect(title).toHaveCSS('background-color', 'rgb(249, 115, 22)');
+  await expect(title).toHaveCSS('padding-top', '12px');
+  await expect(title).toHaveCSS('border-radius', '8px');
+  await expectFileSource(page, projectId, 'manual-edit.html', [
+    'font-size: 48px',
+    'color:',
+    'background-color:',
+    'padding-top: 12px',
+    'border-radius: 8px',
+  ]);
+  await expectFileSourceExcludes(page, projectId, 'manual-edit.html', ['data-od-edit-selected']);
+  await expect(page.locator('.manual-edit-modal')).toContainText('TYPOGRAPHY');
+  await expect(page.locator('.manual-edit-modal')).not.toContainText('PAGE');
+  await expect(selectedTitleMarker).toHaveCount(1);
+  await expect(page.locator('.manual-edit-error')).toHaveCount(0);
+  await expect.poll(async () => frame.locator('body').evaluate(() => (
+    window as Window & typeof globalThis & { __manualEditSmokeMarker?: string }
+  ).__manualEditSmokeMarker)).toBe('stable-frame');
 
   await page.getByRole('button', { name: /^Share$/ }).click();
   await expect(page.getByRole('menuitem', { name: /Export as PDF/ })).toBeVisible();
@@ -171,13 +203,46 @@ async function expectFileSource(page: Page, projectId: string, fileName: string,
     .toBe(true);
 }
 
+async function expectFileSourceExcludes(page: Page, projectId: string, fileName: string, snippets: string[]) {
+  await expect
+    .poll(async () => {
+      const resp = await page.request.get(`/api/projects/${projectId}/files/${fileName}`);
+      if (!resp.ok()) return false;
+      const source = await resp.text();
+      return snippets.every((snippet) => !source.includes(snippet));
+    })
+    .toBe(true);
+}
+
+function inspectorRow(page: Page, label: string) {
+  return page.locator('.manual-edit-modal .cc-row').filter({ hasText: label }).first();
+}
+
+function inspectorSection(page: Page, title: string) {
+  return page.locator('.manual-edit-modal .cc-section').filter({ hasText: title }).first();
+}
+
 function manualEditHtml(): string {
   return `<!doctype html>
 <html>
-  <head><meta charset="utf-8"><title>Manual Edit</title></head>
-  <body>
+  <head>
+    <meta charset="utf-8">
+    <title>Manual Edit</title>
+    <style>
+      .responsive-pair { display: flex; gap: 24px; }
+      .responsive-pair > div { flex: 1 1 0; min-height: 40px; }
+      @media (max-width: 700px) {
+        .responsive-pair { flex-direction: column; }
+      }
+    </style>
+  </head>
+  <body style="font-family: Inter, system-ui, sans-serif; font-size: 16px; letter-spacing: 0.01em;">
     <main>
-      <section data-od-id="hero" data-od-label="Hero section">
+      <section data-od-id="responsive-pair" data-od-label="Responsive pair" class="responsive-pair">
+        <div data-od-id="pair-a">Left panel</div>
+        <div data-od-id="pair-b">Right panel</div>
+      </section>
+      <section data-od-id="hero" data-od-label="Hero section" style="display:flex;gap:8px;align-items:center;">
         <h1 data-od-id="hero-title" data-od-label="Hero title">Original Hero</h1>
         <a data-od-id="cta" data-od-label="Primary CTA" href="/start">Start now</a>
         <img data-od-id="hero-image" data-od-label="Hero image" src="/hero.png" alt="Hero" style="width:64px;height:64px;">
diff --git a/skills/faq-page/example.html b/skills/faq-page/example.html
index 9a315cf1d..0d07b1e62 100644
--- a/skills/faq-page/example.html
+++ b/skills/faq-page/example.html
@@ -10,42 +10,42 @@
       padding: 0;
       box-sizing: border-box;
     }
-    
+
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       line-height: 1.6;
       color: #1a1a1a;
       background: #fafafa;
     }
-    
+
     .container {
       max-width: 800px;
       margin: 0 auto;
       padding: 60px 24px;
     }
-    
+
     header {
       text-align: center;
       margin-bottom: 48px;
     }
-    
+
     h1 {
       font-size: 2.5rem;
       font-weight: 700;
       margin-bottom: 12px;
       color: #0a0a0a;
     }
-    
+
     .subtitle {
       font-size: 1.125rem;
       color: #666;
     }
-    
+
     .search-box {
       position: relative;
       margin-bottom: 32px;
     }
-    
+
     .search-input {
       width: 100%;
       padding: 16px 48px 16px 20px;
@@ -55,12 +55,12 @@
       background: white;
       transition: border-color 0.2s;
     }
-    
+
     .search-input:focus {
       outline: none;
       border-color: #0066ff;
     }
-    
+
     .search-icon {
       position: absolute;
       right: 20px;
@@ -68,7 +68,7 @@
       transform: translateY(-50%);
       color: #999;
     }
-    
+
     .categories {
       display: flex;
       gap: 12px;
@@ -76,7 +76,7 @@
       margin-bottom: 40px;
       justify-content: center;
     }
-    
+
     .category-btn {
       padding: 10px 20px;
       border: 2px solid #e0e0e0;
@@ -88,24 +88,24 @@
       cursor: pointer;
       transition: all 0.2s;
     }
-    
+
     .category-btn:hover {
       border-color: #0066ff;
       color: #0066ff;
     }
-    
+
     .category-btn.active {
       background: #0066ff;
       border-color: #0066ff;
       color: white;
     }
-    
+
     .faq-list {
       display: flex;
       flex-direction: column;
       gap: 16px;
     }
-    
+
     .faq-item {
       background: white;
       border: 1px solid #e0e0e0;
@@ -113,15 +113,15 @@
       overflow: hidden;
       transition: box-shadow 0.2s;
     }
-    
+
     .faq-item:hover {
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     }
-    
+
     .faq-item.hidden {
       display: none;
     }
-    
+
     .faq-question {
       width: 100%;
       padding: 20px 24px;
@@ -137,39 +137,39 @@
       align-items: center;
       gap: 16px;
     }
-    
+
     .faq-question:hover {
       color: #0066ff;
     }
-    
+
     .faq-icon {
       flex-shrink: 0;
       width: 20px;
       height: 20px;
       transition: transform 0.3s;
     }
-    
+
     .faq-item.open .faq-icon {
       transform: rotate(180deg);
     }
-    
+
     .faq-answer {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s ease-out;
     }
-    
+
     .faq-answer-content {
       padding: 0 24px 20px;
       color: #555;
       font-size: 1rem;
       line-height: 1.7;
     }
-    
+
     .faq-item.open .faq-answer {
       max-height: 500px;
     }
-    
+
     .footer-cta {
       margin-top: 64px;
       padding: 32px;
@@ -178,18 +178,18 @@
       border-radius: 12px;
       text-align: center;
     }
-    
+
     .footer-cta h2 {
       font-size: 1.5rem;
       margin-bottom: 12px;
       color: #0a0a0a;
     }
-    
+
     .footer-cta p {
       color: #666;
       margin-bottom: 20px;
     }
-    
+
     .contact-link {
       display: inline-block;
       padding: 12px 32px;
@@ -200,18 +200,18 @@
       font-weight: 600;
       transition: background 0.2s;
     }
-    
+
     .contact-link:hover {
       background: #0052cc;
     }
-    
+
     .no-results {
       text-align: center;
       padding: 48px 24px;
       color: #999;
       display: none;
     }
-    
+
     .no-results.show {
       display: block;
     }
@@ -223,12 +223,12 @@
       <h1>Frequently Asked Questions</h1>
       <p class="subtitle">Find answers to common questions about our product and services</p>
     </header>
-    
+
     <div class="search-box" data-od-id="search">
-      <input 
-        type="text" 
-        class="search-input" 
-        id="searchInput" 
+      <input
+        type="text"
+        class="search-input"
+        id="searchInput"
         placeholder="Search for answers..."
         aria-label="Search FAQ"
       >
@@ -236,7 +236,7 @@
         <path d="M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16zM18 18l-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
       </svg>
     </div>
-    
+
     <div class="categories" data-od-id="categories">
       <button class="category-btn active" data-category="all">All</button>
       <button class="category-btn" data-category="billing">Billing</button>
@@ -244,7 +244,7 @@
       <button class="category-btn" data-category="technical">Technical</button>
       <button class="category-btn" data-category="general">General</button>
     </div>
-    
+
     <div class="faq-list" data-od-id="faq-list">
       <!-- Billing -->
       <div class="faq-item" data-category="billing">
@@ -260,7 +260,7 @@
           </div>
         </div>
       </div>
-      
+
       <div class="faq-item" data-category="billing">
         <button class="faq-question" aria-expanded="false">
           <span>What payment methods do you accept?</span>
@@ -274,7 +274,7 @@
           </div>
         </div>
       </div>
-      
+
       <div class="faq-item" data-category="billing">
         <button class="faq-question" aria-expanded="false">
           <span>Can I get a refund?</span>
@@ -288,7 +288,7 @@
           </div>
         </div>
       </div>
-      
+
       <!-- Account -->
       <div class="faq-item" data-category="account">
         <button class="faq-question" aria-expanded="false">
@@ -303,7 +303,7 @@
           </div>
         </div>
       </div>
-      
+
       <div class="faq-item" data-category="account">
         <button class="faq-question" aria-expanded="false">
           <span>Can I change my email address?</span>
@@ -317,7 +317,7 @@
           </div>
         </div>
       </div>
-      
+
       <div class="faq-item" data-category="account">
         <button class="faq-question" aria-expanded="false">
           <span>How do I delete my account?</span>
@@ -331,7 +331,7 @@
           </div>
         </div>
       </div>
-      
+
       <!-- Technical -->
       <div class="faq-item" data-category="technical">
         <button class="faq-question" aria-expanded="false">
@@ -346,7 +346,7 @@
           </div>
         </div>
       </div>
-      
+
       <div class="faq-item" data-category="technical">
         <button class="faq-question" aria-expanded="false">
           <span>Is there a mobile app?</span>
@@ -360,7 +360,7 @@
           </div>
         </div>
       </div>
-      
+
       <div class="faq-item" data-category="technical">
         <button class="faq-question" aria-expanded="false">
           <span>How do I export my data?</span>
@@ -374,7 +374,7 @@
           </div>
         </div>
       </div>
-      
+
       <!-- General -->
       <div class="faq-item" data-category="general">
         <button class="faq-question" aria-expanded="false">
@@ -389,7 +389,7 @@
           </div>
         </div>
       </div>
-      
+
       <div class="faq-item" data-category="general">
         <button class="faq-question" aria-expanded="false">
           <span>How do I get started?</span>
@@ -403,7 +403,7 @@
           </div>
         </div>
       </div>
-      
+
       <div class="faq-item" data-category="general">
         <button class="faq-question" aria-expanded="false">
           <span>Do you offer customer support?</span>
@@ -418,34 +418,34 @@
         </div>
       </div>
     </div>
-    
+
     <div class="no-results" id="noResults">
       <p>No questions found matching your search.</p>
     </div>
-    
+
     <div class="footer-cta" data-od-id="footer-cta">
       <h2>Still have questions?</h2>
       <p>Can't find what you're looking for? Our support team is here to help.</p>
       <a href="mailto:support@example.com" class="contact-link">Contact Support</a>
     </div>
   </div>
-  
+
   <script>
     // Accordion functionality
     const faqItems = document.querySelectorAll('.faq-item');
-    
+
     faqItems.forEach(item => {
       const question = item.querySelector('.faq-question');
-      
+
       question.addEventListener('click', () => {
         const isOpen = item.classList.contains('open');
-        
+
         // Close all items
         faqItems.forEach(i => {
           i.classList.remove('open');
           i.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
         });
-        
+
         // Open clicked item if it was closed
         if (!isOpen) {
           item.classList.add('open');
@@ -453,21 +453,21 @@
         }
       });
     });
-    
+
     // Search functionality
     const searchInput = document.getElementById('searchInput');
     const noResults = document.getElementById('noResults');
-    
+
     searchInput.addEventListener('input', (e) => {
       const searchTerm = e.target.value.toLowerCase();
       let visibleCount = 0;
-      
+
       faqItems.forEach(item => {
         const question = item.querySelector('.faq-question span').textContent.toLowerCase();
         const answer = item.querySelector('.faq-answer-content').textContent.toLowerCase();
         const matchesSearch = question.includes(searchTerm) || answer.includes(searchTerm);
         const matchesCategory = item.dataset.category === currentCategory || currentCategory === 'all';
-        
+
         if (matchesSearch && matchesCategory) {
           item.classList.remove('hidden');
           visibleCount++;
@@ -475,32 +475,32 @@
           item.classList.add('hidden');
         }
       });
-      
+
       noResults.classList.toggle('show', visibleCount === 0);
     });
-    
+
     // Category filtering
     const categoryBtns = document.querySelectorAll('.category-btn');
     let currentCategory = 'all';
-    
+
     categoryBtns.forEach(btn => {
       btn.addEventListener('click', () => {
         currentCategory = btn.dataset.category;
-        
+
         // Update active state
         categoryBtns.forEach(b => b.classList.remove('active'));
         btn.classList.add('active');
-        
+
         // Filter items
         const searchTerm = searchInput.value.toLowerCase();
         let visibleCount = 0;
-        
+
         faqItems.forEach(item => {
           const question = item.querySelector('.faq-question span').textContent.toLowerCase();
           const answer = item.querySelector('.faq-answer-content').textContent.toLowerCase();
           const matchesSearch = !searchTerm || question.includes(searchTerm) || answer.includes(searchTerm);
           const matchesCategory = currentCategory === 'all' || item.dataset.category === currentCategory;
-          
+
           if (matchesSearch && matchesCategory) {
             item.classList.remove('hidden');
             visibleCount++;
@@ -508,7 +508,7 @@
             item.classList.add('hidden');
           }
         });
-        
+
         noResults.classList.toggle('show', visibleCount === 0);
       });
     });