// Shared primitives that match Control+S design tokens.
// Uses CSS variables defined in the parent HTML, mirrors the existing
// shadcn-derived components without re-importing the whole stack.

const { useState: useStateP, useRef: useRefP, useEffect: useEffectP, useMemo: useMemoP, useCallback: useCallbackP } = React;

// ----------------------- Icons (Heroicons outline subset) -----------------------
function Icon({ name, className = "h-4 w-4", strokeWidth = 1.5 }) {
  const paths = {
    "building-office": "M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21",
    briefcase: "M20.25 14.15v4.6a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25v-4.6m16.5 0a2.25 2.25 0 0 0-1.07-1.916l-7.5-4.615a2.25 2.25 0 0 0-2.36 0L4.82 12.234a2.25 2.25 0 0 0-1.07 1.916m16.5 0V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.15",
    document: "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25M9 16.5v.75m3-3v3M15 12v5.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z",
    sparkles: "M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z",
    plus: "M12 4.5v15m7.5-7.5h-15",
    "arrow-right": "M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3",
    "arrow-up-tray": "M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 7.5m0 0L7.5 12m4.5-4.5v12",
    check: "m4.5 12.75 6 6 9-13.5",
    "check-circle": "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z",
    clock: "M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z",
    chat: "M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z",
    flag: "M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.524 48.524 0 0 1-.005-10.499l-3.11.732a9 9 0 0 1-6.085-.711l-.108-.054a9 9 0 0 0-6.208-.682L3 4.5M3 15V4.5",
    home: "m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25",
    "user-circle": "M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z",
    chevronDown: "m19.5 8.25-7.5 7.5-7.5-7.5",
    chevronUp: "m4.5 15.75 7.5-7.5 7.5 7.5",
    chevronRight: "m8.25 4.5 7.5 7.5-7.5 7.5",
    cog: "M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28Z M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z",
    bolt: "m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z",
    eye: "M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z",
    "arrow-trending-up": "m2.25 18 9-9 4.5 4.5L21.75 6.75M21.75 6.75H15.75M21.75 6.75v6",
    inbox: "M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z",
    moon: "M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z",
    fire: "M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z M12 18a3.75 3.75 0 0 0 .495-7.467 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z",
    "exclamation-circle": "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z",
    funnel: "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z",
    snooze: "M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z",
    x: "M6 18 18 6M6 6l12 12",
    upload: "M9 12.75 11.25 15 15 9.75",
    "arrow-path": "M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99",
    tag: "M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z M6 6h.008v.008H6V6Z",
    bars: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5",
    grid: "M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z",
  };
  const d = paths[name];
  if (!d) return null;
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth={strokeWidth} stroke="currentColor" aria-hidden="true">
      <path strokeLinecap="round" strokeLinejoin="round" d={d} />
    </svg>
  );
}

// ----------------------- Buttons -----------------------
function Button({ variant = "default", size = "md", className = "", children, ...props }) {
  const sizeMap = {
    sm: "h-8 px-3 text-xs",
    md: "h-9 px-4 text-sm",
    lg: "h-10 px-5 text-sm",
    icon: "h-9 w-9",
    "icon-sm": "h-7 w-7",
  };
  const variantMap = {
    default: "bg-secondary text-main hover:bg-[color:oklch(85%_0.06_185)]",
    main: "bg-main text-white hover:bg-[color:oklch(28%_0.02_245)]",
    secondary: "bg-secondary/15 text-main hover:bg-secondary/25 border border-secondary/40",
    outline: "border border-main/15 bg-transparent text-main hover:bg-main/5",
    ghost: "bg-transparent text-main/70 hover:bg-main/5 hover:text-main",
    "ghost-on-dark": "bg-transparent text-white/70 hover:bg-white/10 hover:text-white",
    "outline-on-dark": "border border-white/15 bg-transparent text-white/85 hover:bg-white/10 hover:text-white",
    danger: "bg-transparent text-[#E07A5F] hover:bg-[#E07A5F]/10 border border-[#E07A5F]/30",
  };
  return (
    <button
      className={`inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/50 disabled:opacity-50 disabled:pointer-events-none ${sizeMap[size]} ${variantMap[variant]} ${className}`}
      {...props}
    >
      {children}
    </button>
  );
}

