@spotpatch/runtime 1.15.3 → 1.15.5

package/dist/index.cjs

@@ -1771,7 +1771,7 @@ var AGENT_PANEL_STYLES = `
     overflow: hidden;
     border: 1px solid var(--spotpatch-border-subtle);
     border-radius: var(--spotpatch-radius-card);
-    background: rgb(255 255 255 / 2.5%);
+    background: var(--spotpatch-bg-raised);
   }
   .spotpatch-agent-head {
     display: flex;
@@ -1779,17 +1779,17 @@ var AGENT_PANEL_STYLES = `
     justify-content: space-between;
     gap: 10px;
     padding: 10px 12px;
-    border-bottom: 1px solid rgb(255 255 255 / 7%);
+    border-bottom: 1px solid var(--spotpatch-border-subtle);
   }
-  .spotpatch-agent-title { color: #eef0f5; font-size: 13px; font-weight: 650; }
+  .spotpatch-agent-title { font-size: 13px; font-weight: 620; }
   .spotpatch-agent-badge {
-    border: 1px solid rgb(129 112 247 / 24%);
-    border-radius: 999px;
-    padding: 3px 7px;
-    color: #c5cafa;
-    background: rgb(109 93 246 / 9%);
-    font-size: 10px;
-    font-weight: 650;
+    border: 1px solid var(--spotpatch-accent-line);
+    border-radius: var(--spotpatch-radius-pill);
+    padding: 2px 8px;
+    color: var(--spotpatch-accent-soft);
+    background: var(--spotpatch-accent-tint);
+    font-size: 11px;
+    font-weight: 600;
   }
   .spotpatch-agent-setup { padding: 12px; }
   .spotpatch-agent-selectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@@ -1799,71 +1799,71 @@ var AGENT_PANEL_STYLES = `
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    min-height: 34px;
+    min-height: 36px;
     margin-top: 4px;
     border: 1px solid var(--spotpatch-border);
-    border-radius: 8px;
-    padding: 7px 32px 7px 9px;
-    color: #e8ebf2;
-    color-scheme: dark;
-    background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 2%));
-    font-size: 12px;
+    border-radius: var(--spotpatch-radius-sm);
+    padding: 7px 32px 7px 10px;
+    color: var(--spotpatch-text);
+    background: var(--spotpatch-bg-input);
+    font-size: 12.5px;
     font-weight: 560;
     line-height: 1.35;
     outline: none;
-    transition: 160ms ease;
+    transition:
+      border-color var(--spotpatch-duration-fast) ease,
+      box-shadow var(--spotpatch-duration-fast) ease;
   }
-  .spotpatch-agent select:hover { border-color: rgb(148 163 184 / 38%); background-color: rgb(255 255 255 / 5%); }
-  .spotpatch-agent select:focus-visible { border-color: rgb(139 124 247 / 76%); box-shadow: 0 0 0 3px rgb(109 93 246 / 18%); }
-  .spotpatch-agent select option { min-height: 42px; color: #e8ebf2; background: #10151e; }
+  .spotpatch-agent select:hover { border-color: var(--spotpatch-border-strong); }
+  .spotpatch-agent select:focus-visible { border-color: var(--spotpatch-accent-line); box-shadow: 0 0 0 3px var(--spotpatch-accent-tint); }
+  .spotpatch-agent select option { min-height: 42px; color: var(--spotpatch-text); background: var(--spotpatch-bg-raised); }
   @supports (appearance: base-select) {
     .spotpatch-agent select,
     ::picker(select) { appearance: base-select; }
-    .spotpatch-agent select { padding: 7px 9px; }
+    .spotpatch-agent select { padding: 7px 10px; }
     .spotpatch-agent select::picker-icon {
-      color: #9da6b5;
-      transition: rotate 180ms cubic-bezier(.2, .8, .2, 1);
+      color: var(--spotpatch-text-muted);
+      transition: rotate var(--spotpatch-duration-base) var(--spotpatch-ease-out);
     }
-    .spotpatch-agent select:open::picker-icon { rotate: 180deg; color: #c4b5fd; }
+    .spotpatch-agent select:open::picker-icon { rotate: 180deg; color: var(--spotpatch-accent-soft); }
     .spotpatch-agent select::picker(select) {
-      top: calc(anchor(bottom) + 7px);
+      top: calc(anchor(bottom) + 6px);
       left: anchor(left);
       width: anchor-size(width);
       max-height: min(280px, 40vh);
       margin: 0;
       overflow: auto;
-      border: 1px solid rgb(139 124 247 / 28%);
-      border-radius: 12px;
-      padding: 6px;
-      background: #10151e;
-      box-shadow: 0 18px 50px rgb(0 0 0 / 38%);
+      border: 1px solid var(--spotpatch-border);
+      border-radius: var(--spotpatch-radius-card);
+      padding: 5px;
+      background: var(--spotpatch-bg-raised);
+      box-shadow: var(--spotpatch-shadow-panel);
       opacity: 1;
       transform: translateY(0) scale(1);
-      transition: opacity 150ms ease, transform 180ms cubic-bezier(.2, .8, .2, 1), overlay 180ms allow-discrete, display 180ms allow-discrete;
+      transition:
+        opacity var(--spotpatch-duration-fast) ease,
+        transform var(--spotpatch-duration-base) var(--spotpatch-ease-out),
+        overlay var(--spotpatch-duration-base) allow-discrete,
+        display var(--spotpatch-duration-base) allow-discrete;
     }
     @starting-style {
       .spotpatch-agent select::picker(select):popover-open {
         opacity: 0;
-        transform: translateY(-5px) scale(.985);
+        transform: translateY(-5px) scale(.98);
       }
     }
     .spotpatch-agent select option {
-      min-height: 42px;
-      border-radius: 8px;
-      padding: 10px 12px;
-      color: #dfe4ee;
+      min-height: 40px;
+      border-radius: var(--spotpatch-radius-sm);
+      padding: 9px 11px;
+      color: var(--spotpatch-text-secondary);
       background: transparent;
       cursor: pointer;
     }
     .spotpatch-agent select option:hover,
-    .spotpatch-agent select option:focus { color: #fff; background: rgb(109 93 246 / 16%); }
-    .spotpatch-agent select option:checked { color: #fff; background: rgb(109 93 246 / 24%); }
-    .spotpatch-agent select option::checkmark { color: #8b7cf7; }
-  }
-  .spotpatch-agent select:focus-visible,
-  .spotpatch-consent input:focus-visible {
-    outline: 2px solid #8b7cf7;
-    outline-offset: 2px;
+    .spotpatch-agent select option:focus { color: var(--spotpatch-text); background: var(--spotpatch-hover); }
+    .spotpatch-agent select option:checked { color: var(--spotpatch-text); background: var(--spotpatch-accent-tint); }
+    .spotpatch-agent select option::checkmark { color: var(--spotpatch-accent-soft); }
   }
   .spotpatch-consent {
     display: flex;
@@ -1872,26 +1872,21 @@ var AGENT_PANEL_STYLES = `
     margin-top: 10px;
     color: var(--spotpatch-text-secondary);
     cursor: pointer;
-    font-size: 11.5px;
+    font-size: 12px;
     line-height: 1.5;
   }
   .spotpatch-consent input { width: 14px; height: 14px; flex: none; margin: 2px 0 0; accent-color: var(--spotpatch-accent); }
-  .spotpatch-trusted-consent {
-    border: 1px solid rgb(251 191 36 / 20%);
-    border-radius: 10px;
-    padding: 9px 10px;
-    color: #e5e7eb;
-    background: rgb(120 53 15 / 10%);
-  }
+  .spotpatch-trusted-consent,
   .spotpatch-workspace-consent {
-    margin-top: 9px;
-    border: 1px solid rgb(251 191 36 / 18%);
-    border-radius: 10px;
+    border: 1px solid var(--spotpatch-warning-line);
+    border-radius: var(--spotpatch-radius-md);
     padding: 9px 10px;
-    background: rgb(120 53 15 / 9%);
+    background: var(--spotpatch-warning-tint);
   }
