diff --git a/packages/studio/src/components/renders/RenderQueue.test.tsx b/packages/studio/src/components/renders/RenderQueue.test.tsx
index dee603c965..f949a05ee2 100644
--- a/packages/studio/src/components/renders/RenderQueue.test.tsx
+++ b/packages/studio/src/components/renders/RenderQueue.test.tsx
@@ -4,6 +4,10 @@ import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { RenderQueue } from "./RenderQueue";
+import { getPersistedRenderSettings } from "./renderSettings";
+import { buttonBase, buttonSizes, buttonVariants, cn } from "../ui";
+import { isTypingTarget } from "../../utils/typingTarget";
+import { shouldIgnorePlaybackShortcutTarget } from "../../player/lib/playbackShortcuts";
 import type { FfmpegStatus } from "./useFfmpegStatus";
 
 // Encoder availability arrives as a prop (useRenderQueue owns the probe), so
@@ -18,6 +22,9 @@ let root: Root | null = null;
 beforeEach(() => {
   ffmpegStatus = { ok: true };
   recheck.mockClear();
+  // The format, frame-rate and quality controls write through to the real
+  // store, so each case has to start from the shipped defaults.
+  localStorage.clear();
 });
 
 afterEach(() => {
@@ -26,7 +33,10 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
-function mountRenderQueue(onStartRender: ReturnType<typeof vi.fn>) {
+function mountRenderQueue(
+  onStartRender: ReturnType<typeof vi.fn>,
+  compositionDimensions = { width: 1920, height: 1080 },
+) {
   const host = document.createElement("div");
   document.body.append(host);
   root = createRoot(host);
@@ -39,7 +49,7 @@ function mountRenderQueue(onStartRender: ReturnType<typeof vi.fn>) {
         onClearCompleted={vi.fn()}
         onStartRender={onStartRender}
         isRendering={false}
-        compositionDimensions={{ width: 1920, height: 1080 }}
+        compositionDimensions={compositionDimensions}
         ffmpeg={ffmpegStatus}
         ffmpegChecking={false}
         onRecheckFfmpeg={recheck}
@@ -49,37 +59,141 @@ function mountRenderQueue(onStartRender: ReturnType<typeof vi.fn>) {
   return host;
 }
 
-describe("RenderQueue resolution submission", () => {
-  it("submits the canonical landscape 4K preset selected by the user", () => {
+/** Base UI moves focus a task later than React renders; happy-dom is no faster. */
+const settle = () => act(async () => void (await new Promise((r) => setTimeout(r, 0))));
+
+function fire(el: Element, type: string, key?: string) {
+  const event =
+    key === undefined
+      ? new MouseEvent(type, { bubbles: true })
+      : new KeyboardEvent(type, { bubbles: true, key });
+  act(() => void el.dispatchEvent(event));
+}
+
+function triggerFor(host: HTMLElement, label: string): HTMLElement {
+  const trigger = host.querySelector<HTMLElement>(`[role="combobox"][aria-label="${label}"]`);
+  if (!trigger) throw new Error(`no select labelled ${label}`);
+  return trigger;
+}
+
+/**
+ * Opens a Select and walks the highlight down `steps` items before committing,
+ * the way a keyboard user does. The trigger is a real `<button>`, so Space
+ * reaches it as keydown, keyup and then a click the browser synthesises;
+ * happy-dom does not synthesise that click, so it is dispatched here.
+ */
+async function chooseByArrowing(trigger: HTMLElement, steps: number) {
+  fire(trigger, "keydown", " ");
+  fire(trigger, "keyup", " ");
+  act(() => trigger.click());
+  await settle();
+  for (let i = 0; i < steps; i += 1) {
+    fire(document.activeElement ?? document.body, "keydown", "ArrowDown");
+    await settle();
+  }
+  fire(document.activeElement ?? document.body, "keydown", "Enter");
+  await settle();
+}
+
+function exportButtonIn(host: HTMLElement): HTMLButtonElement {
+  const button = host.querySelector<HTMLButtonElement>('[data-testid="renders-export"]');
+  if (!button) throw new Error("export button did not render");
+  return button;
+}
+
+describe("RenderQueue controls", () => {
+  it("has no native select left in the panel", () => {
+    // R8. The four format / resolution / frame-rate / quality controls are the
+    // shared Select now; a native one would bring back an OS popup that no
+    // token can reach.
+    expect(mountRenderQueue(vi.fn()).querySelector("select")).toBeNull();
+  });
+
+  it("wears exactly the header Export's recipe, plus the full width", () => {
+    // AE3. Set equality, not "contains": the bug this replaces was an extra
+    // `text-[11px]` on this button, which `cn` resolved by dropping the size
+    // recipe's `text-step-12` and left the two Exports a type step apart.
+    const shared = cn(buttonBase, buttonVariants.primary, buttonSizes.md);
+    const classes = new Set(exportButtonIn(mountRenderQueue(vi.fn())).className.split(/\s+/));
+
+    expect(classes).toEqual(new Set([...shared.split(/\s+/), "w-full"]));
+  });
+
+  it("classifies the format Select the way it classified the native one (KTD13)", async () => {
+    const host = mountRenderQueue(vi.fn());
+    const reference = document.createElement("select");
+    document.body.append(reference);
+    await settle();
+
+    const trigger = triggerFor(host, "Format");
+
+    // Both true, not merely equal: two falses would agree and prove nothing.
+    expect(isTypingTarget(reference)).toBe(true);
+    expect(shouldIgnorePlaybackShortcutTarget(reference)).toBe(true);
+    expect(isTypingTarget(trigger)).toBe(isTypingTarget(reference));
+    expect(shouldIgnorePlaybackShortcutTarget(trigger)).toBe(
+      shouldIgnorePlaybackShortcutTarget(reference),
+    );
+  });
+
+  it("submits the canonical landscape 4K preset selected by the user", async () => {
     const onStartRender = vi.fn();
     const host = mountRenderQueue(onStartRender);
-    const resolutionSelect = [...host.querySelectorAll("select")].find((select) =>
-      [...select.options].some((option) => option.textContent?.startsWith("4K")),
-    );
-    if (!resolutionSelect) throw new Error("resolution selector did not render");
 
+    // Auto, 1080p, 4K: two steps down from the default.
+    await chooseByArrowing(triggerFor(host, "Resolution"), 2);
     act(() => {
-      resolutionSelect.value = "4k";
-      resolutionSelect.dispatchEvent(new Event("change", { bubbles: true }));
+      exportButtonIn(host).dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
 
-    const exportButton = [...host.querySelectorAll("button")].find(
-      (button) => button.textContent === "Export",
+    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "landscape-4k", 30);
+  });
+
+  it("refuses a resolution the composition cannot reach, and says why", async () => {
+    // 1080p on a 1280x720 comp is a 1.5x scale, which the producer rejects at
+    // render time. The option stays listed, because its label is where the
+    // reason lives, but the keyboard cannot commit it: highlighting it and
+    // pressing Enter leaves the resolution where it was.
+    const onStartRender = vi.fn();
+    const host = mountRenderQueue(onStartRender, { width: 1280, height: 720 });
+    const trigger = triggerFor(host, "Resolution");
+
+    fire(trigger, "keydown", " ");
+    fire(trigger, "keyup", " ");
+    act(() => trigger.click());
+    await settle();
+    const blocked = [...document.querySelectorAll('[role="option"]')].filter((option) =>
+      option.hasAttribute("data-disabled"),
     );
-    if (!exportButton) throw new Error("export button did not render");
+    expect(blocked).toHaveLength(1);
+    expect(blocked[0]?.textContent).toContain("not an integer scale of 1280×720");
+
+    fire(document.activeElement ?? document.body, "keydown", "ArrowDown");
+    await settle();
+    fire(document.activeElement ?? document.body, "keydown", "Enter");
+    await settle();
+    fire(document.activeElement ?? document.body, "keydown", "Escape");
+    await settle();
     act(() => {
-      exportButton.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      exportButtonIn(host).dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
 
-    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "landscape-4k", 30);
+    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "auto", 30);
   });
-});
 
-function exportButtonIn(host: HTMLElement): HTMLButtonElement {
-  const button = [...host.querySelectorAll("button")].find((b) => b.textContent === "Export");
-  if (!button) throw new Error("export button did not render");
-  return button;
-}
+  it("persists a changed format as the literal union value", async () => {
+    const host = mountRenderQueue(vi.fn());
+
+    // MP4, MOV, WebM: one step down commits "mov", not the label "MOV (ProRes)".
+    await chooseByArrowing(triggerFor(host, "Format"), 1);
+
+    expect(getPersistedRenderSettings()).toEqual({
+      format: "mov",
+      quality: "standard",
+      fps: 30,
+    });
+  });
+});
 
 describe("RenderQueue FFmpeg gate", () => {
   it("refuses Export and shows the install command when the server reports no FFmpeg", () => {
diff --git a/packages/studio/src/components/renders/RenderQueue.tsx b/packages/studio/src/components/renders/RenderQueue.tsx
index 40082ba340..307185d831 100644
--- a/packages/studio/src/components/renders/RenderQueue.tsx
+++ b/packages/studio/src/components/renders/RenderQueue.tsx
@@ -5,6 +5,9 @@ import { RenderQueueItem } from "./RenderQueueItem";
 import { FfmpegRequiredNotice } from "./FfmpegRequiredNotice";
 import type { FfmpegStatus } from "./useFfmpegStatus";
 import { Button } from "../ui/Button";
+import { IconButton } from "../ui/IconButton";
+import { Select, type SelectOption } from "../ui/Select";
+import { Tooltip } from "../ui/Tooltip";
 import { resolveFloatingPanelPosition, type FloatingPosition } from "../editor/floatingPanel";
 import type { RenderJob, ResolutionPreset } from "./useRenderQueue";
 import { getPersistedRenderSettings, persistRenderSettings } from "./renderSettings";
@@ -207,7 +210,7 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
         onFocus={show}
         onBlur={hide}
         onClick={() => setOpen((prev) => !prev)}
-        className="flex items-center justify-center p-0.5 -m-0.5 rounded-sm text-panel-text-5 hover:text-panel-text-3 transition-colors cursor-help outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent"
+        className="flex items-center justify-center p-0.5 -m-0.5 rounded-sm text-text-5 hover:text-text-3 transition-colors cursor-help outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-accent"
       >
         <svg
           width="12"
@@ -232,17 +235,17 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
             role="tooltip"
             onPointerEnter={show}
             onPointerLeave={hide}
-            className="fixed w-52 p-2 rounded-sm bg-panel-input border border-neutral-700 shadow-lg z-200"
+            className="fixed w-52 p-2 rounded-sm bg-input border border-border-input shadow-menu z-200"
             style={{ left: position?.left ?? -9999, top: position?.top ?? -9999 }}
           >
-            <p className="text-[10px] font-semibold text-panel-text-1 mb-0.5">{info.label}</p>
-            <p className="text-[9px] text-panel-text-3 leading-tight">{info.desc}</p>
-            <div className="mt-1.5 pt-1.5 border-t border-neutral-800">
+            <p className="text-step-10 font-semibold text-text-1 mb-0.5">{info.label}</p>
+            <p className="text-step-9 text-text-3 leading-tight">{info.desc}</p>
+            <div className="mt-1.5 pt-1.5 border-t border-border">
               {(["mp4", "mov", "webm"] as const)
                 .filter((f) => f !== format)
                 .map((f) => (
-                  <p key={f} className="text-[9px] text-panel-text-4 leading-relaxed">
-                    <span className="text-panel-text-3 font-medium">{FORMAT_INFO[f].label}</span>
+                  <p key={f} className="text-step-9 text-text-4 leading-relaxed">
+                    <span className="text-text-3 font-medium">{FORMAT_INFO[f].label}</span>
                     {" — "}
                     {FORMAT_INFO[f].desc}
                   </p>
@@ -255,14 +258,22 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
   );
 }
 
-const QUALITY_OPTIONS: {
-  value: "draft" | "standard" | "high";
-  label: string;
-  title: string;
-}[] = [
-  { value: "draft", label: "Draft", title: "Fast render, smaller file" },
-  { value: "standard", label: "Standard", title: "Good quality, balanced file size" },
-  { value: "high", label: "High Quality", title: "Best quality, larger file" },
+const FORMAT_OPTIONS: SelectOption[] = [
+  { value: "mp4", label: "MP4" },
+  { value: "mov", label: "MOV (ProRes)" },
+  { value: "webm", label: "WebM" },
+];
+
+const QUALITY_OPTIONS: SelectOption[] = [
+  { value: "draft", label: "Draft" },
+  { value: "standard", label: "Standard" },
+  { value: "high", label: "High Quality" },
+];
+
+const FPS_OPTIONS: SelectOption[] = [
+  { value: "24", label: "24 fps" },
+  { value: "30", label: "30 fps" },
+  { value: "60", label: "60 fps" },
 ];
 
 function formatEta(ms: number): string {
@@ -302,9 +313,6 @@ function FormatExportButton({
   // MOV (ProRes) is a fixed-quality codec — quality selector has no effect.
   const showQuality = format !== "mov";
 
-  const selectCls =
-    "h-7 w-full px-2 text-[11px] bg-panel-input rounded-md text-panel-text-1 outline-hidden cursor-pointer disabled:opacity-50 hover:bg-panel-hover transition-colors";
-
   return (
     <div className="flex flex-col gap-3">
       {missingFfmpeg && (
@@ -317,79 +325,63 @@ function FormatExportButton({
       <div className="grid grid-cols-2 gap-2">
         <div className="flex flex-col gap-1">
           <div className="flex items-center gap-1">
-            <span className="text-[10px] text-panel-text-4">Format</span>
+            <span className="text-step-10 text-text-4">Format</span>
             <FormatInfoTooltip format={format} />
           </div>
-          <select
+          <Select
+            label="Format"
             value={format}
-            onChange={(e) => {
-              const v = e.target.value as "mp4" | "webm" | "mov";
+            options={FORMAT_OPTIONS}
+            disabled={isRendering}
+            onCommit={(next) => {
+              const v = next as "mp4" | "webm" | "mov";
               setFormat(v);
               persistRenderSettings(v, quality, fps);
             }}
-            disabled={isRendering}
-            className={selectCls}
-          >
-            <option value="mp4">MP4</option>
-            <option value="mov">MOV (ProRes)</option>
-            <option value="webm">WebM</option>
-          </select>
+          />
         </div>
         <div className="flex flex-col gap-1">
-          <span className="text-[10px] text-panel-text-4">Resolution</span>
-          <select
+          <span className="text-step-10 text-text-4">Resolution</span>
+          <Select
+            label="Resolution"
             value={resolution}
-            onChange={(e) => setResolution(e.target.value as RenderScale)}
+            options={SCALE_OPTION_ORDER.map((value) => ({
+              value,
+              label: scaleOptionLabel(value, compositionDimensions),
+              disabled: !scaleApplies(value, compositionDimensions),
+            }))}
             disabled={isRendering}
-            className={selectCls}
-          >
-            {SCALE_OPTION_ORDER.map((value) => (
-              <option
-                key={value}
-                value={value}
-                disabled={!scaleApplies(value, compositionDimensions)}
-              >
-                {scaleOptionLabel(value, compositionDimensions)}
-              </option>
-            ))}
-          </select>
+            onCommit={(next) => setResolution(next as RenderScale)}
+          />
         </div>
         <div className="flex flex-col gap-1">
-          <span className="text-[10px] text-panel-text-4">Frame rate</span>
-          <select
-            value={fps}
-            onChange={(e) => {
-              const v = Number(e.target.value) as 24 | 30 | 60;
+          <span className="text-step-10 text-text-4">Frame rate</span>
+          <Select
+            label="Frame rate"
+            value={String(fps)}
+            options={FPS_OPTIONS}
+            disabled={isRendering}
+            onCommit={(next) => {
+              const v = Number(next) as 24 | 30 | 60;
               setFps(v);
               persistRenderSettings(format, quality, v);
             }}
-            disabled={isRendering}
-            className={selectCls}
-          >
-            <option value={24}>24 fps</option>
-            <option value={30}>30 fps</option>
-            <option value={60}>60 fps</option>
-          </select>
+          />
         </div>
         {showQuality && (
           <div className="flex flex-col gap-1">
-            <span className="text-[10px] text-panel-text-4">Quality</span>
-            <select
+            <span className="text-step-10 text-text-4">Quality</span>
+            <Select
+              label="Quality"
               value={quality}
-              onChange={(e) => {
-                const v = e.target.value as "draft" | "standard" | "high";
+              options={QUALITY_OPTIONS}
+              disabled={isRendering}
+              onCommit={(next) => {
+                const v = next as "draft" | "standard" | "high";
                 setQuality(v);
                 persistRenderSettings(format, v, fps);
               }}
-              disabled={isRendering}
-              className={selectCls}
-            >
-              {QUALITY_OPTIONS.map((q) => (
-                <option key={q.value} value={q.value}>
-                  {q.label}
-                </option>
-              ))}
-            </select>
+            />
           </div>
         )}
       </div>
@@ -408,12 +400,15 @@ function FormatExportButton({
           trackStudioEvent("render_start", { format, quality, resolution: outputResolution, fps });
           void onStartRender(format, quality, outputResolution, fps);
         }}
-        className="w-full text-[11px] font-semibold"
+        // Width only. A type size or a weight here would win the merge against
+        // the size recipe and leave this Export a step away from the header's
+        // (AE3), which is exactly what it used to do.
+        className="w-full"
       >
         {isRendering ? "Rendering…" : "Export"}
       </Button>
       {lastRenderDurationMs !== undefined && !isRendering && (
-        <p className="text-[9px] text-panel-text-5 text-center -mt-1.5">
+        <p className="text-step-9 text-text-5 text-center -mt-1.5">
           Last render took {formatEta(lastRenderDurationMs)}
         </p>
       )}
@@ -455,7 +450,7 @@ export const RenderQueue = memo(function RenderQueue({
 
   return (
     <div className="flex flex-col h-full">
-      <div className="px-3 py-3 border-b border-panel-border shrink-0">
+      <div className="px-3 py-3 border-b border-border shrink-0">
         <FormatExportButton
           onStartRender={onStartRender}
           isRendering={isRendering}
@@ -470,17 +465,30 @@ export const RenderQueue = memo(function RenderQueue({
       {actionError && (
         <div
           role="alert"
-          className="flex items-start justify-between gap-2 px-3 py-2 border-b border-panel-border bg-red-500/10"
+          className="flex items-start justify-between gap-2 px-3 py-2 border-b border-border bg-danger/10"
         >
-          <span className="text-[10px] text-red-400">{actionError}</span>
+          <span className="text-step-10 text-danger">{actionError}</span>
           {onDismissActionError && (
-            <button
+            <IconButton
+              size="sm"
               onClick={onDismissActionError}
               aria-label="Dismiss error"
-              className="text-[10px] text-panel-text-4 hover:text-panel-text-2 shrink-0"
-            >
-              ✕
-            </button>
+              className="shrink-0"
+              icon={
+                <svg
+                  width="10"
+                  height="10"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  aria-hidden="true"
+                >
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              }
+            />
           )}
         </div>
       )}
@@ -489,7 +497,7 @@ export const RenderQueue = memo(function RenderQueue({
       <div ref={listRef} className="flex-1 overflow-y-auto">
         {loadError && jobs.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full px-4 gap-2" role="alert">
-            <p className="text-[10px] text-red-400 text-center">{loadError}</p>
+            <p className="text-step-10 text-danger text-center">{loadError}</p>
             {onRetryLoad && (
               <Button size="sm" variant="secondary" onClick={onRetryLoad}>
                 Retry
@@ -505,7 +513,7 @@ export const RenderQueue = memo(function RenderQueue({
               fill="none"
               stroke="currentColor"
               strokeWidth="1.5"
-              className="text-panel-text-5"
+              className="text-text-5"
             >
               <rect
                 x="2"
@@ -523,24 +531,22 @@ export const RenderQueue = memo(function RenderQueue({
                 strokeLinejoin="round"
               />
             </svg>
-            <p className="text-[10px] text-panel-text-5 text-center">No renders yet</p>
+            <p className="text-step-10 text-text-5 text-center">No renders yet</p>
           </div>
         ) : (
           <div>
             {completedCount > 0 && (
-              <div className="flex items-center justify-between px-3 py-1.5 border-b border-panel-border">
-                <span className="text-[10px] text-panel-text-4">
+              <div className="flex items-center justify-between px-3 py-1.5 border-b border-border">
+                <span className="text-step-10 text-text-4">
                   {jobs.length} render{jobs.length === 1 ? "" : "s"}
                 </span>
                 {/* "Hide", not "Clear": files stay on disk (delete is per-row
                     and confirmed); hidden rows don't resurrect on reload. */}
-                <button
-                  onClick={onClearCompleted}
-                  title="Hide finished renders from this list (files stay on disk)"
-                  className="text-[10px] text-panel-text-4 hover:text-panel-text-2 transition-colors"
-                >
-                  Hide finished
-                </button>
+                <Tooltip label="Hide finished renders from this list (files stay on disk)">
+                  <Button size="sm" variant="ghost" onClick={onClearCompleted}>
+                    Hide finished
+                  </Button>
+                </Tooltip>
               </div>
             )}
             {jobs.map((job) => (
diff --git a/packages/studio/src/components/renders/RenderQueueItem.tsx b/packages/studio/src/components/renders/RenderQueueItem.tsx
index bad11f0a5e..9cfa97f94d 100644
--- a/packages/studio/src/components/renders/RenderQueueItem.tsx
+++ b/packages/studio/src/components/renders/RenderQueueItem.tsx
@@ -1,6 +1,8 @@
 import { memo, useCallback, useState } from "react";
 import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
 import { Button } from "../ui/Button";
+import { IconButton } from "../ui/IconButton";
+import { Tooltip } from "../ui/Tooltip";
 import type { RenderJob } from "./useRenderQueue";
 
 interface RenderQueueItemProps {
@@ -65,7 +67,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
         setVideoReady(false);
         setConfirmingDelete(false);
       }}
-      className="px-3 py-2.5 border-b border-panel-border last:border-0 transition-colors duration-150 hover:bg-panel-hover/30"
+      className="px-3 py-2.5 border-b border-border last:border-0 transition-colors duration-150 hover:bg-hover/30"
     >
       <div className="flex items-center gap-2.5">
         {/* Thumbnail — static frame; swaps to live video on hover.
@@ -76,8 +78,8 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           disabled={!isComplete}
           aria-label={isComplete ? `Open ${job.filename} in a new tab` : undefined}
           className={[
-            "w-20 h-[45px] rounded-md overflow-hidden bg-panel-input shrink-0 relative",
-            "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent",
+            "w-20 h-[45px] rounded-md overflow-hidden bg-input shrink-0 relative",
+            "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-accent",
             isComplete ? "cursor-pointer" : "cursor-default",
           ].join(" ")}
         >
@@ -107,17 +109,17 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           )}
           {isRendering && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-panel-accent animate-pulse motion-reduce:animate-none" />
+              <div className="w-2 h-2 rounded-full bg-accent animate-pulse motion-reduce:animate-none" />
             </div>
           )}
           {job.status === "failed" && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-red-400" />
+              <div className="w-2 h-2 rounded-full bg-danger" />
             </div>
           )}
           {job.status === "cancelled" && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-neutral-600" />
+              <div className="w-2 h-2 rounded-full bg-text-5" />
             </div>
           )}
         </button>
@@ -125,11 +127,9 @@ export const RenderQueueItem = memo(function RenderQueueItem({
         {/* Info */}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-1.5">
-            <span className="text-[11px] font-medium text-panel-text-2 truncate">
-              {job.filename}
-            </span>
+            <span className="text-step-11 font-medium text-text-2 truncate">{job.filename}</span>
             {job.durationMs && (
-              <span className="text-[9px] text-panel-text-5 shrink-0">
+              <span className="text-step-9 text-text-5 shrink-0">
                 {formatDuration(job.durationMs)}
               </span>
             )}
@@ -138,11 +138,11 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           {isRendering && (
             <div className="mt-1">
               <div className="flex items-center justify-between mb-0.5">
-                <span className="text-[9px] text-panel-text-4">{job.stage || "Rendering"}</span>
-                <span className="text-[9px] font-mono text-panel-accent">{job.progress}%</span>
+                <span className="text-step-9 text-text-4">{job.stage || "Rendering"}</span>
+                <span className="text-step-9 font-mono text-accent">{job.progress}%</span>
               </div>
               <div
-                className="w-full h-1 bg-panel-border rounded-full overflow-hidden"
+                className="w-full h-1 bg-border rounded-full overflow-hidden"
                 role="progressbar"
                 aria-valuenow={job.progress}
                 aria-valuemin={0}
@@ -150,7 +150,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
                 aria-label={`Render progress: ${job.progress}%`}
               >
                 <div
-                  className="h-full bg-panel-accent rounded-full transition-all duration-300"
+                  className="h-full bg-accent rounded-full transition-all duration-300"
                   style={{ width: `${job.progress}%` }}
                 />
               </div>
@@ -158,14 +158,14 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           )}
 
           {job.status === "failed" && job.error && (
-            <span className="text-[9px] text-red-400 mt-0.5 block">{job.error}</span>
+            <span className="text-step-9 text-danger mt-0.5 block">{job.error}</span>
           )}
           {job.status === "cancelled" && (
-            <span className="text-[9px] text-panel-text-4 mt-0.5 block">Cancelled</span>
+            <span className="text-step-9 text-text-4 mt-0.5 block">Cancelled</span>
           )}
 
           {!isRendering && (
-            <span className="text-[9px] text-panel-text-5">{formatTimeAgo(job.createdAt)}</span>
+            <span className="text-step-9 text-text-5">{formatTimeAgo(job.createdAt)}</span>
           )}
         </div>
 
@@ -208,53 +208,58 @@ export const RenderQueueItem = memo(function RenderQueueItem({
             </>
           ) : (
             <>
-              <button
-                onClick={isComplete ? handleDownload : undefined}
-                className={`p-1.5 min-w-6 min-h-6 rounded transition-colors outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent ${
-                  isComplete
-                    ? "text-panel-text-5 hover:text-panel-accent"
-                    : "text-panel-text-5/30 cursor-default"
-                }`}
-                title={isComplete ? "Download" : undefined}
-                aria-label={`Download ${job.filename}`}
-                disabled={!isComplete}
-              >
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
-                  <polyline points="7 10 12 15 17 10" />
-                  <line x1="12" y1="15" x2="12" y2="3" />
-                </svg>
-              </button>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setConfirmingDelete(true);
-                }}
-                className="p-1.5 min-w-6 min-h-6 rounded-sm text-panel-text-5 hover:text-red-400 transition-colors outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent"
-                title="Delete render file"
-                aria-label={`Delete ${job.filename}`}
-              >
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                >
-                  <path d="M18 6L6 18M6 6l12 12" />
-                </svg>
-              </button>
+              {/* The tooltip explains the control whether or not it is
+                  reachable; `disabled:` on the shared Button keeps pointer
+                  events alive precisely so a disabled one can still say why. */}
+              <Tooltip label={isComplete ? "Download" : "Available when the render finishes"}>
+                <IconButton
+                  size="sm"
+                  onClick={handleDownload}
+                  disabled={!isComplete}
+                  aria-label={`Download ${job.filename}`}
+                  icon={
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden="true"
+                    >
+                      <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+                      <polyline points="7 10 12 15 17 10" />
+                      <line x1="12" y1="15" x2="12" y2="3" />
+                    </svg>
+                  }
+                />
+              </Tooltip>
+              <Tooltip label="Delete render file">
+                <IconButton
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setConfirmingDelete(true);
+                  }}
+                  aria-label={`Delete ${job.filename}`}
+                  icon={
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      aria-hidden="true"
+                    >
+                      <path d="M18 6L6 18M6 6l12 12" />
+                    </svg>
+                  }
+                />
+              </Tooltip>
             </>
           )}
         </div>
diff --git a/packages/studio/src/components/ui/Select.tsx b/packages/studio/src/components/ui/Select.tsx
index 08158f2531..15c15c18e8 100644
--- a/packages/studio/src/components/ui/Select.tsx
+++ b/packages/studio/src/components/ui/Select.tsx
@@ -24,6 +24,13 @@ import type { PreviewState } from "./Button";
 export interface SelectOption {
   label: string;
   value: string;
+  /**
+   * Offered but not choosable. The option stays in the list with its label
+   * intact, because a label is where a caller explains *why* it is out of
+   * reach; filtering it out would leave the user hunting for a choice that
+   * silently vanished.
+   */
+  disabled?: boolean;
 }
 
 export interface SelectProps {
@@ -94,11 +101,13 @@ export function Select({
                 <BaseSelect.Item
                   key={option.value}
                   value={option.value}
+                  disabled={option.disabled}
                   className={cn(
                     "flex h-ctl-sm cursor-pointer select-none items-center gap-2 px-2.5",
                     "text-step-11 text-text-2 outline-hidden",
                     "data-[highlighted]:bg-hover data-[highlighted]:text-text-0",
                     "data-[selected]:text-text-0",
+                    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40",
                   )}
                 >
                   <BaseSelect.ItemText className="truncate">{option.label}</BaseSelect.ItemText>