// ----------------------- Badge -----------------------
function Badge({ variant = "default", className = "", children, onClick, ...props }) {
  const variantMap = {
    default: "bg-secondary text-main border-secondary",
    secondary: "bg-secondary/15 text-main border-secondary/40",
    outline: "bg-transparent text-main/70 border-main/20",
    "outline-on-dark": "bg-white/5 text-white/80 border-white/15",
    "secondary-on-dark": "bg-secondary/20 text-secondary border-secondary/40",
    success: "bg-[#A8D8A8]/20 text-[#3a7a4a] border-[#A8D8A8]/40",
    warning: "bg-[#F4C28A]/25 text-[#8a5a1f] border-[#F4C28A]/50",
    danger: "bg-[#E07A5F]/15 text-[#a44832] border-[#E07A5F]/35",
  };
  return (
    <span
      onClick={onClick}
      className={`inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] font-medium leading-tight transition-colors ${variantMap[variant]} ${onClick ? "cursor-pointer" : ""} ${className}`}
      {...props}
    >
      {children}
    </span>
  );
}

// ----------------------- Card -----------------------
function Card({ className = "", children, onClick, hoverable }) {
  return (
    <div
      onClick={onClick}
      className={`rounded-xl bg-white border border-main/10 shadow-[0_1px_2px_rgba(64,76,91,0.04)] ${
        hoverable ? "transition-all hover:border-secondary/50 hover:shadow-[0_4px_18px_-8px_rgba(64,76,91,0.18)] cursor-pointer" : ""
      } ${className}`}
    >
      {children}
    </div>
  );
}

function DarkCard({ className = "", children }) {
  return (
    <div className={`rounded-xl bg-main text-white border border-main/30 shadow-[0_4px_24px_-12px_rgba(64,76,91,0.4)] ${className}`}>
      {children}
    </div>
  );
}

// ----------------------- Mini sparkline / progress -----------------------
function ProgressBar({ value, color = "var(--color-secondary)", className = "" }) {
  return (
    <div className={`relative h-1.5 w-full rounded-full bg-main/8 overflow-hidden ${className}`}>
      <div
        className="absolute inset-y-0 left-0 rounded-full transition-[width] duration-500 ease-out"
        style={{ width: `${Math.max(0, Math.min(100, value))}%`, backgroundColor: color }}
      />
    </div>
  );
}

function ProgressBarOnDark({ value, color = "var(--color-secondary)", className = "" }) {
  return (
    <div className={`relative h-1.5 w-full rounded-full bg-white/10 overflow-hidden ${className}`}>
      <div
        className="absolute inset-y-0 left-0 rounded-full transition-[width] duration-500 ease-out"
        style={{ width: `${Math.max(0, Math.min(100, value))}%`, backgroundColor: color }}
      />
    </div>
  );
}

// ----------------------- Avatar -----------------------
function Avatar({ initials, color = "var(--color-secondary)", size = "md", className = "" }) {
  const sizeMap = { xs: "h-5 w-5 text-[9px]", sm: "h-6 w-6 text-[10px]", md: "h-7 w-7 text-[11px]", lg: "h-9 w-9 text-xs" };
  return (
    <div
      className={`rounded-full inline-flex items-center justify-center font-semibold text-main shrink-0 ${sizeMap[size]} ${className}`}
      style={{ backgroundColor: color }}
    >
      {initials}
    </div>
  );
}

function AvatarStack({ members, max = 4 }) {
  const visible = members.slice(0, max);
  const extra = members.length - visible.length;
  return (
    <div className="flex items-center -space-x-1.5">
      {visible.map((m) => (
        <div key={m.id} className="ring-2 ring-white rounded-full">
          <Avatar initials={m.initials} color={m.color} size="sm" />
        </div>
      ))}
      {extra > 0 && (
        <div className="ring-2 ring-white rounded-full">
          <div className="h-6 w-6 rounded-full bg-main/8 inline-flex items-center justify-center text-[10px] font-semibold text-main/70">
            +{extra}
          </div>
        </div>
      )}
    </div>
  );
}