-  .spotpatch-workspace-consent strong { display: block; color: #fde68a; font-size: 11.5px; font-weight: 620; }
-  .spotpatch-workspace-consent small { display: block; margin-top: 2px; color: #aeb6c4; font-size: 10.5px; line-height: 1.45; }
+  .spotpatch-trusted-consent { color: var(--spotpatch-text); }
+  .spotpatch-workspace-consent { margin-top: 9px; }
+  .spotpatch-workspace-consent strong { display: block; color: var(--spotpatch-warning-text); font-size: 12px; font-weight: 600; }
+  .spotpatch-workspace-consent small { display: block; margin-top: 2px; color: var(--spotpatch-text-secondary); font-size: 11px; line-height: 1.45; }
   .spotpatch-agent-health-list { display: grid; gap: 6px; margin-top: 10px; }
   .spotpatch-agent-workspace,
   .spotpatch-agent-capability {
@@ -1899,83 +1894,85 @@ var AGENT_PANEL_STYLES = `
     align-items: center;
     gap: 8px;
     margin: 0;
-    color: #929bab;
-    font-size: 11px;
+    color: var(--spotpatch-text-secondary);
+    font-size: 11.5px;
   }
+  .spotpatch-agent-workspace::before,
   .spotpatch-agent-capability::before {
     width: 6px;
     height: 6px;
     flex: none;
-    border-radius: 999px;
-    background: #64748b;
-    content: "";
-  }
-  .spotpatch-agent-capability[data-state="probing"]::before { background: var(--spotpatch-warning); }
-  .spotpatch-agent-capability[data-state="ready"] { color: #a7f3d0; }
-  .spotpatch-agent-capability[data-state="ready"]::before { background: var(--spotpatch-success); }
-  .spotpatch-agent-capability[data-state="error"] { color: #fecaca; }
-  .spotpatch-agent-capability[data-state="error"]::before { background: var(--spotpatch-danger); }
-  .spotpatch-agent-workspace::before {
-    width: 6px;
-    height: 6px;
-    flex: none;
-    border-radius: 999px;
-    background: #64748b;
+    border-radius: 50%;
+    background: var(--spotpatch-text-muted);
     content: "";
   }
+  .spotpatch-agent-capability[data-state="probing"]::before,
   .spotpatch-agent-workspace[data-state="checking"]::before { background: var(--spotpatch-warning); }
-  .spotpatch-agent-workspace[data-state="ready"] { color: #a7f3d0; }
+  .spotpatch-agent-capability[data-state="ready"],
+  .spotpatch-agent-workspace[data-state="ready"] { color: var(--spotpatch-success-text); }
+  .spotpatch-agent-capability[data-state="ready"]::before,
   .spotpatch-agent-workspace[data-state="ready"]::before { background: var(--spotpatch-success); }
-  .spotpatch-agent-workspace[data-state="consent-required"] { color: #fde68a; }
-  .spotpatch-agent-workspace[data-state="consent-required"]::before { background: #fbbf24; }
-  .spotpatch-agent-workspace[data-state="blocked"] { color: #fecaca; }
+  .spotpatch-agent-workspace[data-state="consent-required"] { color: var(--spotpatch-warning-text); }
+  .spotpatch-agent-workspace[data-state="consent-required"]::before { background: var(--spotpatch-warning); }
+  .spotpatch-agent-capability[data-state="error"],
+  .spotpatch-agent-workspace[data-state="blocked"] { color: var(--spotpatch-danger-text); }
+  .spotpatch-agent-capability[data-state="error"]::before,
   .spotpatch-agent-workspace[data-state="blocked"]::before { background: var(--spotpatch-danger); }
   .spotpatch-agent-job { padding: 12px; }
   .spotpatch-agent-job-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-  .spotpatch-agent-model { min-width: 0; overflow: hidden; color: #d6dafe; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
+  .spotpatch-agent-model { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
   .spotpatch-agent-status {
     flex: none;
-    border-radius: 999px;
-    padding: 3px 7px;
-    color: #bae6fd;
-    background: rgb(14 116 144 / 20%);
+    border-radius: var(--spotpatch-radius-pill);
+    padding: 3px 8px;
+    color: var(--spotpatch-cyan-text);
+    background: var(--spotpatch-cyan-tint);
     font-size: 11px;
-    font-weight: 650;
+    font-weight: 600;
   }
-  .spotpatch-agent-phase { margin: 12px 0 0; color: #e2e5ec; font-size: 13px; line-height: 1.55; }
+  .spotpatch-agent-phase { margin: 12px 0 0; font-size: 13px; line-height: 1.55; }
   .spotpatch-agent-error {
     margin: 9px 0 0;
-    border: 1px solid rgb(251 113 133 / 22%);
-    border-radius: 9px;
+    border: 1px solid var(--spotpatch-danger-line);
+    border-radius: var(--spotpatch-radius-md);
     padding: 9px 10px;
-    color: #fecaca;
-    background: rgb(127 29 29 / 14%);
+    color: var(--spotpatch-danger-text);
+    background: var(--spotpatch-danger-tint);
     font-size: 12px;
   }
   .spotpatch-agent-activity { display: grid; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; }
-  .spotpatch-agent-activity li { display: flex; gap: 8px; color: #929bab; font: 11.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
-  .spotpatch-agent-activity li::before { color: #64748b; content: "•"; }
-  .spotpatch-agent-activity li[data-state="active"]::before { color: #fbbf24; }
-  .spotpatch-agent-activity li[data-state="success"]::before { color: #34d399; }
-  .spotpatch-agent-activity li[data-state="failure"]::before { color: #fb7185; }
-  .spotpatch-agent-result { margin-top: 11px; border-top: 1px solid rgb(148 163 184 / 10%); padding-top: 10px; }
-  .spotpatch-agent-summary { margin: 0; color: #dce1eb; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
+  .spotpatch-agent-activity li { display: flex; gap: 8px; color: var(--spotpatch-text-secondary); font: 11.5px/1.55 var(--spotpatch-font-mono); }
+  .spotpatch-agent-activity li::before { color: var(--spotpatch-text-muted); content: "•"; }
+  .spotpatch-agent-activity li[data-state="active"]::before { color: var(--spotpatch-warning); }
+  .spotpatch-agent-activity li[data-state="success"]::before { color: var(--spotpatch-success); }
+  .spotpatch-agent-activity li[data-state="failure"]::before { color: var(--spotpatch-danger); }
+  .spotpatch-agent-result { margin-top: 12px; border-top: 1px solid var(--spotpatch-border-subtle); padding-top: 10px; }
+  .spotpatch-agent-summary { margin: 0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
   .spotpatch-agent-files { display: grid; gap: 4px; margin: 9px 0 0; padding: 0; list-style: none; }
-  .spotpatch-agent-files li { color: #bbc2f7; font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
+  .spotpatch-agent-files li { color: var(--spotpatch-accent-soft); font: 11.5px/1.5 var(--spotpatch-font-mono); overflow-wrap: anywhere; }
   .spotpatch-agent-checks { display: grid; gap: 5px; margin-top: 9px; }
-  .spotpatch-agent-checks details { border: 1px solid rgb(148 163 184 / 12%); border-radius: 8px; background: rgb(2 6 23 / 30%); }
-  .spotpatch-agent-checks summary { padding: 9px 10px; color: #cbd0db; cursor: pointer; font-size: 11.5px; }
-  .spotpatch-agent-checks pre { max-height: 140px; margin: 0; overflow: auto; border-top: 1px solid rgb(255 255 255 / 7%); padding: 10px; color: #929bab; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
+  .spotpatch-agent-checks details { border: 1px solid var(--spotpatch-border-subtle); border-radius: var(--spotpatch-radius-sm); background: var(--spotpatch-bg-input); }
+  .spotpatch-agent-checks summary { padding: 9px 10px; color: var(--spotpatch-text-secondary); cursor: pointer; font-size: 12px; }
+  .spotpatch-agent-checks pre {
+    max-height: 140px;
+    margin: 0;
+    overflow: auto;
+    border-top: 1px solid var(--spotpatch-border-subtle);
+    padding: 10px;
+    color: var(--spotpatch-text-secondary);
+    font: 11px/1.55 var(--spotpatch-font-mono);
+    white-space: pre-wrap;
+  }
   .spotpatch-agent-diff {
     max-height: 300px;
     margin: 9px 0 0;
     overflow: auto;
-    border: 1px solid rgb(129 140 248 / 18%);
-    border-radius: 9px;
-    padding: 8px;
-    color: #cbd5e1;
-    background: rgb(2 6 23 / 66%);
-    font: 11.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
+    border: 1px solid var(--spotpatch-border-subtle);
+    border-radius: var(--spotpatch-radius-md);
+    padding: 8px 10px;
+    color: var(--spotpatch-text);
+    background: var(--spotpatch-bg-input);
+    font: 11.5px/1.6 var(--spotpatch-font-mono);
     overflow-wrap: normal;
     white-space: pre;
     user-select: text;
@@ -2546,6 +2543,113 @@ function getDataFlowExtension(target2 = globalThis) {
   return target2[DATA_FLOW_EXTENSION_KEY];
 }
 
+// src/ui/theme.ts
+var THEME_STYLES = `
+  :host {
+    all: initial;
+    color-scheme: dark;
+
+    --spotpatch-bg: #0c0d12;
+    --spotpatch-bg-raised: #14161d;
+    --spotpatch-bg-active: #1b1e28;
+    --spotpatch-bg-input: #08090d;
+    --spotpatch-border-subtle: rgb(255 255 255 / 7%);
+    --spotpatch-border: rgb(255 255 255 / 11%);
+    --spotpatch-border-strong: rgb(255 255 255 / 20%);
+    --spotpatch-hover: rgb(255 255 255 / 5%);
+
+    --spotpatch-text: #f4f5f7;
+    --spotpatch-text-secondary: #a7acb8;
+    --spotpatch-text-muted: #737987;
+    --spotpatch-text-on-accent: #ffffff;
+
+    --spotpatch-accent: #7c4dff;
+    --spotpatch-accent-strong: #6d35ff;
+    --spotpatch-accent-soft: #c4b3ff;
+    --spotpatch-accent-cyan: #00d9e9;
+    --spotpatch-accent-blue: #168eff;
+    --spotpatch-success: #45d483;
+    --spotpatch-warning: #f4b860;
+    --spotpatch-danger: #ff6b7a;
+
+    --spotpatch-accent-tint: color-mix(in srgb, var(--spotpatch-accent) 16%, transparent);
+    --spotpatch-accent-line: color-mix(in srgb, var(--spotpatch-accent) 48%, transparent);
+    --spotpatch-cyan-text: color-mix(in srgb, var(--spotpatch-accent-cyan) 70%, var(--spotpatch-text));
+    --spotpatch-cyan-tint: color-mix(in srgb, var(--spotpatch-accent-cyan) 10%, transparent);
+    --spotpatch-cyan-line: color-mix(in srgb, var(--spotpatch-accent-cyan) 30%, transparent);
+    --spotpatch-success-text: color-mix(in srgb, var(--spotpatch-success) 72%, var(--spotpatch-text));
+    --spotpatch-success-tint: color-mix(in srgb, var(--spotpatch-success) 12%, transparent);
+    --spotpatch-warning-text: color-mix(in srgb, var(--spotpatch-warning) 78%, var(--spotpatch-text));
+    --spotpatch-warning-tint: color-mix(in srgb, var(--spotpatch-warning) 11%, transparent);
+    --spotpatch-warning-line: color-mix(in srgb, var(--spotpatch-warning) 30%, transparent);
+    --spotpatch-danger-text: color-mix(in srgb, var(--spotpatch-danger) 72%, var(--spotpatch-text));
+    --spotpatch-danger-tint: color-mix(in srgb, var(--spotpatch-danger) 11%, transparent);
+    --spotpatch-danger-line: color-mix(in srgb, var(--spotpatch-danger) 30%, transparent);
+
+    --spotpatch-primary-fill: linear-gradient(135deg, var(--spotpatch-accent), var(--spotpatch-accent-strong));
+    --spotpatch-brand-line: linear-gradient(90deg, var(--spotpatch-accent), var(--spotpatch-accent-blue), var(--spotpatch-accent-cyan));
+    --spotpatch-surface-fill:
+      linear-gradient(180deg, rgb(255 255 255 / 3.5%), transparent 30%),
+      var(--spotpatch-bg);
+    --spotpatch-scrim: rgb(3 3 8 / 72%);
+
+    --spotpatch-shadow-float: 0 18px 44px rgb(6 8 18 / 30%), 0 2px 8px rgb(6 8 18 / 18%);
+    --spotpatch-shadow-panel: 0 28px 70px rgb(6 8 18 / 42%), 0 4px 14px rgb(6 8 18 / 22%);
+    --spotpatch-shadow-inset: inset 0 1px 0 rgb(255 255 255 / 7%);
+    --spotpatch-shadow-accent: 0 10px 26px -10px color-mix(in srgb, var(--spotpatch-accent-strong) 80%, transparent);
+
+    --spotpatch-radius-xs: 6px;
+    --spotpatch-radius-sm: 8px;
+    --spotpatch-radius-md: 10px;
+    --spotpatch-radius-card: 12px;
+    --spotpatch-radius-panel: 20px;
+    --spotpatch-radius-pill: 999px;
+
+    --spotpatch-ease-out: cubic-bezier(.16, 1, .3, 1);
+    --spotpatch-ease-spring: cubic-bezier(.34, 1.36, .64, 1);
+    --spotpatch-ease-standard: cubic-bezier(.2, 0, 0, 1);
+    --spotpatch-duration-fast: 140ms;
+    --spotpatch-duration-base: 220ms;
+    --spotpatch-duration-slow: 420ms;
+
+    --spotpatch-font-sans: Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+    --spotpatch-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+    color: var(--spotpatch-text);
+    font-family: var(--spotpatch-font-sans);
+    font-size: 14px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+  [hidden] { display: none !important; }
+  button, textarea, select, input { font: inherit; }
+  :focus-visible {
+    outline: 2px solid var(--spotpatch-accent-soft);
+    outline-offset: 2px;
+  }
+  * {
+    scrollbar-color: var(--spotpatch-border-strong) transparent;
+    scrollbar-width: thin;
+  }
+  @keyframes spotpatch-enter {
+    from { opacity: 0; filter: blur(3px); transform: translate3d(0, 6px, 0); }
+  }
+  @keyframes spotpatch-pop {
+    from { opacity: 0; transform: scale(.94); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: .01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: .01ms !important;
+    }
+  }
+`;
+var THEME_MOTION_COLORS = Object.freeze({
+  dispatchGlowRest: "0 0 0 0 rgb(124 77 255 / 0%)",
+  dispatchGlow: "0 0 0 4px rgb(124 77 255 / 22%)"
+});
+
 // src/ui/external-handoff-contract.ts
 var EXTERNAL_HANDOFF_EXTENSION_KEY = /* @__PURE__ */ Symbol.for("spotpatch.external-handoff.v1");
 function getExternalHandoffExtension() {
@@ -3713,67 +3817,102 @@ function resolveStyleNonce(document) {
 function createStyles(document) {
   const style = document.createElement("style");
   style.textContent = `
-    :host {
-      all: initial;
-      --spotpatch-bg: #0e0e12;
-      --spotpatch-bg-raised: #17171c;
-      --spotpatch-bg-active: #1c1c22;
-      --spotpatch-bg-input: #0b0b0f;
-      --spotpatch-border: #2a2a32;
-      --spotpatch-border-subtle: #232329;
-      --spotpatch-text: #f2f2f5;
-      --spotpatch-text-secondary: #96969f;
-      --spotpatch-text-muted: #686872;
-      --spotpatch-accent: #8b7bff;
-      --spotpatch-accent-strong: #6a5ce8;
-      --spotpatch-accent-cyan: #52a8ff;
-      --spotpatch-danger: #fb7185;
-      --spotpatch-success: #34d399;
-      --spotpatch-warning: #f59e0b;
-      --spotpatch-text-on-accent: #0b0b12;
-      --spotpatch-radius-card: 10px;
-      color: var(--spotpatch-text);
-      font-family: Inter, "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
-      font-size: 14px;
-      line-height: 1.5;
-    }
-    [hidden] { display: none !important; }
-    button, textarea, select { font: inherit; }
+    ${THEME_STYLES}
     .spotpatch-floating-surface {
       position: fixed;
       right: ${String(FLOATING_SURFACE_LAYOUT.desktopInset)}px;
       bottom: ${String(FLOATING_SURFACE_LAYOUT.desktopInset)}px;
       z-index: ${String(UI_Z_INDEX.controls)};
+      box-sizing: border-box;
+      overflow: hidden;
       isolation: isolate;
+      border: 1px solid var(--spotpatch-border);
+      background: var(--spotpatch-surface-fill);
+      box-shadow: var(--spotpatch-shadow-float), var(--spotpatch-shadow-inset);
+      transform-origin: 100% 100%;
     }
-    .spotpatch-highlight {
+    .spotpatch-floating-surface[data-scene="pill"],
+    .spotpatch-floating-surface[data-scene="capturing"] {
+      width: max-content;
+      border-radius: var(--spotpatch-radius-pill);
+    }
+    .spotpatch-floating-surface[data-scene="planner"] {
+      border-radius: var(--spotpatch-radius-panel);
+      box-shadow: var(--spotpatch-shadow-panel), var(--spotpatch-shadow-inset);
+    }
+
+    .spotpatch-trigger {
+      display: inline-flex;
+      min-height: 44px;
+      align-items: center;
+      gap: 10px;
+      border: 0;
+      border-radius: var(--spotpatch-radius-pill);
+      padding: 0 18px 0 16px;
+      color: var(--spotpatch-text);
+      background: transparent;
+      cursor: pointer;
+      font-size: 13.5px;
+      font-weight: 620;
+      letter-spacing: -.005em;
+      touch-action: none;
+      user-select: none;
+      transition: background var(--spotpatch-duration-fast) ease;
+    }
+    .spotpatch-trigger::before {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--spotpatch-accent);
+      box-shadow: 0 0 0 4px var(--spotpatch-accent-tint);
+      content: "";
+      transition: background var(--spotpatch-duration-base) ease;
+    }
+    .spotpatch-trigger:hover { background: var(--spotpatch-hover); }
+    .spotpatch-trigger[aria-pressed="true"]::before {
+      background: var(--spotpatch-accent-cyan);
+      animation: spotpatch-trigger-pulse 1.6s var(--spotpatch-ease-standard) infinite;
+    }
+    .spotpatch-trigger[data-dragging="true"] { cursor: grabbing; }
+    @keyframes spotpatch-trigger-pulse {
+      0% { box-shadow: 0 0 0 0 var(--spotpatch-cyan-line); }
+      100% { box-shadow: 0 0 0 9px transparent; }
+    }
+
+    .spotpatch-highlight,
+    .spotpatch-selection-highlight {
       position: fixed;
       top: 0;
       left: 0;
-      z-index: ${String(UI_Z_INDEX.highlight)};
       box-sizing: border-box;
-      border: 2px solid var(--spotpatch-accent);
-      border-radius: 6px;
-      background: rgb(109 93 246 / 8%);
-      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%), 0 0 0 1px rgb(109 93 246 / 10%);
+      border-radius: var(--spotpatch-radius-xs);
       pointer-events: none;
     }
-    .spotpatch-highlight-label {
+    .spotpatch-highlight {
+      z-index: ${String(UI_Z_INDEX.highlight)};
+      border: 1.5px solid var(--spotpatch-accent);
+      background: var(--spotpatch-accent-tint);
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--spotpatch-accent) 12%, transparent);
+      transition:
+        transform var(--spotpatch-duration-fast) var(--spotpatch-ease-out),
+        width var(--spotpatch-duration-fast) var(--spotpatch-ease-out),
+        height var(--spotpatch-duration-fast) var(--spotpatch-ease-out);
+    }
+    .spotpatch-highlight-label,
+    .spotpatch-selection-highlight > span {
       position: absolute;
-      top: -30px;
-      left: -2px;
-      max-width: min(380px, 80vw);
+      bottom: calc(100% + 6px);
+      left: -1.5px;
       overflow: hidden;
-      border: 1px solid rgb(255 255 255 / 14%);
-      border-radius: 8px 8px 8px 3px;
-      padding: 6px 10px;
-      color: #fff;
-      background: #5546dc;
-      box-shadow: 0 8px 20px rgb(49 46 129 / 22%);
-      font: 650 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
+      border-radius: var(--spotpatch-radius-xs);
+      padding: 4px 8px;
+      color: var(--spotpatch-text-on-accent);
+      background: var(--spotpatch-accent-strong);
+      font: 600 11px/1.3 var(--spotpatch-font-mono);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+    .spotpatch-highlight-label { max-width: min(380px, 80vw); }
     .spotpatch-selection-highlights {
       position: fixed;
       inset: 0;
@@ -3781,37 +3920,27 @@ function createStyles(document) {
       pointer-events: none;
     }
     .spotpatch-selection-highlight {
-      position: fixed;
-      top: 0;
-      left: 0;
-      box-sizing: border-box;
-      border: 2px solid var(--spotpatch-accent-cyan);
-      border-radius: 6px;
-      background: rgb(8 182 214 / 5%);
-      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
+      border: 1.5px solid var(--spotpatch-accent-cyan);
+      background: var(--spotpatch-cyan-tint);
     }
     .spotpatch-selection-highlight[data-active="true"] {
-      border-color: #7768f7;
-      background: rgb(109 93 246 / 8%);
-      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%);
+      border-color: var(--spotpatch-accent);
+      background: var(--spotpatch-accent-tint);
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--spotpatch-accent) 12%, transparent);
+    }
+    .spotpatch-selection-highlight[data-entering="true"] {
+      animation: spotpatch-pop var(--spotpatch-duration-base) var(--spotpatch-ease-spring) both;
     }
     .spotpatch-selection-highlight > span {
-      position: absolute;
-      top: -24px;
-      left: -2px;
       max-width: min(300px, 70vw);
-      overflow: hidden;
-      border-radius: 7px 7px 7px 2px;
-      padding: 4px 8px;
-      color: #ecfeff;
-      background: rgb(14 67 82 / 96%);
-      font: 650 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      color: var(--spotpatch-bg);
+      background: var(--spotpatch-accent-cyan);
     }
     .spotpatch-selection-highlight[data-active="true"] > span {
-      background: #5546dc;
+      color: var(--spotpatch-text-on-accent);
+      background: var(--spotpatch-accent-strong);
     }
+
     .spotpatch-dialog {
       position: relative;
       box-sizing: border-box;
@@ -3819,18 +3948,14 @@ function createStyles(document) {
       outline: none;
     }
     .spotpatch-shell {
-      position: relative;
-      z-index: 1;
       display: flex;
       box-sizing: border-box;
       max-height: min(${String(FLOATING_SURFACE_LAYOUT.workbenchMaxHeight)}px, calc(100vh - ${String(FLOATING_SURFACE_LAYOUT.desktopInset * 2)}px));
       overflow: hidden;
       flex-direction: column;
     }
-    .spotpatch-header {
-      position: relative;
-      padding: 0 18px 14px;
-    }
+
+    .spotpatch-header { padding: 0 18px 16px; }
     .spotpatch-header[data-spotpatch-drag-handle] { cursor: grab; touch-action: none; user-select: none; }
     .spotpatch-header[data-dragging="true"] { cursor: grabbing; }
     .spotpatch-header button,
@@ -3840,133 +3965,115 @@ function createStyles(document) {
       align-items: center;
       justify-content: space-between;
       gap: 12px;
-      margin: 0 -18px 18px;
-      padding: 14px 18px 13px;
+      margin: 0 -18px 16px;
+      padding: 12px 14px 12px 18px;
       border-bottom: 1px solid var(--spotpatch-border-subtle);
     }
-    .spotpatch-brand {
-      display: inline-flex;
-      align-items: center;
-      gap: 10px;
-      min-width: 0;
-      color: #f8fafc;
-    }
-    .spotpatch-brand-mark {
-      width: 30px;
-      height: 30px;
-      flex: none;
-      filter: drop-shadow(0 6px 12px rgb(76 29 149 / 22%));
-    }
+    .spotpatch-brand { display: inline-flex; min-width: 0; align-items: center; gap: 10px; }
+    .spotpatch-brand-mark { width: 28px; height: 28px; flex: none; }
     .spotpatch-brand-copy { display: grid; min-width: 0; gap: 1px; }
-    .spotpatch-header-controls {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      flex: none;
-    }
+    .spotpatch-brand-name { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; }
+    .spotpatch-brand-context { color: var(--spotpatch-text-muted); font-size: 11px; font-weight: 520; }
+    .spotpatch-header-controls { display: inline-flex; flex: none; align-items: center; gap: 2px; }
     .spotpatch-repository,
     .spotpatch-locale,
     .spotpatch-reset-position,
     .spotpatch-close {
-      height: 27px;
-      border: 1px solid rgb(255 255 255 / 11%);
-      border-radius: 7px;
-      background: transparent;
-    }
-    .spotpatch-repository {
-      display: inline-flex;
-      align-items: center;
-      padding: 0 9px;
-      color: var(--spotpatch-text-secondary);
-      font-size: 11px;
-      font-weight: 680;
-      text-decoration: none;
-    }
-    .spotpatch-locale {
-      min-width: 34px;
-      padding: 0 8px;
-      color: #c5cad5;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: 650;
-    }
-    .spotpatch-reset-position {
       display: inline-grid;
-      width: 27px;
-      padding: 0;
-      place-items: center;
-      color: #c5cad5;
-      cursor: pointer;
-      font-size: 15px;
-      line-height: 1;
-    }
-    .spotpatch-close {
-      display: inline-grid;
-      width: 27px;
-      padding: 0;
+      box-sizing: border-box;
+      min-width: 28px;
+      height: 28px;
       place-items: center;
-      color: #9da5b4;
-      cursor: pointer;
-      font-size: 15px;
+      border: 0;
+      border-radius: var(--spotpatch-radius-sm);
+      padding: 0 7px;
+      color: var(--spotpatch-text-muted);
+      background: transparent;
+      font-size: 12px;
+      font-weight: 600;
       line-height: 1;
-      transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
+      text-decoration: none;
+      transition:
+        color var(--spotpatch-duration-fast) ease,
+        background var(--spotpatch-duration-fast) ease;
     }
-    .spotpatch-close:hover,
+    .spotpatch-reset-position,
+    .spotpatch-close { padding: 0; font-size: 15px; }
+    .spotpatch-reset-position svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; }
+    .spotpatch-repository:hover,
     .spotpatch-locale:hover,
     .spotpatch-reset-position:hover,
-    .spotpatch-repository:hover { border-color: rgb(129 112 247 / 45%); color: #fff; background: rgb(109 93 246 / 10%); }
+    .spotpatch-close:hover { color: var(--spotpatch-text); background: var(--spotpatch-hover); }
+
+    .spotpatch-title {
+      margin: 0;
+      font-size: 17px;
+      font-weight: 650;
+      letter-spacing: -.02em;
+      line-height: 1.3;
+    }
+    .spotpatch-subtitle {
+      max-width: 400px;
+      margin: 4px 0 0;
+      color: var(--spotpatch-text-secondary);
+      font-size: 12.5px;
+      line-height: 1.55;
+    }
     .spotpatch-target-row {
       display: flex;
-      align-items: center;
-      gap: 8px;
       min-width: 0;
+      align-items: center;
+      gap: 10px;
       margin-top: 14px;
     }
     .spotpatch-target-label {
       min-width: 0;
       overflow: hidden;
-      border: 1px solid rgb(129 112 247 / 24%);
-      border-radius: 999px;
-      padding: 4px 10px;
-      color: #cdd2ff;
-      background: rgb(109 93 246 / 10%);
-      font: 600 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
+      border: 1px solid var(--spotpatch-accent-line);
+      border-radius: var(--spotpatch-radius-pill);
+      padding: 3px 10px;
+      color: var(--spotpatch-accent-soft);
+      background: var(--spotpatch-accent-tint);
+      font: 600 11px/1.4 var(--spotpatch-font-mono);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
     .spotpatch-context-state {
       display: inline-flex;
+      flex: none;
       align-items: center;
       gap: 6px;
-      flex: none;
-      color: #a5adba;
-      font-size: 11px;
+      color: var(--spotpatch-warning-text);
+      font-size: 11.5px;
       white-space: nowrap;
     }
     .spotpatch-context-state::before {
       width: 6px;
       height: 6px;
-      border-radius: 999px;
-      background: #f59e0b;
+      border-radius: 50%;
+      background: var(--spotpatch-warning);
       content: "";
     }
+    .spotpatch-context-state[data-state="loading"]::before {
+      animation: spotpatch-dot-breathe 1.4s ease-in-out infinite;
+    }
     .spotpatch-context-state[data-state="ready"],
-    .spotpatch-editor-feedback[data-state="success"] { color: #9fe3c4; }
+    .spotpatch-editor-feedback[data-state="success"] { color: var(--spotpatch-success-text); }
     .spotpatch-context-state[data-state="ready"]::before,
-    .spotpatch-editor-feedback[data-state="success"]::before { background: #34d399; }
+    .spotpatch-editor-feedback[data-state="success"]::before { background: var(--spotpatch-success); }
     .spotpatch-context-state[data-state="warning"],
-    .spotpatch-editor-feedback[data-state="error"] { color: #fecaca; }
+    .spotpatch-editor-feedback[data-state="error"] { color: var(--spotpatch-danger-text); }
     .spotpatch-context-state[data-state="warning"]::before,
-    .spotpatch-editor-feedback[data-state="error"]::before { background: #fb7185; }
+    .spotpatch-editor-feedback[data-state="error"]::before { background: var(--spotpatch-danger); }
+    @keyframes spotpatch-dot-breathe {
+      50% { opacity: .35; }
+    }
+
     .spotpatch-body {
       min-height: 0;
       overflow: auto;
-      padding: 0 18px 14px;
-      scrollbar-color: rgb(100 116 139 / 50%) transparent;
-      scrollbar-width: thin;
-    }
-    .spotpatch-targets {
-      margin: 0;
+      overscroll-behavior: contain;
+      padding: 0 18px 16px;
     }
     .spotpatch-targets-heading {
       display: flex;
@@ -3974,71 +4081,73 @@ function createStyles(document) {
       justify-content: space-between;
       gap: 10px;
       margin-bottom: 8px;
-      color: var(--spotpatch-text-secondary);
+      color: var(--spotpatch-text-muted);
       font-size: 11px;
-      font-weight: 650;
-      letter-spacing: .04em;
+      font-weight: 600;
+      letter-spacing: .06em;
       text-transform: uppercase;
     }
     .spotpatch-targets-meta {
       display: flex;
+      min-width: 0;
       align-items: center;
       gap: 8px;
-      min-width: 0;
       letter-spacing: 0;
       text-transform: none;
     }
-    .spotpatch-target-complete { color: var(--spotpatch-text-muted); font-size: 11px; font-weight: 560; }
-    .spotpatch-target-budget {
-      color: var(--spotpatch-text-muted);
-      font: 550 10.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
-    }
+    .spotpatch-target-budget { font: 500 11px/1.4 var(--spotpatch-font-mono); }
     .spotpatch-target-budget[data-state="ready"] { display: none; }
-    .spotpatch-target-budget[data-state="over"] { color: #fda4af; }
+    .spotpatch-target-budget[data-state="over"] { color: var(--spotpatch-danger-text); }
     .spotpatch-target-count {
       margin-left: auto;
-      border-radius: 999px;
-      padding: 3px 8px;
       color: var(--spotpatch-text-muted);
-      font: 600 10.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
+      font: 500 11px/1.4 var(--spotpatch-font-mono);
     }
     .spotpatch-target-progress {
-      height: 3px;
-      margin-bottom: 13px;
+      height: 2px;
+      margin-bottom: 12px;
       overflow: hidden;
-      border-radius: 999px;
+      border-radius: var(--spotpatch-radius-pill);
       background: var(--spotpatch-border-subtle);
     }
     .spotpatch-target-progress-fill {
       width: 0;
       height: 100%;
       border-radius: inherit;
-      background: linear-gradient(90deg, var(--spotpatch-accent), var(--spotpatch-accent-cyan));
-      transition: width 180ms ease;
+      background: var(--spotpatch-brand-line);
+      transition: width var(--spotpatch-duration-slow) var(--spotpatch-ease-out);
     }
     .spotpatch-target-list {
       display: grid;
       gap: 8px;
       max-height: min(340px, 48vh);
       overflow: auto;
-      padding-right: 2px;
+      padding: 2px;
+      margin: -2px;
     }
+
     .spotpatch-target-item {
       overflow: hidden;
       border: 1px solid var(--spotpatch-border-subtle);
       border-radius: var(--spotpatch-radius-card);
       background: var(--spotpatch-bg-raised);
-      transition: border-color 150ms ease, background 150ms ease;
+      transition:
+        border-color var(--spotpatch-duration-base) ease,
+        background var(--spotpatch-duration-base) ease,
+        box-shadow var(--spotpatch-duration-base) ease;
     }
     .spotpatch-target-item[data-active="true"] {
-      border-color: rgb(139 123 255 / 34%);
+      border-color: var(--spotpatch-accent-line);
       background: var(--spotpatch-bg-active);
-      box-shadow: 0 0 0 3px rgb(139 123 255 / 10%);
+      box-shadow: 0 0 0 3px var(--spotpatch-accent-tint);
+    }
+    .spotpatch-target-item[data-entering="true"] {
+      animation: spotpatch-enter var(--spotpatch-duration-slow) var(--spotpatch-ease-out) both;
     }
     .spotpatch-target-summary {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) 28px 28px;
-      align-items: stretch;
+      grid-template-columns: minmax(0, 1fr) 30px 30px;
+      align-items: center;
       gap: 2px;
       padding: 4px;
     }
@@ -4046,27 +4155,31 @@ function createStyles(document) {
       display: grid;
       grid-template-columns: 24px minmax(0, 1fr) auto;
       align-items: center;
-      gap: 9px;
+      gap: 10px;
       min-width: 0;
       border: 0;
-      border-radius: 8px;
-      padding: 8px;
+      border-radius: var(--spotpatch-radius-sm);
+      padding: 7px 8px;
       color: inherit;
       background: transparent;
       cursor: pointer;
       text-align: left;
+      transition: background var(--spotpatch-duration-fast) ease;
     }
-    .spotpatch-target-select:hover { background: rgb(255 255 255 / 3.5%); }
+    .spotpatch-target-select:hover { background: var(--spotpatch-hover); }
     .spotpatch-target-index {
       display: inline-grid;
-      width: 22px;
-      height: 22px;
+      width: 24px;
+      height: 24px;
       place-items: center;
-      border: 1px solid rgb(68 202 224 / 25%);
-      border-radius: 6px;
+      border-radius: var(--spotpatch-radius-xs);
       color: var(--spotpatch-text-secondary);
-      background: var(--spotpatch-bg);
-      font: 650 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
+      background: var(--spotpatch-hover);
+      font: 600 11px/1 var(--spotpatch-font-mono);
+    }
+    [data-active="true"] .spotpatch-target-index {
+      color: var(--spotpatch-text-on-accent);
+      background: var(--spotpatch-accent-strong);
     }
     .spotpatch-target-copy { min-width: 0; }
     .spotpatch-target-name,
@@ -4076,37 +4189,49 @@ function createStyles(document) {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    .spotpatch-target-name { color: #f2f2f5; font-size: 13px; font-weight: 650; }
-    .spotpatch-target-source { margin-top: 1px; color: var(--spotpatch-text-muted); font: 500 10.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
+    .spotpatch-target-name { font-size: 13px; font-weight: 620; }
+    .spotpatch-target-source {
+      margin-top: 1px;
+      color: var(--spotpatch-text-muted);
+      font: 500 11px/1.4 var(--spotpatch-font-mono);
+    }
     .spotpatch-target-state {
-      border-radius: 999px;
+      border-radius: var(--spotpatch-radius-pill);
       padding: 3px 8px;
-      color: #a7f3d0;
-      background: rgb(16 185 129 / 9%);
-      font-size: 10.5px;
-      font-weight: 650;
+      color: var(--spotpatch-success-text);
+      background: var(--spotpatch-success-tint);
+      font-size: 11px;
+      font-weight: 600;
       white-space: nowrap;
     }
-    .spotpatch-target-state[data-complete="false"] { color: #f5c97a; background: rgb(245 158 11 / 9%); }
+    .spotpatch-target-state[data-complete="false"] {
+      color: var(--spotpatch-warning-text);
+      background: var(--spotpatch-warning-tint);
+    }
     .spotpatch-target-open,
     .spotpatch-target-remove {
       display: inline-grid;
-      width: 28px;
-      height: 100%;
-      min-height: 34px;
-      padding: 0;
+      width: 30px;
+      height: 30px;
       place-items: center;
-      border: 1px solid transparent;
-      border-radius: 7px;
-      color: #7f899a;
+      border: 0;
+      border-radius: var(--spotpatch-radius-sm);
+      padding: 0;
+      color: var(--spotpatch-text-muted);
       background: transparent;
       cursor: pointer;
-    }
-    .spotpatch-target-open { color: #79d9e7; }
-    .spotpatch-target-open:hover:not(:disabled) { border-color: rgb(68 202 224 / 30%); color: #c8f7ff; background: rgb(8 145 178 / 11%); }
-    .spotpatch-target-remove:hover:not(:disabled) { border-color: rgb(251 113 133 / 24%); color: #fda4af; background: rgb(127 29 29 / 12%); }
+      transition:
+        color var(--spotpatch-duration-fast) ease,
+        background var(--spotpatch-duration-fast) ease;
+    }
+    .spotpatch-target-open:hover:not(:disabled) { color: var(--spotpatch-cyan-text); background: var(--spotpatch-cyan-tint); }
+    .spotpatch-target-remove:hover:not(:disabled) { color: var(--spotpatch-danger-text); background: var(--spotpatch-danger-tint); }
+    .spotpatch-target-open:disabled,
+    .spotpatch-target-remove:disabled { cursor: not-allowed; opacity: .35; }
+
     .spotpatch-target-editor {
-      padding: 0 12px 12px;
+      display: block;
+      padding: 2px 12px 12px;
     }
     .spotpatch-target-editor-head {
       display: flex;
@@ -4115,179 +4240,178 @@ function createStyles(document) {
       gap: 12px;
       margin-bottom: 6px;
     }
-    .spotpatch-target-editor-label { color: var(--spotpatch-text-secondary); font-size: 11px; font-weight: 650; }
-    .spotpatch-target-editor-count { color: var(--spotpatch-text-muted); font: 500 10.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
+    .spotpatch-target-editor-label { color: var(--spotpatch-text-secondary); font-size: 11.5px; font-weight: 600; }
+    .spotpatch-target-editor-count { color: var(--spotpatch-text-muted); font: 500 11px/1.3 var(--spotpatch-font-mono); }
     .spotpatch-target-editor textarea {
+      display: block;
       box-sizing: border-box;
       width: 100%;
-      min-height: 74px;
+      min-height: 76px;
       resize: vertical;
       border: 1px solid var(--spotpatch-border);
-      border-radius: 7px;
-      padding: 9px 10px;
-      color: #f8fafc;
-      caret-color: #8b7cf7;
+      border-radius: var(--spotpatch-radius-md);
+      padding: 10px 12px;
+      color: var(--spotpatch-text);
+      caret-color: var(--spotpatch-accent-soft);
       background: var(--spotpatch-bg-input);
-      font-size: 12.5px;
+      font-size: 13px;
       line-height: 1.55;
       outline: none;
-      transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
+      transition:
+        border-color var(--spotpatch-duration-fast) ease,
+        box-shadow var(--spotpatch-duration-fast) ease;
     }
-    .spotpatch-target-editor textarea::placeholder { color: #687284; }
-    .spotpatch-target-editor textarea:hover { border-color: rgb(139 124 247 / 34%); }
+    .spotpatch-target-editor textarea::placeholder { color: var(--spotpatch-text-muted); }
+    .spotpatch-target-editor textarea:hover { border-color: var(--spotpatch-border-strong); }
     .spotpatch-target-editor textarea:focus {
-      border-color: rgb(139 124 247 / 68%);
-      background: rgb(3 7 18 / 65%);
-      box-shadow: 0 0 0 2px rgb(109 93 246 / 10%);
+      border-color: var(--spotpatch-accent-line);
+      box-shadow: 0 0 0 3px var(--spotpatch-accent-tint);
     }
+
     .spotpatch-diagnostics {
       margin-top: 10px;
       overflow: hidden;
-      border: 1px solid rgb(255 255 255 / 8%);
-      border-radius: 9px;
-      background: rgb(255 255 255 / 2.5%);
+      border: 1px solid var(--spotpatch-border-subtle);
+      border-radius: var(--spotpatch-radius-md);
     }
     .spotpatch-diagnostics > summary {
       display: flex;
       align-items: center;
       gap: 8px;
-      padding: 9px 11px;
-      color: #bfc5d0;
+      padding: 9px 12px;
+      color: var(--spotpatch-text-secondary);
       cursor: pointer;
-      font-size: 11px;
-      font-weight: 650;
+      font-size: 11.5px;
+      font-weight: 600;
       list-style: none;
       user-select: none;
     }
     .spotpatch-diagnostics > summary::-webkit-details-marker { display: none; }
     .spotpatch-diagnostics > summary::before {
-      color: #778193;
+      color: var(--spotpatch-text-muted);
       content: "›";
       font-size: 16px;
       line-height: 1;
-      transform: rotate(0deg);
-      transition: transform 150ms ease;
+      transition: transform var(--spotpatch-duration-base) var(--spotpatch-ease-out);
     }
     .spotpatch-diagnostics[open] > summary::before { transform: rotate(90deg); }
     .spotpatch-source-peek {
       min-width: 0;
-      overflow: hidden;
       margin-left: auto;
-      color: #64748b;
-      font: 500 10.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
+      overflow: hidden;
+      color: var(--spotpatch-text-muted);
+      font: 500 11px/1.3 var(--spotpatch-font-mono);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    .spotpatch-summary {
-      max-height: 170px;
+    .spotpatch-summary,
+    .spotpatch-prompt {
       margin: 0;
       overflow: auto;
-      border-top: 1px solid rgb(255 255 255 / 7%);
-      padding: 10px 11px 11px;
-      color: #9ca5b5;
-      font: 10.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
       overflow-wrap: anywhere;
       white-space: pre-wrap;
       user-select: text;
+      font: 11px/1.6 var(--spotpatch-font-mono);
+    }
+    .spotpatch-summary {
+      max-height: 170px;
+      border-top: 1px solid var(--spotpatch-border-subtle);
+      padding: 10px 12px 12px;
+      color: var(--spotpatch-text-secondary);
     }
     .spotpatch-prompt {
       max-height: min(500px, 60vh);
-      margin: 0;
-      overflow: auto;
-      border: 1px solid rgb(255 255 255 / 9%);
-      border-radius: 9px;
-      padding: 11px;
-      color: #d8ddeb;
-      background: rgb(3 7 18 / 55%);
-      font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
-      overflow-wrap: anywhere;
-      white-space: pre-wrap;
-      user-select: text;
+      border: 1px solid var(--spotpatch-border-subtle);
+      border-radius: var(--spotpatch-radius-md);
+      padding: 12px;
+      color: var(--spotpatch-text);
+      background: var(--spotpatch-bg-input);
     }
+
     .spotpatch-actions {
       display: grid;
       gap: 8px;
-      padding: 10px 18px 14px;
-      border-top: 1px solid rgb(255 255 255 / 8%);
-      background: rgb(8 8 12 / 86%);
-    }
-    .spotpatch-editor-feedback {
-      white-space: normal;
+      border-top: 1px solid var(--spotpatch-border-subtle);
+      padding: 12px 18px 16px;
     }
+    .spotpatch-editor-feedback { white-space: normal; }
     .spotpatch-secondary-actions,
-    .spotpatch-primary-actions {
-      display: flex;
-      align-items: center;
-      gap: 7px;
-    }
-    .spotpatch-secondary-actions { min-height: 30px; }
+    .spotpatch-primary-actions { display: flex; align-items: center; gap: 8px; }
+    .spotpatch-secondary-actions { gap: 2px; margin: 0 -8px; }
     .spotpatch-actions button {
       display: inline-flex;
-      min-height: 34px;
+      min-height: 36px;
       align-items: center;
       justify-content: center;
-      border: 1px solid rgb(255 255 255 / 10%);
-      border-radius: 9px;
-      padding: 7px 11px;
-      color: var(--spotpatch-text-secondary);
-      background: rgb(255 255 255 / 4%);
+      gap: 6px;
+      border: 1px solid var(--spotpatch-border);
+      border-radius: var(--spotpatch-radius-md);
+      padding: 0 12px;
+      color: var(--spotpatch-text);
+      background: var(--spotpatch-bg-raised);
       cursor: pointer;
-      font-size: 12px;
-      font-weight: 650;
-      transition: border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
+      font-size: 12.5px;
+      font-weight: 600;
+      white-space: nowrap;
+      transition:
+        border-color var(--spotpatch-duration-fast) ease,
+        background var(--spotpatch-duration-fast) ease,
+        box-shadow var(--spotpatch-duration-base) ease,
+        transform var(--spotpatch-duration-fast) ease;
     }
     .spotpatch-actions button:hover:not(:disabled) {
-      border-color: rgb(139 124 247 / 45%);
-      color: #fff;
-      transform: translateY(-1px);
+      border-color: var(--spotpatch-border-strong);
+      background: var(--spotpatch-bg-active);
     }
+    .spotpatch-actions button:active:not(:disabled) { transform: scale(.98); }
     .spotpatch-actions .spotpatch-primary {
-      min-width: 138px;
+      min-width: 140px;
       flex: 1;
       border-color: transparent;
       color: var(--spotpatch-text-on-accent);
-      background: linear-gradient(135deg, var(--spotpatch-accent), var(--spotpatch-accent-strong));
-      box-shadow: 0 8px 20px -8px rgb(139 123 255 / 55%);
+      background: var(--spotpatch-primary-fill);
+      box-shadow: var(--spotpatch-shadow-accent), var(--spotpatch-shadow-inset);
     }
-    .spotpatch-actions .spotpatch-primary:hover:not(:disabled) { color: var(--spotpatch-text-on-accent); filter: brightness(1.08); }
-    .spotpatch-actions .spotpatch-primary::after { margin-left: 8px; content: "↗"; font-size: 12px; }
+    .spotpatch-actions .spotpatch-primary:hover:not(:disabled) {
+      border-color: transparent;
+      background: var(--spotpatch-primary-fill);
+      filter: brightness(1.1);
+    }
+    .spotpatch-actions .spotpatch-primary::after { content: "↗"; font-size: 12px; opacity: .8; }
     .spotpatch-actions .spotpatch-secondary-action {
       min-height: 30px;
-      border-style: dashed;
-      padding: 5px 10px;
-      color: var(--spotpatch-text-muted);
+      border-color: transparent;
+      padding: 0 8px;
+      color: var(--spotpatch-text-secondary);
       background: transparent;
-      font-size: 11px;
+      font-size: 12px;
+      font-weight: 550;
+    }
+    .spotpatch-actions .spotpatch-secondary-action:hover:not(:disabled) {
+      border-color: transparent;
+      color: var(--spotpatch-text);
+      background: var(--spotpatch-hover);
     }
     .spotpatch-actions .spotpatch-icon-action {
-      width: 34px;
-      min-width: 34px;
+      width: 36px;
+      min-width: 36px;
       padding: 0;
       font-size: 0;
     }
     .spotpatch-actions .spotpatch-icon-action::before {
       color: var(--spotpatch-text-secondary);
       content: attr(data-compact-icon);
-      font-size: 18px;
+      font-size: 17px;
       font-weight: 400;
       line-height: 1;
     }
-    .spotpatch-actions button:disabled { cursor: not-allowed; opacity: .4; transform: none; }
-    .spotpatch-actions button:focus-visible,
-    .spotpatch-repository:focus-visible,
-    .spotpatch-target-open:focus-visible,
-    .spotpatch-target-remove:focus-visible,
-    .spotpatch-close:focus-visible,
-    .spotpatch-reset-position:focus-visible,
-    .spotpatch-trigger:focus-visible,
-    .spotpatch-target-select:focus-visible,
-    .spotpatch-target-editor textarea:focus-visible,
-    .spotpatch-locale:focus-visible,
-    .spotpatch-prompt:focus-visible,
-    .spotpatch-diagnostics > summary:focus-visible {
-      outline: 2px solid #8b7cf7;
-      outline-offset: 2px;
+    .spotpatch-actions button:disabled {
+      box-shadow: none;
+      cursor: not-allowed;
+      filter: none;
+      opacity: .4;
     }
+
     .spotpatch-live {
       position: absolute;
       width: 1px;
@@ -4297,16 +4421,11 @@ function createStyles(document) {
       clip-path: inset(50%);
       white-space: nowrap;
     }
-    @media (prefers-reduced-motion: reduce) {
-      .spotpatch-trigger,
-      .spotpatch-actions button,
-      .spotpatch-diagnostics > summary::before { transition: none; }
-    }
     @media (max-width: 520px) {
       .spotpatch-dialog { width: calc(100vw - 16px); }
       .spotpatch-shell { max-height: calc(100dvh - 16px); }
-      .spotpatch-header, .spotpatch-body { padding-left: 14px; padding-right: 14px; }
-      .spotpatch-brand-row { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
+      .spotpatch-header, .spotpatch-body { padding-right: 14px; padding-left: 14px; }
+      .spotpatch-brand-row { margin-right: -14px; margin-left: -14px; padding-right: 10px; padding-left: 14px; }
       .spotpatch-actions { padding-right: 14px; padding-left: 14px; }
       .spotpatch-target-select { grid-template-columns: 24px minmax(0, 1fr); }
       .spotpatch-target-state { display: none; }
@@ -4316,6 +4435,19 @@ function createStyles(document) {
   `;
   return style;
 }
+function createResetPositionIcon(document) {
+  const namespace = "http://www.w3.org/2000/svg";
+  const icon = document.createElementNS(namespace, "svg");
+  icon.setAttribute("viewBox", "0 0 16 16");
+  icon.setAttribute("aria-hidden", "true");
+  const path = document.createElementNS(namespace, "path");
+  path.setAttribute(
+    "d",
+    "M8 1.5v3M8 11.5v3M1.5 8h3M11.5 8h3M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+  );
+  icon.append(path);
+  return icon;
+}
 function summaryLine(summary, prefix) {
   const line = summary.split("\n").find((candidate) => candidate.startsWith(`${prefix}: `));
   return line?.slice(prefix.length + 2).trim();
@@ -4446,7 +4578,8 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   repositoryLink.target = "_blank";
   repositoryLink.rel = "noopener noreferrer";
   const localeButton = createButton(document, "", "spotpatch-locale");
-  const resetPositionButton = createButton(document, "⌖", "spotpatch-reset-position");
+  const resetPositionButton = createButton(document, "", "spotpatch-reset-position");
+  resetPositionButton.append(createResetPositionIcon(document));
   const closeButton = createButton(document, "×", "spotpatch-close");
   headerControls.append(repositoryLink, localeButton, resetPositionButton, closeButton);
   brandRow.append(brand, headerControls);
@@ -4673,6 +4806,8 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   let editingEnabled = true;
   let currentTargets = [];
   let currentMaximum = 0;
+  let renderedTargetIds = /* @__PURE__ */ new Set();
+  let renderedHighlightIds = /* @__PURE__ */ new Set();
   let currentEditorFeedbackState = "idle";
   let currentDataFlowState = Object.freeze({
     component: Object.freeze({
@@ -4977,6 +5112,8 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     const selectionEnd = focusedInstruction?.selectionEnd;
     currentTargets = targets.map((target2) => Object.freeze({ ...target2 }));
     currentMaximum = maximum;
+    const previousTargetIds = renderedTargetIds;
+    renderedTargetIds = new Set(targets.map((target2) => target2.id));
     targetList.replaceChildren();
     const completeCount = targets.filter(
       (target2) => target2.instruction.trim().length > 0
@@ -5009,6 +5146,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       item.dataset.active = String(target2.active);
       item.dataset.status = target2.status;
       item.dataset.targetId = target2.id;
+      item.dataset.entering = String(!previousTargetIds.has(target2.id));
       const targetSummary = createMarkedElement(document, "div");
       targetSummary.className = "spotpatch-target-summary";
       const select = createButton(document, "", "spotpatch-target-select");
@@ -5131,11 +5269,14 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     );
   }
   function showSelectionHighlights(targets) {
+    const previousHighlightIds = renderedHighlightIds;
+    renderedHighlightIds = new Set(targets.map((target2) => target2.id));
     selectionHighlights.replaceChildren();
     for (const [index, target2] of targets.entries()) {
       const box = createMarkedElement(document, "div");
       box.className = "spotpatch-selection-highlight";
       box.dataset.targetId = target2.id;
+      box.dataset.entering = String(!previousHighlightIds.has(target2.id));
       box.dataset.active = String(target2.active);
       box.style.transform = `translate(${String(target2.rect.x)}px, ${String(target2.rect.y)}px)`;
       box.style.width = `${String(target2.rect.width)}px`;