diff --git a/src/components/builder/AdvancedBuilderApp.tsx b/src/components/builder/AdvancedBuilderApp.tsx
index d17759d..8aed013 100644
--- a/src/components/builder/AdvancedBuilderApp.tsx
+++ b/src/components/builder/AdvancedBuilderApp.tsx
@@ -1,956 +1,6 @@
-// src/components/builder/AdvancedBuilderApp.tsx
-// Advanced Builder — vertical panel nav on the left, panel content on the right.
-// No horizontal tab bars inside panels.
-
-import React, { useState, useEffect, useRef, useCallback, memo } from 'react';
-import clsx from 'clsx';
-import type { PosterConfig, ExtensionType, ApiKeys, RatingType } from './types';
-import {
-  DEFAULT_CONFIG, ALL_BADGES,
-  CANVAS_WIDTH, CANVAS_HEIGHT, BASE_BADGE_W, BASE_BADGE_H,
-} from './types';
-import { parseUrlToConfig, DEFAULT_API_BASE, calculateAutoPosition, getScale } from './utils';
-import PreviewCanvas from './components/PreviewCanvas';
-import LayerPanel from './components/LayerPanel';
-import Inspector from './components/layout/Inspector';
-import MobileDock from './components/layout/MobileDock';
-import KeyboardShortcutsModal from './components/KeyboardShortcutsModal';
-import ResetDialog from './components/ResetDialogue';
-import ImportDialog from './components/ImportDialogue';
-import ExportPopover from './components/ExportPopover';
-import { EditorProvider, useEditor } from './context/EditorContext';
-import {
-  Film, Layers, Monitor, Sliders, MousePointer2,
-  RotateCcw, Undo2, Redo2, Maximize2, Minimize2, ZoomIn, ZoomOut,
-  Grid3x3, ShieldCheck, Eye, EyeOff, CheckSquare, MousePointer2Off,
-  Download, Contrast, Keyboard, ChevronDown, Search, PanelRight,
-} from 'lucide-react';
-import { usePosterHistory } from './hooks/usePosterHistory';
-import ContextMenu, { type ContextMenuState, type LayerTargetId } from './components/ContextMenu';
-import CommandPalette, { type PaletteCommand } from './components/CommandPalette';
-
-// ── Constants ─────────────────────────────────────────────────────────────────
-const STORAGE_KEY = 'posterium_config_v2'; // shared with main builder
-const COOKIE_KEY = 'posterium_apikeys_v1';
-const MAX_QUERY_CONFIG_LENGTH = 12000;
-
-const saveKeysToCookie = (keys: ApiKeys) => {
-  try {
-    const val = encodeURIComponent(JSON.stringify(keys));
-    const exp = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toUTCString();
-    document.cookie = `${COOKIE_KEY}=${val}; expires=${exp}; path=/; SameSite=Strict`;
-  } catch {}
-};
-const loadKeysFromCookie = (): ApiKeys => {
-  try {
-    const match = document.cookie.match(new RegExp(`(?:^|; )${COOKIE_KEY}=([^;]*)`));
-    if (!match) return {};
-    return JSON.parse(decodeURIComponent(match[1])) || {};
-  } catch {
-    return {};
-  }
-};
-
-// ── Panel definitions ─────────────────────────────────────────────────────────
-const ADV_PANELS = [
-  { id: 'source'    as const, label: 'Source',    Icon: Film,          desc: 'Media & poster source'  },
-  { id: 'layers'    as const, label: 'Layers',    Icon: Layers,        desc: 'Badge & logo layers'    },
-  { id: 'poster'    as const, label: 'Canvas',    Icon: Monitor,       desc: 'Overlays & effects'     },
-  { id: 'badges'    as const, label: 'Badges',    Icon: Sliders,       desc: 'Global badge style'     },
-  { id: 'selection' as const, label: 'Selection', Icon: MousePointer2, desc: 'Selected layer config'  },
-] as const;
-
-// ── ToolbarBtn ────────────────────────────────────────────────────────────────
-const ToolbarBtn = memo<{
-  onClick?: () => void;
-  disabled?: boolean;
-  label: string;
-  danger?: boolean;
-  href?: string;
-  active?: boolean;
-  children: React.ReactNode;
-  hideOnMobile?: boolean;
-}>(({ onClick, disabled, label, danger, href, active, children, hideOnMobile = false }) => {
-  const cls = `relative group w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-150 select-none outline-none focus-visible:ring-2 focus-visible:ring-[#C47C2E] ${hideOnMobile ? 'hidden lg:flex' : ''} ${disabled ? 'cursor-not-allowed pointer-events-none' : 'active:scale-95 cursor-pointer'}`;
-  const activeStyle = active
-    ? { color: 'var(--film-amber)', background: 'rgba(196,124,46,0.1)', border: '1px solid rgba(196,124,46,0.2)' }
-    : disabled
-      ? { color: 'rgba(255,255,255,0.15)', border: '1px solid transparent', opacity: 0.5 }
-      : { color: 'var(--film-text-dim)', border: '1px solid transparent' };
-  const tooltip = !disabled && (
-    <span className="absolute top-full mt-2 left-1/2 -translate-x-1/2 px-2 py-1 rounded-md text-[10px] font-medium border whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-150 delay-300 pointer-events-none z-[200] shadow-lg syne-font"
-      style={{ background: 'var(--film-mid)', color: 'var(--film-cream)', borderColor: 'rgba(255,255,255,0.08)' }}>
-      {label}
-    </span>
-  );
-  const hoverEvents = !disabled && !active ? {
-    onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {
-      const el = e.currentTarget as HTMLElement;
-      if (danger) { el.style.color = 'rgba(248,113,113,0.8)'; el.style.background = 'rgba(248,113,113,0.08)'; }
-      else { el.style.color = 'var(--film-text-label)'; el.style.background = 'rgba(196,124,46,0.07)'; }
-    },
-    onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {
-      const el = e.currentTarget as HTMLElement;
-      el.style.color = 'var(--film-text-dim)'; el.style.background = 'transparent';
-    },
-  } : {};
-  if (href) return <a href={href} target="_blank" rel="noreferrer noopener" className={cls} aria-label={label} style={activeStyle} {...hoverEvents}>{children}{tooltip}</a>;
-  return <button onClick={onClick} disabled={!!disabled} className={cls} aria-label={label} aria-disabled={disabled} style={activeStyle} {...hoverEvents}>{children}{tooltip}</button>;
-});
-ToolbarBtn.displayName = 'ToolbarBtn';
-
-// ── AdvancedNavSidebar ────────────────────────────────────────────────────────
-const AdvancedNavSidebar = memo<{
-  config: PosterConfig;
-  selectedCount: number;
-}>(({ config, selectedCount }) => {
-  const { activeTab, setActiveTab } = useEditor();
-
-  const activePanel = (() => {
-    if (activeTab === 'logo') return 'selection';
-    if (['source', 'layers', 'poster', 'badges', 'selection'].includes(activeTab)) return activeTab;
-    return 'source';
-  })();
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'var(--film-dark)' }}>
-      {/* Strip header */}
-      <div style={{
-        padding: '10px 14px 8px',
-        borderBottom: '1px solid rgba(255,255,255,0.04)',
-        background: 'rgba(196,124,46,0.015)',
-        flexShrink: 0,
-      }}>
-        <span className="syne-font" style={{
-          fontSize: 8, fontWeight: 700, letterSpacing: '0.18em',
-          textTransform: 'uppercase', color: 'rgba(196,124,46,0.4)',
-        }}>
-          Panels
-        </span>
-      </div>
-
-      {/* Nav list */}
-      <nav style={{ flex: 1, overflowY: 'auto', paddingBlock: 4 }} aria-label="Builder panels">
-        {ADV_PANELS.map(({ id, label, Icon, desc }) => {
-          const isActive = activePanel === id;
-          const badge = id === 'selection' && selectedCount > 0 ? selectedCount : null;
-          return (
-            <button
-              key={id}
-              onClick={() => setActiveTab(id as any)}
-              aria-current={isActive ? 'true' : undefined}
-              style={{
-                width: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 10,
-                padding: '10px 14px',
-                background: isActive ? 'rgba(196,124,46,0.07)' : 'transparent',
-                border: 'none',
-                borderLeft: `3px solid ${isActive ? 'var(--film-amber)' : 'transparent'}`,
-                cursor: 'pointer',
-                color: isActive ? 'var(--film-cream)' : 'var(--film-text-dim)',
-                textAlign: 'left',
-                transition: 'all 0.12s ease',
-              }}
-              onMouseEnter={e => {
-                if (!isActive) {
-                  e.currentTarget.style.background = 'rgba(196,124,46,0.04)';
-                  e.currentTarget.style.color = 'var(--film-text-label)';
-                }
-              }}
-              onMouseLeave={e => {
-                if (!isActive) {
-                  e.currentTarget.style.background = 'transparent';
-                  e.currentTarget.style.color = 'var(--film-text-dim)';
-                }
-              }}
-            >
-              {/* Icon box */}
-              <div style={{
-                width: 30, height: 30, borderRadius: 8, flexShrink: 0,
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                background: isActive ? 'rgba(196,124,46,0.14)' : 'rgba(255,255,255,0.03)',
-                border: `1px solid ${isActive ? 'rgba(196,124,46,0.28)' : 'rgba(255,255,255,0.06)'}`,
-                transition: 'all 0.12s ease',
-              }}>
-                <Icon size={13} style={{ color: isActive ? 'var(--film-amber)' : 'inherit' }} />
-              </div>
-
-              {/* Label + desc */}
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-                  <span className="syne-font" style={{ fontSize: 11, fontWeight: 700, lineHeight: 1.2 }}>
-                    {label}
-                  </span>
-                  {badge !== null && (
-                    <span style={{
-                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-                      minWidth: 16, height: 16, background: 'var(--film-amber)', color: '#070706',
-                      fontSize: 8, fontWeight: 800, borderRadius: 99, padding: '0 4px',
-                    }}>
-                      {badge}
-                    </span>
-                  )}
-                </div>
-                <div className="mono-font" style={{ fontSize: 8, color: 'var(--film-text-ghost)', marginTop: 1 }}>
-                  {desc}
-                </div>
-              </div>
-
-              {/* Active indicator dot */}
-              {isActive && (
-                <div style={{
-                  width: 4, height: 4, borderRadius: '50%',
-                  background: 'var(--film-amber)', flexShrink: 0,
-                  boxShadow: '0 0 5px rgba(196,124,46,0.6)',
-                }} />
-              )}
-            </button>
-          );
-        })}
-      </nav>
-
-      {/* Footer info */}
-      <div style={{ padding: '10px 14px', borderTop: '1px solid rgba(255,255,255,0.04)', flexShrink: 0 }}>
-        <div className="mono-font" style={{ fontSize: 7, color: 'var(--film-text-ghost)', letterSpacing: '0.1em' }}>
-          {config.ratings.length} badge{config.ratings.length !== 1 ? 's' : ''} · advanced
-        </div>
-      </div>
-    </div>
-  );
-});
-AdvancedNavSidebar.displayName = 'AdvancedNavSidebar';
-
-// ── AdvancedRightPanel ────────────────────────────────────────────────────────
-const AdvancedRightPanel = memo<{
-  config: PosterConfig;
-  setConfig: React.Dispatch<React.SetStateAction<PosterConfig>>;
-  selectedIds: Set<RatingType>;
-  onSelect: (id: RatingType, multi: boolean) => void;
-}>(({ config, setConfig, selectedIds, onSelect }) => {
-  const { activeTab } = useEditor();
-  const isLayerPanel = ['source', 'layers', 'poster'].includes(activeTab);
-
-  const panelMeta = ADV_PANELS.find(p =>
-    p.id === activeTab || (activeTab === 'logo' && p.id === 'selection')
-  ) ?? ADV_PANELS[0];
-  const PanelIcon = panelMeta.Icon;
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'var(--film-dark)' }}>
-      {/* Panel label strip */}
-      <div style={{
-        padding: '10px 16px',
-        borderBottom: '1px solid rgba(196,124,46,0.07)',
-        background: 'rgba(196,124,46,0.015)',
-        display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0,
-      }}>
-        <PanelIcon size={12} style={{ color: 'var(--film-amber)', flexShrink: 0 }} />
-        <span className="syne-font" style={{
-          fontSize: 9, fontWeight: 700, letterSpacing: '0.14em',
-          textTransform: 'uppercase', color: 'var(--film-amber)',
-        }}>
-          {panelMeta.label}
-        </span>
-        <span className="mono-font" style={{ fontSize: 8, color: 'var(--film-text-ghost)', marginLeft: 'auto' }}>
-          {panelMeta.desc}
-        </span>
-      </div>
-
-      {/* Panel content — no tab bar */}
-      <div style={{ flex: 1, overflow: 'hidden' }}>
-        {isLayerPanel ? (
-          <LayerPanel
-            config={config}
-            setConfig={setConfig}
-            selectedIds={selectedIds}
-            onSelect={onSelect}
-            hideTabBar
-          />
-        ) : (
-          <Inspector
-            config={config}
-            setConfig={setConfig}
-            hideTabBar
-          />
-        )}
-      </div>
-    </div>
-  );
-});
-AdvancedRightPanel.displayName = 'AdvancedRightPanel';
-
-// ── AdvancedStudioLayout ──────────────────────────────────────────────────────
-const AdvancedStudioLayout: React.FC<{
-  config: PosterConfig;
-  setConfig: React.Dispatch<React.SetStateAction<PosterConfig>>;
-  handleReset: () => void;
-  baseUrl: string;
-  handleLoadConfig: (url: string) => void;
-  undo: () => void;
-  redo: () => void;
-  canUndo: boolean;
-  canRedo: boolean;
-}> = ({ config, setConfig, handleReset, baseUrl, handleLoadConfig, undo, redo, canUndo, canRedo }) => {
-  const {
-    activeTab, setActiveTab,
-    mobileSheetMode, setMobileSheetMode,
-    selectedIds, selectedLogo, selectedMinimalElements,
-    handleSelection, handleLogoSelection,
-    clearSelection, setBatchSelection,
-    viewOptions, toggleViewOption,
-  } = useEditor();
-
-  // ── UI state ────────────────────────────────────────────────────────────
-  const [isResetOpen,   setIsResetOpen]   = useState(false);
-  const [isImportOpen,  setIsImportOpen]  = useState(false);
-  const [isFullscreen,  setIsFullscreen]  = useState(false);
-  const [shortcutsOpen, setShortcutsOpen] = useState(false);
-  const [exportOpen,    setExportOpen]    = useState(false);
-  const [paletteOpen,   setPaletteOpen]   = useState(false);
-  const [navVisible,    setNavVisible]    = useState(true);
-  const [rightVisible,  setRightVisible]  = useState(true);
-  const [rightW,        setRightW]        = useState(300);
-  const [isDesktop,     setIsDesktop]     = useState(() => typeof window !== 'undefined' && window.innerWidth >= 1024);
-
-  const importBtnRef = useRef<HTMLButtonElement>(null);
-  const exportBtnRef = useRef<HTMLButtonElement>(null);
-  const toggleFullscreen = useCallback(() => setIsFullscreen(v => !v), []);
-
-  // Stable refs for keyboard shortcuts
-  const selectedIdsRef             = useRef(selectedIds);
-  const selectedLogoRef            = useRef(selectedLogo);
-  const selectedMinimalElementsRef = useRef(selectedMinimalElements);
-  const configRatingsRef           = useRef(config.ratings);
-  useEffect(() => { selectedIdsRef.current = selectedIds; });
-  useEffect(() => { selectedLogoRef.current = selectedLogo; });
-  useEffect(() => { selectedMinimalElementsRef.current = selectedMinimalElements; });
-  useEffect(() => { configRatingsRef.current = config.ratings; });
-
-  useEffect(() => {
-    const mq = window.matchMedia('(min-width: 1024px)');
-    const h = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
-    mq.addEventListener('change', h);
-    return () => mq.removeEventListener('change', h);
-  }, []);
-
-  // ── Context menu ────────────────────────────────────────────────────────
-  const [ctxMenu, setCtxMenu] = useState<ContextMenuState>({ visible: false, x: 0, y: 0, badgeId: null });
-  const openCtxMenu = useCallback((badgeId: LayerTargetId, e: React.MouseEvent) => {
-    e.preventDefault();
-    setCtxMenu({ visible: true, x: e.clientX, y: e.clientY, badgeId });
-  }, []);
-  const closeCtxMenu = useCallback(() => setCtxMenu(s => ({ ...s, visible: false })), []);
-
-  // ── Layer helpers (same logic as main builder) ──────────────────────────
-  const handleSelectionOverride = useCallback((id: RatingType, multi: boolean) => {
-    handleSelection(id, multi);
-  }, [handleSelection]);
-
-  const moveLayer = useCallback((id: RatingType, dir: 'front' | 'forward' | 'back' | 'toback') => {
-    setConfig(prev => {
-      const arr = [...prev.ratings];
-      const idx = arr.indexOf(id);
-      if (idx === -1) return prev;
-      arr.splice(idx, 1);
-      if (dir === 'front') arr.push(id);
-      else if (dir === 'forward') arr.splice(Math.min(idx + 1, arr.length), 0, id);
-      else if (dir === 'back') arr.splice(Math.max(idx - 1, 0), 0, id);
-      else arr.unshift(id);
-      return { ...prev, ratings: arr };
-    });
-  }, [setConfig]);
-
-  const hideBadge = useCallback((id: RatingType) => {
-    setConfig(prev => ({ ...prev, ratings: prev.ratings.filter(r => r !== id) }));
-    clearSelection();
-  }, [setConfig, clearSelection]);
-
-  const showAllBadges = useCallback(() => {
-    setConfig(prev => ({
-      ...prev,
-      ratings: ALL_BADGES.map(b => b.id).filter(id => prev.ratings.includes(id) || !prev.ratings.includes(id)),
-    }));
-  }, [setConfig]);
-
-  const resetBadge = useCallback((id: RatingType) => {
-    setConfig(prev => { const ni = { ...prev.items }; delete ni[id]; return { ...prev, items: ni }; });
-  }, [setConfig]);
-
-  const deleteBadge = useCallback((id: RatingType) => {
-    setConfig(prev => ({ ...prev, ratings: prev.ratings.filter(r => r !== id) }));
-    clearSelection();
-  }, [setConfig, clearSelection]);
-
-  const moveLogoLayer = useCallback((dir: 'front' | 'forward' | 'back' | 'toback') => {
-    setConfig(prev => {
-      const c = prev.logoZ ?? 90;
-      if (dir === 'front') return { ...prev, logoZ: 220 };
-      if (dir === 'toback') return { ...prev, logoZ: 1 };
-      if (dir === 'forward') return { ...prev, logoZ: Math.min(220, c + 1) };
-      return { ...prev, logoZ: Math.max(1, c - 1) };
-    });
-  }, [setConfig]);
-
-  const hideLayer = useCallback((id: LayerTargetId) => {
-    if (id === 'logo') { setConfig(prev => ({ ...prev, logo: false })); clearSelection(); return; }
-    hideBadge(id);
-  }, [setConfig, clearSelection, hideBadge]);
-
-  const resetLayer = useCallback((id: LayerTargetId) => {
-    if (id === 'logo') {
-      setConfig(prev => ({
-        ...prev,
-        logoX: DEFAULT_CONFIG.logoX, logoY: DEFAULT_CONFIG.logoY,
-        logoW: DEFAULT_CONFIG.logoW, logoH: DEFAULT_CONFIG.logoH,
-        logoOpacity: DEFAULT_CONFIG.logoOpacity, logoZ: DEFAULT_CONFIG.logoZ,
-        logoShadow: DEFAULT_CONFIG.logoShadow, logoBgEnabled: DEFAULT_CONFIG.logoBgEnabled,
-        logoBgColor: DEFAULT_CONFIG.logoBgColor, logoBgOpacity: DEFAULT_CONFIG.logoBgOpacity,
-        logoBgRadius: DEFAULT_CONFIG.logoBgRadius, logoBgPadding: DEFAULT_CONFIG.logoBgPadding,
-        logoBgBorderW: DEFAULT_CONFIG.logoBgBorderW, logoBgBorderC: DEFAULT_CONFIG.logoBgBorderC,
-        logoBgShadow: DEFAULT_CONFIG.logoBgShadow,
-      }));
-      return;
-    }
-    resetBadge(id);
-  }, [setConfig, resetBadge]);
-
-  const deleteLayer = useCallback((id: LayerTargetId) => {
-    if (id === 'logo') { setConfig(prev => ({ ...prev, logo: false })); clearSelection(); return; }
-    deleteBadge(id);
-  }, [setConfig, clearSelection, deleteBadge]);
-
-  // ── Nudge ────────────────────────────────────────────────────────────────
-  const nudgeSelection = useCallback((dx: number, dy: number) => {
-    const activeBadges = Array.from(selectedIdsRef.current);
-    const hasLogo = selectedLogoRef.current;
-    if (activeBadges.length === 0 && !hasLogo) return;
-    setConfig(prev => {
-      const next: PosterConfig = { ...prev, items: { ...prev.items } };
-      if (activeBadges.length > 0) {
-        activeBadges.forEach(id => {
-          const base = next.items[id] ?? {};
-          const idx = next.ratings.indexOf(id);
-          const auto = calculateAutoPosition(id, Math.max(0, idx), next.ratings.length, next);
-          const currX = base.x ?? auto.x, currY = base.y ?? auto.y;
-          const scale = getScale(next.size) * (base.scale ?? next.scale ?? 1.0);
-          const w = BASE_BADGE_W * scale, h = BASE_BADGE_H * scale;
-          next.items[id] = {
-            ...base,
-            x: Math.max(1 - w, Math.min(currX + dx, CANVAS_WIDTH - 1)),
-            y: Math.max(1 - h, Math.min(currY + dy, CANVAS_HEIGHT - 1)),
-          };
-        });
-        next.layout = 'custom'; next.preset = 'custom';
-      }
-      if (hasLogo) {
-        const cx = next.logoX !== null && next.logoX !== undefined
-          ? next.logoX : Math.round((CANVAS_WIDTH - next.logoW) / 2);
-        next.logoX = Math.max(1 - next.logoW, Math.min(cx + dx, CANVAS_WIDTH - 1));
-        next.logoY = Math.max(1 - next.logoH, Math.min(next.logoY + dy, CANVAS_HEIGHT - 1));
-      }
-      return next;
-    });
-  }, [setConfig]);
-
-  // ── Zoom helpers ────────────────────────────────────────────────────────
-  const dispatchZoom      = useCallback((delta: number) => window.dispatchEvent(new CustomEvent('canvas-zoom', { detail: delta })), []);
-  const dispatchResetView = useCallback(() => window.dispatchEvent(new CustomEvent('reset-canvas-view')), []);
-
-  // ── Right panel resize ──────────────────────────────────────────────────
-  const startResizeRight = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    const sx = e.clientX, sw = rightW;
-    const move = (m: MouseEvent) => setRightW(Math.max(260, Math.min(sw - (m.clientX - sx), 540)));
-    const up = () => {
-      document.removeEventListener('mousemove', move);
-      document.removeEventListener('mouseup', up);
-      document.body.style.cursor = '';
-    };
-    document.addEventListener('mousemove', move);
-    document.addEventListener('mouseup', up);
-    document.body.style.cursor = 'col-resize';
-  }, [rightW]);
-
-  const handleExtensionChange = useCallback((ext: ExtensionType) => {
-    setConfig(prev => ({ ...prev, extension: ext }));
-  }, [setConfig]);
-
-  // ── Keyboard shortcuts ──────────────────────────────────────────────────
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      const t = e.target as HTMLElement;
-      const inInput = t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable;
-      const mod = e.ctrlKey || e.metaKey;
-
-      if (e.key === 'Escape') {
-        if (shortcutsOpen) { setShortcutsOpen(false); return; }
-        if (paletteOpen)   { setPaletteOpen(false); return; }
-        if (exportOpen)    { setExportOpen(false); return; }
-        if (isFullscreen)  { setIsFullscreen(false); return; }
-        if (selectedIdsRef.current.size > 0 || selectedLogoRef.current) { clearSelection(); return; }
-        return;
-      }
-      if (mod && (e.key.toLowerCase() === 'k' || e.key.toLowerCase() === 'p')) {
-        e.preventDefault(); setPaletteOpen(v => !v); return;
-      }
-      if (mod && (e.key === '/' || e.key === '?')) {
-        e.preventDefault(); setShortcutsOpen(v => !v); return;
-      }
-      if (inInput) return;
-      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key) &&
-        (selectedIdsRef.current.size > 0 || selectedLogoRef.current || selectedMinimalElementsRef.current.size > 0)) {
-        e.preventDefault();
-        const step = e.shiftKey ? 10 : 1;
-        if (e.key === 'ArrowUp')    nudgeSelection(0, -step);
-        else if (e.key === 'ArrowDown')  nudgeSelection(0, step);
-        else if (e.key === 'ArrowLeft')  nudgeSelection(-step, 0);
-        else nudgeSelection(step, 0);
-        return;
-      }
-      if (mod && e.key.toLowerCase() === 'a') { e.preventDefault(); setBatchSelection(configRatingsRef.current); return; }
-      if (mod && e.key.toLowerCase() === 'd') { e.preventDefault(); clearSelection(); return; }
-      if (mod && e.key.toLowerCase() === 'z' && !e.shiftKey) { e.preventDefault(); undo(); return; }
-      if (mod && (e.key.toLowerCase() === 'y' || (e.key.toLowerCase() === 'z' && e.shiftKey))) { e.preventDefault(); redo(); return; }
-      if ((e.key === 'Delete' || e.key === 'Backspace') && (selectedIdsRef.current.size > 0 || selectedLogoRef.current)) {
-        e.preventDefault();
-        const rm = new Set(selectedIdsRef.current);
-        if (rm.size > 0) setConfig(p => ({ ...p, ratings: p.ratings.filter(r => !rm.has(r)) }));
-        clearSelection(); return;
-      }
-      if (selectedIdsRef.current.size > 0) {
-        const sel = Array.from(selectedIdsRef.current);
-        if (mod && e.shiftKey && e.key === ']') { e.preventDefault(); sel.forEach(id => moveLayer(id as RatingType, 'front')); return; }
-        if (mod && e.shiftKey && e.key === '[') { e.preventDefault(); sel.forEach(id => moveLayer(id as RatingType, 'toback')); return; }
-        if (mod && e.key === ']') { e.preventDefault(); sel.forEach(id => moveLayer(id as RatingType, 'forward')); return; }
-        if (mod && e.key === '[') { e.preventDefault(); sel.forEach(id => moveLayer(id as RatingType, 'back')); return; }
-        if (e.key.toLowerCase() === 'h' && !mod) { e.preventDefault(); sel.forEach(id => hideBadge(id as RatingType)); return; }
-      }
-      if (e.key.toLowerCase() === 'f' && !mod && isDesktop) { e.preventDefault(); setIsFullscreen(v => !v); return; }
-      if (e.key.toLowerCase() === 'g' && !mod) { e.preventDefault(); toggleViewOption('showGrid'); return; }
-      if (e.key === "'" && !mod) { e.preventDefault(); toggleViewOption('showSafeArea'); return; }
-      if (mod && e.key === '1') { e.preventDefault(); dispatchResetView(); return; }
-      if (mod && (e.key === '+' || e.key === '=')) { e.preventDefault(); dispatchZoom(0.25); return; }
-      if (mod && e.key === '-') { e.preventDefault(); dispatchZoom(-0.25); return; }
-      if (e.key === ']' && !mod && !e.shiftKey) { e.preventDefault(); setRightVisible(v => !v); return; }
-      if (e.key === 'Tab' && !mod) {
-        const ratings = configRatingsRef.current;
-        if (!ratings.length) return;
-        e.preventDefault();
-        const selArr = Array.from(selectedIdsRef.current);
-        const lastSel = selArr[selArr.length - 1];
-        const idx = lastSel ? ratings.indexOf(lastSel) : -1;
-        const next = ratings[(idx + (e.shiftKey ? -1 + ratings.length : 1)) % ratings.length];
-        setBatchSelection([next]);
-        return;
-      }
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [
-    undo, redo, setConfig, clearSelection, setBatchSelection,
-    moveLayer, hideBadge, toggleViewOption, dispatchZoom, dispatchResetView, nudgeSelection,
-    isFullscreen, paletteOpen, shortcutsOpen, exportOpen,
-    selectedIds, selectedLogo, selectedMinimalElements, isDesktop,
-  ]);
-
-  // ── Command palette commands ────────────────────────────────────────────
-  const paletteCommands: PaletteCommand[] = [
-    // Panel switching
-    { id: 'panel-source',    label: 'Open Source Panel',    category: 'Panels', icon: <Film size={13} />,          action: () => setActiveTab('source') },
-    { id: 'panel-layers',    label: 'Open Layers Panel',    category: 'Panels', icon: <Layers size={13} />,        action: () => setActiveTab('layers') },
-    { id: 'panel-canvas',   label: 'Open Canvas Panel',    category: 'Panels', icon: <Monitor size={13} />,       action: () => setActiveTab('poster') },
-    { id: 'panel-badges',    label: 'Open Badges Panel',    category: 'Panels', icon: <Sliders size={13} />,       action: () => setActiveTab('badges') },
-    { id: 'panel-selection', label: 'Open Selection Panel', category: 'Panels', icon: <MousePointer2 size={13} />, action: () => setActiveTab('selection') },
-    // View
-    { id: 'zoom-fit',   label: 'Zoom to Fit',          category: 'View & Canvas', icon: <Maximize2 size={13} />, shortcut: '⌘1', action: dispatchResetView },
-    { id: 'zoom-in',    label: 'Zoom In',               category: 'View & Canvas', icon: <ZoomIn size={13} />,    shortcut: '⌘+', action: () => dispatchZoom(0.25) },
-    { id: 'zoom-out',   label: 'Zoom Out',              category: 'View & Canvas', icon: <ZoomOut size={13} />,   shortcut: '⌘-', action: () => dispatchZoom(-0.25) },
-    { id: 'fullscreen', label: isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen', category: 'View & Canvas', icon: isFullscreen ? <Minimize2 size={13} /> : <Maximize2 size={13} />, shortcut: 'F', action: toggleFullscreen },
-    { id: 'grid',       label: `${viewOptions.showGrid ? 'Hide' : 'Show'} Grid`, category: 'View & Canvas', icon: <Grid3x3 size={13} />, shortcut: 'G', action: () => toggleViewOption('showGrid') },
-    { id: 'safe-area',  label: `${viewOptions.showSafeArea ? 'Hide' : 'Show'} Safe Area`, category: 'View & Canvas', icon: <ShieldCheck size={13} />, action: () => toggleViewOption('showSafeArea') },
-    { id: 'right-panel', label: `${rightVisible ? 'Hide' : 'Show'} Right Panel`, category: 'View & Canvas', icon: <PanelRight size={13} />, shortcut: ']', action: () => setRightVisible(v => !v) },
-    // Selection
-    { id: 'select-all',   label: 'Select All Badges', category: 'Layers & Selection', icon: <CheckSquare size={13} />,     shortcut: '⌘A', action: () => setBatchSelection(config.ratings) },
-    { id: 'deselect-all', label: 'Deselect All',      category: 'Layers & Selection', icon: <MousePointer2Off size={13} />, shortcut: '⌘D', action: clearSelection },
-    { id: 'show-all',     label: 'Show All Badges',   category: 'Layers & Selection', icon: <Eye size={13} />,             action: showAllBadges },
-    { id: 'hide-sel',     label: 'Hide Selected',     category: 'Layers & Selection', icon: <EyeOff size={13} />,          shortcut: 'H', action: () => Array.from(selectedIds).forEach(id => hideBadge(id as RatingType)) },
-    // Canvas
-    { id: 'grayscale', label: `${config.grayscale ? 'Remove' : 'Apply'} Grayscale`, category: 'Canvas Properties', icon: <Contrast size={13} />, action: () => setConfig(p => ({ ...p, grayscale: !p.grayscale })) },
-    // Export
-    { id: 'export-svg', label: 'Export as SVG', category: 'Export', icon: <Download size={13} />, action: () => { setConfig(p => ({ ...p, extension: 'svg' })); setExportOpen(true); } },
-    { id: 'export-png', label: 'Export as PNG', category: 'Export', icon: <Download size={13} />, action: () => { setConfig(p => ({ ...p, extension: 'png' })); setExportOpen(true); } },
-    { id: 'export-jpg', label: 'Export as JPG', category: 'Export', icon: <Download size={13} />, action: () => { setConfig(p => ({ ...p, extension: 'jpg' })); setExportOpen(true); } },
-    // History
-    { id: 'undo',  label: 'Undo',               category: 'File', icon: <Undo2 size={13} />,    shortcut: '⌘Z', action: undo },
-    { id: 'redo',  label: 'Redo',               category: 'File', icon: <Redo2 size={13} />,    shortcut: '⌘Y', action: redo },
-    { id: 'reset', label: 'Reset All Settings', category: 'File', icon: <RotateCcw size={13} />,               action: () => setIsResetOpen(true) },
-    // App
-    { id: 'shortcuts', label: 'Keyboard Shortcuts', category: 'File', icon: <Keyboard size={13} />, shortcut: '⌘/', action: () => setShortcutsOpen(true) },
-  ];
-
-  const ctxBadgeSelected = ctxMenu.badgeId
-    ? ctxMenu.badgeId === 'logo' ? selectedLogo : selectedIds.has(ctxMenu.badgeId)
-    : false;
-
-  const selectedCount = selectedIds.size + (selectedLogo ? 1 : 0);
-
-  // ── Render ────────────────────────────────────────────────────────────────
-  return (
-    <>
-      <style>{`
-        .adv-ui, .adv-ui * { user-select: none; -webkit-user-select: none; }
-        .adv-ui input, .adv-ui textarea, .adv-ui [contenteditable] { user-select: text; -webkit-user-select: text; }
-        .adv-sidebar-transition { transition: width 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease; }
-      `}</style>
-
-      <div className="adv-ui flex flex-col overflow-hidden"
-        style={{ height: '100dvh', background: 'var(--film-black)', color: 'var(--film-cream)', fontFamily: 'DM Sans, sans-serif' }}>
-
-        {/* ── Modals & overlays ── */}
-        <ResetDialog isOpen={isResetOpen} onClose={() => setIsResetOpen(false)} onConfirm={handleReset} />
-        <ImportDialog isOpen={isImportOpen} onClose={() => setIsImportOpen(false)} onLoad={handleLoadConfig} anchorRef={importBtnRef} />
-        <KeyboardShortcutsModal isOpen={shortcutsOpen} onClose={() => setShortcutsOpen(false)} />
-        <ContextMenu
-          state={ctxMenu} onClose={closeCtxMenu} isSelected={ctxBadgeSelected}
-          onBringToFront={id => id === 'logo' ? moveLogoLayer('front')   : moveLayer(id, 'front')}
-          onBringForward={id => id === 'logo' ? moveLogoLayer('forward') : moveLayer(id, 'forward')}
-          onSendBackward={id => id === 'logo' ? moveLogoLayer('back')    : moveLayer(id, 'back')}
-          onSendToBack={id   => id === 'logo' ? moveLogoLayer('toback')  : moveLayer(id, 'toback')}
-          onHide={hideLayer} onShowAll={showAllBadges}
-          onSelect={id => id === 'logo' ? handleLogoSelection(false) : handleSelectionOverride(id, false)}
-          onDeselect={() => clearSelection()}
-          onSelectAll={() => setBatchSelection(config.ratings)}
-          onDeselectAll={clearSelection}
-          onResetBadge={resetLayer}
-          onDelete={deleteLayer}
-        />
-        <CommandPalette isOpen={paletteOpen} onClose={() => setPaletteOpen(false)} commands={paletteCommands} />
-        <ExportPopover
-          config={config} onLoadConfig={handleLoadConfig} baseUrl={baseUrl}
-          onExtensionChange={handleExtensionChange}
-          isOpen={exportOpen} onClose={() => setExportOpen(false)}
-          anchorRef={exportBtnRef}
-        />
-
-        {/* ── Header ────────────────────────────────────────────────────── */}
-        {!isFullscreen && (
-          <header className="h-12 shrink-0 flex items-center z-30 relative"
-            style={{ background: 'rgba(7,7,6,0.97)', borderBottom: '1px solid rgba(196,124,46,0.08)' }}>
-            <div className="absolute bottom-0 left-0 right-0 h-px pointer-events-none"
-              style={{ background: 'linear-gradient(90deg, transparent, rgba(196,124,46,0.15), transparent)' }} aria-hidden="true" />
-
-            {/* Left: logo + badges */}
-            <div className="flex items-center px-2 sm:px-3 shrink-0 gap-1.5">
-              <a href="/" style={{ textDecoration: 'none', flexShrink: 0 }}>
-                <span className="poster-font select-none hidden sm:block"
-                  style={{ fontSize: 18, color: 'var(--film-cream)', letterSpacing: '0.12em', lineHeight: 'normal' }}>
-                  POSTERIUM
-                </span>
-                <span className="poster-font select-none sm:hidden"
-                  style={{ fontSize: 14, color: 'var(--film-amber)', letterSpacing: '0.12em', lineHeight: 'normal' }}>
-                  P
-                </span>
-              </a>
-              {/* "Advanced" badge */}
-              <span className="syne-font hidden sm:inline-flex items-center"
-                style={{ fontSize: 7, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', padding: '2px 6px', borderRadius: 3, background: 'rgba(196,124,46,0.14)', border: '1px solid rgba(196,124,46,0.28)', color: 'var(--film-amber)' }}>
-                Advanced
-              </span>
-              {/* Switch to standard */}
-              <a href="/build"
-                className="hidden sm:flex items-center gap-1 hover-cream"
-                style={{ fontSize: 9, fontWeight: 600, fontFamily: 'Syne, sans-serif', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--film-text-dim)', textDecoration: 'none', padding: '3px 8px', borderRadius: 4, border: '1px solid rgba(255,255,255,0.06)', background: 'rgba(255,255,255,0.02)' }}>
-                Standard
-              </a>
-              <ToolbarBtn onClick={() => setShortcutsOpen(v => !v)} label="Keyboard Shortcuts (⌘/)" active={shortcutsOpen} hideOnMobile>
-                <Keyboard size={14} />
-              </ToolbarBtn>
-            </div>
-
-            {/* Centre: command palette trigger */}
-            <div className="absolute inset-y-0 left-0 right-0 flex items-center justify-center pointer-events-none px-1 sm:px-2">
-              <button
-                onClick={() => setPaletteOpen(true)}
-                className="hidden min-[751px]:flex items-center gap-2 px-3 h-8 w-full max-w-[420px] rounded-md transition-colors pointer-events-auto"
-                style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', color: 'var(--film-text-dim)' }}
-                onMouseEnter={e => { (e.currentTarget as HTMLElement).style.borderColor = 'rgba(196,124,46,0.3)'; }}
-                onMouseLeave={e => { (e.currentTarget as HTMLElement).style.borderColor = 'rgba(255,255,255,0.08)'; }}>
-                <Search size={13} className="shrink-0" />
-                <span className="text-[11px] syne-font text-left flex-1 min-w-0 truncate">Search commands…</span>
-                <kbd className="text-[9px] font-mono px-1.5 py-0.5 rounded border bg-white/5 shrink-0"
-                  style={{ borderColor: 'rgba(255,255,255,0.1)' }}>⌘K</kbd>
-              </button>
-            </div>
-
-            {/* Right: actions */}
-            <div className="ml-auto flex items-center justify-end px-2 sm:px-3 shrink-0 gap-0.5 sm:gap-1">
-              <ToolbarBtn onClick={undo} disabled={!canUndo} label="Undo (⌘Z)"><Undo2 size={14} /></ToolbarBtn>
-              <ToolbarBtn onClick={redo} disabled={!canRedo} label="Redo (⌘Y)"><Redo2 size={14} /></ToolbarBtn>
-              <div className="w-px h-4 mx-1 hidden lg:block" style={{ background: 'rgba(196,124,46,0.12)' }} aria-hidden="true" />
-
-              <button
-                ref={importBtnRef}
-                onClick={() => setIsImportOpen(true)}
-                className="hidden sm:flex items-center gap-1.5 h-8 px-2.5 rounded-md transition-colors syne-font"
-                style={{ color: 'var(--film-text-dim)' }}
-                onMouseEnter={e => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,255,255,0.05)'; (e.currentTarget as HTMLElement).style.color = 'var(--film-cream)'; }}
-                onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = 'transparent'; (e.currentTarget as HTMLElement).style.color = 'var(--film-text-dim)'; }}>
-                <Download size={13} className="rotate-180" />
-                <span className="text-[11px] font-medium uppercase tracking-wider max-[1300px]:hidden">Import</span>
-              </button>
-
-              {/* Export CTA */}
-              <button
-                ref={exportBtnRef}
-                onClick={() => setExportOpen(v => !v)}
-                className="flex items-center gap-1.5 h-8 px-2 sm:px-3 rounded-lg ml-1 syne-font transition-all active:scale-95"
-                style={{
-                  background: exportOpen ? 'rgba(196,124,46,0.9)' : 'var(--film-amber)',
-                  color: '#070706', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
-                  textTransform: 'uppercase', border: 'none', cursor: 'pointer',
-                  boxShadow: exportOpen ? 'none' : '0 0 16px rgba(196,124,46,0.2)',
-                }}>
-                <Download size={12} />
-                <span className="max-[1300px]:hidden">Export</span>
-                <ChevronDown className="max-[1300px]:hidden" size={10} style={{ transform: exportOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
-              </button>
-
-              <div className="w-px h-4 mx-1 hidden lg:block" style={{ background: 'rgba(196,124,46,0.12)' }} aria-hidden="true" />
-
-              <button
-                onClick={() => setIsResetOpen(true)}
-                className="flex items-center gap-1.5 h-8 px-2 sm:px-2.5 rounded-md transition-colors syne-font text-red-400/80 hover:text-red-300 hover:bg-red-500/10">
-                <RotateCcw size={13} />
-                <span className="text-[11px] font-bold uppercase tracking-wider hidden min-[1401px]:inline">Reset</span>
-              </button>
-            </div>
-          </header>
-        )}
-
-        {/* ── Body ──────────────────────────────────────────────────────── */}
-        <div className="flex flex-1 overflow-hidden relative flex-col lg:flex-row">
-
-          {/* Left: Advanced nav sidebar (desktop only) */}
-          {!isFullscreen && (
-            <aside
-              aria-label="Panel navigation"
-              className="hidden lg:flex flex-col z-20 relative shrink-0 adv-sidebar-transition"
-              style={{
-                width: navVisible ? 220 : 0,
-                borderRight: navVisible ? '1px solid rgba(196,124,46,0.07)' : 'none',
-                overflow: 'hidden',
-                opacity: navVisible ? 1 : 0,
-              }}>
-              <AdvancedNavSidebar config={config} selectedCount={selectedCount} />
-            </aside>
-          )}
-
-          {/* Canvas */}
-          <main
-            id="main-canvas" role="main" aria-label="Poster canvas"
-            className="flex-1 relative overflow-hidden min-h-0"
-            style={{ background: '#111113' }}
-            onClick={e => {
-              if (e.target === e.currentTarget) clearSelection();
-              if (mobileSheetMode !== 'hidden') setMobileSheetMode('hidden');
-            }}>
-            <div aria-hidden="true" className="absolute inset-0 pointer-events-none"
-              style={{ backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px)', backgroundSize: '20px 20px' }} />
-
-            <PreviewCanvas
-              config={config} setConfig={setConfig}
-              selectedIds={selectedIds} onSelect={handleSelectionOverride}
-              onContextMenu={openCtxMenu}
-              onLogoContextMenu={e => openCtxMenu('logo', e)}
-            />
-
-            {/* Film corner accents */}
-            {(['tl', 'tr', 'bl', 'br'] as const).map(c => (
-              <div key={c} aria-hidden="true" style={{
-                position: 'absolute',
-                top: c.startsWith('t') ? 8 : 'auto', bottom: c.startsWith('b') ? 8 : 'auto',
-                left: c.endsWith('l') ? 8 : 'auto',  right: c.endsWith('r') ? 8 : 'auto',
-                width: 12, height: 12, pointerEvents: 'none',
-                borderTop:    c.startsWith('t') ? '1px solid rgba(196,124,46,0.18)' : 'none',
-                borderBottom: c.startsWith('b') ? '1px solid rgba(196,124,46,0.18)' : 'none',
-                borderLeft:   c.endsWith('l')   ? '1px solid rgba(196,124,46,0.18)' : 'none',
-                borderRight:  c.endsWith('r')   ? '1px solid rgba(196,124,46,0.18)' : 'none',
-              }} />
-            ))}
-
-            {/* Zoom + fullscreen overlay */}
-            <div
-              className={clsx('fixed z-40 flex items-center gap-1 rounded-xl select-none', isDesktop ? 'flex-col' : 'flex-row')}
-              style={{
-                ...(isDesktop
-                  ? { top: '50%', transform: 'translateY(-50%)', right: (rightVisible && !isFullscreen ? rightW : 0) + 20, transition: 'right 0.3s cubic-bezier(0.16,1,0.3,1)' }
-                  : { bottom: 76, right: 12 }),
-                background: 'rgba(14,13,11,0.92)', backdropFilter: 'blur(16px)',
-                border: '1px solid rgba(196,124,46,0.18)', padding: '6px',
-                boxShadow: '0 8px 32px rgba(0,0,0,0.6)',
-              }}>
-              {[
-                { icon: <ZoomIn size={15} />, label: 'Zoom In',    action: () => dispatchZoom(0.25) },
-                { icon: <ZoomOut size={15} />, label: 'Zoom Out',  action: () => dispatchZoom(-0.25) },
-                { icon: <Maximize2 size={14} />, label: 'Reset View', action: dispatchResetView },
-              ].map(({ icon, label, action }) => (
-                <button key={label} onClick={action} title={label}
-                  className="w-8 h-8 rounded-lg flex items-center justify-center transition-all active:scale-90"
-                  style={{ color: 'var(--film-text-dim)', cursor: 'pointer', background: 'transparent', border: 'none' }}
-                  onMouseEnter={e => { (e.currentTarget as HTMLElement).style.color = 'var(--film-amber)'; (e.currentTarget as HTMLElement).style.background = 'rgba(196,124,46,0.1)'; }}
-                  onMouseLeave={e => { (e.currentTarget as HTMLElement).style.color = 'var(--film-text-dim)'; (e.currentTarget as HTMLElement).style.background = 'transparent'; }}>
-                  {icon}
-                </button>
-              ))}
-              {isDesktop && (
-                <>
-                  <div style={{ width: 20, height: 1, background: 'rgba(255,255,255,0.08)', margin: '2px 0' }} />
-                  <button onClick={toggleFullscreen}
-                    title={isFullscreen ? 'Exit Fullscreen (F or Esc)' : 'Enter Fullscreen (F)'}
-                    className="w-8 h-8 rounded-lg flex items-center justify-center transition-all active:scale-90"
-                    style={{ color: isFullscreen ? 'rgba(196,124,46,0.7)' : 'var(--film-text-dim)', cursor: 'pointer', background: 'transparent', border: 'none' }}
-                    onMouseEnter={e => { (e.currentTarget as HTMLElement).style.color = 'var(--film-amber)'; (e.currentTarget as HTMLElement).style.background = 'rgba(196,124,46,0.1)'; }}
-                    onMouseLeave={e => { (e.currentTarget as HTMLElement).style.color = isFullscreen ? 'rgba(196,124,46,0.7)' : 'var(--film-text-dim)'; (e.currentTarget as HTMLElement).style.background = 'transparent'; }}>
-                    {isFullscreen ? <Minimize2 size={15} /> : <Maximize2 size={15} />}
-                  </button>
-                </>
-              )}
-            </div>
-          </main>
-
-          {/* Right: panel content (desktop) */}
-          {!isFullscreen && (
-            <aside
-              aria-label="Panel content"
-              className="hidden lg:flex flex-col z-20 relative shrink-0 adv-sidebar-transition"
-              style={{
-                width: rightVisible ? rightW : 0,
-                background: 'var(--film-dark)',
-                borderLeft: rightVisible ? '1px solid rgba(196,124,46,0.07)' : 'none',
-                overflow: 'hidden',
-                opacity: rightVisible ? 1 : 0,
-              }}>
-              {/* Resize handle */}
-              <div onMouseDown={startResizeRight} className="absolute inset-y-0 left-0 w-2 cursor-col-resize group z-50">
-                <div className="absolute inset-y-0 left-0 w-[2px] bg-transparent group-hover:bg-[rgba(196,124,46,0.4)] transition-colors duration-150" />
-              </div>
-              <AdvancedRightPanel
-                config={config} setConfig={setConfig}
-                selectedIds={selectedIds} onSelect={handleSelectionOverride}
-              />
-            </aside>
-          )}
-
-          {/* Mobile panel sheet */}
-          {!isFullscreen && (
-            <div className={clsx(
-              'lg:hidden flex flex-col shrink-0 w-full bg-[var(--film-dark)] transition-[height] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] overflow-hidden z-20',
-              mobileSheetMode !== 'hidden'
-                ? 'h-[45dvh] border-t border-[rgba(196,124,46,0.15)] shadow-[0_-10px_40px_rgba(0,0,0,0.5)]'
-                : 'h-0 border-t-0'
-            )}>
-              {/* Swipe handle */}
-              <div
-                className="shrink-0 h-8 flex items-center justify-center bg-[rgba(255,255,255,0.01)] border-b border-[rgba(255,255,255,0.04)] active:bg-[rgba(255,255,255,0.04)] transition-colors cursor-pointer select-none"
-                onClick={() => setMobileSheetMode('hidden')}>
-                <div className="w-10 h-1 rounded-full bg-[rgba(255,255,255,0.2)]" />
-              </div>
-              <div className="flex-1 overflow-y-auto overscroll-contain min-h-0 custom-scrollbar pb-4">
-                {(activeTab === 'source' || activeTab === 'layers' || activeTab === 'poster') && (
-                  <LayerPanel
-                    config={config} setConfig={setConfig}
-                    selectedIds={selectedIds} onSelect={handleSelectionOverride}
-                    hideTabBar
-                  />
-                )}
-                {(activeTab === 'badges' || activeTab === 'selection' || activeTab === 'logo') && (
-                  <Inspector config={config} setConfig={setConfig} hideTabBar />
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Mobile dock */}
-        <MobileDock
-          hasBadges={config.ratings.length > 0}
-          hasLogo={config.logo}
-          isMinimalPreset={(config.uiPreset ?? 'b') === 'm'}
-          selectedCount={selectedCount}
-        />
-      </div>
-    </>
-  );
-};
-
-// ── AdvancedBuilderApp ────────────────────────────────────────────────────────
-const AdvancedBuilderApp: React.FC = () => {
-  const { state: config, setState: setConfig, undo, redo, canUndo, canRedo } = usePosterHistory(() => {
-    try {
-      const saved = localStorage.getItem(STORAGE_KEY);
-      const cfg = saved ? (JSON.parse(saved) as PosterConfig) : DEFAULT_CONFIG;
-      const cookieKeys = loadKeysFromCookie();
-      if (cookieKeys && Object.keys(cookieKeys).some(k => cookieKeys[k as keyof ApiKeys])) {
-        return { ...cfg, keys: { ...cookieKeys, ...cfg.keys } };
-      }
-      return cfg;
-    } catch {
-      return DEFAULT_CONFIG;
-    }
-  });
-
-  const [baseUrl, setBaseUrl] = useState(DEFAULT_API_BASE);
-
-  useEffect(() => {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
-  }, [config]);
-
-  useEffect(() => {
-    if (config.keys) {
-      const hasAnyKey = Object.values(config.keys).some(v => v && v.trim());
-      if (hasAnyKey) saveKeysToCookie(config.keys);
-    }
-  }, [config.keys]);
-
-  const handleLoadConfig = useCallback((url: string) => {
-    setConfig(parseUrlToConfig(url));
-    try { setBaseUrl(new URL(url).origin); } catch {}
-  }, [setConfig]);
-
-  const handleReset = useCallback(() => {
-    setConfig(current => ({
-      ...DEFAULT_CONFIG,
-      mediaType: current.mediaType, tmdbId: current.tmdbId, imdbId: current.imdbId,
-      source: current.source, ptype: current.ptype, textless: current.textless, keys: current.keys,
-    }));
-    window.dispatchEvent(new CustomEvent('reset-canvas-view'));
-  }, [setConfig]);
-
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const urlParam = params.get('url');
-    if (urlParam) { handleLoadConfig(urlParam); return; }
-    const configParam = params.get('config');
-    if (!configParam || configParam.length > MAX_QUERY_CONFIG_LENGTH) return;
-    try {
-      const decoded = atob(decodeURIComponent(configParam));
-      const parsed = JSON.parse(decoded) as Partial<PosterConfig>;
-      if (!parsed || !Array.isArray(parsed.ratings)) return;
-      setConfig({ ...DEFAULT_CONFIG, ...parsed, items: parsed.items ?? {} } as PosterConfig);
-    } catch {}
-  }, [handleLoadConfig, setConfig]);
-
-  return (
-    <EditorProvider>
-      <AdvancedStudioLayout
-        config={config} setConfig={setConfig}
-        handleReset={handleReset} baseUrl={baseUrl} handleLoadConfig={handleLoadConfig}
-        undo={undo} redo={redo} canUndo={canUndo} canRedo={canRedo}
-      />
-    </EditorProvider>
-  );
-};
-
-export default AdvancedBuilderApp;
\ No newline at end of file
+import React from 'react';
+import BuilderApp from './index';
+
+const AdvancedBuilderApp: React.FC = () => <BuilderApp initialMode="advanced" />;
+
+export default AdvancedBuilderApp;
diff --git a/src/components/builder/components/CommandPalette.tsx b/src/components/builder/components/CommandPalette.tsx
index ed4d357..218d558 100644
--- a/src/components/builder/components/CommandPalette.tsx
+++ b/src/components/builder/components/CommandPalette.tsx
@@ -1,32 +1,6 @@
 // src/components/builder/components/CommandPalette.tsx
 import React, { useState, useEffect, useRef, useCallback, memo } from 'react';
-import {
-  Search,
-  ZoomIn,
-  ZoomOut,
-  Maximize2,
-  Minimize2,
-  Grid3x3,
-  ShieldCheck,
-  RotateCcw,
-  Eye,
-  EyeOff,
-  Layers,
-  CheckSquare,
-  MousePointer2Off,
-  Download,
-  Image,
-  ScanLine,
-  Droplet,
-  Contrast,
-  Layout,
-  PanelLeft,
-  PanelRight,
-  ArrowUpToLine,
-  ArrowDownToLine,
-  Command,
-  X,
-} from 'lucide-react';
+import { Command, Search } from 'lucide-react';
 
 export interface PaletteCommand {
   id: string;
diff --git a/src/components/builder/components/LayerPanel.tsx b/src/components/builder/components/LayerPanel.tsx
index a47dc3c..f3a1ae1 100644
--- a/src/components/builder/components/LayerPanel.tsx
+++ b/src/components/builder/components/LayerPanel.tsx
@@ -1,14 +1,6 @@
 // src/components/builder/components/LayerPanel.tsx
-import React, { useState, useEffect, Fragment, memo, useCallback, useRef } from 'react';
-import {
-  Combobox,
-  Listbox,
-  ListboxButton,
-  ListboxOptions,
-  ListboxOption,
-  Switch,
-  Transition,
-} from '@headlessui/react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Combobox, Switch } from '@headlessui/react';
 import {
   Check,
   Search,
@@ -21,10 +13,8 @@ import {
   Clapperboard,
   Eye,
   EyeOff,
-  ChevronDown,
   ImagePlay,
   KeyRound,
-  ChevronRight,
   Monitor,
   ShieldCheck,
   Grid3x3,
@@ -39,6 +29,8 @@ import { BADGE_ICONS } from '../constants';
 import { DEFAULT_API_BASE } from '../utils';
 import { useEditor } from '../context/EditorContext';
 import SidebarLayout from './SidebarLayout';
+import PanelTabs from './navigation/PanelTabs';
+import { Section, SegmentedRow, SelectBox, SliderRow, ToggleRow } from './ui';
 
 type BadgeIconKey = keyof typeof BADGE_ICONS;
 
@@ -47,6 +39,9 @@ interface Props {
   setConfig: React.Dispatch<React.SetStateAction<PosterConfig>>;
   selectedIds: Set<RatingType>;
   onSelect: (id: RatingType, multi: boolean) => void;
+  panelMode?: 'source' | 'layers' | 'poster';
+  hideTabs?: boolean;
+  detailLevel?: 'simple' | 'advanced';
 }
 
 interface SearchResult {
@@ -62,375 +57,18 @@ interface SearchResult {
 const BADGES_PREF_STORAGE_KEY = 'posterium_badges_toggle_pref_v1';
 const TEXTLESS_PREF_STORAGE_KEY = 'posterium_textless_toggle_pref_v1';
 
-const readBadgesPreference = (fallback: boolean): boolean => {
-  try {
-    const raw = localStorage.getItem(BADGES_PREF_STORAGE_KEY);
-    if (raw === '1') return true;
-    if (raw === '0') return false;
-  } catch {}
-  return fallback;
-};
-
 const writeBadgesPreference = (enabled: boolean) => {
   try {
     localStorage.setItem(BADGES_PREF_STORAGE_KEY, enabled ? '1' : '0');
   } catch {}
 };
 
-const readTextlessPreference = (fallback: boolean): boolean => {
-  try {
-    const raw = localStorage.getItem(TEXTLESS_PREF_STORAGE_KEY);
-    if (raw === '1') return true;
-    if (raw === '0') return false;
-  } catch {}
-  return fallback;
-};
-
 const writeTextlessPreference = (enabled: boolean) => {
   try {
     localStorage.setItem(TEXTLESS_PREF_STORAGE_KEY, enabled ? '1' : '0');
   } catch {}
 };
 
-// ── SelectBox ────────────────────────────────────────────────────────────────
-const SelectBox = memo(
-  ({
-    value,
-    onChange,
-    options,
-  }: {
-    value: string;
-    onChange: (v: string) => void;
-    options: { id: string; label: string }[];
-  }) => (
-    <Listbox value={value} onChange={onChange}>
-      <div className="relative">
-        <ListboxButton
-          className="w-full flex items-center justify-between gap-1 h-9 px-2.5 rounded-lg text-[11px] font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#C47C2E] syne-font"
-          style={{
-            background: 'rgba(255,255,255,0.04)',
-            border: '1px solid rgba(255,255,255,0.1)',
-            color: 'var(--film-pale)',
-          }}
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLElement).style.borderColor = 'rgba(196,124,46,0.4)';
-          }}
-          onMouseLeave={(e) => {
-            (e.currentTarget as HTMLElement).style.borderColor = 'rgba(255,255,255,0.1)';
-          }}
-        >
-          <span className="truncate">{options.find((o) => o.id === value)?.label ?? value}</span>
-          <ChevronDown size={10} style={{ color: 'var(--film-text-dim)', flexShrink: 0 }} />
-        </ListboxButton>
-        <ListboxOptions
-          transition
-          className="absolute z-50 mt-1 w-full py-1 rounded-xl shadow-2xl shadow-black/50 text-[11px] overflow-auto max-h-52 focus:outline-none transition duration-75 ease-in data-[closed]:scale-95 data-[closed]:opacity-0"
-          style={{
-            background: 'var(--film-mid)',
-            border: '1px solid rgba(255,255,255,0.08)',
-          }}
-        >
-          {options.map((opt) => (
-            <ListboxOption
-              key={opt.id}
-              value={opt.id}
-              className={({ active, selected }) =>
-                clsx(
-                  'flex items-center gap-2 px-3 py-2.5 cursor-pointer transition-colors syne-font',
-                  active && 'bg-[rgba(196,124,46,0.1)]',
-                  !active && selected && 'text-[var(--film-pale)]',
-                  !active && !selected && 'text-[var(--film-text-label)]'
-                )
-              }
-            >
-              {({ selected }) => (
-                <>
-                  <span className="flex-1 truncate">{opt.label}</span>
-                  {selected && (
-                    <Check size={10} style={{ color: 'var(--film-amber)', flexShrink: 0 }} />
-                  )}
-                </>
-              )}
-            </ListboxOption>
-          ))}
-        </ListboxOptions>
-      </div>
-    </Listbox>
-  )
-);
-SelectBox.displayName = 'SelectBox';
-
-// ── SliderRow ────────────────────────────────────────────────────────────────
-// Synced from PropertyPanel for visual/functional parity
-const SliderRow: React.FC<{
-  label: string;
-  value: number;
-  onChange: (v: number) => void;
-  min: number;
-  max: number;
-  step?: number;
-  unit?: string;
-  formatValue?: (v: number) => string;
-}> = ({ label, value, onChange, min, max, step = 1, unit = '', formatValue }) => {
-  const [localValue, setLocalValue] = useState(value);
-  const [inputText, setInputText] = useState(() => (formatValue ? formatValue(value) : `${value}`));
-  const lastUpdate = useRef(Date.now());
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const isFocused = useRef(false);
-
-  useEffect(() => {
-    setLocalValue(value);
-    if (!isFocused.current) {
-      setInputText(formatValue ? formatValue(value) : `${value}`);
-    }
-  }, [value, formatValue]);
-
-  const commitInput = useCallback(
-    (text: string) => {
-      const raw = text.replace(unit, '').replace(/[^0-9.\-]/g, '');
-      const n = parseFloat(raw);
-      if (!isNaN(n)) {
-        const clamped = Math.max(min, Math.min(max, n));
-        setLocalValue(clamped);
-        setInputText(formatValue ? formatValue(clamped) : `${clamped}`);
-        onChange(clamped);
-      } else {
-        setInputText(formatValue ? formatValue(localValue) : `${localValue}`);
-      }
-    },
-    [min, max, onChange, unit, formatValue, localValue]
-  );
-
-  const handleRangeChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const val = parseFloat(e.target.value);
-      setLocalValue(val);
-      if (!isFocused.current) {
-        setInputText(formatValue ? formatValue(val) : `${val}`);
-      }
-      const now = Date.now();
-      if (now - lastUpdate.current > 33) {
-        onChange(val);
-        lastUpdate.current = now;
-      } else {
-        if (timeoutRef.current) clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(() => {
-          onChange(val);
-          lastUpdate.current = Date.now();
-        }, 33);
-      }
-    },
-    [onChange, formatValue]
-  );
-
-  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      commitInput(inputText);
-      inputRef.current?.blur();
-    } else if (e.key === 'Escape') {
-      setInputText(formatValue ? formatValue(localValue) : `${localValue}`);
-      inputRef.current?.blur();
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      const newVal = Math.max(min, Math.min(max, localValue + step));
-      setLocalValue(newVal);
-      setInputText(formatValue ? formatValue(newVal) : `${newVal}`);
-      onChange(newVal);
-    } else if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      const newVal = Math.max(min, Math.min(max, localValue - step));
-      setLocalValue(newVal);
-      setInputText(formatValue ? formatValue(newVal) : `${newVal}`);
-      onChange(newVal);
-    }
-  };
-
-  return (
-    <div className="space-y-1.5">
-      <span
-        className="body-font"
-        style={{ fontSize: 11, color: 'var(--film-text-label)', fontWeight: 500 }}
-      >
-        {label}
-      </span>
-      <div className="flex items-center gap-2">
-        <input
-          ref={inputRef}
-          type="text"
-          inputMode="decimal"
-          value={inputText}
-          onChange={(e) => setInputText(e.target.value)}
-          onFocus={() => {
-            isFocused.current = true;
-          }}
-          onBlur={() => {
-            isFocused.current = false;
-            commitInput(inputText);
-          }}
-          onKeyDown={handleInputKeyDown}
-          className="mono-font tabular-nums focus:outline-none shrink-0"
-          style={{
-            width: 48,
-            height: 22,
-            paddingInline: 5,
-            borderRadius: 4,
-            background: 'rgba(255,255,255,0.04)',
-            border: '1px solid rgba(255,255,255,0.1)',
-            fontSize: 10,
-            color: 'var(--film-pale)',
-            textAlign: 'center',
-            transition: 'border-color 0.15s',
-          }}
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLInputElement).style.borderColor = 'rgba(196,124,46,0.4)';
-          }}
-          onMouseLeave={(e) => {
-            if (!isFocused.current)
-              (e.currentTarget as HTMLInputElement).style.borderColor = 'rgba(255,255,255,0.1)';
-          }}
-        />
-        <input
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={localValue}
-          onChange={handleRangeChange}
-          className="flex-1 min-w-0"
-        />
-      </div>
-    </div>
-  );
-};
-
-// ── ToggleRow ────────────────────────────────────────────────────────────────
-const ToggleRow: React.FC<{
-  label: string;
-  sub?: string;
-  checked: boolean;
-  onChange: (v: boolean) => void;
-  small?: boolean;
-  disabled?: boolean;
-}> = ({ label, sub, checked, onChange, small, disabled }) => (
-  <div
-    className={clsx(
-      'flex items-center justify-between gap-3',
-      disabled && 'opacity-60 pointer-events-none'
-    )}
-  >
-    <div className="min-w-0">
-      <p
-        className="body-font font-medium"
-        style={{
-          fontSize: small ? 10 : 11,
-          color: 'var(--film-text-label)',
-        }}
-      >
-        {label}
-      </p>
-      {sub && (
-        <p className="body-font mt-0.5" style={{ fontSize: 9, color: 'var(--film-text-dim)' }}>
-          {sub}
-        </p>
-      )}
-    </div>
-    <Switch
-      checked={checked}
-      onChange={onChange}
-      className={clsx(
-        'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#C47C2E]',
-        checked ? 'bg-[#C47C2E]' : 'bg-zinc-700/80'
-      )}
-    >
-      <span
-        className={clsx(
-          'inline-block w-3.5 h-3.5 rounded-full bg-white shadow-sm transition-transform',
-          checked ? 'translate-x-[18px]' : 'translate-x-[3px]'
-        )}
-      />
-    </Switch>
-  </div>
-);
-
-const SegmentedRow: React.FC<{
-  label: string;
-  options: { id: string; label: string }[];
-  value: string;
-  onChange: (v: string) => void;
-}> = ({ label, options, value, onChange }) => (
-  <div className="space-y-1.5">
-    <p
-      className="syne-font uppercase tracking-widest"
-      style={{ fontSize: 9, color: 'var(--film-text-dim)', fontWeight: 700 }}
-    >
-      {label}
-    </p>
-    <div className="grid gap-1" style={{ gridTemplateColumns: `repeat(${options.length}, 1fr)` }}>
-      {options.map((opt) => (
-        <button
-          key={opt.id}
-          type="button"
-          onClick={() => onChange(opt.id)}
-          className={clsx(
-            'h-8 rounded-md text-[10px] font-medium transition-all border syne-font',
-            value === opt.id
-              ? 'bg-[rgba(196,124,46,0.15)] text-[var(--film-pale)] border-[rgba(196,124,46,0.3)]'
-              : 'bg-[rgba(255,255,255,0.03)] text-[var(--film-text-label)] border-[rgba(255,255,255,0.05)] hover:bg-[rgba(255,255,255,0.07)] hover:border-[rgba(196,124,46,0.24)] hover:text-[var(--film-cream)]'
-          )}
-        >
-          {opt.label}
-        </button>
-      ))}
-    </div>
-  </div>
-);
-
-// ── Section — flat collapsible matching PropertyPanel ─────────────────────────
-const Section: React.FC<{
-  title: string;
-  icon?: React.ReactNode;
-  children: React.ReactNode;
-  defaultOpen?: boolean;
-}> = ({ title, icon, children, defaultOpen = false }) => {
-  const [open, setOpen] = useState(defaultOpen);
-  return (
-    <div className="pt-5">
-      <button
-        type="button"
-        onClick={() => setOpen((v) => !v)}
-        className="w-full flex items-center justify-between px-1 mb-3 focus:outline-none group"
-      >
-        <span
-          className="flex items-center gap-1.5 syne-font uppercase tracking-widest"
-          style={{ fontSize: 9, color: 'var(--film-text-dim)', fontWeight: 700 }}
-        >
-          {icon && (
-            <span style={{ color: 'var(--film-text-dim)', opacity: 1, lineHeight: 0 }}>{icon}</span>
-          )}
-          {title}
-        </span>
-        <span
-          style={{
-            color: 'var(--film-text-dim)',
-            opacity: open ? 0.6 : 0.3,
-            transition: 'opacity 0.15s',
-            lineHeight: 0,
-          }}
-        >
-          {open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
-        </span>
-      </button>
-      {open && <div className="px-1 pb-1 space-y-3.5">{children}</div>}
-      <div
-        className="mt-5 mx-1"
-        style={{ height: 1, background: 'rgba(255,255,255,0.04)' }}
-        aria-hidden="true"
-      />
-    </div>
-  );
-};
-
 // ── API Keys panel ────────────────────────────────────────────────────────────
 const ApiKeysPanel: React.FC<{
   config: PosterConfig;
@@ -529,7 +167,15 @@ const ApiKeysPanel: React.FC<{
 };
 
 // ── Main LayerPanel component ─────────────────────────────────────────────────
-const LayerPanel: React.FC<Props> = ({ config, setConfig, selectedIds, onSelect }) => {
+const LayerPanel: React.FC<Props> = ({
+  config,
+  setConfig,
+  selectedIds,
+  onSelect,
+  panelMode,
+  hideTabs = false,
+  detailLevel = 'advanced',
+}) => {
   const {
     setBatchSelection,
     activeTab,
@@ -545,13 +191,19 @@ const LayerPanel: React.FC<Props> = ({ config, setConfig, selectedIds, onSelect
     toggleViewOption,
   } = useEditor();
 
-  const [localMode, setLocalMode] = useState<'source' | 'layers' | 'poster'>('source');
+  const isAdvanced = detailLevel === 'advanced';
+
+  const [localMode, setLocalMode] = useState<'source' | 'layers' | 'poster'>(panelMode ?? 'source');
   const [inactiveOrder, setInactiveOrder] = useState<RatingType[]>([]);
 
   useEffect(() => {
+    if (panelMode) {
+      setLocalMode(panelMode);
+      return;
+    }
     if (activeTab === 'source' || activeTab === 'poster' || activeTab === 'layers')
       setLocalMode(activeTab);
-  }, [activeTab]);
+  }, [activeTab, panelMode]);
 
   const [searchQuery, setSearchQuery] = useState('');
   const [results, setResults] = useState<SearchResult[]>([]);
@@ -732,8 +384,11 @@ const LayerPanel: React.FC<Props> = ({ config, setConfig, selectedIds, onSelect
           if (prev.ratings.includes(id)) return prev;
           if (id !== 'title' && id !== 'year') return { ...prev, ratings: [id, ...prev.ratings] };
           const nextItems = { ...prev.items, [id]: { ...(prev.items[id] ?? {}) } };
-          delete nextItems[id].x;
-          delete nextItems[id].y;
+          const titleItem = nextItems[id];
+          if (titleItem) {
+            delete titleItem.x;
+            delete titleItem.y;
+          }
           return { ...prev, ratings: [id, ...prev.ratings], items: nextItems };
         });
         setInactiveOrder((prev) => prev.filter((x) => x !== id));
@@ -819,10 +474,7 @@ const LayerPanel: React.FC<Props> = ({ config, setConfig, selectedIds, onSelect
         setConfig((prev) => ({
           ...prev,
           ratings: [...badgeTopToBottom].reverse(),
-          logoZ:
-            logoIndex === -1
-              ? prev.logoZ
-              : 100 + (ordered.length - logoIndex - 1),
+          logoZ: logoIndex === -1 ? prev.logoZ : 100 + (ordered.length - logoIndex - 1),
         }));
       } else if (
         result.source.droppableId === 'inactive' &&
@@ -1045,83 +697,83 @@ const LayerPanel: React.FC<Props> = ({ config, setConfig, selectedIds, onSelect
       setActiveTab('selection');
     };
     return (
-    <div
-      ref={provided?.innerRef}
-      {...provided?.draggableProps}
-      onClick={(e) => {
-        if (isActive) handleLogoSelection(e.shiftKey || e.ctrlKey || e.metaKey);
-        else enableLogoAndFocus();
-      }}
-      className={clsx(
-        'flex items-center gap-2 px-2 py-2 rounded-lg transition-all select-none',
-        selectedLogo && isActive
-          ? 'bg-[rgba(196,124,46,0.08)] ring-1 ring-[rgba(196,124,46,0.2)]'
+      <div
+        ref={provided?.innerRef}
+        {...provided?.draggableProps}
+        onClick={(e) => {
+          if (isActive) handleLogoSelection(e.shiftKey || e.ctrlKey || e.metaKey);
+          else enableLogoAndFocus();
+        }}
+        className={clsx(
+          'flex items-center gap-2 px-2 py-2 rounded-lg transition-all select-none',
+          selectedLogo && isActive
+            ? 'bg-[rgba(196,124,46,0.08)] ring-1 ring-[rgba(196,124,46,0.2)]'
             : isActive
               ? 'hover:bg-[rgba(196,124,46,0.06)] cursor-pointer'
               : 'opacity-50',
-        isDraggingItem && 'shadow-2xl rotate-[0.5deg]'
-      )}
-      style={
-        isDraggingItem
-          ? { background: 'var(--film-mid)', ...(provided?.draggableProps.style ?? {}) }
-          : (provided?.draggableProps.style ?? {})
-      }
-    >
-      {isActive ? (
+          isDraggingItem && 'shadow-2xl rotate-[0.5deg]'
+        )}
+        style={
+          isDraggingItem
+            ? { background: 'var(--film-mid)', ...(provided?.draggableProps.style ?? {}) }
+            : (provided?.draggableProps.style ?? {})
+        }
+      >
+        {isActive ? (
+          <div
+            {...provided?.dragHandleProps}
+            onClick={(e) => e.stopPropagation()}
+            className="p-0.5 outline-none transition-colors shrink-0"
+            style={{ color: 'var(--film-text-dim)', cursor: 'grab' }}
+          >
+            <GripVertical size={13} />
+          </div>
+        ) : (
+          <div className="w-5 shrink-0" />
+        )}
         <div
-          {...provided?.dragHandleProps}
-          onClick={(e) => e.stopPropagation()}
-          className="p-0.5 outline-none transition-colors shrink-0"
-          style={{ color: 'var(--film-text-dim)', cursor: 'grab' }}
+          className="shrink-0"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (!isActive) enableLogoAndFocus();
+            else handleLogoSelection(false);
+          }}
         >
-          <GripVertical size={13} />
+          <div
+            className="w-4 h-4 rounded border flex items-center justify-center transition-all"
+            style={{
+              background: selectedLogo && isActive ? '#C47C2E' : 'var(--film-char)',
+              borderColor: selectedLogo && isActive ? '#D4A245' : 'rgba(255,255,255,0.15)',
+            }}
+          >
+            {selectedLogo && isActive && <div className="w-1.5 h-1.5 bg-white rounded-[1px]" />}
+          </div>
         </div>
-      ) : (
-        <div className="w-5 shrink-0" />
-      )}
-      <div
-        className="shrink-0"
-        onClick={(e) => {
-          e.stopPropagation();
-          if (!isActive) enableLogoAndFocus();
-          else handleLogoSelection(false);
-        }}
-      >
         <div
-          className="w-4 h-4 rounded border flex items-center justify-center transition-all"
+          className="w-7 h-7 shrink-0 rounded-md flex items-center justify-center"
           style={{
-            background: selectedLogo && isActive ? '#C47C2E' : 'var(--film-char)',
-            borderColor: selectedLogo && isActive ? '#D4A245' : 'rgba(255,255,255,0.15)',
+            background: 'rgba(255,255,255,0.03)',
+            border: '1px solid rgba(255,255,255,0.05)',
           }}
         >
-          {selectedLogo && isActive && <div className="w-1.5 h-1.5 bg-white rounded-[1px]" />}
+          <ImagePlay size={12} style={{ color: 'var(--film-text-dim)' }} />
+        </div>
+        <div className="flex-1 min-w-0">
+          <span className="block syne-font truncate" style={{ fontSize: 11, fontWeight: 600 }}>
+            Logo
+          </span>
+        </div>
+        <div onClick={(e) => e.stopPropagation()} className="shrink-0">
+          <button
+            onClick={() => (config.logo ? updateConfig('logo', false) : enableLogoAndFocus())}
+            className="w-7 h-7 rounded-md flex items-center justify-center transition-colors"
+            style={{ color: config.logo ? 'var(--film-text-dim)' : 'rgba(110,110,120,0.7)' }}
+            title={config.logo ? 'Hide layer' : 'Show layer'}
+          >
+            {config.logo ? <Eye size={13} /> : <EyeOff size={13} />}
+          </button>
         </div>
       </div>
-      <div
-        className="w-7 h-7 shrink-0 rounded-md flex items-center justify-center"
-        style={{
-          background: 'rgba(255,255,255,0.03)',
-          border: '1px solid rgba(255,255,255,0.05)',
-        }}
-      >
-        <ImagePlay size={12} style={{ color: 'var(--film-text-dim)' }} />
-      </div>
-      <div className="flex-1 min-w-0">
-        <span className="block syne-font truncate" style={{ fontSize: 11, fontWeight: 600 }}>
-          Logo
-        </span>
-      </div>
-      <div onClick={(e) => e.stopPropagation()} className="shrink-0">
-        <button
-          onClick={() => (config.logo ? updateConfig('logo', false) : enableLogoAndFocus())}
-          className="w-7 h-7 rounded-md flex items-center justify-center transition-colors"
-          style={{ color: config.logo ? 'var(--film-text-dim)' : 'rgba(110,110,120,0.7)' }}
-          title={config.logo ? 'Hide layer' : 'Show layer'}
-        >
-          {config.logo ? <Eye size={13} /> : <EyeOff size={13} />}
-        </button>
-      </div>
-    </div>
     );
   };
 
@@ -1130,37 +782,18 @@ const LayerPanel: React.FC<Props> = ({ config, setConfig, selectedIds, onSelect
       side="left"
       bodyClassName="px-2 pt-2 pb-8"
       header={
-        <div
-          className="flex rounded-lg p-0.5"
-          style={{
-            background: 'var(--film-char)',
-            border: '1px solid rgba(255,255,255,0.05)',
-          }}
-        >
-          {([
-            { id: 'source', label: 'Source', icon: <Film size={11} strokeWidth={2} /> },
-            { id: 'layers', label: 'Layers', icon: <Layers size={11} strokeWidth={2} /> },
-            { id: 'poster', label: 'Poster', icon: <Monitor size={11} strokeWidth={2} /> },
-          ] as const).map((tab) => (
-            <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
-              className={clsx(
-                'flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-md text-[11px] font-medium transition-all duration-150 outline-none select-none capitalize syne-font',
-                localMode !== tab.id &&
-                  'hover:bg-[rgba(196,124,46,0.08)] hover:text-[var(--film-text-label)]'
-              )}
-              style={{
-                background: localMode === tab.id ? 'var(--film-mid)' : 'transparent',
-                color: localMode === tab.id ? 'var(--film-cream)' : 'var(--film-text-dim)',
-                boxShadow: localMode === tab.id ? '0 1px 4px rgba(0,0,0,0.3)' : 'none',
-              }}
-            >
-              {tab.icon}
-              {tab.label}
-            </button>
-          ))}
-        </div>
+        hideTabs ? null : (
+          <PanelTabs
+            ariaLabel="Builder content panels"
+            activeId={localMode}
+            onChange={(id) => setActiveTab(id)}
+            tabs={[
+              { id: 'source', label: 'Source', icon: <Film size={11} strokeWidth={2} /> },
+              { id: 'layers', label: 'Layers', icon: <Layers size={11} strokeWidth={2} /> },
+              { id: 'poster', label: 'Poster', icon: <Monitor size={11} strokeWidth={2} /> },
+            ]}
+          />
+        )
       }
     >
       {/* ── Source Tab ──────────────────────────────────────────────────────── */}
@@ -1501,7 +1134,10 @@ const LayerPanel: React.FC<Props> = ({ config, setConfig, selectedIds, onSelect
                 >
                   <Badge size={11} /> Badges
                 </p>
-                <p className="body-font mt-0.5" style={{ fontSize: 9, color: 'var(--film-text-dim)' }}>
+                <p
+                  className="body-font mt-0.5"
+                  style={{ fontSize: 9, color: 'var(--film-text-dim)' }}
+                >
                   Show/hide all layers with badge behavior
                 </p>
               </div>
@@ -1574,7 +1210,12 @@ const LayerPanel: React.FC<Props> = ({ config, setConfig, selectedIds, onSelect
               <SegmentedRow
                 label="Logo Source"
                 value={String(config.logoSource ?? 'auto')}
-                onChange={(v) => updateConfig('logoSource', v === 'auto' ? null : v)}
+                onChange={(v) =>
+                  updateConfig(
+                    'logoSource',
+                    v === 'auto' ? null : (v as PosterConfig['logoSource'])
+                  )
+                }
                 options={logoSourceOptions}
               />
             </div>
@@ -1585,10 +1226,16 @@ const LayerPanel: React.FC<Props> = ({ config, setConfig, selectedIds, onSelect
             />
           </div>
 
-          {/* API Keys — Section */}
-          <Section title="API Keys" icon={<KeyRound size={13} />}>
-            <ApiKeysPanel config={config} setConfig={setConfig} />
-          </Section>
+          {isAdvanced && (
+            <Section
+              inset="compact"
+              title="API Keys"
+              icon={<KeyRound size={13} />}
+              defaultOpen={false}
+            >
+              <ApiKeysPanel config={config} setConfig={setConfig} />
+            </Section>
+          )}
         </div>
       )}
 
@@ -1610,7 +1257,7 @@ const LayerPanel: React.FC<Props> = ({ config, setConfig, selectedIds, onSelect
             </p>
           </div>
 
-          <Section title="Background" icon={<Monitor size={13} />} defaultOpen>
+          <Section inset="compact" title="Background" icon={<Monitor size={13} />} defaultOpen>
             <SliderRow
               label="Poster Blur"
               value={config.posterBlur}
@@ -1627,50 +1274,56 @@ const LayerPanel: React.FC<Props> = ({ config, setConfig, selectedIds, onSelect
             />
           </Section>
 
-          <Section title="Canvas Overlays" icon={<ShieldCheck size={13} />} defaultOpen>
-            <div className="grid grid-cols-2 gap-2">
-              <button
-                type="button"
-                onClick={() => toggleViewOption('showSafeArea')}
-                className={clsx(
-                  'h-8 rounded-lg text-[11px] font-medium flex items-center justify-center gap-1.5 transition-all active:scale-95 syne-font',
-                  viewOptions.showSafeArea
-                    ? 'bg-[rgba(196,124,46,0.1)] text-[var(--film-pale)] border border-[rgba(196,124,46,0.22)]'
-                    : 'bg-[rgba(255,255,255,0.02)] text-[var(--film-text-dim)] border border-[rgba(255,255,255,0.05)]'
-                )}
-              >
-                <ShieldCheck size={10} />
-                Safe Area
-              </button>
-              <button
-                type="button"
-                onClick={() => toggleViewOption('showGrid')}
-                className={clsx(
-                  'h-8 rounded-lg text-[11px] font-medium flex items-center justify-center gap-1.5 transition-all active:scale-95 syne-font',
-                  viewOptions.showGrid
-                    ? 'bg-[rgba(196,124,46,0.1)] text-[var(--film-pale)] border border-[rgba(196,124,46,0.22)]'
-                    : 'bg-[rgba(255,255,255,0.02)] text-[var(--film-text-dim)] border border-[rgba(255,255,255,0.05)]'
-                )}
-              >
-                <Grid3x3 size={10} />
-                Grid
-              </button>
-              <button
-                type="button"
-                onClick={() => toggleViewOption('snapToGrid')}
-                className={clsx(
-                  'h-8 rounded-lg text-[11px] font-medium col-span-2 flex items-center justify-center gap-1.5 transition-all active:scale-95 syne-font',
-                  viewOptions.snapToGrid
-                    ? 'bg-[rgba(196,124,46,0.1)] text-[var(--film-pale)] border border-[rgba(196,124,46,0.22)]'
-                    : 'bg-[rgba(255,255,255,0.02)] text-[var(--film-text-dim)] border border-[rgba(255,255,255,0.05)]'
-                )}
-              >
-                <Magnet size={10} />
-                Snap to Grid
-              </button>
-            </div>
-          </Section>
-
+          {isAdvanced && (
+            <Section
+              inset="compact"
+              title="Canvas Overlays"
+              icon={<ShieldCheck size={13} />}
+              defaultOpen
+            >
+              <div className="grid grid-cols-2 gap-2">
+                <button
+                  type="button"
+                  onClick={() => toggleViewOption('showSafeArea')}
+                  className={clsx(
+                    'h-8 rounded-lg text-[11px] font-medium flex items-center justify-center gap-1.5 transition-all active:scale-95 syne-font',
+                    viewOptions.showSafeArea
+                      ? 'bg-[rgba(196,124,46,0.1)] text-[var(--film-pale)] border border-[rgba(196,124,46,0.22)]'
+                      : 'bg-[rgba(255,255,255,0.02)] text-[var(--film-text-dim)] border border-[rgba(255,255,255,0.05)]'
+                  )}
+                >
+                  <ShieldCheck size={10} />
+                  Safe Area
+                </button>
+                <button
+                  type="button"
+                  onClick={() => toggleViewOption('showGrid')}
+                  className={clsx(
+                    'h-8 rounded-lg text-[11px] font-medium flex items-center justify-center gap-1.5 transition-all active:scale-95 syne-font',
+                    viewOptions.showGrid
+                      ? 'bg-[rgba(196,124,46,0.1)] text-[var(--film-pale)] border border-[rgba(196,124,46,0.22)]'
+                      : 'bg-[rgba(255,255,255,0.02)] text-[var(--film-text-dim)] border border-[rgba(255,255,255,0.05)]'
+                  )}
+                >
+                  <Grid3x3 size={10} />
+                  Grid
+                </button>
+                <button
+                  type="button"
+                  onClick={() => toggleViewOption('snapToGrid')}
+                  className={clsx(
+                    'h-8 rounded-lg text-[11px] font-medium col-span-2 flex items-center justify-center gap-1.5 transition-all active:scale-95 syne-font',
+                    viewOptions.snapToGrid
+                      ? 'bg-[rgba(196,124,46,0.1)] text-[var(--film-pale)] border border-[rgba(196,124,46,0.22)]'
+                      : 'bg-[rgba(255,255,255,0.02)] text-[var(--film-text-dim)] border border-[rgba(255,255,255,0.05)]'
+                  )}
+                >
+                  <Magnet size={10} />
+                  Snap to Grid
+                </button>
+              </div>
+            </Section>
+          )}
         </div>
       )}
 
@@ -1678,183 +1331,177 @@ const LayerPanel: React.FC<Props> = ({ config, setConfig, selectedIds, onSelect
       {localMode === 'layers' && (
         <div className="px-1">
           <>
-              <div className="flex items-center justify-between mb-3">
-                <span
-                  className="syne-font uppercase tracking-widest"
-                  style={{ fontSize: 9, color: 'var(--film-text-dim)', fontWeight: 700 }}
+            <div className="flex items-center justify-between mb-3">
+              <span
+                className="syne-font uppercase tracking-widest"
+                style={{ fontSize: 9, color: 'var(--film-text-dim)', fontWeight: 700 }}
+              >
+                Badges
+              </span>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={handleToggleAll}
+                  className="flex items-center gap-1.5 transition-colors body-font"
+                  style={{ fontSize: 10, color: 'var(--film-text-dim)' }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLElement).style.color = 'var(--film-text-label)';
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLElement).style.color = 'var(--film-text-dim)';
+                  }}
                 >
-                  Badges
-                </span>
-                <div className="flex items-center gap-2">
-                  <button
-                    onClick={handleToggleAll}
-                    className="flex items-center gap-1.5 transition-colors body-font"
-                    style={{ fontSize: 10, color: 'var(--film-text-dim)' }}
-                    onMouseEnter={(e) => {
-                      (e.currentTarget as HTMLElement).style.color = 'var(--film-text-label)';
-                    }}
-                    onMouseLeave={(e) => {
-                      (e.currentTarget as HTMLElement).style.color = 'var(--film-text-dim)';
-                    }}
-                  >
-                    {allVisible ? <Eye size={11} /> : <EyeOff size={11} />}
-                    {allVisible ? 'Hide all' : 'Show all'}
-                  </button>
-                  <div style={{ width: 1, height: 12, background: 'rgba(255,255,255,0.08)' }} />
-                  <button
-                    onClick={() => handleSelectAll(!allVisibleSelected)}
-                    className="flex items-center gap-1.5 transition-colors body-font"
-                    style={{ fontSize: 10, color: 'var(--film-text-dim)' }}
-                    onMouseEnter={(e) => {
-                      (e.currentTarget as HTMLElement).style.color = 'var(--film-text-label)';
-                    }}
-                    onMouseLeave={(e) => {
-                      (e.currentTarget as HTMLElement).style.color = 'var(--film-text-dim)';
+                  {allVisible ? <Eye size={11} /> : <EyeOff size={11} />}
+                  {allVisible ? 'Hide all' : 'Show all'}
+                </button>
+                <div style={{ width: 1, height: 12, background: 'rgba(255,255,255,0.08)' }} />
+                <button
+                  onClick={() => handleSelectAll(!allVisibleSelected)}
+                  className="flex items-center gap-1.5 transition-colors body-font"
+                  style={{ fontSize: 10, color: 'var(--film-text-dim)' }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLElement).style.color = 'var(--film-text-label)';
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLElement).style.color = 'var(--film-text-dim)';
+                  }}
+                >
+                  <div
+                    className="w-3.5 h-3.5 rounded border flex items-center justify-center transition-all"
+                    style={{
+                      background: allVisibleSelected ? '#C47C2E' : 'var(--film-char)',
+                      borderColor: allVisibleSelected ? '#D4A245' : 'rgba(255,255,255,0.15)',
                     }}
                   >
+                    {allVisibleSelected && <Check size={9} className="text-white" />}
+                  </div>
+                  Select all
+                </button>
+              </div>
+            </div>
+
+            <DragDropContext onDragEnd={handleDragEnd}>
+              {activeLayers.length > 0 ? (
+                <Droppable droppableId="active">
+                  {(provided) => (
                     <div
-                      className="w-3.5 h-3.5 rounded border flex items-center justify-center transition-all"
-                      style={{
-                        background: allVisibleSelected ? '#C47C2E' : 'var(--film-char)',
-                        borderColor: allVisibleSelected ? '#D4A245' : 'rgba(255,255,255,0.15)',
-                      }}
+                      ref={provided.innerRef}
+                      {...provided.droppableProps}
+                      className="space-y-0.5"
                     >
-                      {allVisibleSelected && <Check size={9} className="text-white" />}
+                      {activeLayers.map((layer, idx) => (
+                        <Draggable
+                          key={layer.id}
+                          draggableId={layer.id === 'logo' ? 'logo' : layer.id}
+                          index={idx}
+                        >
+                          {(prov, snap) =>
+                            layer.kind === 'logo'
+                              ? renderLogoLayerRow(true, prov, snap.isDragging)
+                              : renderBadgeRow(
+                                  { id: layer.id as RatingType, label: layer.label },
+                                  true,
+                                  prov,
+                                  snap.isDragging
+                                )
+                          }
+                        </Draggable>
+                      ))}
+                      {provided.placeholder}
                     </div>
-                    Select all
-                  </button>
+                  )}
+                </Droppable>
+              ) : (
+                <div className="flex flex-col items-center py-10 gap-2">
+                  <EyeOff
+                    size={22}
+                    strokeWidth={1.5}
+                    style={{ color: 'var(--film-text-dim)', opacity: 0.7 }}
+                  />
+                  <p className="syne-font" style={{ fontSize: 11, color: 'var(--film-text-dim)' }}>
+                    No active badges
+                  </p>
+                  <p className="body-font" style={{ fontSize: 9, color: 'var(--film-text-dim)' }}>
+                    Enable some from the list below
+                  </p>
                 </div>
-              </div>
+              )}
 
-              <DragDropContext onDragEnd={handleDragEnd}>
-                {activeLayers.length > 0 ? (
-                  <Droppable droppableId="active">
-                    {(provided) => (
-                      <div
-                        ref={provided.innerRef}
-                        {...provided.droppableProps}
-                        className="space-y-0.5"
-                      >
-                        {activeLayers.map((layer, idx) => (
-                          <Draggable
-                            key={layer.id}
-                            draggableId={layer.id === 'logo' ? 'logo' : layer.id}
-                            index={idx}
-                          >
-                            {(prov, snap) =>
-                              layer.kind === 'logo'
-                                ? renderLogoLayerRow(true, prov, snap.isDragging)
-                                : renderBadgeRow(
-                                    { id: layer.id as RatingType, label: layer.label },
-                                    true,
-                                    prov,
-                                    snap.isDragging
-                                  )
-                            }
-                          </Draggable>
-                        ))}
-                        {provided.placeholder}
-                      </div>
-                    )}
-                  </Droppable>
-                ) : (
-                  <div className="flex flex-col items-center py-10 gap-2">
-                    <EyeOff
-                      size={22}
-                      strokeWidth={1.5}
-                      style={{ color: 'var(--film-text-dim)', opacity: 0.7 }}
-                    />
-                    <p
-                      className="syne-font"
-                      style={{ fontSize: 11, color: 'var(--film-text-dim)' }}
+              {inactiveBadges.length > 0 && (
+                <>
+                  <div className="mt-5 mb-2 flex items-center justify-between">
+                    <span
+                      className="syne-font uppercase tracking-widest"
+                      style={{ fontSize: 9, color: 'var(--film-text-dim)', fontWeight: 700 }}
                     >
-                      No active badges
-                    </p>
-                    <p className="body-font" style={{ fontSize: 9, color: 'var(--film-text-dim)' }}>
-                      Enable some from the list below
-                    </p>
-                  </div>
-                )}
-
-                {inactiveBadges.length > 0 && (
-                  <>
-                    <div className="mt-5 mb-2 flex items-center justify-between">
+                      Available
+                    </span>
+                    {/* Fallback toggle */}
+                    <div className="flex items-center gap-1.5">
                       <span
-                        className="syne-font uppercase tracking-widest"
-                        style={{ fontSize: 9, color: 'var(--film-text-dim)', fontWeight: 700 }}
+                        className="body-font"
+                        style={{ fontSize: 10, color: 'var(--film-text-dim)' }}
                       >
-                        Available
+                        Fallback
                       </span>
-                      {/* Fallback toggle */}
-                      <div className="flex items-center gap-1.5">
+                      <Switch
+                        checked={fallbackEnabled}
+                        onChange={(v) => {
+                          setFallbackEnabled(v);
+                          setConfig((prev) => ({
+                            ...prev,
+                            fallbackEnabled: v,
+                            fallbackPool: v ? inactiveBadges.map((b) => b.id) : [],
+                          }));
+                        }}
+                        className={clsx(
+                          'relative inline-flex h-4 w-7 items-center rounded-full transition-colors focus:outline-none',
+                          fallbackEnabled ? 'bg-[#C47C2E]' : 'bg-zinc-700/80'
+                        )}
+                      >
                         <span
-                          className="body-font"
-                          style={{ fontSize: 10, color: 'var(--film-text-dim)' }}
-                        >
-                          Fallback
-                        </span>
-                        <Switch
-                          checked={fallbackEnabled}
-                          onChange={(v) => {
-                            setFallbackEnabled(v);
-                            setConfig((prev) => ({
-                              ...prev,
-                              fallbackEnabled: v,
-                              fallbackPool: v ? inactiveBadges.map((b) => b.id) : [],
-                            }));
-                          }}
                           className={clsx(
-                            'relative inline-flex h-4 w-7 items-center rounded-full transition-colors focus:outline-none',
-                            fallbackEnabled ? 'bg-[#C47C2E]' : 'bg-zinc-700/80'
+                            'inline-block w-2.5 h-2.5 rounded-full bg-white shadow-sm transition-transform',
+                            fallbackEnabled ? 'translate-x-[13px]' : 'translate-x-[2px]'
                           )}
-                        >
-                          <span
-                            className={clsx(
-                              'inline-block w-2.5 h-2.5 rounded-full bg-white shadow-sm transition-transform',
-                              fallbackEnabled ? 'translate-x-[13px]' : 'translate-x-[2px]'
-                            )}
-                          />
-                        </Switch>
-                      </div>
+                        />
+                      </Switch>
                     </div>
-
-                    {fallbackEnabled ? (
-                      <Droppable droppableId="inactive">
-                        {(provided) => (
-                          <div
-                            ref={provided.innerRef}
-                            {...provided.droppableProps}
-                            className="space-y-0.5"
-                          >
-                            {inactiveBadges.map((badge, idx) => (
-                              <Draggable key={badge.id} draggableId={`fb-${badge.id}`} index={idx}>
-                                {(prov, snap) =>
-                                  renderBadgeRow(badge, false, prov, snap.isDragging)
-                                }
-                              </Draggable>
-                            ))}
-                            {provided.placeholder}
-                          </div>
-                        )}
-                      </Droppable>
-                    ) : (
-                      <div className="space-y-0.5">
-                        {inactiveBadges.map((badge) => (
-                          <React.Fragment key={badge.id}>
-                            {renderBadgeRow(badge, false)}
-                          </React.Fragment>
-                        ))}
-                      </div>
-                    )}
-                  </>
-                )}
-                {!config.logo && (
-                  <div className={clsx(inactiveBadges.length > 0 ? 'mt-2' : 'mt-5')}>
-                    {renderLogoLayerRow(false)}
                   </div>
-                )}
-              </DragDropContext>
 
+                  {fallbackEnabled ? (
+                    <Droppable droppableId="inactive">
+                      {(provided) => (
+                        <div
+                          ref={provided.innerRef}
+                          {...provided.droppableProps}
+                          className="space-y-0.5"
+                        >
+                          {inactiveBadges.map((badge, idx) => (
+                            <Draggable key={badge.id} draggableId={`fb-${badge.id}`} index={idx}>
+                              {(prov, snap) => renderBadgeRow(badge, false, prov, snap.isDragging)}
+                            </Draggable>
+                          ))}
+                          {provided.placeholder}
+                        </div>
+                      )}
+                    </Droppable>
+                  ) : (
+                    <div className="space-y-0.5">
+                      {inactiveBadges.map((badge) => (
+                        <React.Fragment key={badge.id}>
+                          {renderBadgeRow(badge, false)}
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  )}
+                </>
+              )}
+              {!config.logo && (
+                <div className={clsx(inactiveBadges.length > 0 ? 'mt-2' : 'mt-5')}>
+                  {renderLogoLayerRow(false)}
+                </div>
+              )}
+            </DragDropContext>
           </>
         </div>
       )}
diff --git a/src/components/builder/components/PropertyPanel.tsx b/src/components/builder/components/PropertyPanel.tsx
index 4ddd85e..5b8db7f 100644
--- a/src/components/builder/components/PropertyPanel.tsx
+++ b/src/components/builder/components/PropertyPanel.tsx
@@ -1,14 +1,11 @@
 // src/components/builder/components/PropertyPanel.tsx
-import React, { memo, useState, useRef, useEffect, useCallback } from 'react';
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Switch } from '@headlessui/react';
+import React, { memo, useRef, useEffect } from 'react';
 import type { PosterConfig, RatingType, PresetType, BadgeConfig } from '../types';
-import { ALL_BADGES, CANVAS_WIDTH, CANVAS_HEIGHT, DEFAULT_CONFIG } from '../types';
+import { CANVAS_WIDTH, CANVAS_HEIGHT, DEFAULT_CONFIG } from '../types';
 import {
   Layers,
   Layout,
   Palette,
-  ChevronDown,
-  ChevronRight,
   Eye,
   EyeOff,
   RotateCcw,
@@ -18,11 +15,10 @@ import {
   Hash,
   Sliders,
   ImagePlay,
-  Check,
 } from 'lucide-react';
-import ColorPicker from './ColorPicker';
 import clsx from 'clsx';
 import SidebarLayout from './SidebarLayout';
+import { ColorRow, Section, SegmentedRow, SliderRow, TextInputRow, ToggleRow } from './ui';
 
 interface Props {
   config: PosterConfig;
@@ -32,9 +28,9 @@ interface Props {
   selectedMinimalElements?: Set<string>;
   viewMode?: 'global' | 'selection';
   mode?: 'badges' | 'logo' | 'selection';
+  detailLevel?: 'simple' | 'advanced';
 }
 
-const SECTION_STORAGE_KEY = 'posterium_section_states_v2';
 const INACTIVE_OPTION_HOVER_CLASSES =
   'bg-[rgba(255,255,255,0.03)] text-[var(--film-text-label)] border-[rgba(255,255,255,0.05)] hover:bg-[rgba(255,255,255,0.07)] hover:border-[rgba(196,124,46,0.24)] hover:text-[var(--film-cream)]';
 const BADGE_DISPLAY_NAMES: Record<string, string> = {
@@ -52,484 +48,6 @@ const BADGE_DISPLAY_NAMES: Record<string, string> = {
   title: 'Title',
 };
 
-const readSectionStates = (): Record<string, boolean> => {
-  try {
-    return JSON.parse(localStorage.getItem(SECTION_STORAGE_KEY) || '{}');
-  } catch {
-    return {};
-  }
-};
-
-const writeSectionState = (id: string, open: boolean) => {
-  try {
-    const s = readSectionStates();
-    localStorage.setItem(SECTION_STORAGE_KEY, JSON.stringify({ ...s, [id]: open }));
-  } catch {}
-};
-
-// ── Section ──────────────────────────────────────────────────────────────────
-const Section: React.FC<{
-  title: string;
-  icon?: React.ReactNode;
-  children: React.ReactNode;
-  defaultOpen?: boolean;
-  sectionId?: string;
-}> = ({ title, icon, children, defaultOpen = true, sectionId }) => {
-  const [open, setOpen] = useState(() => {
-    if (!sectionId) return defaultOpen;
-    const states = readSectionStates();
-    return sectionId in states ? states[sectionId] : defaultOpen;
-  });
-
-  const toggle = useCallback(() => {
-    setOpen((v) => {
-      const next = !v;
-      if (sectionId) writeSectionState(sectionId, next);
-      return next;
-    });
-  }, [sectionId]);
-
-  return (
-    <div className="pt-5 first:pt-3">
-      <button
-        type="button"
-        onClick={toggle}
-        className="w-full flex items-center justify-between px-3 mb-3 focus:outline-none group"
-      >
-        <span
-          className="flex items-center gap-1.5 syne-font uppercase tracking-widest"
-          style={{ fontSize: 9, color: 'var(--film-text-dim)', fontWeight: 700 }}
-        >
-          {icon && (
-            <span style={{ color: 'var(--film-text-dim)', opacity: 1, lineHeight: 0 }}>{icon}</span>
-          )}
-          {title}
-        </span>
-        <span
-          style={{
-            color: 'var(--film-text-dim)',
-            opacity: open ? 0.6 : 0.3,
-            transition: 'opacity 0.15s',
-            lineHeight: 0,
-          }}
-        >
-          {open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
-        </span>
-      </button>
-      {open && <div className="px-3 pb-1 space-y-3.5">{children}</div>}
-      <div
-        className="mt-5 mx-3"
-        style={{ height: 1, background: 'rgba(255,255,255,0.04)' }}
-        aria-hidden="true"
-      />
-    </div>
-  );
-};
-
-// ── SliderRow ─────────────────────────────────────────────────────────────────
-const SliderRow: React.FC<{
-  label: string;
-  value: number;
-  onChange: (v: number) => void;
-  onReset?: () => void;
-  min: number;
-  max: number;
-  step?: number;
-  unit?: string;
-  formatValue?: (v: number) => string;
-}> = ({ label, value, onChange, onReset, min, max, step = 1, unit = '', formatValue }) => {
-  const [localValue, setLocalValue] = useState(value);
-  const [inputText, setInputText] = useState(() => (formatValue ? formatValue(value) : `${value}`));
-  const lastUpdate = useRef(Date.now());
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const isFocused = useRef(false);
-
-  useEffect(() => {
-    setLocalValue(value);
-    if (!isFocused.current) {
-      setInputText(formatValue ? formatValue(value) : `${value}`);
-    }
-  }, [value, formatValue]);
-
-  const commitInput = useCallback(
-    (text: string) => {
-      const raw = text.replace(unit, '').replace(/[^0-9.\-]/g, '');
-      const n = parseFloat(raw);
-      if (!isNaN(n)) {
-        const clamped = Math.max(min, Math.min(max, n));
-        setLocalValue(clamped);
-        setInputText(formatValue ? formatValue(clamped) : `${clamped}`);
-        onChange(clamped);
-      } else {
-        setInputText(formatValue ? formatValue(localValue) : `${localValue}`);
-      }
-    },
-    [min, max, onChange, unit, formatValue, localValue]
-  );
-
-  const handleRangeChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const val = parseFloat(e.target.value);
-      setLocalValue(val);
-      if (!isFocused.current) {
-        setInputText(formatValue ? formatValue(val) : `${val}`);
-      }
-      const now = Date.now();
-      if (now - lastUpdate.current > 33) {
-        onChange(val);
-        lastUpdate.current = now;
-      } else {
-        if (timeoutRef.current) clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(() => {
-          onChange(val);
-          lastUpdate.current = Date.now();
-        }, 33);
-      }
-    },
-    [onChange, formatValue]
-  );
-
-  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      commitInput(inputText);
-      inputRef.current?.blur();
-    } else if (e.key === 'Escape') {
-      setInputText(formatValue ? formatValue(localValue) : `${localValue}`);
-      inputRef.current?.blur();
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      const newVal = Math.max(min, Math.min(max, localValue + step));
-      setLocalValue(newVal);
-      setInputText(formatValue ? formatValue(newVal) : `${newVal}`);
-      onChange(newVal);
-    } else if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      const newVal = Math.max(min, Math.min(max, localValue - step));
-      setLocalValue(newVal);
-      setInputText(formatValue ? formatValue(newVal) : `${newVal}`);
-      onChange(newVal);
-    }
-  };
-
-  return (
-    <div className="space-y-1.5">
-      <div className="flex items-center justify-between gap-2">
-        <span
-          className="body-font"
-          style={{ fontSize: 11, color: 'var(--film-text-label)', fontWeight: 500 }}
-        >
-          {label}
-        </span>
-        {onReset && (
-          <button
-            type="button"
-            onClick={onReset}
-            className="inline-flex items-center gap-1 text-[9px] mono-font transition-colors"
-            style={{ color: 'var(--film-text-dim)' }}
-            onMouseEnter={(e) => {
-              (e.currentTarget as HTMLElement).style.color = 'var(--film-text-label)';
-            }}
-            onMouseLeave={(e) => {
-              (e.currentTarget as HTMLElement).style.color = 'var(--film-text-dim)';
-            }}
-          >
-            <RotateCcw size={10} />
-            Reset
-          </button>
-        )}
-      </div>
-      <div className="flex items-center gap-2">
-        <input
-          ref={inputRef}
-          type="text"
-          inputMode="decimal"
-          value={inputText}
-          onChange={(e) => setInputText(e.target.value)}
-          onFocus={() => {
-            isFocused.current = true;
-          }}
-          onBlur={() => {
-            isFocused.current = false;
-            commitInput(inputText);
-          }}
-          onKeyDown={handleInputKeyDown}
-          className="mono-font tabular-nums focus:outline-none shrink-0"
-          style={{
-            width: 48,
-            height: 22,
-            paddingInline: 5,
-            borderRadius: 4,
-            background: 'rgba(255,255,255,0.04)',
-            border: '1px solid rgba(255,255,255,0.1)',
-            fontSize: 10,
-            color: 'var(--film-pale)',
-            textAlign: 'center',
-            transition: 'border-color 0.15s',
-          }}
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLInputElement).style.borderColor = 'rgba(196,124,46,0.4)';
-          }}
-          onMouseLeave={(e) => {
-            if (!isFocused.current)
-              (e.currentTarget as HTMLInputElement).style.borderColor = 'rgba(255,255,255,0.1)';
-          }}
-        />
-        <input
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={localValue}
-          onChange={handleRangeChange}
-          className="flex-1 min-w-0"
-        />
-      </div>
-    </div>
-  );
-};
-
-// ── ToggleRow ─────────────────────────────────────────────────────────────────
-const ToggleRow: React.FC<{
-  label: string;
-  sub?: string;
-  checked: boolean;
-  onChange: (v: boolean) => void;
-  small?: boolean;
-}> = ({ label, sub, checked, onChange, small }) => (
-  <div className="flex items-center justify-between gap-3">
-    <div className="min-w-0">
-      <p
-        className="body-font font-medium"
-        style={{ fontSize: small ? 10 : 11, color: 'var(--film-text-label)' }}
-      >
-        {label}
-      </p>
-      {sub && (
-        <p className="body-font mt-0.5" style={{ fontSize: 9, color: 'var(--film-text-dim)' }}>
-          {sub}
-        </p>
-      )}
-    </div>
-    <Switch
-      checked={checked}
-      onChange={onChange}
-      className={clsx(
-        'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#C47C2E]',
-        checked ? 'bg-[#C47C2E]' : 'bg-zinc-700/80'
-      )}
-    >
-      <span
-        className={clsx(
-          'inline-block w-3.5 h-3.5 rounded-full bg-white shadow-sm transition-transform',
-          checked ? 'translate-x-[18px]' : 'translate-x-[3px]'
-        )}
-      />
-    </Switch>
-  </div>
-);
-
-// ── SegmentedRow — compact button group ───────────────────────────────────────
-const SegmentedRow: React.FC<{
-  label: string;
-  options: { id: string; label: string }[];
-  value: string | null;
-  onChange: (v: string) => void;
-}> = ({ label, options, value, onChange }) => (
-  <div className="space-y-1.5">
-    <span
-      className="body-font"
-      style={{ fontSize: 11, color: 'var(--film-text-label)', fontWeight: 500 }}
-    >
-      {label}
-    </span>
-    <div className="grid gap-1" style={{ gridTemplateColumns: `repeat(${options.length}, 1fr)` }}>
-      {options.map((opt) => (
-        <button
-          key={opt.id}
-          type="button"
-          onClick={() => onChange(opt.id)}
-          className={clsx(
-            'h-7 rounded-md text-[10px] font-medium transition-all border syne-font',
-            value === opt.id
-              ? 'bg-[rgba(196,124,46,0.15)] text-[var(--film-pale)] border-[rgba(196,124,46,0.3)]'
-              : INACTIVE_OPTION_HOVER_CLASSES
-          )}
-        >
-          {opt.label}
-        </button>
-      ))}
-    </div>
-  </div>
-);
-
-// ── TextInputRow ──────────────────────────────────────────────────────────────
-const TextInputRow: React.FC<{
-  label: string;
-  value: string;
-  placeholder?: string;
-  onChange: (v: string) => void;
-  onClear?: () => void;
-}> = ({ label, value, placeholder, onChange, onClear }) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [focused, setFocused] = useState(false);
-
-  return (
-    <div className="space-y-1.5">
-      <div className="flex items-center justify-between">
-        <span
-          className="body-font"
-          style={{ fontSize: 11, color: 'var(--film-text-label)', fontWeight: 500 }}
-        >
-          {label}
-        </span>
-        {onClear && value && (
-          <button
-            type="button"
-            onClick={onClear}
-            className="mono-font transition-colors"
-            style={{ fontSize: 9, color: 'var(--film-text-dim)' }}
-            onMouseEnter={(e) => {
-              (e.currentTarget as HTMLElement).style.color = 'var(--film-text-label)';
-            }}
-            onMouseLeave={(e) => {
-              (e.currentTarget as HTMLElement).style.color = 'var(--film-text-dim)';
-            }}
-          >
-            Clear
-          </button>
-        )}
-      </div>
-      <input
-        ref={inputRef}
-        type="text"
-        value={value}
-        placeholder={placeholder}
-        onChange={(e) => onChange(e.target.value)}
-        onFocus={() => setFocused(true)}
-        onBlur={() => setFocused(false)}
-        className="w-full focus:outline-none body-font hover:border-[rgba(196,124,46,0.28)]"
-        style={{
-          height: 28,
-          paddingInline: 8,
-          borderRadius: 6,
-          background: 'rgba(255,255,255,0.04)',
-          border: `1px solid ${focused ? 'rgba(196,124,46,0.4)' : 'rgba(255,255,255,0.1)'}`,
-          fontSize: 11,
-          color: 'var(--film-pale)',
-          transition: 'border-color 0.15s',
-        }}
-      />
-    </div>
-  );
-};
-
-const SelectBox = memo(
-  ({
-    value,
-    onChange,
-    options,
-  }: {
-    value: string;
-    onChange: (v: string) => void;
-    options: { id: string; label: string }[];
-  }) => (
-    <Listbox value={value} onChange={onChange}>
-      <div className="relative">
-        <ListboxButton
-          className="w-full flex items-center justify-between gap-1 h-9 px-2.5 rounded-lg text-[11px] font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#C47C2E] syne-font"
-          style={{
-            background: 'rgba(255,255,255,0.04)',
-            border: '1px solid rgba(255,255,255,0.1)',
-            color: 'var(--film-pale)',
-          }}
-        >
-          <span className="truncate">{options.find((o) => o.id === value)?.label ?? value}</span>
-          <ChevronDown size={10} style={{ color: 'var(--film-text-dim)', flexShrink: 0 }} />
-        </ListboxButton>
-        <ListboxOptions
-          transition
-          className="absolute z-50 mt-1 w-full py-1 rounded-xl shadow-2xl shadow-black/50 text-[11px] overflow-auto max-h-52 focus:outline-none transition duration-75 ease-in data-[closed]:scale-95 data-[closed]:opacity-0"
-          style={{
-            background: 'var(--film-mid)',
-            border: '1px solid rgba(255,255,255,0.08)',
-          }}
-        >
-          {options.map((opt) => (
-            <ListboxOption
-              key={opt.id}
-              value={opt.id}
-              className={({ active, selected }) =>
-                clsx(
-                  'flex items-center gap-2 px-3 py-2.5 cursor-pointer transition-colors syne-font',
-                  active && 'bg-[rgba(196,124,46,0.1)]',
-                  !active && selected && 'text-[var(--film-pale)]',
-                  !active && !selected && 'text-[var(--film-text-label)]'
-                )
-              }
-            >
-              {({ selected }) => (
-                <>
-                  <span className="flex-1 truncate">{opt.label}</span>
-                  {selected && (
-                    <Check size={10} style={{ color: 'var(--film-amber)', flexShrink: 0 }} />
-                  )}
-                </>
-              )}
-            </ListboxOption>
-          ))}
-        </ListboxOptions>
-      </div>
-    </Listbox>
-  )
-);
-SelectBox.displayName = 'SelectBox';
-
-// ── ColorRow — label + optional reset button above a ColorPicker ──────────────
-const ColorRow: React.FC<{
-  label: string;
-  value: string;
-  onChange: (v: string) => void;
-  onReset?: () => void;
-  showOpacity?: boolean;
-  opacity?: number;
-  onOpacityChange?: (v: number) => void;
-}> = ({ label, value, onChange, onReset, showOpacity, opacity, onOpacityChange }) => (
-  <div className="space-y-1.5">
-    <div className="flex items-center justify-between">
-      <span
-        className="body-font"
-        style={{ fontSize: 11, color: 'var(--film-text-label)', fontWeight: 500 }}
-      >
-        {label}
-      </span>
-      {onReset && (
-        <button
-          type="button"
-          onClick={onReset}
-          className="mono-font transition-colors"
-          style={{ fontSize: 9, color: 'var(--film-text-dim)' }}
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLElement).style.color = 'var(--film-text-label)';
-          }}
-          onMouseLeave={(e) => {
-            (e.currentTarget as HTMLElement).style.color = 'var(--film-text-dim)';
-          }}
-        >
-          Reset
-        </button>
-      )}
-    </div>
-    <ColorPicker
-      value={value}
-      onChange={onChange}
-      showOpacity={showOpacity}
-      opacity={opacity}
-      onOpacityChange={onOpacityChange}
-    />
-  </div>
-);
-
 // ── Alignment grid ─────────────────────────────────────────────────────────────
 const GRID_POSITIONS: { id: PresetType; label: string }[] = [
   { id: 'tl', label: 'Top left' },
@@ -643,6 +161,7 @@ const PropertyPanel: React.FC<Props> = ({
   selectedMinimalElements = new Set<string>(),
   viewMode,
   mode,
+  detailLevel = 'advanced',
 }) => {
   const badgesEnabled = config.ratings.length > 0;
   const logoSettingsRef = useRef<HTMLDivElement | null>(null);
@@ -740,6 +259,7 @@ const PropertyPanel: React.FC<Props> = ({
     return vals.length > 0 && vals.every((v) => v === vals[0]) ? vals[0] : null;
   };
 
+  const isAdvanced = detailLevel === 'advanced';
   const panelMode = mode ?? (viewMode === 'selection' ? 'selection' : 'badges');
   const showGlobal = panelMode !== 'selection';
   const showBadgeSettings = panelMode === 'badges';
@@ -892,38 +412,46 @@ const PropertyPanel: React.FC<Props> = ({
                     : undefined
                 }
               />
-              <SliderRow
-                label="Shadow X"
-                value={config.shadowX ?? 0}
-                min={-20}
-                max={20}
-                step={1}
-                unit="px"
-                onChange={(v) => updateConfig('shadowX', Math.round(v))}
-              />
-              <SliderRow
-                label="Shadow Y"
-                value={config.shadowY ?? 2}
-                min={-20}
-                max={20}
-                step={1}
-                unit="px"
-                onChange={(v) => updateConfig('shadowY', Math.round(v))}
-              />
-              <ColorRow
-                label="Shadow Color"
-                value={config.shadowColor ?? '#000000'}
-                onChange={(v) => updateConfig('shadowColor', v)}
-              />
-              <SliderRow
-                label="Shadow Opacity"
-                value={config.shadowOpacity ?? 0.35}
-                min={0}
-                max={1}
-                step={0.01}
-                formatValue={(v) => `${Math.round(v * 100)}%`}
-                onChange={(v) => updateConfig('shadowOpacity', Number(v.toFixed(2)))}
-              />
+              {isAdvanced && (
+                <SliderRow
+                  label="Shadow X"
+                  value={config.shadowX ?? 0}
+                  min={-20}
+                  max={20}
+                  step={1}
+                  unit="px"
+                  onChange={(v) => updateConfig('shadowX', Math.round(v))}
+                />
+              )}
+              {isAdvanced && (
+                <SliderRow
+                  label="Shadow Y"
+                  value={config.shadowY ?? 2}
+                  min={-20}
+                  max={20}
+                  step={1}
+                  unit="px"
+                  onChange={(v) => updateConfig('shadowY', Math.round(v))}
+                />
+              )}
+              {isAdvanced && (
+                <ColorRow
+                  label="Shadow Color"
+                  value={config.shadowColor ?? '#000000'}
+                  onChange={(v) => updateConfig('shadowColor', v)}
+                />
+              )}
+              {isAdvanced && (
+                <SliderRow
+                  label="Shadow Opacity"
+                  value={config.shadowOpacity ?? 0.35}
+                  min={0}
+                  max={1}
+                  step={0.01}
+                  formatValue={(v) => `${Math.round(v * 100)}%`}
+                  onChange={(v) => updateConfig('shadowOpacity', Number(v.toFixed(2)))}
+                />
+              )}
             </Section>
 
             <Section title="Badge Colors" sectionId="global-badge-colors">
@@ -959,112 +487,118 @@ const PropertyPanel: React.FC<Props> = ({
               )}
             </Section>
 
-            <Section
-              title="Score"
-              icon={<Hash size={10} />}
-              defaultOpen={false}
-              sectionId="global-score"
-            >
-              <ToggleRow
-                label="Normalize to /10"
-                sub="Convert all scores to a 0–10 scale"
-                checked={config.normalize ?? false}
-                onChange={(v) => updateConfig('normalize', v)}
-              />
-              <ToggleRow
-                label="Show Denominator"
-                sub="Append /10 to ratings"
-                checked={(config.outOf ?? 0) > 0}
-                onChange={(v) => updateConfig('outOf', v ? 10 : undefined)}
-              />
-            </Section>
+            {isAdvanced && (
+              <Section
+                title="Score"
+                icon={<Hash size={10} />}
+                defaultOpen={false}
+                sectionId="global-score"
+              >
+                <ToggleRow
+                  label="Normalize to /10"
+                  sub="Convert all scores to a 0–10 scale"
+                  checked={config.normalize ?? false}
+                  onChange={(v) => updateConfig('normalize', v)}
+                />
+                <ToggleRow
+                  label="Show Denominator"
+                  sub="Append /10 to ratings"
+                  checked={(config.outOf ?? 0) > 0}
+                  onChange={(v) => updateConfig('outOf', v ? 10 : undefined)}
+                />
+              </Section>
+            )}
 
-            <Section
-              title="Labels"
-              icon={<Type size={10} />}
-              defaultOpen={false}
-              sectionId="global-labels"
-            >
-              {/* Show/Hide Labels toggle */}
-              <button
-                type="button"
-                onClick={() => updateConfig('labelPos', config.labelPos ? undefined : 'below')}
-                className="w-full h-8 rounded-lg text-[11px] font-medium flex items-center justify-center gap-1.5 transition-all active:scale-95 syne-font mb-1"
-                style={{
-                  background: config.labelPos ? 'rgba(196,124,46,0.1)' : 'rgba(255,255,255,0.02)',
-                  color: config.labelPos ? 'var(--film-pale)' : 'var(--film-text-dim)',
-                  border: config.labelPos
-                    ? '1px solid rgba(196,124,46,0.22)'
-                    : '1px solid rgba(255,255,255,0.05)',
-                }}
-                onMouseEnter={(e) => {
-                  (e.currentTarget as HTMLElement).style.borderColor = 'rgba(196,124,46,0.35)';
-                  (e.currentTarget as HTMLElement).style.background = config.labelPos
-                    ? 'rgba(196,124,46,0.15)'
-                    : 'rgba(255,255,255,0.05)';
-                }}
-                onMouseLeave={(e) => {
-                  (e.currentTarget as HTMLElement).style.borderColor = config.labelPos
-                    ? 'rgba(196,124,46,0.22)'
-                    : 'rgba(255,255,255,0.05)';
-                  (e.currentTarget as HTMLElement).style.background = config.labelPos
-                    ? 'rgba(196,124,46,0.1)'
-                    : 'rgba(255,255,255,0.02)';
-                }}
+            {isAdvanced && (
+              <Section
+                title="Labels"
+                icon={<Type size={10} />}
+                defaultOpen={false}
+                sectionId="global-labels"
               >
-                {config.labelPos ? (
-                  <Eye size={11} style={{ color: 'var(--film-amber)' }} />
-                ) : (
-                  <EyeOff size={11} style={{ color: 'var(--film-text-dim)' }} />
-                )}
-                {config.labelPos ? 'Labels Visible' : 'Labels Hidden'}
-              </button>
-              <SegmentedRow
-                label="Label Position"
-                options={[
-                  { id: 'above', label: 'Above' },
-                  { id: 'below', label: 'Below' },
-                  { id: 'left', label: 'Left' },
-                  { id: 'right', label: 'Right' },
-                  { id: 'none', label: 'Hide' },
-                ]}
-                value={config.labelPos ?? 'none'}
-                onChange={(v) =>
-                  updateConfig(
-                    'labelPos',
-                    (v === 'none' ? undefined : (v as PosterConfig['labelPos'])) as PosterConfig['labelPos']
-                  )
-                }
-              />
-              <TextInputRow
-                label="Label Text"
-                value={config.labelText ?? ''}
-                placeholder="Default (provider name)"
-                onChange={(v) => updateConfig('labelText', v || undefined)}
-                onClear={() => updateConfig('labelText', undefined)}
-              />
-              <SliderRow
-                label="Label Size"
-                value={config.labelSize ?? 11}
-                min={6}
-                max={32}
-                step={1}
-                unit="px"
-                onChange={(v) => updateConfig('labelSize', v)}
-              />
-              <ColorRow
-                label="Label Color"
-                value={config.labelColor ?? '#ffffff'}
-                onChange={(v) => updateConfig('labelColor', v)}
-                onReset={
-                  config.labelColor ? () => updateConfig('labelColor', undefined) : undefined
-                }
-              />
-            </Section>
+                {/* Show/Hide Labels toggle */}
+                <button
+                  type="button"
+                  onClick={() => updateConfig('labelPos', config.labelPos ? undefined : 'below')}
+                  className="w-full h-8 rounded-lg text-[11px] font-medium flex items-center justify-center gap-1.5 transition-all active:scale-95 syne-font mb-1"
+                  style={{
+                    background: config.labelPos ? 'rgba(196,124,46,0.1)' : 'rgba(255,255,255,0.02)',
+                    color: config.labelPos ? 'var(--film-pale)' : 'var(--film-text-dim)',
+                    border: config.labelPos
+                      ? '1px solid rgba(196,124,46,0.22)'
+                      : '1px solid rgba(255,255,255,0.05)',
+                  }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLElement).style.borderColor = 'rgba(196,124,46,0.35)';
+                    (e.currentTarget as HTMLElement).style.background = config.labelPos
+                      ? 'rgba(196,124,46,0.15)'
+                      : 'rgba(255,255,255,0.05)';
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLElement).style.borderColor = config.labelPos
+                      ? 'rgba(196,124,46,0.22)'
+                      : 'rgba(255,255,255,0.05)';
+                    (e.currentTarget as HTMLElement).style.background = config.labelPos
+                      ? 'rgba(196,124,46,0.1)'
+                      : 'rgba(255,255,255,0.02)';
+                  }}
+                >
+                  {config.labelPos ? (
+                    <Eye size={11} style={{ color: 'var(--film-amber)' }} />
+                  ) : (
+                    <EyeOff size={11} style={{ color: 'var(--film-text-dim)' }} />
+                  )}
+                  {config.labelPos ? 'Labels Visible' : 'Labels Hidden'}
+                </button>
+                <SegmentedRow
+                  label="Label Position"
+                  options={[
+                    { id: 'above', label: 'Above' },
+                    { id: 'below', label: 'Below' },
+                    { id: 'left', label: 'Left' },
+                    { id: 'right', label: 'Right' },
+                    { id: 'none', label: 'Hide' },
+                  ]}
+                  value={config.labelPos ?? 'none'}
+                  onChange={(v) =>
+                    updateConfig(
+                      'labelPos',
+                      (v === 'none'
+                        ? undefined
+                        : (v as PosterConfig['labelPos'])) as PosterConfig['labelPos']
+                    )
+                  }
+                />
+                <TextInputRow
+                  label="Label Text"
+                  value={config.labelText ?? ''}
+                  placeholder="Default (provider name)"
+                  onChange={(v) => updateConfig('labelText', v || undefined)}
+                  onClear={() => updateConfig('labelText', undefined)}
+                />
+                <SliderRow
+                  label="Label Size"
+                  value={config.labelSize ?? 11}
+                  min={6}
+                  max={32}
+                  step={1}
+                  unit="px"
+                  onChange={(v) => updateConfig('labelSize', v)}
+                />
+                <ColorRow
+                  label="Label Color"
+                  value={config.labelColor ?? '#ffffff'}
+                  onChange={(v) => updateConfig('labelColor', v)}
+                  onReset={
+                    config.labelColor ? () => updateConfig('labelColor', undefined) : undefined
+                  }
+                />
+              </Section>
+            )}
           </>
         )}
 
-        {showTitleDefaults && (
+        {isAdvanced && showTitleDefaults && (
           <Section title="Title Layer" icon={<Type size={10} />} sectionId="global-title-layer">
             <SliderRow
               label="Container Width"
@@ -1131,121 +665,121 @@ const PropertyPanel: React.FC<Props> = ({
               icon={<ImagePlay size={10} />}
               sectionId="global-logo-overlay"
             >
-            <SliderRow
-              label="Size"
-              value={config.logoW}
-              min={100}
-              max={490}
-              unit="px"
-              onChange={(newW) => {
-                const w = Math.round(newW);
-                const h = Math.round(w / LOGO_ASPECT);
-                setConfig((prev) => ({ ...prev, logoW: w, logoH: h }));
-              }}
-            />
-            <SliderRow
-              label="Opacity"
-              value={config.logoOpacity}
-              min={0}
-              max={1}
-              step={0.05}
-              formatValue={(v) => `${Math.round(v * 100)}%`}
-              onChange={(v) => updateConfig('logoOpacity', v)}
-            />
-            <SliderRow
-              label="Drop Shadow"
-              value={config.logoShadow}
-              min={0}
-              max={30}
-              onChange={(v) => updateConfig('logoShadow', v)}
-            />
-            <ToggleRow
-              label="Background"
-              sub="Add a styled panel behind the logo"
-              checked={config.logoBgEnabled}
-              onChange={(v) => updateConfig('logoBgEnabled', v)}
-            />
-            <SliderRow
-              label="Border Width"
-              value={config.logoBgBorderW}
-              min={0}
-              max={10}
-              unit="px"
-              onChange={(v) => updateConfig('logoBgBorderW', v)}
-            />
-            {config.logoBgBorderW > 0 && (
-              <ColorRow
-                label="Border Color"
-                value={config.logoBgBorderC ?? '#ffffff'}
-                onChange={(v) => updateConfig('logoBgBorderC', v)}
+              <SliderRow
+                label="Size"
+                value={config.logoW}
+                min={100}
+                max={490}
+                unit="px"
+                onChange={(newW) => {
+                  const w = Math.round(newW);
+                  const h = Math.round(w / LOGO_ASPECT);
+                  setConfig((prev) => ({ ...prev, logoW: w, logoH: h }));
+                }}
               />
-            )}
-            {config.logoBgEnabled && (
-              <>
-                <ColorRow
-                  label="Background Color"
-                  value={config.logoBgColor ?? '#000000'}
-                  onChange={(v) => updateConfig('logoBgColor', v)}
-                  showOpacity
-                  opacity={config.logoBgOpacity}
-                  onOpacityChange={(v) => updateConfig('logoBgOpacity', v)}
-                />
-                <SliderRow
-                  label="Padding"
-                  value={config.logoBgPadding}
-                  min={0}
-                  max={48}
-                  unit="px"
-                  onChange={(v) => updateConfig('logoBgPadding', v)}
-                />
-                <SliderRow
-                  label="Background Shadow"
-                  value={config.logoBgShadow}
-                  min={0}
-                  max={30}
-                  onChange={(v) => updateConfig('logoBgShadow', v)}
-                />
-                <button
-                  type="button"
-                  onClick={() =>
-                    setConfig((prev) => ({
-                      ...prev,
-                      logoBgEnabled: true,
-                      logoBgColor: prev.bg ?? '#000000',
-                      logoBgOpacity: prev.alpha,
-                      logoBgRadius: prev.radius,
-                      logoBgPadding: 10,
-                      logoBgBorderW: prev.borderW ?? 0,
-                      logoBgBorderC: prev.borderC ?? '#ffffff',
-                      logoBgShadow: resolveShadow(prev.shadow, 6),
-                    }))
-                  }
-                  className="w-full h-8 rounded-lg text-[11px] font-medium transition-all active:scale-[0.98] flex items-center justify-center gap-2 cursor-pointer syne-font"
-                  style={{
-                    border: '1px solid rgba(196,124,46,0.16)',
-                    background: 'rgba(196,124,46,0.08)',
-                    color: 'var(--film-pale)',
-                    letterSpacing: '0.04em',
-                  }}
-                >
-                  Apply Badge Style to Logo Background
-                </button>
-              </>
-            )}
-            <SliderRow
-              label="Border Radius"
-              value={config.logoBgRadius}
-              min={0}
-              max={40}
-              unit="px"
-              onChange={(v) => updateConfig('logoBgRadius', v)}
-            />
-            <p
-              className="body-font leading-relaxed"
-              style={{ fontSize: 9, color: 'var(--film-text-dim)' }}
-            >
-              Drag the logo on the canvas to reposition it.
-            </p>
+              <SliderRow
+                label="Opacity"
+                value={config.logoOpacity}
+                min={0}
+                max={1}
+                step={0.05}
+                formatValue={(v) => `${Math.round(v * 100)}%`}
+                onChange={(v) => updateConfig('logoOpacity', v)}
+              />
+              <SliderRow
+                label="Drop Shadow"
+                value={config.logoShadow}
+                min={0}
+                max={30}
+                onChange={(v) => updateConfig('logoShadow', v)}
+              />
+              <ToggleRow
+                label="Background"
+                sub="Add a styled panel behind the logo"
+                checked={config.logoBgEnabled}
+                onChange={(v) => updateConfig('logoBgEnabled', v)}
+              />
+              <SliderRow
+                label="Border Width"
+                value={config.logoBgBorderW}
+                min={0}
+                max={10}
+                unit="px"
+                onChange={(v) => updateConfig('logoBgBorderW', v)}
+              />
+              {config.logoBgBorderW > 0 && (
+                <ColorRow
+                  label="Border Color"
+                  value={config.logoBgBorderC ?? '#ffffff'}
+                  onChange={(v) => updateConfig('logoBgBorderC', v)}
+                />
+              )}
+              {config.logoBgEnabled && (
+                <>
+                  <ColorRow
+                    label="Background Color"
+                    value={config.logoBgColor ?? '#000000'}
+                    onChange={(v) => updateConfig('logoBgColor', v)}
+                    showOpacity
+                    opacity={config.logoBgOpacity}
+                    onOpacityChange={(v) => updateConfig('logoBgOpacity', v)}
+                  />
+                  <SliderRow
+                    label="Padding"
+                    value={config.logoBgPadding}
+                    min={0}
+                    max={48}
+                    unit="px"
+                    onChange={(v) => updateConfig('logoBgPadding', v)}
+                  />
+                  <SliderRow
+                    label="Background Shadow"
+                    value={config.logoBgShadow}
+                    min={0}
+                    max={30}
+                    onChange={(v) => updateConfig('logoBgShadow', v)}
+                  />
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setConfig((prev) => ({
+                        ...prev,
+                        logoBgEnabled: true,
+                        logoBgColor: prev.bg ?? '#000000',
+                        logoBgOpacity: prev.alpha,
+                        logoBgRadius: prev.radius,
+                        logoBgPadding: 10,
+                        logoBgBorderW: prev.borderW ?? 0,
+                        logoBgBorderC: prev.borderC ?? '#ffffff',
+                        logoBgShadow: resolveShadow(prev.shadow, 6),
+                      }))
+                    }
+                    className="w-full h-8 rounded-lg text-[11px] font-medium transition-all active:scale-[0.98] flex items-center justify-center gap-2 cursor-pointer syne-font"
+                    style={{
+                      border: '1px solid rgba(196,124,46,0.16)',
+                      background: 'rgba(196,124,46,0.08)',
+                      color: 'var(--film-pale)',
+                      letterSpacing: '0.04em',
+                    }}
+                  >
+                    Apply Badge Style to Logo Background
+                  </button>
+                </>
+              )}
+              <SliderRow
+                label="Border Radius"
+                value={config.logoBgRadius}
+                min={0}
+                max={40}
+                unit="px"
+                onChange={(v) => updateConfig('logoBgRadius', v)}
+              />
+              <p
+                className="body-font leading-relaxed"
+                style={{ fontSize: 9, color: 'var(--film-text-dim)' }}
+              >
+                Drag the logo on the canvas to reposition it.
+              </p>
             </Section>
           </div>
         )}
@@ -1299,7 +833,8 @@ const PropertyPanel: React.FC<Props> = ({
   const isTitleOrYearOnlySelection = isOnlyTitleSelected || isOnlyYearSelected;
   const multi = selectionCount > 1;
   const selectedBadgeLabel = (() => {
-    if (selectedLogo && selectedIds.size === 0 && selectedMinimalElements.size === 0) return 'Logo Overlay';
+    if (selectedLogo && selectedIds.size === 0 && selectedMinimalElements.size === 0)
+      return 'Logo Overlay';
     if (selectedMinimalElements.size > 0 && selectedIds.size === 0 && !selectedLogo) {
       if (selectedMinimalElements.size > 1) return 'Minimal Selection';
       const only = Array.from(selectedMinimalElements)[0];
@@ -1307,7 +842,8 @@ const PropertyPanel: React.FC<Props> = ({
       if (only === 'minimal-year') return 'Year';
       if (only === 'minimal-duration') return 'Duration';
       if (only === 'minimal-logo') return 'Logo Overlay';
-      if (only.startsWith('minimal-rating-')) return `Rating Slot ${Number(only.split('-').at(-1) ?? 0) + 1}`;
+      if (only.startsWith('minimal-rating-'))
+        return `Rating Slot ${Number(only.split('-').pop() ?? 0) + 1}`;
     }
     const first = Array.from(selectedIds)[0];
     if (!first) return 'Selection';
@@ -1322,8 +858,12 @@ const PropertyPanel: React.FC<Props> = ({
     (getCommonValue('shadow', 6) as number | boolean | null) ?? 6,
     6
   );
-  const commonShadowX = (getCommonValue('shadowX', config.shadowX ?? 0) ?? config.shadowX ?? 0) as number;
-  const commonShadowY = (getCommonValue('shadowY', config.shadowY ?? 2) ?? config.shadowY ?? 2) as number;
+  const commonShadowX = (getCommonValue('shadowX', config.shadowX ?? 0) ??
+    config.shadowX ??
+    0) as number;
+  const commonShadowY = (getCommonValue('shadowY', config.shadowY ?? 2) ??
+    config.shadowY ??
+    2) as number;
   const commonShadowOpacity = (getCommonValue('shadowOpacity', config.shadowOpacity ?? 0.35) ??
     config.shadowOpacity ??
     0.35) as number;
@@ -1399,7 +939,8 @@ const PropertyPanel: React.FC<Props> = ({
   const commonTextShadowX = (getCommonValue('textShadowX', 0) ?? 0) as number;
   const commonTextShadowY = (getCommonValue('textShadowY', 2) ?? 2) as number;
   const commonTextShadowBlur = (getCommonValue('textShadowBlur', 8) ?? 8) as number;
-  const commonTextShadowColor = (getCommonValue('textShadowColor', '#000000') ?? '#000000') as string;
+  const commonTextShadowColor = (getCommonValue('textShadowColor', '#000000') ??
+    '#000000') as string;
 
   return (
     <SidebarLayout side="right" bodyClassName="pb-24">
@@ -1440,7 +981,9 @@ const PropertyPanel: React.FC<Props> = ({
                     onChange={(v) => updateConfig('minimalTitleColor', v)}
                     showOpacity
                     opacity={config.minimalTitleOpacity ?? 1}
-                    onOpacityChange={(v) => updateConfig('minimalTitleOpacity', Number(v.toFixed(2)))}
+                    onOpacityChange={(v) =>
+                      updateConfig('minimalTitleOpacity', Number(v.toFixed(2)))
+                    }
                   />
                 </>
               )}
@@ -1461,7 +1004,9 @@ const PropertyPanel: React.FC<Props> = ({
                     onChange={(v) => updateConfig('minimalMetaColor', v)}
                     showOpacity
                     opacity={config.minimalMetaOpacity ?? 0.92}
-                    onOpacityChange={(v) => updateConfig('minimalMetaOpacity', Number(v.toFixed(2)))}
+                    onOpacityChange={(v) =>
+                      updateConfig('minimalMetaOpacity', Number(v.toFixed(2)))
+                    }
                   />
                 </>
               )}
@@ -1472,372 +1017,393 @@ const PropertyPanel: React.FC<Props> = ({
 
       {selectedIds.size > 0 && (
         <>
-      {isTitleOrYearOnlySelection && (
-        <Section title="Typography" icon={<Type size={10} />} sectionId="badge-typography">
-          {isOnlyTitleSelected && (
+          {isTitleOrYearOnlySelection && (
+            <Section title="Typography" icon={<Type size={10} />} sectionId="badge-typography">
+              {isOnlyTitleSelected && (
+                <SliderRow
+                  label="Font Size"
+                  value={commonTextSize}
+                  min={10}
+                  max={120}
+                  step={1}
+                  unit="px"
+                  onChange={(v) => updateSelectedBadges({ textSize: Math.round(v) })}
+                  onReset={() => updateSelectedBadges({ textSize: 36 })}
+                />
+              )}
+              {isOnlyTitleSelected && (
+                <SliderRow
+                  label="Container Width"
+                  value={Math.max(4, Math.round(commonTextCharWidth))}
+                  min={4}
+                  max={80}
+                  step={1}
+                  unit="ch"
+                  onChange={(v) => updateSelectedBadges({ textCharWidth: Math.round(v) })}
+                  onReset={() =>
+                    updateSelectedBadges({
+                      textCharWidth: DEFAULT_CONFIG.items.title?.textCharWidth ?? 24,
+                    })
+                  }
+                />
+              )}
+              {isOnlyTitleSelected && (
+                <SliderRow
+                  label="Container Height"
+                  value={Math.max(1, Math.round(commonTextCharHeight))}
+                  min={1}
+                  max={12}
+                  step={1}
+                  unit="ln"
+                  onChange={(v) => updateSelectedBadges({ textCharHeight: Math.round(v) })}
+                  onReset={() =>
+                    updateSelectedBadges({
+                      textCharHeight: DEFAULT_CONFIG.items.title?.textCharHeight ?? 1,
+                    })
+                  }
+                />
+              )}
+              <SliderRow
+                label="Font Weight"
+                value={commonTextWeight}
+                min={100}
+                max={900}
+                step={100}
+                onChange={(v) => updateSelectedBadges({ textWeight: Math.round(v) })}
+                onReset={() => updateSelectedBadges({ textWeight: 700 })}
+              />
+              <SliderRow
+                label="Line Height"
+                value={commonTextLineHeight}
+                min={0.8}
+                max={2}
+                step={0.02}
+                onChange={(v) => updateSelectedBadges({ textLineHeight: Number(v.toFixed(2)) })}
+                onReset={() => updateSelectedBadges({ textLineHeight: 1.1 })}
+              />
+              <SliderRow
+                label="Letter Spacing"
+                value={commonTextLetterSpacing}
+                min={-2}
+                max={8}
+                step={0.1}
+                unit="px"
+                onChange={(v) => updateSelectedBadges({ textLetterSpacing: Number(v.toFixed(1)) })}
+                onReset={() =>
+                  updateSelectedBadges({ textLetterSpacing: isOnlyTitleSelected ? 0.2 : 0 })
+                }
+              />
+              <SegmentedRow
+                label="Text Align"
+                options={[
+                  { id: 'left', label: 'Left' },
+                  { id: 'center', label: 'Center' },
+                  { id: 'right', label: 'Right' },
+                ]}
+                value={commonTextAlign}
+                onChange={(v) => updateSelectedBadges({ textAlign: v as BadgeConfig['textAlign'] })}
+              />
+              {isOnlyTitleSelected && (
+                <SliderRow
+                  label="Ellipsis Cutoff"
+                  value={commonTextMaxChars}
+                  min={0}
+                  max={300}
+                  step={1}
+                  unit="ch"
+                  formatValue={(v) => (v <= 0 ? 'Full' : `${Math.round(v)} ch`)}
+                  onChange={(v) => updateSelectedBadges({ textMaxChars: Math.round(v) })}
+                  onReset={() => updateSelectedBadges({ textMaxChars: 0 })}
+                />
+              )}
+              {isOnlyTitleSelected && (
+                <ToggleRow
+                  label="Auto Wrap"
+                  sub="Wrap based on character width/height"
+                  checked={commonTextWrapEnabled}
+                  onChange={(v) => updateSelectedBadges({ textWrapEnabled: v })}
+                />
+              )}
+              <ToggleRow
+                label="Text Shadow"
+                checked={commonTextShadowEnabled}
+                onChange={(v) => updateSelectedBadges({ textShadowEnabled: v })}
+              />
+              {commonTextShadowEnabled && (
+                <>
+                  <SliderRow
+                    label="Shadow X"
+                    value={commonTextShadowX}
+                    min={-20}
+                    max={20}
+                    step={1}
+                    unit="px"
+                    onChange={(v) => updateSelectedBadges({ textShadowX: Math.round(v) })}
+                  />
+                  <SliderRow
+                    label="Shadow Y"
+                    value={commonTextShadowY}
+                    min={-20}
+                    max={20}
+                    step={1}
+                    unit="px"
+                    onChange={(v) => updateSelectedBadges({ textShadowY: Math.round(v) })}
+                  />
+                  <SliderRow
+                    label="Shadow Blur"
+                    value={commonTextShadowBlur}
+                    min={0}
+                    max={40}
+                    step={1}
+                    unit="px"
+                    onChange={(v) => updateSelectedBadges({ textShadowBlur: Math.round(v) })}
+                  />
+                  <ColorRow
+                    label="Shadow Color"
+                    value={commonTextShadowColor}
+                    onChange={(v) => updateSelectedBadges({ textShadowColor: v })}
+                  />
+                </>
+              )}
+            </Section>
+          )}
+          {/* Transform ── scale */}
+          {!isOnlyTitleSelected && (
+            <Section title="Transform" sectionId="badge-transform">
+              <SliderRow
+                label={isOnlyYearSelected ? 'Layer Width' : 'Scale'}
+                value={commonScale}
+                min={0.5}
+                max={2.0}
+                step={0.05}
+                formatValue={(v) => `${v.toFixed(2)}×`}
+                onChange={(v) => updateSelectedBadges({ scale: v })}
+                onReset={
+                  commonScale !== 1.0 ? () => updateSelectedBadges({ scale: 1.0 }) : undefined
+                }
+              />
+            </Section>
+          )}
+
+          {/* Shape ── blur, radius, shadow, border */}
+          <Section
+            title={isTitleOrYearOnlySelection ? 'Container' : 'Shape'}
+            sectionId="badge-shape"
+          >
             <SliderRow
-              label="Font Size"
-              value={commonTextSize}
-              min={10}
-              max={120}
-              step={1}
+              label="Glass Blur"
+              value={commonBlur}
+              min={0}
+              max={20}
               unit="px"
-              onChange={(v) => updateSelectedBadges({ textSize: Math.round(v) })}
-              onReset={() => updateSelectedBadges({ textSize: 36 })}
+              onChange={(v) => updateSelectedBadges({ blur: v })}
+              onReset={commonBlur !== 0 ? () => updateSelectedBadges({ blur: 0 }) : undefined}
             />
-          )}
-          {isOnlyTitleSelected && (
             <SliderRow
-              label="Container Width"
-              value={Math.max(4, Math.round(commonTextCharWidth))}
-              min={4}
-              max={80}
+              label="Corner Radius"
+              value={commonRadius}
+              min={0}
+              max={30}
+              unit="px"
+              onChange={(v) => updateSelectedBadges({ radius: v })}
+            />
+            <SliderRow
+              label="Drop Shadow"
+              value={commonShadow}
+              min={0}
+              max={30}
+              onChange={(v) => updateSelectedBadges({ shadow: v })}
+              onReset={commonShadow !== 6 ? () => updateSelectedBadges({ shadow: 6 }) : undefined}
+            />
+            <SliderRow
+              label="Shadow X"
+              value={commonShadowX}
+              min={-20}
+              max={20}
               step={1}
-              unit="ch"
-              onChange={(v) => updateSelectedBadges({ textCharWidth: Math.round(v) })}
-              onReset={() =>
-                updateSelectedBadges({
-                  textCharWidth: DEFAULT_CONFIG.items.title?.textCharWidth ?? 24,
-                })
-              }
+              unit="px"
+              onChange={(v) => updateSelectedBadges({ shadowX: Math.round(v) })}
             />
-          )}
-          {isOnlyTitleSelected && (
             <SliderRow
-              label="Container Height"
-              value={Math.max(1, Math.round(commonTextCharHeight))}
-              min={1}
-              max={12}
+              label="Shadow Y"
+              value={commonShadowY}
+              min={-20}
+              max={20}
               step={1}
-              unit="ln"
-              onChange={(v) => updateSelectedBadges({ textCharHeight: Math.round(v) })}
-              onReset={() =>
-                updateSelectedBadges({
-                  textCharHeight: DEFAULT_CONFIG.items.title?.textCharHeight ?? 1,
-                })
-              }
+              unit="px"
+              onChange={(v) => updateSelectedBadges({ shadowY: Math.round(v) })}
+            />
+            <ColorRow
+              label="Shadow Color"
+              value={commonShadowColor}
+              onChange={(v) => updateSelectedBadges({ shadowColor: v })}
             />
-          )}
-          <SliderRow
-            label="Font Weight"
-            value={commonTextWeight}
-            min={100}
-            max={900}
-            step={100}
-            onChange={(v) => updateSelectedBadges({ textWeight: Math.round(v) })}
-            onReset={() => updateSelectedBadges({ textWeight: 700 })}
-          />
-          <SliderRow
-            label="Line Height"
-            value={commonTextLineHeight}
-            min={0.8}
-            max={2}
-            step={0.02}
-            onChange={(v) => updateSelectedBadges({ textLineHeight: Number(v.toFixed(2)) })}
-            onReset={() => updateSelectedBadges({ textLineHeight: 1.1 })}
-          />
-          <SliderRow
-            label="Letter Spacing"
-            value={commonTextLetterSpacing}
-            min={-2}
-            max={8}
-            step={0.1}
-            unit="px"
-            onChange={(v) => updateSelectedBadges({ textLetterSpacing: Number(v.toFixed(1)) })}
-            onReset={() => updateSelectedBadges({ textLetterSpacing: isOnlyTitleSelected ? 0.2 : 0 })}
-          />
-          <SegmentedRow
-            label="Text Align"
-            options={[
-              { id: 'left', label: 'Left' },
-              { id: 'center', label: 'Center' },
-              { id: 'right', label: 'Right' },
-            ]}
-            value={commonTextAlign}
-            onChange={(v) => updateSelectedBadges({ textAlign: v as BadgeConfig['textAlign'] })}
-          />
-          {isOnlyTitleSelected && (
             <SliderRow
-              label="Ellipsis Cutoff"
-              value={commonTextMaxChars}
+              label="Shadow Opacity"
+              value={commonShadowOpacity}
               min={0}
-              max={300}
-              step={1}
-              unit="ch"
-              formatValue={(v) => (v <= 0 ? 'Full' : `${Math.round(v)} ch`)}
-              onChange={(v) => updateSelectedBadges({ textMaxChars: Math.round(v) })}
-              onReset={() => updateSelectedBadges({ textMaxChars: 0 })}
+              max={1}
+              step={0.01}
+              formatValue={(v) => `${Math.round(v * 100)}%`}
+              onChange={(v) => updateSelectedBadges({ shadowOpacity: Number(v.toFixed(2)) })}
             />
-          )}
-          {isOnlyTitleSelected && (
-            <ToggleRow
-              label="Auto Wrap"
-              sub="Wrap based on character width/height"
-              checked={commonTextWrapEnabled}
-              onChange={(v) => updateSelectedBadges({ textWrapEnabled: v })}
+            <SliderRow
+              label="Border Width"
+              value={commonBorderW}
+              min={0}
+              max={10}
+              unit="px"
+              onChange={(v) => updateSelectedBadges({ borderW: v })}
             />
+            {commonBorderW > 0 && (
+              <ColorRow
+                label="Border Color"
+                value={commonBorderC}
+                onChange={(v) => updateSelectedBadges({ borderC: v })}
+                onReset={() => clearSelectedBadgeProp('borderC')}
+              />
+            )}
+          </Section>
+
+          {/* Colors ── fill + text */}
+          <Section
+            title={isTitleOrYearOnlySelection ? 'Text & Colors' : 'Colors'}
+            sectionId="badge-colors"
+          >
+            <ColorRow
+              label="Background"
+              value={commonBg}
+              onChange={(v) => updateSelectedBadges({ bg: v })}
+              onReset={() => clearSelectedBadgeProp('bg')}
+              showOpacity
+              opacity={commonAlpha}
+              onOpacityChange={(v) => updateSelectedBadges({ alpha: v })}
+            />
+            <ColorRow
+              label={isTitleOrYearOnlySelection ? 'Text Color' : 'Text & Icon Color'}
+              value={commonTxt}
+              onChange={(v) => updateSelectedBadges({ txt: v })}
+              onReset={() => clearSelectedBadgeProp('txt')}
+            />
+          </Section>
+
+          {/* Visibility ── icons, text, icon variant */}
+          {!isTitleOrYearOnlySelection && (
+            <Section title="Visibility" icon={<Eye size={10} />} sectionId="badge-visibility">
+              {!isAgeSelected && (
+                <ToggleRow
+                  label="Show Icon"
+                  checked={
+                    ((getCommonValue('icon', config.icon ?? true) as boolean | null) ??
+                      config.icon ??
+                      true) as boolean
+                  }
+                  onChange={(v) => updateSelectedBadges({ icon: v })}
+                />
+              )}
+              <ToggleRow
+                label="Show Rating Text"
+                sub="Hide number, show icon only"
+                checked={commonShowText !== false}
+                onChange={(v) => updateSelectedBadges({ showText: v })}
+              />
+              <SegmentedRow
+                label="Icon Style"
+                options={[
+                  { id: '1', label: 'Default' },
+                  { id: '2', label: 'Alt' },
+                  { id: '3', label: 'Mono' },
+                ]}
+                value={String(Math.max(1, Math.min(3, commonIconType)))}
+                onChange={(v) =>
+                  updateSelectedBadges({ iconType: Math.max(1, Math.min(3, Number(v) || 1)) })
+                }
+              />
+            </Section>
           )}
-          <ToggleRow
-            label="Text Shadow"
-            checked={commonTextShadowEnabled}
-            onChange={(v) => updateSelectedBadges({ textShadowEnabled: v })}
-          />
-          {commonTextShadowEnabled && (
-            <>
-              <SliderRow
-                label="Shadow X"
-                value={commonTextShadowX}
-                min={-20}
-                max={20}
-                step={1}
-                unit="px"
-                onChange={(v) => updateSelectedBadges({ textShadowX: Math.round(v) })}
+
+          {/* Score ── normalize + denominator */}
+          {!isTitleOrYearOnlySelection && isAdvanced && (
+            <Section
+              title="Score"
+              icon={<Hash size={10} />}
+              defaultOpen={false}
+              sectionId="badge-score"
+            >
+              <ToggleRow
+                label="Normalize to /10"
+                sub="Convert score to a 0–10 scale"
+                checked={commonNorm}
+                onChange={(v) => updateSelectedBadges({ normalize: v })}
               />
-              <SliderRow
-                label="Shadow Y"
-                value={commonTextShadowY}
-                min={-20}
-                max={20}
-                step={1}
-                unit="px"
-                onChange={(v) => updateSelectedBadges({ textShadowY: Math.round(v) })}
+              <ToggleRow
+                label="Show Denominator"
+                sub="Append /10 to ratings"
+                checked={(commonOutOf ?? 0) > 0}
+                onChange={(v) => updateSelectedBadges({ outOf: v ? 10 : undefined })}
+              />
+            </Section>
+          )}
+
+          {/* Labels ── position, custom text, size, color */}
+          {!isTitleOrYearOnlySelection && isAdvanced && (
+            <Section
+              title="Labels"
+              icon={<Type size={10} />}
+              defaultOpen={false}
+              sectionId="badge-labels"
+            >
+              <SegmentedRow
+                label="Label Position"
+                options={[
+                  { id: 'above', label: 'Above' },
+                  { id: 'below', label: 'Below' },
+                  { id: 'left', label: 'Left' },
+                  { id: 'right', label: 'Right' },
+                  { id: 'none', label: 'Hide' },
+                ]}
+                value={commonLabelPos ?? config.labelPos ?? 'none'}
+                onChange={(v) =>
+                  updateSelectedBadges({
+                    labelPos: (v === 'none' ? undefined : (v as BadgeConfig['labelPos'])) as
+                      | BadgeConfig['labelPos']
+                      | undefined,
+                  })
+                }
+              />
+              <TextInputRow
+                label="Label Text"
+                value={commonLabelTxt ?? ''}
+                placeholder={multi ? '(mixed)' : 'Default (provider name)'}
+                onChange={(v) => updateSelectedBadges({ labelText: v || undefined })}
+                onClear={() => clearSelectedBadgeProp('labelText')}
               />
               <SliderRow
-                label="Shadow Blur"
-                value={commonTextShadowBlur}
-                min={0}
-                max={40}
+                label="Label Size"
+                value={commonLabelSz}
+                min={6}
+                max={32}
                 step={1}
                 unit="px"
-                onChange={(v) => updateSelectedBadges({ textShadowBlur: Math.round(v) })}
+                onChange={(v) => updateSelectedBadges({ labelSize: v })}
               />
               <ColorRow
-                label="Shadow Color"
-                value={commonTextShadowColor}
-                onChange={(v) => updateSelectedBadges({ textShadowColor: v })}
+                label="Label Color"
+                value={commonLabelColor}
+                onChange={(v) => updateSelectedBadges({ labelColor: v })}
+                onReset={() => clearSelectedBadgeProp('labelColor')}
               />
-            </>
+            </Section>
           )}
-        </Section>
-      )}
-      {/* Transform ── scale */}
-      {!isOnlyTitleSelected && (
-      <Section title="Transform" sectionId="badge-transform">
-        <SliderRow
-          label={isOnlyYearSelected ? 'Layer Width' : 'Scale'}
-          value={commonScale}
-          min={0.5}
-          max={2.0}
-          step={0.05}
-          formatValue={(v) => `${v.toFixed(2)}×`}
-          onChange={(v) => updateSelectedBadges({ scale: v })}
-          onReset={commonScale !== 1.0 ? () => updateSelectedBadges({ scale: 1.0 }) : undefined}
-        />
-      </Section>
-      )}
-
-      {/* Shape ── blur, radius, shadow, border */}
-      <Section title={isTitleOrYearOnlySelection ? 'Container' : 'Shape'} sectionId="badge-shape">
-        <SliderRow
-          label="Glass Blur"
-          value={commonBlur}
-          min={0}
-          max={20}
-          unit="px"
-          onChange={(v) => updateSelectedBadges({ blur: v })}
-          onReset={commonBlur !== 0 ? () => updateSelectedBadges({ blur: 0 }) : undefined}
-        />
-        <SliderRow
-          label="Corner Radius"
-          value={commonRadius}
-          min={0}
-          max={30}
-          unit="px"
-          onChange={(v) => updateSelectedBadges({ radius: v })}
-        />
-        <SliderRow
-          label="Drop Shadow"
-          value={commonShadow}
-          min={0}
-          max={30}
-          onChange={(v) => updateSelectedBadges({ shadow: v })}
-          onReset={commonShadow !== 6 ? () => updateSelectedBadges({ shadow: 6 }) : undefined}
-        />
-        <SliderRow
-          label="Shadow X"
-          value={commonShadowX}
-          min={-20}
-          max={20}
-          step={1}
-          unit="px"
-          onChange={(v) => updateSelectedBadges({ shadowX: Math.round(v) })}
-        />
-        <SliderRow
-          label="Shadow Y"
-          value={commonShadowY}
-          min={-20}
-          max={20}
-          step={1}
-          unit="px"
-          onChange={(v) => updateSelectedBadges({ shadowY: Math.round(v) })}
-        />
-        <ColorRow
-          label="Shadow Color"
-          value={commonShadowColor}
-          onChange={(v) => updateSelectedBadges({ shadowColor: v })}
-        />
-        <SliderRow
-          label="Shadow Opacity"
-          value={commonShadowOpacity}
-          min={0}
-          max={1}
-          step={0.01}
-          formatValue={(v) => `${Math.round(v * 100)}%`}
-          onChange={(v) => updateSelectedBadges({ shadowOpacity: Number(v.toFixed(2)) })}
-        />
-        <SliderRow
-          label="Border Width"
-          value={commonBorderW}
-          min={0}
-          max={10}
-          unit="px"
-          onChange={(v) => updateSelectedBadges({ borderW: v })}
-        />
-        {commonBorderW > 0 && (
-          <ColorRow
-            label="Border Color"
-            value={commonBorderC}
-            onChange={(v) => updateSelectedBadges({ borderC: v })}
-            onReset={() => clearSelectedBadgeProp('borderC')}
-          />
-        )}
-      </Section>
-
-      {/* Colors ── fill + text */}
-      <Section title={isTitleOrYearOnlySelection ? 'Text & Colors' : 'Colors'} sectionId="badge-colors">
-        <ColorRow
-          label="Background"
-          value={commonBg}
-          onChange={(v) => updateSelectedBadges({ bg: v })}
-          onReset={() => clearSelectedBadgeProp('bg')}
-          showOpacity
-          opacity={commonAlpha}
-          onOpacityChange={(v) => updateSelectedBadges({ alpha: v })}
-        />
-        <ColorRow
-          label={isTitleOrYearOnlySelection ? 'Text Color' : 'Text & Icon Color'}
-          value={commonTxt}
-          onChange={(v) => updateSelectedBadges({ txt: v })}
-          onReset={() => clearSelectedBadgeProp('txt')}
-        />
-      </Section>
-
-      {/* Visibility ── icons, text, icon variant */}
-      {!isTitleOrYearOnlySelection && (
-      <Section title="Visibility" icon={<Eye size={10} />} sectionId="badge-visibility">
-        {!isAgeSelected && (
-          <ToggleRow
-            label="Show Icon"
-            checked={
-              ((getCommonValue('icon', config.icon ?? true) as boolean | null) ??
-                config.icon ??
-                true) as boolean
-            }
-            onChange={(v) => updateSelectedBadges({ icon: v })}
-          />
-        )}
-        <ToggleRow
-          label="Show Rating Text"
-          sub="Hide number, show icon only"
-          checked={commonShowText !== false}
-          onChange={(v) => updateSelectedBadges({ showText: v })}
-        />
-        <SegmentedRow
-          label="Icon Style"
-          options={[
-            { id: '1', label: 'Default' },
-            { id: '2', label: 'Alt' },
-            { id: '3', label: 'Mono' },
-          ]}
-          value={String(Math.max(1, Math.min(3, commonIconType)))}
-          onChange={(v) => updateSelectedBadges({ iconType: Math.max(1, Math.min(3, Number(v) || 1)) })}
-        />
-      </Section>
-      )}
-
-      {/* Score ── normalize + denominator */}
-      {!isTitleOrYearOnlySelection && (
-      <Section title="Score" icon={<Hash size={10} />} defaultOpen={false} sectionId="badge-score">
-        <ToggleRow
-          label="Normalize to /10"
-          sub="Convert score to a 0–10 scale"
-          checked={commonNorm}
-          onChange={(v) => updateSelectedBadges({ normalize: v })}
-        />
-        <ToggleRow
-          label="Show Denominator"
-          sub="Append /10 to ratings"
-          checked={(commonOutOf ?? 0) > 0}
-          onChange={(v) => updateSelectedBadges({ outOf: v ? 10 : undefined })}
-        />
-      </Section>
-      )}
-
-      {/* Labels ── position, custom text, size, color */}
-      {!isTitleOrYearOnlySelection && (
-      <Section
-        title="Labels"
-        icon={<Type size={10} />}
-        defaultOpen={false}
-        sectionId="badge-labels"
-      >
-        <SegmentedRow
-          label="Label Position"
-          options={[
-            { id: 'above', label: 'Above' },
-            { id: 'below', label: 'Below' },
-            { id: 'left', label: 'Left' },
-            { id: 'right', label: 'Right' },
-            { id: 'none', label: 'Hide' },
-          ]}
-          value={commonLabelPos ?? config.labelPos ?? 'none'}
-          onChange={(v) =>
-            updateSelectedBadges({
-              labelPos: (v === 'none' ? undefined : (v as BadgeConfig['labelPos'])) as
-                | BadgeConfig['labelPos']
-                | undefined,
-            })
-          }
-        />
-        <TextInputRow
-          label="Label Text"
-          value={commonLabelTxt ?? ''}
-          placeholder={multi ? '(mixed)' : 'Default (provider name)'}
-          onChange={(v) => updateSelectedBadges({ labelText: v || undefined })}
-          onClear={() => clearSelectedBadgeProp('labelText')}
-        />
-        <SliderRow
-          label="Label Size"
-          value={commonLabelSz}
-          min={6}
-          max={32}
-          step={1}
-          unit="px"
-          onChange={(v) => updateSelectedBadges({ labelSize: v })}
-        />
-        <ColorRow
-          label="Label Color"
-          value={commonLabelColor}
-          onChange={(v) => updateSelectedBadges({ labelColor: v })}
-          onReset={() => clearSelectedBadgeProp('labelColor')}
-        />
-      </Section>
-      )}
-      </>
+        </>
       )}
 
       {selectedLogo && config.logo && (
-        <Section title="Logo Overlay" icon={<ImagePlay size={10} />} sectionId="selection-logo-overlay">
+        <Section
+          title="Logo Overlay"
+          icon={<ImagePlay size={10} />}
+          sectionId="selection-logo-overlay"
+        >
           <SliderRow
             label="Size"
             value={config.logoW}
@@ -1952,54 +1518,54 @@ const PropertyPanel: React.FC<Props> = ({
 
       {/* Reset */}
       {(selectedIds.size > 0 || selectedLogo) && (
-      <div className="px-3 pt-3">
-        <button
-          type="button"
-          onClick={() =>
-            setConfig((prev) => {
-              const ni = { ...prev.items };
-              selectedIds.forEach((id) => delete ni[id]);
-              if (!selectedLogo) return { ...prev, items: ni };
-              return {
-                ...prev,
-                items: ni,
-                logoX: DEFAULT_CONFIG.logoX,
-                logoY: DEFAULT_CONFIG.logoY,
-                logoW: DEFAULT_CONFIG.logoW,
-                logoH: DEFAULT_CONFIG.logoH,
-                logoOpacity: DEFAULT_CONFIG.logoOpacity,
-                logoZ: DEFAULT_CONFIG.logoZ,
-                logoShadow: DEFAULT_CONFIG.logoShadow,
-                logoBgEnabled: DEFAULT_CONFIG.logoBgEnabled,
-                logoBgColor: DEFAULT_CONFIG.logoBgColor,
-                logoBgOpacity: DEFAULT_CONFIG.logoBgOpacity,
-                logoBgRadius: DEFAULT_CONFIG.logoBgRadius,
-                logoBgPadding: DEFAULT_CONFIG.logoBgPadding,
-                logoBgBorderW: DEFAULT_CONFIG.logoBgBorderW,
-                logoBgBorderC: DEFAULT_CONFIG.logoBgBorderC,
-                logoBgShadow: DEFAULT_CONFIG.logoBgShadow,
-              };
-            })
-          }
-          className="w-full h-8 rounded-lg text-[11px] font-medium transition-all active:scale-[0.98] flex items-center justify-center gap-2 cursor-pointer syne-font"
-          style={{
-            border: '1px solid rgba(248,113,113,0.12)',
-            background: 'rgba(248,113,113,0.04)',
-            color: 'rgba(248,113,113,0.6)',
-            letterSpacing: '0.04em',
-          }}
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLElement).style.background = 'rgba(248,113,113,0.08)';
-            (e.currentTarget as HTMLElement).style.color = 'rgba(248,113,113,0.85)';
-          }}
-          onMouseLeave={(e) => {
-            (e.currentTarget as HTMLElement).style.background = 'rgba(248,113,113,0.04)';
-            (e.currentTarget as HTMLElement).style.color = 'rgba(248,113,113,0.6)';
-          }}
-        >
-          <RotateCcw size={11} /> Reset selected to defaults
-        </button>
-      </div>
+        <div className="px-3 pt-3">
+          <button
+            type="button"
+            onClick={() =>
+              setConfig((prev) => {
+                const ni = { ...prev.items };
+                selectedIds.forEach((id) => delete ni[id]);
+                if (!selectedLogo) return { ...prev, items: ni };
+                return {
+                  ...prev,
+                  items: ni,
+                  logoX: DEFAULT_CONFIG.logoX,
+                  logoY: DEFAULT_CONFIG.logoY,
+                  logoW: DEFAULT_CONFIG.logoW,
+                  logoH: DEFAULT_CONFIG.logoH,
+                  logoOpacity: DEFAULT_CONFIG.logoOpacity,
+                  logoZ: DEFAULT_CONFIG.logoZ,
+                  logoShadow: DEFAULT_CONFIG.logoShadow,
+                  logoBgEnabled: DEFAULT_CONFIG.logoBgEnabled,
+                  logoBgColor: DEFAULT_CONFIG.logoBgColor,
+                  logoBgOpacity: DEFAULT_CONFIG.logoBgOpacity,
+                  logoBgRadius: DEFAULT_CONFIG.logoBgRadius,
+                  logoBgPadding: DEFAULT_CONFIG.logoBgPadding,
+                  logoBgBorderW: DEFAULT_CONFIG.logoBgBorderW,
+                  logoBgBorderC: DEFAULT_CONFIG.logoBgBorderC,
+                  logoBgShadow: DEFAULT_CONFIG.logoBgShadow,
+                };
+              })
+            }
+            className="w-full h-8 rounded-lg text-[11px] font-medium transition-all active:scale-[0.98] flex items-center justify-center gap-2 cursor-pointer syne-font"
+            style={{
+              border: '1px solid rgba(248,113,113,0.12)',
+              background: 'rgba(248,113,113,0.04)',
+              color: 'rgba(248,113,113,0.6)',
+              letterSpacing: '0.04em',
+            }}
+            onMouseEnter={(e) => {
+              (e.currentTarget as HTMLElement).style.background = 'rgba(248,113,113,0.08)';
+              (e.currentTarget as HTMLElement).style.color = 'rgba(248,113,113,0.85)';
+            }}
+            onMouseLeave={(e) => {
+              (e.currentTarget as HTMLElement).style.background = 'rgba(248,113,113,0.04)';
+              (e.currentTarget as HTMLElement).style.color = 'rgba(248,113,113,0.6)';
+            }}
+          >
+            <RotateCcw size={11} /> Reset selected to defaults
+          </button>
+        </div>
       )}
     </SidebarLayout>
   );
diff --git a/src/components/builder/components/ResetDialogue.tsx b/src/components/builder/components/ResetDialogue.tsx
index 5c86a24..69454f4 100644
--- a/src/components/builder/components/ResetDialogue.tsx
+++ b/src/components/builder/components/ResetDialogue.tsx
@@ -1,7 +1,7 @@
 // src/components/builder/components/ResetDialog.tsx
-import React, { Fragment, memo } from 'react';
+import { Fragment, memo } from 'react';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
-import { AlertTriangle } from 'lucide-react';
+import { AlertTriangle, RotateCcw, X } from 'lucide-react';
 
 interface Props {
   isOpen: boolean;
@@ -21,59 +21,105 @@ const ResetDialog = memo<Props>(({ isOpen, onClose, onConfirm }) => (
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
       >
-        <div className="fixed inset-0 bg-black/75 backdrop-blur-sm" />
+        <div className="fixed inset-0 bg-[rgba(7,7,6,0.78)] backdrop-blur-md" />
       </TransitionChild>
       <div className="fixed inset-0 flex items-center justify-center p-4">
         <TransitionChild
           as={Fragment}
           enter="ease-out duration-200"
-          enterFrom="opacity-0 scale-95"
-          enterTo="opacity-100 scale-100"
+          enterFrom="opacity-0 translate-y-2 scale-95"
+          enterTo="opacity-100 translate-y-0 scale-100"
           leave="ease-in duration-150"
-          leaveFrom="opacity-100 scale-100"
-          leaveTo="opacity-0 scale-95"
+          leaveFrom="opacity-100 translate-y-0 scale-100"
+          leaveTo="opacity-0 translate-y-2 scale-95"
         >
           <DialogPanel
-            className="w-full max-w-sm rounded-2xl border p-6 shadow-2xl"
-            style={{ background: 'var(--film-mid)', borderColor: 'rgba(196,124,46,0.15)' }}
+            className="w-full max-w-sm rounded-2xl overflow-hidden shadow-2xl"
+            style={{
+              background: 'rgba(18,17,14,0.98)',
+              border: '1px solid rgba(196,124,46,0.18)',
+              boxShadow: '0 32px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(196,124,46,0.06)',
+            }}
           >
-            <DialogTitle
-              as="h3"
-              className="text-sm font-semibold flex items-center gap-3 syne-font"
-              style={{ color: 'var(--film-cream)' }}
+            <div
+              className="flex items-center justify-between px-4 py-3"
+              style={{
+                borderBottom: '1px solid rgba(255,255,255,0.05)',
+                background: 'rgba(196,124,46,0.02)',
+              }}
             >
-              <span
-                className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
-                style={{ background: 'rgba(248,113,113,0.12)' }}
+              <DialogTitle as="div" className="flex items-center gap-2">
+                <span
+                  className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
+                  style={{
+                    background: 'rgba(248,113,113,0.12)',
+                    border: '1px solid rgba(248,113,113,0.2)',
+                  }}
+                >
+                  <AlertTriangle size={14} className="text-red-400" />
+                </span>
+                <div>
+                  <p
+                    className="syne-font font-bold uppercase tracking-widest"
+                    style={{ fontSize: 11, color: 'var(--film-cream)' }}
+                  >
+                    Reset Configuration
+                  </p>
+                  <p
+                    className="mono-font uppercase tracking-widest"
+                    style={{ fontSize: 8, color: 'var(--film-text-dim)' }}
+                  >
+                    Keep poster · reset layout
+                  </p>
+                </div>
+              </DialogTitle>
+              <button
+                onClick={onClose}
+                className="w-7 h-7 rounded-lg flex items-center justify-center transition-colors"
+                style={{
+                  background: 'rgba(255,255,255,0.05)',
+                  border: '1px solid rgba(255,255,255,0.08)',
+                  color: 'var(--film-text-dim)',
+                }}
+              >
+                <X size={13} />
+              </button>
+            </div>
+
+            <div className="px-4 py-4">
+              <p className="text-xs leading-5 body-font" style={{ color: 'var(--film-text-dim)' }}>
+                Badge styling, layer positions, effects, and layout settings will be restored to
+                defaults. Media source, poster choice, and API keys are preserved.
+              </p>
+              <div
+                className="mt-3 rounded-xl px-3 py-2 flex items-start gap-2"
+                style={{
+                  background: 'rgba(248,113,113,0.07)',
+                  border: '1px solid rgba(248,113,113,0.14)',
+                }}
               >
-                <AlertTriangle size={14} className="text-red-400" />
-              </span>
-              Reset Configuration
-            </DialogTitle>
-            <p
-              className="mt-3 text-xs leading-5 body-font"
-              style={{ color: 'var(--film-text-dim)' }}
+                <AlertTriangle size={13} className="text-red-400 mt-0.5 shrink-0" />
+                <span
+                  className="body-font"
+                  style={{ fontSize: 10, color: 'rgba(254,202,202,0.82)' }}
+                >
+                  This cannot be undone unless you use history immediately after closing.
+                </span>
+              </div>
+            </div>
+
+            <div
+              className="flex gap-2 px-4 py-3"
+              style={{ borderTop: '1px solid rgba(255,255,255,0.04)' }}
             >
-              Badge and layout settings will be restored to defaults. Your current poster will be
-              kept. This action cannot be undone.
-            </p>
-            <div className="mt-5 flex gap-2">
               <button
                 onClick={onClose}
-                className="flex-1 h-9 rounded-lg text-xs font-semibold transition-all active:scale-[0.97] cursor-pointer tracking-wide uppercase select-none syne-font"
+                className="flex-1 h-9 rounded-lg text-xs font-semibold transition-all active:scale-[0.97] tracking-wide uppercase select-none syne-font"
                 style={{
                   border: '1px solid rgba(255,255,255,0.08)',
                   background: 'rgba(255,255,255,0.03)',
                   color: 'var(--film-text-dim)',
                 }}
-                onMouseEnter={(e) => {
-                  (e.currentTarget as HTMLElement).style.borderColor = 'rgba(196,124,46,0.25)';
-                  (e.currentTarget as HTMLElement).style.color = 'var(--film-pale)';
-                }}
-                onMouseLeave={(e) => {
-                  (e.currentTarget as HTMLElement).style.borderColor = 'rgba(255,255,255,0.08)';
-                  (e.currentTarget as HTMLElement).style.color = 'var(--film-text-dim)';
-                }}
               >
                 Cancel
               </button>
@@ -82,8 +128,15 @@ const ResetDialog = memo<Props>(({ isOpen, onClose, onConfirm }) => (
                   onConfirm();
                   onClose();
                 }}
-                className="flex-1 h-9 rounded-lg bg-red-600/90 border border-red-500/30 text-xs font-semibold text-white hover:bg-red-500 transition-all active:scale-[0.97] cursor-pointer tracking-wide uppercase select-none syne-font"
+                className="flex-1 h-9 rounded-lg text-xs font-semibold transition-all active:scale-[0.97] tracking-wide uppercase select-none syne-font inline-flex items-center justify-center gap-2"
+                style={{
+                  background: 'rgba(220,38,38,0.92)',
+                  border: '1px solid rgba(248,113,113,0.34)',
+                  color: '#fff',
+                  boxShadow: '0 0 20px rgba(220,38,38,0.22)',
+                }}
               >
+                <RotateCcw size={12} />
                 Reset All
               </button>
             </div>
diff --git a/src/components/builder/components/canvas/ZoomOverlay.tsx b/src/components/builder/components/canvas/ZoomOverlay.tsx
new file mode 100644
index 0000000..809da63
--- /dev/null
+++ b/src/components/builder/components/canvas/ZoomOverlay.tsx
@@ -0,0 +1,219 @@
+import { memo, useState } from 'react';
+import type React from 'react';
+import {
+  Grid3x3,
+  Magnet,
+  Maximize2,
+  Minimize2,
+  RotateCcw,
+  Settings2,
+  ShieldCheck,
+  ZoomIn,
+  ZoomOut,
+} from 'lucide-react';
+
+interface ViewOptions {
+  showSafeArea: boolean;
+  showGrid: boolean;
+  snapToGrid: boolean;
+}
+
+const OverlayButton = ({
+  title,
+  active,
+  onClick,
+  children,
+}: {
+  title: string;
+  active?: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}) => (
+  <button
+    onClick={onClick}
+    title={title}
+    className="w-8 h-8 rounded-lg flex items-center justify-center transition-all active:scale-90"
+    style={{
+      color: active ? 'var(--film-amber)' : 'var(--film-text-dim)',
+      cursor: 'pointer',
+      background: active ? 'rgba(196,124,46,0.1)' : 'transparent',
+      border: 'none',
+    }}
+    onMouseEnter={(e) => {
+      (e.currentTarget as HTMLElement).style.color = 'var(--film-amber)';
+      (e.currentTarget as HTMLElement).style.background = 'rgba(196,124,46,0.1)';
+    }}
+    onMouseLeave={(e) => {
+      (e.currentTarget as HTMLElement).style.color = active
+        ? 'var(--film-amber)'
+        : 'var(--film-text-dim)';
+      (e.currentTarget as HTMLElement).style.background = active
+        ? 'rgba(196,124,46,0.1)'
+        : 'transparent';
+    }}
+  >
+    {children}
+  </button>
+);
+
+const ZoomOverlay = memo<{
+  isFullscreen: boolean;
+  rightSidebarWidth: number;
+  onToggleFullscreen: () => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onResetView: () => void;
+  isMobile: boolean;
+  viewOptions: ViewOptions;
+  onToggleViewOption: (key: keyof ViewOptions) => void;
+}>(
+  ({
+    isFullscreen,
+    rightSidebarWidth,
+    onToggleFullscreen,
+    onZoomIn,
+    onZoomOut,
+    onResetView,
+    isMobile,
+    viewOptions,
+    onToggleViewOption,
+  }) => {
+    const [settingsOpen, setSettingsOpen] = useState(false);
+
+    const placement = isMobile
+      ? { bottom: 76, right: 12 }
+      : {
+          top: '50%',
+          transform: 'translateY(-50%)',
+          right: isFullscreen ? 20 : rightSidebarWidth + 20,
+          transition: 'right 0.3s cubic-bezier(0.16,1,0.3,1)',
+        };
+
+    return (
+      <div className="fixed z-40 select-none" style={placement}>
+        <div
+          className={`flex items-center gap-1 rounded-xl ${isMobile ? 'flex-row' : 'flex-col'}`}
+          style={{
+            background: 'rgba(14,13,11,0.92)',
+            backdropFilter: 'blur(16px)',
+            border: '1px solid rgba(196,124,46,0.18)',
+            padding: '6px',
+            boxShadow: '0 8px 32px rgba(0,0,0,0.6)',
+          }}
+        >
+          <OverlayButton title="Zoom In" onClick={onZoomIn}>
+            <ZoomIn size={15} />
+          </OverlayButton>
+          <OverlayButton title="Zoom Out" onClick={onZoomOut}>
+            <ZoomOut size={15} />
+          </OverlayButton>
+          <OverlayButton title="Reset Zoom / Fit Canvas" onClick={onResetView}>
+            <RotateCcw size={14} />
+          </OverlayButton>
+          <OverlayButton
+            title="Builder Settings"
+            active={settingsOpen}
+            onClick={() => setSettingsOpen((v) => !v)}
+          >
+            <Settings2 size={14} />
+          </OverlayButton>
+
+          {!isMobile && (
+            <div
+              style={{
+                width: 20,
+                height: 1,
+                background: 'rgba(255,255,255,0.08)',
+                margin: '2px 0',
+              }}
+            />
+          )}
+          {!isMobile && (
+            <OverlayButton
+              title={isFullscreen ? 'Exit Fullscreen (F or Esc)' : 'Enter Fullscreen (F)'}
+              active={isFullscreen}
+              onClick={onToggleFullscreen}
+            >
+              {isFullscreen ? <Minimize2 size={15} /> : <Maximize2 size={15} />}
+            </OverlayButton>
+          )}
+        </div>
+
+        {settingsOpen && (
+          <div
+            className="absolute rounded-2xl overflow-hidden"
+            style={{
+              width: 238,
+              right: isMobile ? 0 : 46,
+              bottom: isMobile ? 46 : 'auto',
+              top: isMobile ? 'auto' : '50%',
+              transform: isMobile ? 'none' : 'translateY(-50%)',
+              background: 'rgba(18,17,14,0.98)',
+              border: '1px solid rgba(196,124,46,0.18)',
+              boxShadow: '0 24px 64px rgba(0,0,0,0.75), 0 0 0 1px rgba(196,124,46,0.06)',
+            }}
+          >
+            <div
+              className="px-3 py-2.5"
+              style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}
+            >
+              <p
+                className="syne-font uppercase tracking-widest"
+                style={{ fontSize: 10, color: 'var(--film-cream)', fontWeight: 700 }}
+              >
+                Builder Settings
+              </p>
+              <p
+                className="body-font mt-0.5"
+                style={{ fontSize: 9, color: 'var(--film-text-dim)' }}
+              >
+                Canvas guides and movement behavior
+              </p>
+            </div>
+            <div className="p-2 space-y-1">
+              {[
+                { key: 'showGrid' as const, label: 'Show grid lines', Icon: Grid3x3 },
+                { key: 'showSafeArea' as const, label: 'Show safe zones', Icon: ShieldCheck },
+                { key: 'snapToGrid' as const, label: 'Snap to grid', Icon: Magnet },
+              ].map(({ key, label, Icon }) => (
+                <button
+                  key={key}
+                  type="button"
+                  onClick={() => onToggleViewOption(key)}
+                  className="w-full h-9 px-2.5 rounded-lg flex items-center justify-between gap-2 transition-all syne-font"
+                  style={{
+                    color: viewOptions[key] ? 'var(--film-cream)' : 'var(--film-text-dim)',
+                    background: viewOptions[key]
+                      ? 'rgba(196,124,46,0.1)'
+                      : 'rgba(255,255,255,0.025)',
+                    border: viewOptions[key]
+                      ? '1px solid rgba(196,124,46,0.22)'
+                      : '1px solid rgba(255,255,255,0.05)',
+                    fontSize: 11,
+                  }}
+                >
+                  <span className="flex items-center gap-2">
+                    <Icon size={12} />
+                    {label}
+                  </span>
+                  <span
+                    className="mono-font"
+                    style={{
+                      fontSize: 9,
+                      color: viewOptions[key] ? 'var(--film-amber)' : 'var(--film-text-dim)',
+                    }}
+                  >
+                    {viewOptions[key] ? 'ON' : 'OFF'}
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+ZoomOverlay.displayName = 'ZoomOverlay';
+
+export default ZoomOverlay;
diff --git a/src/components/builder/components/layout/Inspector.tsx b/src/components/builder/components/layout/Inspector.tsx
index 8065763..f345057 100644
--- a/src/components/builder/components/layout/Inspector.tsx
+++ b/src/components/builder/components/layout/Inspector.tsx
@@ -1,23 +1,24 @@
 import React, { memo } from 'react';
 import { useEditor } from '../../context/EditorContext';
-import PropertyPanel from '../PropertyPanel';
+import { BadgesPanel, SelectionPanel } from '../panels';
 import type { PosterConfig } from '../../types';
 import { Badge, MousePointer2 } from 'lucide-react';
-import clsx from 'clsx';
 import SidebarLayout from '../SidebarLayout';
+import PanelTabs from '../navigation/PanelTabs';
 
 interface Props {
   config: PosterConfig;
   setConfig: React.Dispatch<React.SetStateAction<PosterConfig>>;
+  detailLevel?: 'simple' | 'advanced';
 }
 
 type InspectorTab = 'badges' | 'selection';
-const INACTIVE_TAB_HOVER_CLASSES = 'hover:bg-white/[0.05] hover:text-[var(--film-text-dim)]';
 const isInspectorTab = (value: string): value is InspectorTab =>
   value === 'badges' || value === 'selection';
 
-const Inspector: React.FC<Props> = memo(({ config, setConfig }) => {
-  const { activeTab, setActiveTab, selectedIds, selectedLogo, selectedMinimalElements } = useEditor();
+const Inspector: React.FC<Props> = memo(({ config, setConfig, detailLevel = 'advanced' }) => {
+  const { activeTab, setActiveTab, selectedIds, selectedLogo, selectedMinimalElements } =
+    useEditor();
   const selectedCount = selectedIds.size + (selectedLogo ? 1 : 0) + selectedMinimalElements.size;
   const isMinimalPreset = (config.uiPreset ?? 'b') === 'm';
   const hasBadges = config.ratings.length > 0;
@@ -33,7 +34,12 @@ const Inspector: React.FC<Props> = memo(({ config, setConfig }) => {
         : 'Badges';
 
   const tabs: { id: InspectorTab; label: string; Icon: React.ElementType; visible: boolean }[] = [
-    { id: 'badges', label: primaryTabLabel, Icon: Badge, visible: hasBadges || hasLogo || isMinimalPreset },
+    {
+      id: 'badges',
+      label: primaryTabLabel,
+      Icon: Badge,
+      visible: hasBadges || hasLogo || isMinimalPreset,
+    },
     {
       id: 'selection',
       label: selectedCount > 0 ? `${selectedCount} selected` : 'Selection',
@@ -53,43 +59,37 @@ const Inspector: React.FC<Props> = memo(({ config, setConfig }) => {
   return (
     <SidebarLayout
       header={
-        <div
-          className="flex rounded-lg p-0.5 gap-0.5"
-          style={{
-            background: 'var(--film-char)',
-            border: '1px solid rgba(255,255,255,0.05)',
-          }}
-        >
-          {visibleTabs.map(({ id, label, Icon }) => (
-            <button
-              key={id}
-              onClick={() => setActiveTab(id)}
-              aria-pressed={currentTab === id}
-              className={clsx(
-                'flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-md text-[11px] font-medium transition-all duration-150 outline-none select-none syne-font',
-                currentTab !== id && INACTIVE_TAB_HOVER_CLASSES
-              )}
-              style={{
-                background: currentTab === id ? 'var(--film-mid)' : 'transparent',
-                color: currentTab === id ? 'var(--film-cream)' : 'var(--film-text-dim)',
-                boxShadow: currentTab === id ? '0 1px 4px rgba(0,0,0,0.3)' : 'none',
-              }}
-            >
-              <Icon size={11} strokeWidth={2} />
-              {label}
-            </button>
-          ))}
-        </div>
+        <PanelTabs
+          ariaLabel="Inspector panels"
+          activeId={currentTab}
+          onChange={(id) => setActiveTab(id)}
+          tabs={visibleTabs.map(({ id, label, Icon }) => ({
+            id,
+            label,
+            icon: <Icon size={11} strokeWidth={2} />,
+          }))}
+        />
       }
     >
-      <PropertyPanel
-        config={config}
-        setConfig={setConfig}
-        selectedIds={selectedIds}
-        selectedLogo={selectedLogo}
-        selectedMinimalElements={selectedMinimalElements}
-        mode={currentTab}
-      />
+      {currentTab === 'badges' ? (
+        <BadgesPanel
+          config={config}
+          setConfig={setConfig}
+          selectedIds={selectedIds}
+          selectedLogo={selectedLogo}
+          selectedMinimalElements={selectedMinimalElements}
+          detailLevel={detailLevel}
+        />
+      ) : (
+        <SelectionPanel
+          config={config}
+          setConfig={setConfig}
+          selectedIds={selectedIds}
+          selectedLogo={selectedLogo}
+          selectedMinimalElements={selectedMinimalElements}
+          detailLevel={detailLevel}
+        />
+      )}
     </SidebarLayout>
   );
 });
diff --git a/src/components/builder/components/navigation/AdvancedPanelNav.tsx b/src/components/builder/components/navigation/AdvancedPanelNav.tsx
new file mode 100644
index 0000000..c7d7373
--- /dev/null
+++ b/src/components/builder/components/navigation/AdvancedPanelNav.tsx
@@ -0,0 +1,65 @@
+import React, { memo } from 'react';
+import { Badge, Film, Layers, Monitor, MousePointer2 } from 'lucide-react';
+import clsx from 'clsx';
+
+export type BuilderPanelId = 'source' | 'layers' | 'poster' | 'badges' | 'selection';
+
+export const BUILDER_PANELS: Array<{
+  id: BuilderPanelId;
+  label: string;
+  description: string;
+  Icon: React.ElementType;
+}> = [
+  { id: 'source', label: 'Source', description: 'Media, IDs, source', Icon: Film },
+  { id: 'layers', label: 'Layers', description: 'Order and visibility', Icon: Layers },
+  { id: 'poster', label: 'Poster', description: 'Canvas and effects', Icon: Monitor },
+  { id: 'badges', label: 'Badges', description: 'Global badge style', Icon: Badge },
+  { id: 'selection', label: 'Selection', description: 'Selected layer edits', Icon: MousePointer2 },
+];
+
+interface Props {
+  activePanel: BuilderPanelId;
+  onChange: (panel: BuilderPanelId) => void;
+}
+
+const AdvancedPanelNav: React.FC<Props> = memo(({ activePanel, onChange }) => (
+  <nav className="flex-1 overflow-y-auto custom-scrollbar p-2" aria-label="Advanced builder panels">
+    <div className="space-y-1">
+      {BUILDER_PANELS.map(({ id, label, description, Icon }) => {
+        const active = id === activePanel;
+        return (
+          <button
+            type="button"
+            key={id}
+            onClick={() => onChange(id)}
+            className={clsx(
+              'w-full flex items-center gap-2 rounded-xl px-2.5 py-2.5 text-left transition-all outline-none focus-visible:ring-2 focus-visible:ring-[#C47C2E]',
+              !active && 'hover:bg-[rgba(196,124,46,0.07)]'
+            )}
+            style={{
+              background: active ? 'rgba(196,124,46,0.12)' : 'transparent',
+              border: active ? '1px solid rgba(196,124,46,0.22)' : '1px solid transparent',
+              color: active ? 'var(--film-cream)' : 'var(--film-text-dim)',
+            }}
+          >
+            <span
+              className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
+              style={{ background: active ? 'rgba(196,124,46,0.16)' : 'rgba(255,255,255,0.04)' }}
+            >
+              <Icon size={14} />
+            </span>
+            <span className="min-w-0">
+              <span className="block syne-font text-[12px] font-bold tracking-wide">{label}</span>
+              <span className="block text-[9px] truncate" style={{ color: 'var(--film-text-dim)' }}>
+                {description}
+              </span>
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  </nav>
+));
+
+AdvancedPanelNav.displayName = 'AdvancedPanelNav';
+export default AdvancedPanelNav;
diff --git a/src/components/builder/components/navigation/ModeToggle.tsx b/src/components/builder/components/navigation/ModeToggle.tsx
new file mode 100644
index 0000000..2deeba8
--- /dev/null
+++ b/src/components/builder/components/navigation/ModeToggle.tsx
@@ -0,0 +1,38 @@
+import React, { memo } from 'react';
+
+export type BuilderMode = 'simple' | 'advanced';
+
+interface Props {
+  mode: BuilderMode;
+  onChange: (mode: BuilderMode) => void;
+}
+
+const ModeToggle: React.FC<Props> = memo(({ mode, onChange }) => (
+  <div
+    className="flex items-center rounded-lg p-0.5 h-8"
+    style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(196,124,46,0.16)' }}
+    aria-label="Builder mode"
+  >
+    {(['simple', 'advanced'] as const).map((item) => {
+      const active = mode === item;
+      return (
+        <button
+          key={item}
+          type="button"
+          onClick={() => onChange(item)}
+          aria-pressed={active}
+          className="h-7 px-2.5 rounded-md syne-font text-[10px] font-bold uppercase tracking-wider transition-all"
+          style={{
+            color: active ? '#070706' : 'var(--film-text-dim)',
+            background: active ? 'var(--film-amber)' : 'transparent',
+          }}
+        >
+          {item}
+        </button>
+      );
+    })}
+  </div>
+));
+
+ModeToggle.displayName = 'ModeToggle';
+export default ModeToggle;
diff --git a/src/components/builder/components/navigation/PanelTabs.tsx b/src/components/builder/components/navigation/PanelTabs.tsx
new file mode 100644
index 0000000..d69dd4d
--- /dev/null
+++ b/src/components/builder/components/navigation/PanelTabs.tsx
@@ -0,0 +1,63 @@
+import React, { memo } from 'react';
+import clsx from 'clsx';
+
+export interface PanelTab<T extends string> {
+  id: T;
+  label: string;
+  icon?: React.ReactNode;
+  visible?: boolean;
+}
+
+interface PanelTabsProps<T extends string> {
+  tabs: readonly PanelTab<T>[];
+  activeId: T;
+  onChange: (id: T) => void;
+  ariaLabel?: string;
+}
+
+function PanelTabsComponent<T extends string>({
+  tabs,
+  activeId,
+  onChange,
+  ariaLabel,
+}: PanelTabsProps<T>) {
+  const visibleTabs = tabs.filter((tab) => tab.visible !== false);
+
+  return (
+    <div
+      aria-label={ariaLabel}
+      className="flex rounded-lg p-0.5 gap-0.5"
+      style={{
+        background: 'var(--film-char)',
+        border: '1px solid rgba(255,255,255,0.05)',
+      }}
+    >
+      {visibleTabs.map((tab) => {
+        const isActive = activeId === tab.id;
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            onClick={() => onChange(tab.id)}
+            aria-pressed={isActive}
+            className={clsx(
+              'flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-md text-[11px] font-medium transition-all duration-150 outline-none select-none capitalize syne-font',
+              !isActive && 'hover:bg-[rgba(196,124,46,0.08)] hover:text-[var(--film-text-label)]'
+            )}
+            style={{
+              background: isActive ? 'var(--film-mid)' : 'transparent',
+              color: isActive ? 'var(--film-cream)' : 'var(--film-text-dim)',
+              boxShadow: isActive ? '0 1px 4px rgba(0,0,0,0.3)' : 'none',
+            }}
+          >
+            {tab.icon}
+            {tab.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+const PanelTabs = memo(PanelTabsComponent) as typeof PanelTabsComponent;
+export default PanelTabs;
diff --git a/src/components/builder/components/panels/BadgesPanel.tsx b/src/components/builder/components/panels/BadgesPanel.tsx
new file mode 100644
index 0000000..ad4aa1a
--- /dev/null
+++ b/src/components/builder/components/panels/BadgesPanel.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import type { PosterConfig, RatingType } from '../../types';
+import PropertyPanel from '../PropertyPanel';
+
+interface Props {
+  config: PosterConfig;
+  setConfig: React.Dispatch<React.SetStateAction<PosterConfig>>;
+  selectedIds: Set<RatingType>;
+  selectedLogo?: boolean;
+  selectedMinimalElements?: Set<string>;
+  detailLevel?: 'simple' | 'advanced';
+}
+
+const BadgesPanel: React.FC<Props> = (props) => <PropertyPanel {...props} mode="badges" />;
+export default BadgesPanel;
diff --git a/src/components/builder/components/panels/LayersPanel.tsx b/src/components/builder/components/panels/LayersPanel.tsx
new file mode 100644
index 0000000..bb47a08
--- /dev/null
+++ b/src/components/builder/components/panels/LayersPanel.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import type { PosterConfig, RatingType } from '../../types';
+import LayerPanel from '../LayerPanel';
+
+interface Props {
+  config: PosterConfig;
+  setConfig: React.Dispatch<React.SetStateAction<PosterConfig>>;
+  selectedIds: Set<RatingType>;
+  onSelect: (id: RatingType, multi: boolean) => void;
+  chrome?: boolean;
+  detailLevel?: 'simple' | 'advanced';
+}
+
+const LayersPanel: React.FC<Props> = ({ chrome = true, ...props }) => (
+  <LayerPanel {...props} panelMode="layers" hideTabs={!chrome} />
+);
+
+export default LayersPanel;
diff --git a/src/components/builder/components/panels/PosterPanel.tsx b/src/components/builder/components/panels/PosterPanel.tsx
new file mode 100644
index 0000000..3846539
--- /dev/null
+++ b/src/components/builder/components/panels/PosterPanel.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import type { PosterConfig, RatingType } from '../../types';
+import LayerPanel from '../LayerPanel';
+
+interface Props {
+  config: PosterConfig;
+  setConfig: React.Dispatch<React.SetStateAction<PosterConfig>>;
+  selectedIds: Set<RatingType>;
+  onSelect: (id: RatingType, multi: boolean) => void;
+  chrome?: boolean;
+  detailLevel?: 'simple' | 'advanced';
+}
+
+const PosterPanel: React.FC<Props> = ({ chrome = true, ...props }) => (
+  <LayerPanel {...props} panelMode="poster" hideTabs={!chrome} />
+);
+
+export default PosterPanel;
diff --git a/src/components/builder/components/panels/SelectionPanel.tsx b/src/components/builder/components/panels/SelectionPanel.tsx
new file mode 100644
index 0000000..92b1ab7
--- /dev/null
+++ b/src/components/builder/components/panels/SelectionPanel.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import type { PosterConfig, RatingType } from '../../types';
+import PropertyPanel from '../PropertyPanel';
+
+interface Props {
+  config: PosterConfig;
+  setConfig: React.Dispatch<React.SetStateAction<PosterConfig>>;
+  selectedIds: Set<RatingType>;
+  selectedLogo?: boolean;
+  selectedMinimalElements?: Set<string>;
+  detailLevel?: 'simple' | 'advanced';
+}
+
+const SelectionPanel: React.FC<Props> = (props) => <PropertyPanel {...props} mode="selection" />;
+export default SelectionPanel;
diff --git a/src/components/builder/components/panels/SourcePanel.tsx b/src/components/builder/components/panels/SourcePanel.tsx
new file mode 100644
index 0000000..ce70474
--- /dev/null
+++ b/src/components/builder/components/panels/SourcePanel.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import type { PosterConfig, RatingType } from '../../types';
+import LayerPanel from '../LayerPanel';
+
+interface Props {
+  config: PosterConfig;
+  setConfig: React.Dispatch<React.SetStateAction<PosterConfig>>;
+  selectedIds: Set<RatingType>;
+  onSelect: (id: RatingType, multi: boolean) => void;
+  chrome?: boolean;
+  detailLevel?: 'simple' | 'advanced';
+}
+
+const SourcePanel: React.FC<Props> = ({ chrome = true, ...props }) => (
+  <LayerPanel {...props} panelMode="source" hideTabs={!chrome} />
+);
+
+export default SourcePanel;
diff --git a/src/components/builder/components/panels/index.ts b/src/components/builder/components/panels/index.ts
new file mode 100644
index 0000000..9c94990
--- /dev/null
+++ b/src/components/builder/components/panels/index.ts
@@ -0,0 +1,5 @@
+export { default as SourcePanel } from './SourcePanel';
+export { default as LayersPanel } from './LayersPanel';
+export { default as PosterPanel } from './PosterPanel';
+export { default as BadgesPanel } from './BadgesPanel';
+export { default as SelectionPanel } from './SelectionPanel';
diff --git a/src/components/builder/components/toolbar/ToolbarButton.tsx b/src/components/builder/components/toolbar/ToolbarButton.tsx
new file mode 100644
index 0000000..b81f9ec
--- /dev/null
+++ b/src/components/builder/components/toolbar/ToolbarButton.tsx
@@ -0,0 +1,106 @@
+import React, { memo } from 'react';
+
+interface ToolbarButtonProps {
+  onClick?: () => void;
+  disabled?: boolean;
+  label: string;
+  danger?: boolean;
+  href?: string;
+  active?: boolean;
+  children: React.ReactNode;
+  hideOnMobile?: boolean;
+}
+
+const ToolbarButton = memo<ToolbarButtonProps>(
+  ({ onClick, disabled, label, danger, href, active, children, hideOnMobile = false }) => {
+    const base = `relative group w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-150 select-none outline-none focus-visible:ring-2 focus-visible:ring-[#C47C2E] ${hideOnMobile ? 'hidden lg:flex' : ''}`;
+    const cls = `${base} ${
+      disabled
+        ? 'cursor-not-allowed pointer-events-none'
+        : active
+          ? 'cursor-pointer'
+          : 'active:scale-95 cursor-pointer'
+    }`;
+
+    const activeStyle = active
+      ? {
+          color: 'var(--film-amber)',
+          background: 'rgba(196,124,46,0.1)',
+          border: '1px solid rgba(196,124,46,0.2)',
+        }
+      : disabled
+        ? { color: 'rgba(255,255,255,0.15)', border: '1px solid transparent', opacity: 0.5 }
+        : danger
+          ? { color: 'var(--film-text-dim)', border: '1px solid transparent' }
+          : { color: 'var(--film-text-dim)', border: '1px solid transparent' };
+
+    const tooltip = !disabled && (
+      <span
+        className="absolute top-full mt-2 left-1/2 -translate-x-1/2 px-2 py-1 rounded-md text-[10px] font-medium border whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-150 delay-300 pointer-events-none z-[200] shadow-lg syne-font"
+        style={{
+          background: 'var(--film-mid)',
+          color: 'var(--film-cream)',
+          borderColor: 'rgba(255,255,255,0.08)',
+        }}
+      >
+        {label}
+      </span>
+    );
+
+    const hoverEvents =
+      !disabled && !active
+        ? {
+            onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {
+              const el = e.currentTarget as HTMLElement;
+              if (danger) {
+                el.style.color = 'rgba(248,113,113,0.8)';
+                el.style.background = 'rgba(248,113,113,0.08)';
+              } else {
+                el.style.color = 'var(--film-text-label)';
+                el.style.background = 'rgba(196,124,46,0.07)';
+              }
+            },
+            onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {
+              const el = e.currentTarget as HTMLElement;
+              el.style.color = 'var(--film-text-dim)';
+              el.style.background = 'transparent';
+            },
+          }
+        : {};
+
+    if (href) {
+      return (
+        <a
+          href={href}
+          target="_blank"
+          rel="noreferrer noopener"
+          className={cls}
+          aria-label={label}
+          style={activeStyle}
+          {...hoverEvents}
+        >
+          {children}
+          {tooltip}
+        </a>
+      );
+    }
+
+    return (
+      <button
+        onClick={onClick}
+        disabled={!!disabled}
+        className={cls}
+        aria-label={label}
+        aria-disabled={disabled}
+        style={activeStyle}
+        {...hoverEvents}
+      >
+        {children}
+        {tooltip}
+      </button>
+    );
+  }
+);
+ToolbarButton.displayName = 'ToolbarButton';
+
+export default ToolbarButton;
diff --git a/src/components/builder/components/ui/ColorRow.tsx b/src/components/builder/components/ui/ColorRow.tsx
new file mode 100644
index 0000000..edcb034
--- /dev/null
+++ b/src/components/builder/components/ui/ColorRow.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import ColorPicker from '../ColorPicker';
+
+interface ColorRowProps {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  onReset?: () => void;
+  showOpacity?: boolean;
+  opacity?: number;
+  onOpacityChange?: (v: number) => void;
+}
+
+const ColorRow: React.FC<ColorRowProps> = ({
+  label,
+  value,
+  onChange,
+  onReset,
+  showOpacity,
+  opacity,
+  onOpacityChange,
+}) => (
+  <div className="space-y-1.5">
+    <div className="flex items-center justify-between">
+      <span
+        className="body-font"
+        style={{ fontSize: 11, color: 'var(--film-text-label)', fontWeight: 500 }}
+      >
+        {label}
+      </span>
+      {onReset && (
+        <button
+          type="button"
+          onClick={onReset}
+          className="mono-font transition-colors"
+          style={{ fontSize: 9, color: 'var(--film-text-dim)' }}
+          onMouseEnter={(e) => {
+            (e.currentTarget as HTMLElement).style.color = 'var(--film-text-label)';
+          }}
+          onMouseLeave={(e) => {
+            (e.currentTarget as HTMLElement).style.color = 'var(--film-text-dim)';
+          }}
+        >
+          Reset
+        </button>
+      )}
+    </div>
+    <ColorPicker
+      value={value}
+      onChange={onChange}
+      showOpacity={showOpacity}
+      opacity={opacity}
+      onOpacityChange={onOpacityChange}
+    />
+  </div>
+);
+
+export default ColorRow;
diff --git a/src/components/builder/components/ui/Section.tsx b/src/components/builder/components/ui/Section.tsx
new file mode 100644
index 0000000..de2f679
--- /dev/null
+++ b/src/components/builder/components/ui/Section.tsx
@@ -0,0 +1,73 @@
+import React, { useCallback, useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { readSectionState, writeSectionState } from './sectionStorage';
+
+interface SectionProps {
+  title: string;
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  sectionId?: string;
+  inset?: 'compact' | 'normal';
+}
+
+const Section: React.FC<SectionProps> = ({
+  title,
+  icon,
+  children,
+  defaultOpen = true,
+  sectionId,
+  inset = 'normal',
+}) => {
+  const [open, setOpen] = useState(() =>
+    sectionId ? readSectionState(sectionId, defaultOpen) : defaultOpen
+  );
+  const x = inset === 'compact' ? 'px-1' : 'px-3';
+  const mx = inset === 'compact' ? 'mx-1' : 'mx-3';
+
+  const toggle = useCallback(() => {
+    setOpen((v) => {
+      const next = !v;
+      if (sectionId) writeSectionState(sectionId, next);
+      return next;
+    });
+  }, [sectionId]);
+
+  return (
+    <div className="pt-5 first:pt-3">
+      <button
+        type="button"
+        onClick={toggle}
+        className={`w-full flex items-center justify-between ${x} mb-3 focus:outline-none group`}
+      >
+        <span
+          className="flex items-center gap-1.5 syne-font uppercase tracking-widest"
+          style={{ fontSize: 9, color: 'var(--film-text-dim)', fontWeight: 700 }}
+        >
+          {icon && (
+            <span style={{ color: 'var(--film-text-dim)', opacity: 1, lineHeight: 0 }}>{icon}</span>
+          )}
+          {title}
+        </span>
+        <span
+          style={{
+            color: 'var(--film-text-dim)',
+            opacity: open ? 0.6 : 0.3,
+            transition: 'opacity 0.15s',
+            lineHeight: 0,
+          }}
+        >
+          {open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
+        </span>
+      </button>
+      {open && <div className={`${x} pb-1 space-y-3.5`}>{children}</div>}
+      <div
+        className={`mt-5 ${mx}`}
+        style={{ height: 1, background: 'rgba(255,255,255,0.04)' }}
+        aria-hidden="true"
+      />
+    </div>
+  );
+};
+
+export default Section;
diff --git a/src/components/builder/components/ui/SegmentedRow.tsx b/src/components/builder/components/ui/SegmentedRow.tsx
new file mode 100644
index 0000000..0a8fb99
--- /dev/null
+++ b/src/components/builder/components/ui/SegmentedRow.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import clsx from 'clsx';
+
+const INACTIVE_OPTION_HOVER_CLASSES =
+  'bg-[rgba(255,255,255,0.03)] text-[var(--film-text-label)] border-[rgba(255,255,255,0.05)] hover:bg-[rgba(255,255,255,0.07)] hover:border-[rgba(196,124,46,0.24)] hover:text-[var(--film-cream)]';
+
+interface SegmentedRowProps {
+  label: string;
+  options: { id: string; label: string }[];
+  value: string | null;
+  onChange: (v: string) => void;
+  uppercaseLabel?: boolean;
+  size?: 'sm' | 'md';
+}
+
+const SegmentedRow: React.FC<SegmentedRowProps> = ({
+  label,
+  options,
+  value,
+  onChange,
+  uppercaseLabel = false,
+  size = 'sm',
+}) => (
+  <div className="space-y-1.5">
+    {uppercaseLabel ? (
+      <p
+        className="syne-font uppercase tracking-widest"
+        style={{ fontSize: 9, color: 'var(--film-text-dim)', fontWeight: 700 }}
+      >
+        {label}
+      </p>
+    ) : (
+      <span
+        className="body-font"
+        style={{ fontSize: 11, color: 'var(--film-text-label)', fontWeight: 500 }}
+      >
+        {label}
+      </span>
+    )}
+    <div className="grid gap-1" style={{ gridTemplateColumns: `repeat(${options.length}, 1fr)` }}>
+      {options.map((opt) => (
+        <button
+          key={opt.id}
+          type="button"
+          onClick={() => onChange(opt.id)}
+          className={clsx(
+            `${size === 'md' ? 'h-8' : 'h-7'} rounded-md text-[10px] font-medium transition-all border syne-font`,
+            value === opt.id
+              ? 'bg-[rgba(196,124,46,0.15)] text-[var(--film-pale)] border-[rgba(196,124,46,0.3)]'
+              : INACTIVE_OPTION_HOVER_CLASSES
+          )}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  </div>
+);
+
+export default SegmentedRow;
diff --git a/src/components/builder/components/ui/SelectBox.tsx b/src/components/builder/components/ui/SelectBox.tsx
new file mode 100644
index 0000000..3dc28e0
--- /dev/null
+++ b/src/components/builder/components/ui/SelectBox.tsx
@@ -0,0 +1,69 @@
+import { memo } from 'react';
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react';
+import { Check, ChevronDown } from 'lucide-react';
+import clsx from 'clsx';
+
+interface SelectBoxProps {
+  value: string;
+  onChange: (v: string) => void;
+  options: { id: string; label: string }[];
+}
+
+const SelectBox = memo<SelectBoxProps>(({ value, onChange, options }) => (
+  <Listbox value={value} onChange={onChange}>
+    <div className="relative">
+      <ListboxButton
+        className="w-full flex items-center justify-between gap-1 h-9 px-2.5 rounded-lg text-[11px] font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#C47C2E] syne-font"
+        style={{
+          background: 'rgba(255,255,255,0.04)',
+          border: '1px solid rgba(255,255,255,0.1)',
+          color: 'var(--film-pale)',
+        }}
+        onMouseEnter={(e) => {
+          (e.currentTarget as HTMLElement).style.borderColor = 'rgba(196,124,46,0.4)';
+        }}
+        onMouseLeave={(e) => {
+          (e.currentTarget as HTMLElement).style.borderColor = 'rgba(255,255,255,0.1)';
+        }}
+      >
+        <span className="truncate">{options.find((o) => o.id === value)?.label ?? value}</span>
+        <ChevronDown size={10} style={{ color: 'var(--film-text-dim)', flexShrink: 0 }} />
+      </ListboxButton>
+      <ListboxOptions
+        transition
+        className="absolute z-50 mt-1 w-full py-1 rounded-xl shadow-2xl shadow-black/50 text-[11px] overflow-auto max-h-52 focus:outline-none transition duration-75 ease-in data-[closed]:scale-95 data-[closed]:opacity-0"
+        style={{
+          background: 'var(--film-mid)',
+          border: '1px solid rgba(255,255,255,0.08)',
+        }}
+      >
+        {options.map((opt) => (
+          <ListboxOption
+            key={opt.id}
+            value={opt.id}
+            className={({ active, selected }) =>
+              clsx(
+                'flex items-center gap-2 px-3 py-2.5 cursor-pointer transition-colors syne-font',
+                active && 'bg-[rgba(196,124,46,0.1)]',
+                !active && selected && 'text-[var(--film-pale)]',
+                !active && !selected && 'text-[var(--film-text-label)]'
+              )
+            }
+          >
+            {({ selected }) => (
+              <>
+                <span className="flex-1 truncate">{opt.label}</span>
+                {selected && (
+                  <Check size={10} style={{ color: 'var(--film-amber)', flexShrink: 0 }} />
+                )}
+              </>
+            )}
+          </ListboxOption>
+        ))}
+      </ListboxOptions>
+    </div>
+  </Listbox>
+));
+SelectBox.displayName = 'SelectBox';
+
+export default SelectBox;
diff --git a/src/components/builder/components/ui/SliderRow.tsx b/src/components/builder/components/ui/SliderRow.tsx
new file mode 100644
index 0000000..ea57ac9
--- /dev/null
+++ b/src/components/builder/components/ui/SliderRow.tsx
@@ -0,0 +1,169 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { RotateCcw } from 'lucide-react';
+
+interface SliderRowProps {
+  label: string;
+  value: number;
+  onChange: (v: number) => void;
+  onReset?: () => void;
+  min: number;
+  max: number;
+  step?: number;
+  unit?: string;
+  formatValue?: (v: number) => string;
+}
+
+const SliderRow: React.FC<SliderRowProps> = ({
+  label,
+  value,
+  onChange,
+  onReset,
+  min,
+  max,
+  step = 1,
+  unit = '',
+  formatValue,
+}) => {
+  const [localValue, setLocalValue] = useState(value);
+  const [inputText, setInputText] = useState(() => (formatValue ? formatValue(value) : `${value}`));
+  const lastUpdate = useRef(Date.now());
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isFocused = useRef(false);
+
+  useEffect(() => {
+    setLocalValue(value);
+    if (!isFocused.current) setInputText(formatValue ? formatValue(value) : `${value}`);
+  }, [value, formatValue]);
+
+  const commitInput = useCallback(
+    (text: string) => {
+      const raw = text.replace(unit, '').replace(/[^0-9.\-]/g, '');
+      const n = parseFloat(raw);
+      if (!isNaN(n)) {
+        const clamped = Math.max(min, Math.min(max, n));
+        setLocalValue(clamped);
+        setInputText(formatValue ? formatValue(clamped) : `${clamped}`);
+        onChange(clamped);
+      } else {
+        setInputText(formatValue ? formatValue(localValue) : `${localValue}`);
+      }
+    },
+    [min, max, onChange, unit, formatValue, localValue]
+  );
+
+  const handleRangeChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = parseFloat(e.target.value);
+      setLocalValue(val);
+      if (!isFocused.current) setInputText(formatValue ? formatValue(val) : `${val}`);
+      const now = Date.now();
+      if (now - lastUpdate.current > 33) {
+        onChange(val);
+        lastUpdate.current = now;
+      } else {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+          onChange(val);
+          lastUpdate.current = Date.now();
+        }, 33);
+      }
+    },
+    [onChange, formatValue]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      commitInput(inputText);
+      inputRef.current?.blur();
+    } else if (e.key === 'Escape') {
+      setInputText(formatValue ? formatValue(localValue) : `${localValue}`);
+      inputRef.current?.blur();
+    } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      const delta = e.key === 'ArrowUp' ? step : -step;
+      const newVal = Math.max(min, Math.min(max, localValue + delta));
+      setLocalValue(newVal);
+      setInputText(formatValue ? formatValue(newVal) : `${newVal}`);
+      onChange(newVal);
+    }
+  };
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between gap-2">
+        <span
+          className="body-font"
+          style={{ fontSize: 11, color: 'var(--film-text-label)', fontWeight: 500 }}
+        >
+          {label}
+        </span>
+        {onReset && (
+          <button
+            type="button"
+            onClick={onReset}
+            className="inline-flex items-center gap-1 text-[9px] mono-font transition-colors"
+            style={{ color: 'var(--film-text-dim)' }}
+            onMouseEnter={(e) => {
+              (e.currentTarget as HTMLElement).style.color = 'var(--film-text-label)';
+            }}
+            onMouseLeave={(e) => {
+              (e.currentTarget as HTMLElement).style.color = 'var(--film-text-dim)';
+            }}
+          >
+            <RotateCcw size={10} />
+            Reset
+          </button>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <input
+          ref={inputRef}
+          type="text"
+          inputMode="decimal"
+          value={inputText}
+          onChange={(e) => setInputText(e.target.value)}
+          onFocus={() => {
+            isFocused.current = true;
+          }}
+          onBlur={() => {
+            isFocused.current = false;
+            commitInput(inputText);
+          }}
+          onKeyDown={handleInputKeyDown}
+          className="mono-font tabular-nums focus:outline-none shrink-0"
+          style={{
+            width: 48,
+            height: 22,
+            paddingInline: 5,
+            borderRadius: 4,
+            background: 'rgba(255,255,255,0.04)',
+            border: '1px solid rgba(255,255,255,0.1)',
+            fontSize: 10,
+            color: 'var(--film-pale)',
+            textAlign: 'center',
+            transition: 'border-color 0.15s',
+          }}
+          onMouseEnter={(e) => {
+            (e.currentTarget as HTMLInputElement).style.borderColor = 'rgba(196,124,46,0.4)';
+          }}
+          onMouseLeave={(e) => {
+            if (!isFocused.current)
+              (e.currentTarget as HTMLInputElement).style.borderColor = 'rgba(255,255,255,0.1)';
+          }}
+        />
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={localValue}
+          onChange={handleRangeChange}
+          className="flex-1 min-w-0"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SliderRow;
diff --git a/src/components/builder/components/ui/TextInputRow.tsx b/src/components/builder/components/ui/TextInputRow.tsx
new file mode 100644
index 0000000..aa2856c
--- /dev/null
+++ b/src/components/builder/components/ui/TextInputRow.tsx
@@ -0,0 +1,71 @@
+import React, { useRef, useState } from 'react';
+
+interface TextInputRowProps {
+  label: string;
+  value: string;
+  placeholder?: string;
+  onChange: (v: string) => void;
+  onClear?: () => void;
+}
+
+const TextInputRow: React.FC<TextInputRowProps> = ({
+  label,
+  value,
+  placeholder,
+  onChange,
+  onClear,
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [focused, setFocused] = useState(false);
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between">
+        <span
+          className="body-font"
+          style={{ fontSize: 11, color: 'var(--film-text-label)', fontWeight: 500 }}
+        >
+          {label}
+        </span>
+        {onClear && value && (
+          <button
+            type="button"
+            onClick={onClear}
+            className="mono-font transition-colors"
+            style={{ fontSize: 9, color: 'var(--film-text-dim)' }}
+            onMouseEnter={(e) => {
+              (e.currentTarget as HTMLElement).style.color = 'var(--film-text-label)';
+            }}
+            onMouseLeave={(e) => {
+              (e.currentTarget as HTMLElement).style.color = 'var(--film-text-dim)';
+            }}
+          >
+            Clear
+          </button>
+        )}
+      </div>
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        className="w-full focus:outline-none body-font hover:border-[rgba(196,124,46,0.28)]"
+        style={{
+          height: 28,
+          paddingInline: 8,
+          borderRadius: 6,
+          background: 'rgba(255,255,255,0.04)',
+          border: `1px solid ${focused ? 'rgba(196,124,46,0.4)' : 'rgba(255,255,255,0.1)'}`,
+          fontSize: 11,
+          color: 'var(--film-pale)',
+          transition: 'border-color 0.15s',
+        }}
+      />
+    </div>
+  );
+};
+
+export default TextInputRow;
diff --git a/src/components/builder/components/ui/ToggleRow.tsx b/src/components/builder/components/ui/ToggleRow.tsx
new file mode 100644
index 0000000..f54dbe7
--- /dev/null
+++ b/src/components/builder/components/ui/ToggleRow.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Switch } from '@headlessui/react';
+import clsx from 'clsx';
+
+interface ToggleRowProps {
+  label: string;
+  sub?: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  small?: boolean;
+  disabled?: boolean;
+}
+
+const ToggleRow: React.FC<ToggleRowProps> = ({
+  label,
+  sub,
+  checked,
+  onChange,
+  small,
+  disabled,
+}) => (
+  <div
+    className={clsx(
+      'flex items-center justify-between gap-3',
+      disabled && 'opacity-60 pointer-events-none'
+    )}
+  >
+    <div className="min-w-0">
+      <p
+        className="body-font font-medium"
+        style={{ fontSize: small ? 10 : 11, color: 'var(--film-text-label)' }}
+      >
+        {label}
+      </p>
+      {sub && (
+        <p className="body-font mt-0.5" style={{ fontSize: 9, color: 'var(--film-text-dim)' }}>
+          {sub}
+        </p>
+      )}
+    </div>
+    <Switch
+      checked={checked}
+      onChange={onChange}
+      className={clsx(
+        'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#C47C2E]',
+        checked ? 'bg-[#C47C2E]' : 'bg-zinc-700/80'
+      )}
+    >
+      <span
+        className={clsx(
+          'inline-block w-3.5 h-3.5 rounded-full bg-white shadow-sm transition-transform',
+          checked ? 'translate-x-[18px]' : 'translate-x-[3px]'
+        )}
+      />
+    </Switch>
+  </div>
+);
+
+export default ToggleRow;
diff --git a/src/components/builder/components/ui/index.ts b/src/components/builder/components/ui/index.ts
new file mode 100644
index 0000000..36d1e2d
--- /dev/null
+++ b/src/components/builder/components/ui/index.ts
@@ -0,0 +1,7 @@
+export { default as Section } from './Section';
+export { default as SliderRow } from './SliderRow';
+export { default as ToggleRow } from './ToggleRow';
+export { default as SegmentedRow } from './SegmentedRow';
+export { default as SelectBox } from './SelectBox';
+export { default as TextInputRow } from './TextInputRow';
+export { default as ColorRow } from './ColorRow';
diff --git a/src/components/builder/components/ui/sectionStorage.ts b/src/components/builder/components/ui/sectionStorage.ts
new file mode 100644
index 0000000..295e24c
--- /dev/null
+++ b/src/components/builder/components/ui/sectionStorage.ts
@@ -0,0 +1,21 @@
+const SECTION_STORAGE_KEY = 'posterium_section_states_v2';
+
+const readSectionStates = (): Record<string, boolean> => {
+  try {
+    return JSON.parse(localStorage.getItem(SECTION_STORAGE_KEY) || '{}');
+  } catch {
+    return {};
+  }
+};
+
+export const writeSectionState = (id: string, open: boolean) => {
+  try {
+    const s = readSectionStates();
+    localStorage.setItem(SECTION_STORAGE_KEY, JSON.stringify({ ...s, [id]: open }));
+  } catch {}
+};
+
+export const readSectionState = (id: string, fallback: boolean): boolean => {
+  const states = readSectionStates();
+  return id in states ? states[id] : fallback;
+};
diff --git a/src/components/builder/index.tsx b/src/components/builder/index.tsx
index 3a479d8..62e3f05 100644
--- a/src/components/builder/index.tsx
+++ b/src/components/builder/index.tsx
@@ -1,13 +1,37 @@
 // src/components/builder/index.tsx
-import React, { useState, useEffect, useRef, useCallback, memo } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import clsx from 'clsx';
 import type { PosterConfig, ExtensionType, ApiKeys, RatingType } from './types';
-import { DEFAULT_CONFIG, ALL_BADGES, CANVAS_WIDTH, CANVAS_HEIGHT, BASE_BADGE_W, BASE_BADGE_H } from './types';
+import {
+  DEFAULT_CONFIG,
+  ALL_BADGES,
+  CANVAS_WIDTH,
+  CANVAS_HEIGHT,
+  BASE_BADGE_W,
+  BASE_BADGE_H,
+} from './types';
 import { parseUrlToConfig, DEFAULT_API_BASE, calculateAutoPosition, getScale } from './utils';
+import {
+  BUILDER_STORAGE_KEY,
+  MAX_QUERY_CONFIG_LENGTH,
+  loadKeysFromCookie,
+  saveKeysToCookie,
+} from './systems/storage/builderStorage';
 import PreviewCanvas from './components/PreviewCanvas';
 import LayerPanel from './components/LayerPanel';
 import Inspector from './components/layout/Inspector';
+import AdvancedPanelNav, { type BuilderPanelId } from './components/navigation/AdvancedPanelNav';
+import ModeToggle, { type BuilderMode } from './components/navigation/ModeToggle';
+import {
+  SourcePanel,
+  LayersPanel,
+  PosterPanel,
+  BadgesPanel,
+  SelectionPanel,
+} from './components/panels';
 import MobileDock from './components/layout/MobileDock';
+import ToolbarBtn from './components/toolbar/ToolbarButton';
+import ZoomOverlay from './components/canvas/ZoomOverlay';
 import KeyboardShortcutsModal from './components/KeyboardShortcutsModal';
 import ResetDialog from './components/ResetDialogue';
 import ImportDialog from './components/ImportDialogue';
@@ -39,239 +63,11 @@ import {
   Type,
   ChevronDown,
   Search,
-  Coffee,
 } from 'lucide-react';
 import { usePosterHistory } from './hooks/usePosterHistory';
 import ContextMenu, { type ContextMenuState, type LayerTargetId } from './components/ContextMenu';
 import CommandPalette, { type PaletteCommand } from './components/CommandPalette';
 
-const STORAGE_KEY = 'posterium_config_v2';
-const MAX_QUERY_CONFIG_LENGTH = 12000; // Guard against oversized URL payloads/memory abuse in base64 config loading.
-
-// ── Cookie helpers ────────────────────────────────────────────────────────────
-const COOKIE_KEY = 'posterium_apikeys_v1';
-const saveKeysToCookie = (keys: ApiKeys) => {
-  try {
-    const val = encodeURIComponent(JSON.stringify(keys));
-    const exp = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toUTCString();
-    document.cookie = `${COOKIE_KEY}=${val}; expires=${exp}; path=/; SameSite=Strict`;
-  } catch {
-    /* ignore */
-  }
-};
-const loadKeysFromCookie = (): ApiKeys => {
-  try {
-    const match = document.cookie.match(new RegExp(`(?:^|; )${COOKIE_KEY}=([^;]*)`));
-    if (!match) return {};
-    return JSON.parse(decodeURIComponent(match[1])) || {};
-  } catch {
-    return {};
-  }
-};
-
-// ── Toolbar button ──────────────────────────────────────────────────────────
-interface ToolbarBtnProps {
-  onClick?: () => void;
-  disabled?: boolean;
-  label: string;
-  danger?: boolean;
-  href?: string;
-  active?: boolean;
-  children: React.ReactNode;
-  hideOnMobile?: boolean;
-}
-const ToolbarBtn = memo<ToolbarBtnProps>(
-  ({ onClick, disabled, label, danger, href, active, children, hideOnMobile = false }) => {
-    const base = `relative group w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-150 select-none outline-none focus-visible:ring-2 focus-visible:ring-[#C47C2E] ${hideOnMobile ? 'hidden lg:flex' : ''}`;
-    const cls = `${base} ${
-      disabled
-        ? 'cursor-not-allowed pointer-events-none'
-        : active
-          ? 'cursor-pointer'
-          : 'active:scale-95 cursor-pointer'
-    }`;
-
-    const activeStyle = active
-      ? {
-          color: 'var(--film-amber)',
-          background: 'rgba(196,124,46,0.1)',
-          border: '1px solid rgba(196,124,46,0.2)',
-        }
-      : disabled
-        ? { color: 'rgba(255,255,255,0.15)', border: '1px solid transparent', opacity: 0.5 }
-        : danger
-          ? { color: 'var(--film-text-dim)', border: '1px solid transparent' }
-          : { color: 'var(--film-text-dim)', border: '1px solid transparent' };
-
-    const tooltip = !disabled && (
-      <span
-        className="absolute top-full mt-2 left-1/2 -translate-x-1/2 px-2 py-1 rounded-md text-[10px] font-medium border whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-150 delay-300 pointer-events-none z-[200] shadow-lg syne-font"
-        style={{
-          background: 'var(--film-mid)',
-          color: 'var(--film-cream)',
-          borderColor: 'rgba(255,255,255,0.08)',
-        }}
-      >
-        {label}
-      </span>
-    );
-
-    const hoverEvents =
-      !disabled && !active
-        ? {
-            onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {
-              const el = e.currentTarget as HTMLElement;
-              if (danger) {
-                el.style.color = 'rgba(248,113,113,0.8)';
-                el.style.background = 'rgba(248,113,113,0.08)';
-              } else {
-                el.style.color = 'var(--film-text-label)';
-                el.style.background = 'rgba(196,124,46,0.07)';
-              }
-            },
-            onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {
-              const el = e.currentTarget as HTMLElement;
-              el.style.color = 'var(--film-text-dim)';
-              el.style.background = 'transparent';
-            },
-          }
-        : {};
-
-    if (href)
-      return (
-        <a
-          href={href}
-          target="_blank"
-          rel="noreferrer noopener"
-          className={cls}
-          aria-label={label}
-          style={activeStyle}
-          {...hoverEvents}
-        >
-          {children}
-          {tooltip}
-        </a>
-      );
-    return (
-      <button
-        onClick={onClick}
-        disabled={!!disabled}
-        className={cls}
-        aria-label={label}
-        aria-disabled={disabled}
-        style={activeStyle}
-        {...hoverEvents}
-      >
-        {children}
-        {tooltip}
-      </button>
-    );
-  }
-);
-ToolbarBtn.displayName = 'ToolbarBtn';
-
-// ── Zoom/Fullscreen Overlay ───────────────────────────────────────────────────
-const ZoomOverlay = memo<{
-  isFullscreen: boolean;
-  rightSidebarWidth: number;
-  onToggleFullscreen: () => void;
-  onZoomIn: () => void;
-  onZoomOut: () => void;
-  onResetView: () => void;
-  isMobile: boolean;
-}>(
-  ({
-    isFullscreen,
-    rightSidebarWidth,
-    onToggleFullscreen,
-    onZoomIn,
-    onZoomOut,
-    onResetView,
-    isMobile,
-  }) => (
-    <div
-      className={`fixed z-40 flex items-center gap-1 rounded-xl select-none ${isMobile ? 'flex-row' : 'flex-col'}`}
-      style={{
-        ...(isMobile
-          ? { bottom: 76, right: 12 }
-          : {
-              top: '50%',
-              transform: 'translateY(-50%)',
-              right: isFullscreen ? 20 : rightSidebarWidth + 20,
-              transition: 'right 0.3s cubic-bezier(0.16,1,0.3,1)',
-            }),
-        background: 'rgba(14,13,11,0.92)',
-        backdropFilter: 'blur(16px)',
-        border: '1px solid rgba(196,124,46,0.18)',
-        padding: '6px',
-        boxShadow: '0 8px 32px rgba(0,0,0,0.6)',
-      }}
-    >
-      {[
-        { icon: <ZoomIn size={15} />, label: 'Zoom In', action: onZoomIn },
-        { icon: <ZoomOut size={15} />, label: 'Zoom Out', action: onZoomOut },
-        { icon: <Maximize2 size={14} />, label: 'Reset View', action: onResetView },
-      ].map(({ icon, label, action }) => (
-        <button
-          key={label}
-          onClick={action}
-          title={label}
-          className="w-8 h-8 rounded-lg flex items-center justify-center transition-all active:scale-90"
-          style={{
-            color: 'var(--film-text-dim)',
-            cursor: 'pointer',
-            background: 'transparent',
-            border: 'none',
-          }}
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLElement).style.color = 'var(--film-amber)';
-            (e.currentTarget as HTMLElement).style.background = 'rgba(196,124,46,0.1)';
-          }}
-          onMouseLeave={(e) => {
-            (e.currentTarget as HTMLElement).style.color = 'var(--film-text-dim)';
-            (e.currentTarget as HTMLElement).style.background = 'transparent';
-          }}
-        >
-          {icon}
-        </button>
-      ))}
-      {/* Divider — hidden on mobile */}
-      {!isMobile && (
-        <div
-          style={{ width: 20, height: 1, background: 'rgba(255,255,255,0.08)', margin: '2px 0' }}
-        />
-      )}
-      {/* Fullscreen toggle — desktop only */}
-      {!isMobile && (
-        <button
-          onClick={onToggleFullscreen}
-          title={isFullscreen ? 'Exit Fullscreen (F or Esc)' : 'Enter Fullscreen (F)'}
-          className="w-8 h-8 rounded-lg flex items-center justify-center transition-all active:scale-90"
-          style={{
-            color: isFullscreen ? 'rgba(196,124,46,0.7)' : 'var(--film-text-dim)',
-            cursor: 'pointer',
-            background: 'transparent',
-            border: 'none',
-          }}
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLElement).style.color = 'var(--film-amber)';
-            (e.currentTarget as HTMLElement).style.background = 'rgba(196,124,46,0.1)';
-          }}
-          onMouseLeave={(e) => {
-            (e.currentTarget as HTMLElement).style.color = isFullscreen
-              ? 'rgba(196,124,46,0.7)'
-              : 'var(--film-text-dim)';
-            (e.currentTarget as HTMLElement).style.background = 'transparent';
-          }}
-        >
-          {isFullscreen ? <Minimize2 size={15} /> : <Maximize2 size={15} />}
-        </button>
-      )}
-    </div>
-  )
-);
-ZoomOverlay.displayName = 'ZoomOverlay';
-
 // ── Studio layout ─────────────────────────────────────────────────────────────
 const StudioLayout: React.FC<{
   config: PosterConfig;
@@ -283,6 +79,7 @@ const StudioLayout: React.FC<{
   redo: () => void;
   canUndo: boolean;
   canRedo: boolean;
+  initialMode?: BuilderMode;
 }> = ({
   config,
   setConfig,
@@ -293,9 +90,11 @@ const StudioLayout: React.FC<{
   redo,
   canUndo,
   canRedo,
+  initialMode = 'simple',
 }) => {
   const {
     activeTab,
+    setActiveTab,
     mobileSheetMode,
     setMobileSheetMode,
     selectedIds,
@@ -309,6 +108,8 @@ const StudioLayout: React.FC<{
     toggleViewOption,
   } = useEditor();
 
+  const [builderMode, setBuilderMode] = useState<BuilderMode>(initialMode);
+  const [advancedPanel, setAdvancedPanel] = useState<BuilderPanelId>('source');
   const [isResetOpen, setIsResetOpen] = useState(false);
   const [isImportOpen, setIsImportOpen] = useState(false);
   const [leftVisible, setLeftVisible] = useState(true);
@@ -320,6 +121,20 @@ const StudioLayout: React.FC<{
   const exportBtnRef = useRef<HTMLButtonElement>(null);
   const toggleFullscreen = useCallback(() => setIsFullscreen((v) => !v), []);
 
+  useEffect(() => {
+    if (['source', 'layers', 'poster', 'badges', 'selection'].includes(activeTab)) {
+      setAdvancedPanel(activeTab as BuilderPanelId);
+    }
+  }, [activeTab]);
+
+  const switchAdvancedPanel = useCallback(
+    (panel: BuilderPanelId) => {
+      setAdvancedPanel(panel);
+      setActiveTab(panel);
+    },
+    [setActiveTab]
+  );
+
   const [isDesktop, setIsDesktop] = useState(
     () => typeof window !== 'undefined' && window.innerWidth >= 1024
   );
@@ -397,7 +212,9 @@ const StudioLayout: React.FC<{
         }
         if (hasLogo) {
           const currentX =
-            next.logoX !== null && next.logoX !== undefined ? next.logoX : Math.round((CANVAS_WIDTH - next.logoW) / 2);
+            next.logoX !== null && next.logoX !== undefined
+              ? next.logoX
+              : Math.round((CANVAS_WIDTH - next.logoW) / 2);
           next.logoX = Math.max(1 - next.logoW, Math.min(currentX + dx, CANVAS_WIDTH - 1));
           next.logoY = Math.max(1 - next.logoH, Math.min(next.logoY + dy, CANVAS_HEIGHT - 1));
         }
@@ -412,8 +229,14 @@ const StudioLayout: React.FC<{
               : Math.max(0, Math.min(CANVAS_HEIGHT - boxH, next.minimalTextY + dy));
         }
         if (activeMinimal.includes('minimal-year')) {
-          next.minimalMetaX = Math.max(0, Math.min(CANVAS_WIDTH - 120, (next.minimalMetaX ?? 26) + dx));
-          next.minimalMetaY = Math.max(0, Math.min(CANVAS_HEIGHT - 40, (next.minimalMetaY ?? 672) + dy));
+          next.minimalMetaX = Math.max(
+            0,
+            Math.min(CANVAS_WIDTH - 120, (next.minimalMetaX ?? 26) + dx)
+          );
+          next.minimalMetaY = Math.max(
+            0,
+            Math.min(CANVAS_HEIGHT - 40, (next.minimalMetaY ?? 672) + dy)
+          );
         }
         if (activeMinimal.includes('minimal-duration')) {
           next.minimalDurationX = Math.max(
@@ -430,7 +253,7 @@ const StudioLayout: React.FC<{
           activeMinimal
             .filter((id) => id.startsWith('minimal-rating-'))
             .forEach((id) => {
-              const idx = Number(id.split('-').at(-1) ?? -1);
+              const idx = Number(id.split('-').pop() ?? -1);
               if (!Number.isFinite(idx) || !list[idx]) return;
               list[idx] = {
                 ...list[idx],
@@ -610,7 +433,10 @@ const StudioLayout: React.FC<{
       }
       if (inInput) return;
       if (
-        (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') &&
+        (e.key === 'ArrowUp' ||
+          e.key === 'ArrowDown' ||
+          e.key === 'ArrowLeft' ||
+          e.key === 'ArrowRight') &&
         (selectedIdsRef.current.size > 0 ||
           selectedLogoRef.current ||
           selectedMinimalElementsRef.current.size > 0)
@@ -1052,6 +878,38 @@ const StudioLayout: React.FC<{
       : selectedIds.has(ctxMenu.badgeId)
     : false;
 
+  const sharedPanelProps = {
+    config,
+    setConfig,
+    selectedIds,
+    onSelect: handleSelectionOverride,
+    detailLevel: 'advanced' as const,
+  };
+  const sharedInspectorProps = {
+    config,
+    setConfig,
+    selectedIds,
+    selectedLogo,
+    selectedMinimalElements,
+    detailLevel: 'advanced' as const,
+  };
+  const renderAdvancedPanel = () => {
+    switch (advancedPanel) {
+      case 'source':
+        return <SourcePanel {...sharedPanelProps} chrome={false} />;
+      case 'layers':
+        return <LayersPanel {...sharedPanelProps} chrome={false} />;
+      case 'poster':
+        return <PosterPanel {...sharedPanelProps} chrome={false} />;
+      case 'badges':
+        return <BadgesPanel {...sharedInspectorProps} />;
+      case 'selection':
+        return <SelectionPanel {...sharedInspectorProps} />;
+      default:
+        return null;
+    }
+  };
+
   return (
     <>
       <a
@@ -1106,7 +964,9 @@ const StudioLayout: React.FC<{
           onSendToBack={(id) => (id === 'logo' ? moveLogoLayer('toback') : moveLayer(id, 'toback'))}
           onHide={hideLayer}
           onShowAll={showAllBadges}
-          onSelect={(id) => (id === 'logo' ? handleLogoSelection(false) : handleSelectionOverride(id, false))}
+          onSelect={(id) =>
+            id === 'logo' ? handleLogoSelection(false) : handleSelectionOverride(id, false)
+          }
           onDeselect={() => clearSelection()}
           onSelectAll={() => setBatchSelection(config.ratings)}
           onDeselectAll={clearSelection}
@@ -1180,16 +1040,7 @@ const StudioLayout: React.FC<{
                   P
                 </span>
               </a>
-              <a
-                href="#"
-                aria-label="Support us by Buying us a Coffee"
-                className="flex items-center gap-1 h-7 px-2 sm:px-2.5 rounded-md transition-all active:scale-95 bg-[rgba(196,124,46,0.16)] border border-[rgba(196,124,46,0.28)] text-[var(--film-cream)] hover:bg-[rgba(196,124,46,0.24)] hover:border-[rgba(196,124,46,0.42)]"
-              >
-                <Coffee size={12} className="shrink-0 fill-current" />
-                <span className="hidden min-[901px]:inline text-[10px] syne-font font-bold uppercase tracking-wider">
-                  Support
-                </span>
-              </a>
+              <ModeToggle mode={builderMode} onChange={setBuilderMode} />
               <button
                 onClick={() => setPaletteOpen(true)}
                 title="Search commands (⌘K)"
@@ -1408,12 +1259,17 @@ const StudioLayout: React.FC<{
                 opacity: leftVisible ? 1 : 0,
               }}
             >
-              <LayerPanel
-                config={config}
-                setConfig={setConfig}
-                selectedIds={selectedIds}
-                onSelect={handleSelectionOverride}
-              />
+              {builderMode === 'advanced' ? (
+                <AdvancedPanelNav activePanel={advancedPanel} onChange={switchAdvancedPanel} />
+              ) : (
+                <LayerPanel
+                  config={config}
+                  setConfig={setConfig}
+                  selectedIds={selectedIds}
+                  onSelect={handleSelectionOverride}
+                  detailLevel="simple"
+                />
+              )}
               <div
                 onMouseDown={startResizeLeft}
                 className="absolute inset-y-0 right-0 w-2 cursor-col-resize group z-50"
@@ -1497,7 +1353,11 @@ const StudioLayout: React.FC<{
               >
                 <div className="absolute inset-y-0 left-0 w-[2px] bg-transparent group-hover:bg-[rgba(196,124,46,0.4)] transition-colors duration-150" />
               </div>
-              <Inspector config={config} setConfig={setConfig} />
+              {builderMode === 'advanced' ? (
+                renderAdvancedPanel()
+              ) : (
+                <Inspector config={config} setConfig={setConfig} detailLevel="simple" />
+              )}
             </aside>
           )}
 
@@ -1540,10 +1400,11 @@ const StudioLayout: React.FC<{
                     setConfig={setConfig}
                     selectedIds={selectedIds}
                     onSelect={handleSelectionOverride}
+                    detailLevel={builderMode}
                   />
                 )}
                 {(activeTab === 'badges' || activeTab === 'selection') && (
-                  <Inspector config={config} setConfig={setConfig} />
+                  <Inspector config={config} setConfig={setConfig} detailLevel={builderMode} />
                 )}
               </div>
             </div>
@@ -1567,6 +1428,8 @@ const StudioLayout: React.FC<{
           onZoomOut={() => dispatchZoom(-0.25)}
           onResetView={dispatchResetView}
           isMobile={!isDesktop}
+          viewOptions={viewOptions}
+          onToggleViewOption={toggleViewOption}
         />
       </div>
     </>
@@ -1574,7 +1437,7 @@ const StudioLayout: React.FC<{
 };
 
 // ── Root app ──────────────────────────────────────────────────────────────────
-const BuilderApp: React.FC = () => {
+const BuilderApp: React.FC<{ initialMode?: BuilderMode }> = ({ initialMode = 'simple' }) => {
   const {
     state: config,
     setState: setConfig,
@@ -1584,7 +1447,7 @@ const BuilderApp: React.FC = () => {
     canRedo,
   } = usePosterHistory(() => {
     try {
-      const saved = localStorage.getItem(STORAGE_KEY);
+      const saved = localStorage.getItem(BUILDER_STORAGE_KEY);
       const cfg = saved ? (JSON.parse(saved) as PosterConfig) : DEFAULT_CONFIG;
       const cookieKeys = loadKeysFromCookie();
       if (cookieKeys && Object.keys(cookieKeys).some((k) => cookieKeys[k as keyof ApiKeys])) {
@@ -1599,7 +1462,7 @@ const BuilderApp: React.FC = () => {
   const [baseUrl, setBaseUrl] = useState(DEFAULT_API_BASE);
 
   useEffect(() => {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+    localStorage.setItem(BUILDER_STORAGE_KEY, JSON.stringify(config));
   }, [config]);
 
   useEffect(() => {
@@ -1674,6 +1537,7 @@ const BuilderApp: React.FC = () => {
         redo={redo}
         canUndo={canUndo}
         canRedo={canRedo}
+        initialMode={initialMode}
       />
     </EditorProvider>
   );
diff --git a/src/components/builder/systems/storage/builderStorage.ts b/src/components/builder/systems/storage/builderStorage.ts
new file mode 100644
index 0000000..77323fc
--- /dev/null
+++ b/src/components/builder/systems/storage/builderStorage.ts
@@ -0,0 +1,25 @@
+import type { ApiKeys } from '../../types';
+
+export const BUILDER_STORAGE_KEY = 'posterium_config_v2';
+export const MAX_QUERY_CONFIG_LENGTH = 12000;
+const COOKIE_KEY = 'posterium_apikeys_v1';
+
+export const saveKeysToCookie = (keys: ApiKeys) => {
+  try {
+    const val = encodeURIComponent(JSON.stringify(keys));
+    const exp = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toUTCString();
+    document.cookie = `${COOKIE_KEY}=${val}; expires=${exp}; path=/; SameSite=Strict`;
+  } catch {
+    /* ignore */
+  }
+};
+
+export const loadKeysFromCookie = (): ApiKeys => {
+  try {
+    const match = document.cookie.match(new RegExp(`(?:^|; )${COOKIE_KEY}=([^;]*)`));
+    if (!match) return {};
+    return JSON.parse(decodeURIComponent(match[1])) || {};
+  } catch {
+    return {};
+  }
+};
diff --git a/src/pages/abuild.astro b/src/pages/abuild.astro
index 57e13b6..63bd1b6 100644
--- a/src/pages/abuild.astro
+++ b/src/pages/abuild.astro
@@ -1,23 +1,23 @@
----
-// src/pages/abuild.astro
-import BaseLayout from '@/layouts/BaseLayout.astro';
-import PageSEO from '@/components/seo/PageSEO.astro';
-import AdvancedBuilderApp from '@/components/builder/AdvancedBuilderApp.tsx';
-import '@/styles/global.css';
----
-
-<BaseLayout
-  title="Advanced Poster Builder | Posterium"
-  description="Advanced poster editor with vertical panel navigation. Drag-and-drop badge positioning with panel-based layout for power users."
-  canonical="https://posters.spicydevs.xyz/abuild"
-  bodyClass="overflow-hidden"
->
-  <PageSEO slot="head" routeKey="/build" />
-
-  <div class="sr-only">
-    <h2>Posterium Advanced Builder</h2>
-    <p>Advanced visual editor with vertical panel navigation for creating custom movie and TV posters with live rating badges.</p>
-  </div>
-
-  <AdvancedBuilderApp client:only="react" />
-</BaseLayout>
\ No newline at end of file
+---
+// src/pages/abuild.astro
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import PageSEO from '@/components/seo/PageSEO.astro';
+import BuilderApp from '@/components/builder/index.tsx';
+import '@/styles/global.css';
+---
+
+<BaseLayout
+  title="Poster Builder - Advanced Mode | Posterium"
+  description="Advanced poster editor with vertical panel navigation. Drag-and-drop badge positioning with panel-based layout for power users."
+  canonical="https://posters.spicydevs.xyz/abuild"
+  bodyClass="overflow-hidden"
+>
+  <PageSEO slot="head" routeKey="/build" />
+
+  <div class="sr-only">
+    <h2>Posterium Advanced Builder</h2>
+    <p>Advanced visual editor with vertical panel navigation for creating custom movie and TV posters with live rating badges.</p>
+  </div>
+
+  <BuilderApp initialMode="advanced" client:only="react" />
+</BaseLayout>