// ----------------------- KPI tile -----------------------
function KpiTile({ label, value, trend, trendLabel, sublabel, accent = false, dark = false, icon }) {
  const valueColor = dark ? "text-white" : "text-main";
  const labelColor = dark ? "text-white/60" : "text-main/60";
  const subColor = dark ? "text-white/50" : "text-main/55";
  return (
    <div className={`rounded-xl px-5 py-4 border ${dark ? "bg-main border-main/40" : accent ? "bg-secondary/15 border-secondary/50" : "bg-white border-main/10"}`}>
      <div className="flex items-center justify-between">
        <p className={`text-[11px] uppercase tracking-[0.08em] font-semibold ${labelColor}`}>{label}</p>
        {icon && (
          <span className={dark ? "text-secondary" : "text-main/40"}>
            <Icon name={icon} className="h-4 w-4" strokeWidth={1.6} />
          </span>
        )}
      </div>
      <div className="mt-2 flex items-baseline gap-2">
        <span className={`text-3xl font-semibold tracking-tight tabular-nums ${valueColor}`}>{value}</span>
        {sublabel && <span className={`text-xs font-medium ${subColor}`}>{sublabel}</span>}
      </div>
      {trend && (
        <div className={`mt-2 flex items-center gap-1 text-xs font-medium ${trend > 0 ? "text-[#3a7a4a]" : trend < 0 ? "text-[#a44832]" : (dark ? "text-white/60" : "text-main/60")}`}>
          <Icon name="arrow-trending-up" className={`h-3.5 w-3.5 ${trend < 0 ? "rotate-180" : ""}`} />
          <span>{trend > 0 ? "+" : ""}{trend}{trendLabel ? ` ${trendLabel}` : ""}</span>
        </div>
      )}
    </div>
  );
}

// ----------------------- Maturity dot grid (matrix) -----------------------
function ControlMatrix({ controls, density = "comfortable", onSelect, maxRows }) {
  const cellSize = density === "compact" ? 10 : 14;
  const gap = density === "compact" ? 3 : 4;
  return (
    <div className="flex flex-wrap" style={{ gap: `${gap}px` }}>
      {controls.map((c) => (
        <div
          key={c.id}
          title={`${c.controlId}${c.score ? ` — maturity ${c.score}` : " — unassessed"}`}
          onClick={() => onSelect && onSelect(c)}
          className="rounded-[3px] cursor-pointer transition-transform hover:scale-[1.4]"
          style={{
            width: cellSize,
            height: cellSize,
            backgroundColor: c.score == null ? "transparent" : window.MockData.maturityColor(c.score),
            boxShadow: c.score == null ? "inset 0 0 0 1px rgba(147,210,204,0.5)" : "inset 0 0 0 1px rgba(147,210,204,0.6)",
          }}
        />
      ))}
    </div>
  );
}

// ----------------------- Confidence pill -----------------------
function ConfidencePill({ value }) {
  const pct = Math.round(value * 100);
  const tone = value >= 0.9 ? "success" : value >= 0.8 ? "secondary" : "warning";
  return <Badge variant={tone}>{pct}% confidence</Badge>;
}

// ----------------------- Header -----------------------
function AppHeader({ activeNav = "projects", onLogoClick }) {
  const navItems = [
    { key: "welcome", label: "Welcome", icon: "home" },
    { key: "projects", label: "Projects", icon: "briefcase", indicator: "running" },
    { key: "activity", label: "Activity", icon: "clock" },
    { key: "evidence", label: "Evidence", icon: "document", indicator: "queued" },
  ];
  return (
    <header className="relative bg-main text-white px-8 py-2 flex items-center min-h-[56px] border-b border-secondary/40">
      <div className="flex items-center gap-3">
        <div onClick={onLogoClick} className="flex items-center gap-2.5 cursor-pointer">
          <div className="h-7 w-7 rounded-md bg-secondary flex items-center justify-center text-main font-bold text-sm">+S</div>
          <span className="text-[15px] font-semibold tracking-tight">Control+S</span>
        </div>
      </div>

      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-1">
        {navItems.map((item) => {
          const isActive = activeNav === item.key;
          return (
            <a
              key={item.key}
              href="#"
              onClick={(e) => e.preventDefault()}
              className={`relative flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded transition-colors ${
                isActive ? "text-white" : "text-secondary hover:text-white"
              }`}
            >
              <Icon name={item.icon} className="h-4 w-4" />
              <span>{item.label}</span>
              {item.indicator && (
                <span className="ml-0.5 inline-flex items-center gap-[2px]">
                  <span className="h-[3px] w-[3px] rounded-full bg-secondary opacity-90 animate-pulse" />
                  <span className="h-[3px] w-[3px] rounded-full bg-secondary opacity-60 animate-pulse" style={{ animationDelay: "0.2s" }} />
                  <span className="h-[3px] w-[3px] rounded-full bg-secondary opacity-30 animate-pulse" style={{ animationDelay: "0.4s" }} />
                </span>
              )}
              {isActive && <span className="absolute inset-x-2 -bottom-2.5 h-0.5 rounded-full bg-secondary" />}
            </a>
          );
        })}
      </div>

      <div className="flex items-center gap-2 ml-auto">
        <div className="flex items-center gap-1 px-2 py-1 bg-main/80 border border-secondary/30 rounded text-sm cursor-pointer hover:border-secondary/50 transition-colors">
          <Icon name="building-office" className="h-3.5 w-3.5" />
          <span>Acme Security</span>
          <Icon name="chevronDown" className="h-3 w-3 opacity-60" />
        </div>
        <div className="ml-2 w-7 h-7 bg-main border border-secondary/40 rounded-full flex items-center justify-center cursor-pointer hover:border-secondary transition-colors">
          <Icon name="user-circle" className="h-4 w-4" />
        </div>
      </div>
    </header>
  );
}

// ----------------------- Tweaks Panel -----------------------
function TweaksPanel({ open, onClose, variant, setVariant, density, setDensity, showAttention, setShowAttention }) {
  if (!open) return null;
  return (
    <div className="fixed bottom-6 right-6 z-50 w-72 bg-white rounded-xl border border-main/15 shadow-[0_24px_48px_-16px_rgba(64,76,91,0.4)]">
      <div className="flex items-center justify-between px-4 py-3 border-b border-main/10">
        <p className="text-sm font-semibold text-main">Tweaks</p>
        <button onClick={onClose} className="text-main/50 hover:text-main">
          <Icon name="x" className="h-4 w-4" />
        </button>
      </div>
      <div className="p-4 space-y-4">
        <div>
          <p className="text-[11px] uppercase tracking-[0.08em] font-semibold text-main/60 mb-2">Variation</p>
          <div className="grid grid-cols-1 gap-1.5">
            {[
              { key: "pulse", label: "1 — Compliance Pulse", sub: "Spacious, exec view" },
              { key: "workbench", label: "2 — Workbench", sub: "Compact, split inbox" },
              { key: "heatmap", label: "3 — Heatmap", sub: "Visualization-led" },
            ].map((opt) => (
              <button
                key={opt.key}
                onClick={() => setVariant(opt.key)}
                className={`flex flex-col items-start gap-0.5 px-3 py-2 rounded-md border text-left transition ${
                  variant === opt.key ? "border-secondary bg-secondary/15 text-main" : "border-main/15 hover:bg-main/5 text-main/80"
                }`}
              >
                <span className="text-[13px] font-medium">{opt.label}</span>
                <span className="text-[11px] text-main/55">{opt.sub}</span>
              </button>
            ))}
          </div>
        </div>
        <div>
          <p className="text-[11px] uppercase tracking-[0.08em] font-semibold text-main/60 mb-2">Density</p>
          <div className="grid grid-cols-2 gap-1.5">
            {["comfortable", "compact"].map((d) => (
              <button
                key={d}
                onClick={() => setDensity(d)}
                className={`px-3 py-1.5 rounded-md border text-xs font-medium capitalize ${
                  density === d ? "border-secondary bg-secondary/15 text-main" : "border-main/15 hover:bg-main/5 text-main/70"
                }`}
              >
                {d}
              </button>
            ))}
          </div>
        </div>
        <div>
          <p className="text-[11px] uppercase tracking-[0.08em] font-semibold text-main/60 mb-2">Attention banner (V1)</p>
          <div className="grid grid-cols-2 gap-1.5">
            {[{ k: true, l: "Show" }, { k: false, l: "Hide" }].map((o) => (
              <button
                key={String(o.k)}
                onClick={() => setShowAttention(o.k)}
                className={`px-3 py-1.5 rounded-md border text-xs font-medium ${
                  showAttention === o.k ? "border-secondary bg-secondary/15 text-main" : "border-main/15 hover:bg-main/5 text-main/70"
                }`}
              >
                {o.l}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Icon,
  Button,
  Badge,
  Card,
  DarkCard,
  ProgressBar,
  ProgressBarOnDark,
  Avatar,
  AvatarStack,
  KpiTile,
  ControlMatrix,
  ConfidencePill,
  AppHeader,
  TweaksPanel,
});