claude-maestro 0.1.19 → 0.1.21

package/out/renderer/assets/{index-Dgaj6c_K.css → index-CTyPr1hG.css}

@@ -1,15 +1,143 @@
+/* ===== Design-system scales (additive, theme-independent) =====
+ * Spacing / radius / elevation / motion + focus ring + z-index. Colours live in
+ * the per-theme :root blocks below; accent tints derive from --accent via
+ * color-mix so they track the active theme AND a custom accent automatically. */
+:root {
+  /* spacing — 4px base + a 2px step for this dense tool */
+  --space-half: 2px;
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 8px;
+  --space-lg: 12px;
+  --space-xl: 16px;
+  --space-2xl: 20px;
+  --space-3xl: 24px;
+
+  /* radius */
+  --r-sm: 5px;
+  --r-md: 8px;
+  --r-lg: 12px;
+  --r-pill: 999px;
+
+  /* elevation — tuned for dark surfaces */
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
+  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);
+  --shadow-4: 0 24px 64px rgba(0, 0, 0, 0.55);
+
+  /* motion */
+  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
+  --dur-fast: 0.12s;
+  --dur-base: 0.16s;
+
+  /* hairline divider + accent tints (derived so custom accents work too) */
+  --border-soft: rgba(255, 255, 255, 0.06);
+  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
+  --accent-border: color-mix(in srgb, var(--accent) 45%, transparent);
+
+  /* keyboard focus ring — bg gap + accent halo */
+  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
+
+  /* z-index scale */
+  --z-rail: 50;
+  --z-dropdown: 150;
+  --z-modal: 200;
+  --z-toast: 500;
+}
+
+/* Theme colour tokens — dark (default) */
 :root {
   --bg: #16171a;
   --panel: #1d1e23;
   --panel-2: #222329;
+  --panel-3: #2b2c33;
   --border: #2a2c33;
-  --text: #d7d8db;
+  --text: #e3e4e8;
+  --text-2: #b3b5bd;
   --dim: #8b8d94;
   --accent: #d97757;
+  /* readable text on a solid --accent fill (overridden per-theme + by a custom accent) */
+  --accent-fg: #ffffff;
   --attention: #e2b93d;
   --working: #58a6ff;
   --error: #e5484d;
   --green: #4cc38a;
+  /* gamification palette */
+  --xp: #58a6ff;
+  --level-up: #ffd54a;
+  --badge: #d97757;
+  --celebrate-1: #ff6b6b;
+  --celebrate-2: #4cc38a;
+}
+
+/* Neon theme — cyan/violet on near-black, soft glows. */
+.app.theme-neon {
+  --bg: #0c0e14;
+  --panel: #12151f;
+  --panel-2: #171b28;
+  --panel-3: #1e2434;
+  --border: #243049;
+  --text: #e6f1ff;
+  --text-2: #aeb9d4;
+  --dim: #7e8ba8;
+  --accent: #22d3ee;
+  --accent-fg: #06121a;
+  --attention: #fbbf24;
+  --working: #a78bfa;
+  --error: #fb7185;
+  --green: #34d399;
+  --xp: #22d3ee;
+  --level-up: #fde047;
+  --badge: #a78bfa;
+  --celebrate-1: #22d3ee;
+  --celebrate-2: #a78bfa;
+}
+
+/* Synthwave theme — magenta/indigo, sunset accents. */
+.app.theme-synthwave {
+  --bg: #190f2e;
+  --panel: #21163f;
+  --panel-2: #2b1d52;
+  --panel-3: #33215f;
+  --border: #3d2a6b;
+  --text: #ffe9f6;
+  --text-2: #c7a9e0;
+  --dim: #a98fc8;
+  --accent: #ff2e88;
+  --accent-fg: #ffffff;
+  --attention: #ffd23f;
+  --working: #00e5ff;
+  --error: #ff5d73;
+  --green: #4ade80;
+  --xp: #ff2e88;
+  --level-up: #ffd23f;
+  --badge: #00e5ff;
+  --celebrate-1: #ff2e88;
+  --celebrate-2: #00e5ff;
+}
+.app.theme-synthwave .btn.primary {
+  background: linear-gradient(135deg, var(--accent), #b14bff);
+  border-color: transparent;
+}
+
+/* Reduce-motion: kill all animations/transitions app-wide. */
+.app.reduce-motion *,
+.app.reduce-motion *::before,
+.app.reduce-motion *::after {
+  animation: none !important;
+  transition: none !important;
+}
+
+/* Honour the OS "reduce motion" preference even when the in-app toggle is off. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 
 * {
@@ -60,35 +188,97 @@ body {
   --bg: rgba(22, 23, 26, 0.82);
   --panel: rgba(29, 30, 35, 0.82);
   --panel-2: rgba(34, 35, 41, 0.82);
+  --panel-3: rgba(43, 44, 51, 0.86);
 }
 
 .app.loading {
   align-items: center;
   justify-content: center;
+  gap: 10px;
   color: var(--dim);
 }
 
+/* Indeterminate spinner (reuses the spin keyframe; respects reduce-motion). */
+.spinner {
+  display: inline-block;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  animation: spin 0.8s linear infinite;
+}
+
 .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
   background: var(--panel-2);
   color: var(--text);
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--r-sm);
   padding: 4px 10px;
   cursor: pointer;
-  font-size: 12px;
+  font-size: var(--text-base);
+  font-family: inherit;
+  transition:
+    background var(--dur-fast) var(--ease-out),
+    border-color var(--dur-fast) var(--ease-out),
+    color var(--dur-fast) var(--ease-out),
+    transform var(--dur-fast) var(--ease-out),
+    filter var(--dur-fast) var(--ease-out);
 }
 
 .btn:hover {
   border-color: var(--dim);
 }
 
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
+
+.btn:active:not(:disabled) {
+  transform: translateY(0.5px);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 .btn.primary {
   background: var(--accent);
   border-color: var(--accent);
+  color: var(--accent-fg);
+  font-weight: 600;
+}
+
+.btn.primary:hover:not(:disabled),
+.btn.danger:hover:not(:disabled) {
+  filter: brightness(1.08);
+}
+
+.btn.secondary {
+  background: var(--panel);
+}
+
+.btn.outline {
+  background: transparent;
+  border-color: var(--dim);
+}
+
+.btn.danger {
+  background: var(--error);
+  border-color: var(--error);
   color: #fff;
   font-weight: 600;
 }
 
+.btn.btn-sm {
+  padding: 2px 8px;
+  font-size: var(--text-sm);
+}
+
 .btn.ghost {
   background: transparent;
   border: none;
@@ -98,12 +288,35 @@ body {
 
 .btn.ghost:hover {
   color: var(--text);
+  background: var(--border-soft);
+}
+
+.btn.ghost:disabled,
+.btn.ghost:disabled:hover {
+  background: transparent;
+  color: var(--dim);
 }
 
 .btn.ghost.on {
   color: var(--accent);
 }
 
+/* Consistent keyboard focus ring across interactive surfaces. */
+.tab:focus-visible,
+.session-entry:focus-visible,
+.tab-model:focus-visible,
+.context-menu button:focus-visible,
+.tab-add-item:focus-visible,
+.palette-item:focus-visible,
+.statusbar-attention:focus-visible,
+.statusbar-te:focus-visible,
+.merge-badge:focus-visible,
+.rename-input:focus-visible,
+.palette-input:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
+
 .row {
   display: flex;
   gap: 8px;
@@ -112,8 +325,8 @@ body {
 /* ---------- sidebar ---------- */
 
 .sidebar {
-  width: 220px;
-  min-width: 220px;
+  width: 248px;
+  min-width: 248px;
   background: var(--panel);
   border-right: 1px solid var(--border);
   display: flex;
@@ -124,11 +337,9 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  /* Wrap when the action buttons can't all fit on one row, so none (e.g. the
-     ＋ new-session button) gets clipped off the right edge of the 220px rail. */
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  padding: 10px 12px 6px;
+  flex-wrap: nowrap;
+  gap: 8px;
+  padding: 10px 10px 6px 12px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.08em;
@@ -136,15 +347,26 @@ body {
   color: var(--dim);
 }
 
-/* Tighten the header's icon-button row so more fit before wrapping. */
+.sidebar-header > span:first-child {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .sidebar-header .row {
-  flex-wrap: wrap;
+  flex: none;
+  flex-wrap: nowrap;
   justify-content: flex-end;
   gap: 2px;
 }
 
-.sidebar-header .row .btn.ghost {
-  padding: 2px 4px;
+/* Square icon buttons in the header — uniform hit targets with a hover affordance. */
+.sidebar-header .row .btn.ghost.icon-btn {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: var(--r-sm);
 }
 
 .sidebar-list {
@@ -159,6 +381,7 @@ body {
   padding: 7px 8px 7px 10px;
   border-left: 3px solid transparent;
   cursor: pointer;
+  transition: background var(--dur-fast) var(--ease-out);
 }
 
 .session-entry:hover {
@@ -166,16 +389,20 @@ body {
 }
 
 .session-entry.active {
-  background: var(--panel-2);
+  background: var(--accent-soft);
   border-left-color: var(--accent);
 }
 
 .session-entry .close {
-  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--dur-fast) var(--ease-out);
 }
 
-.session-entry:hover .close {
-  visibility: visible;
+.session-entry:hover .close,
+.session-entry:focus-within .close {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .session-meta {
@@ -205,7 +432,7 @@ body {
 .rename-input {
   background: var(--bg);
   border: 1px solid var(--accent);
-  border-radius: 3px;
+  border-radius: var(--r-sm);
   color: var(--text);
   font-size: 13px;
   padding: 1px 4px;
@@ -214,28 +441,27 @@ body {
 
 .glyph {
   width: 14px;
-  text-align: center;
-  font-size: 13px;
+  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
 }
 
 .glyph.status-working {
   color: var(--working);
   animation: spin 1.2s linear infinite;
-  display: inline-block;
 }
 
 /* Blocked on the user — the only nagging signal: amber, breathing pulse. */
 .glyph.status-needs-attention {
   color: var(--attention);
-  display: inline-block;
   animation: pulse 1.4s ease-in-out infinite;
 }
 
 /* Finished a turn — your turn now: green check that pops in once, then rests. */
 .glyph.status-done {
   color: var(--green);
-  font-weight: 700;
-  display: inline-block;
   animation: done-pop 0.5s ease-out;
 }
 
@@ -286,9 +512,10 @@ body {
 .watchdog-badge {
   flex: none;
   width: 14px;
-  text-align: center;
-  font-size: 12px;
-  line-height: 14px;
+  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   cursor: help;
   animation: pulse 1.5s ease-in-out infinite;
 }
@@ -353,6 +580,65 @@ body {
   color: var(--attention);
 }
 
+/* Spend-budget progress bars, shown below the collapsed usage bar when set. */
+.usage-budgets {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 12px 10px;
+}
+
+.usage-limit {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.usage-limit-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.usage-limit-label {
+  color: var(--dim);
+}
+
+.usage-limit-value {
+  font-variant-numeric: tabular-nums;
+}
+
+.usage-limit-track {
+  height: 5px;
+  border-radius: 3px;
+  background: var(--panel-2);
+  overflow: hidden;
+}
+
+.usage-limit-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+.usage-limit-fill.neutral {
+  background: var(--working);
+}
+
+.usage-limit-fill.amber {
+  background: var(--attention);
+}
+
+.usage-limit-fill.red {
+  background: var(--error);
+}
+
+.usage-limit-warn {
+  font-size: 11px;
+  color: var(--attention);
+}
+
 .usage-window {
   display: flex;
   flex-direction: column;
@@ -373,15 +659,16 @@ body {
   max-width: calc(100vw - 24px);
   max-height: 70vh;
   overflow-y: auto;
-  background: var(--panel-2);
+  background: var(--panel-3);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: var(--r-md);
   padding: 12px 14px;
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-3);
   display: flex;
   flex-direction: column;
   gap: 8px;
   font-size: 12px;
+  animation: popover-in var(--dur-fast) var(--ease-out);
 }
 
 .usage-summary {
@@ -613,6 +900,11 @@ body {
   background: rgba(217, 119, 87, 0.16);
 }
 
+.tree-row.file.selected {
+  background: rgba(217, 119, 87, 0.28);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+
 .flash-dot {
   font-size: 10px;
   color: var(--attention);
@@ -1093,15 +1385,16 @@ body {
 
 .context-menu {
   position: fixed;
-  z-index: 100;
-  background: var(--panel-2);
+  z-index: var(--z-dropdown);
+  background: var(--panel-3);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-md);
   padding: 4px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-2);
   display: flex;
   flex-direction: column;
   min-width: 170px;
+  animation: popover-in var(--dur-fast) var(--ease-out);
 }
 
 .context-menu button {
@@ -1116,8 +1409,8 @@ body {
 }
 
 .context-menu button:hover {
-  background: var(--accent);
-  color: #fff;
+  background: var(--accent-soft);
+  color: var(--text);
 }
 
 /* ---------- main area ---------- */
@@ -1168,29 +1461,51 @@ body {
   cursor: pointer;
   color: var(--dim);
   white-space: nowrap;
+  position: relative;
+  transition:
+    background var(--dur-fast) var(--ease-out),
+    color var(--dur-fast) var(--ease-out);
 }
 
 .tab:hover {
   color: var(--text);
 }
 
+.tab:hover:not(.active) {
+  background: var(--panel-2);
+}
+
 .tab.active {
   background: var(--bg);
   color: var(--text);
 }
 
+.tab.active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  background: var(--accent);
+}
+
 .tab-icon {
   font-size: 11px;
   color: var(--accent);
 }
 
 .tab .close {
-  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
   font-size: 10px;
+  transition: opacity var(--dur-fast) var(--ease-out);
 }
 
-.tab:hover .close {
-  visibility: visible;
+.tab:hover .close,
+.tab:focus-within .close {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .tab-kind {
@@ -1210,19 +1525,19 @@ body {
 
 /* Per-claude-tab model switcher */
 .tab-model {
-  background: var(--bg);
+  background: var(--panel-2);
   border: 1px solid var(--border);
-  border-radius: 3px;
-  color: var(--dim);
-  font-size: 10px;
-  padding: 0 2px;
-  max-width: 74px;
+  border-radius: var(--r-sm);
+  color: var(--text-2);
+  font-size: 11px;
+  height: 22px;
+  padding: 0 6px;
   cursor: pointer;
 }
 
 .tab-model:hover {
   color: var(--text);
-  border-color: var(--accent);
+  border-color: var(--accent-border);
 }
 
 /* Add-terminal dropdown */
@@ -1247,13 +1562,14 @@ body {
 
 .tab-add-menu {
   position: fixed;
-  z-index: 100;
+  z-index: var(--z-dropdown);
   min-width: 150px;
-  background: var(--panel-2);
+  background: var(--panel-3);
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--r-md);
   padding: 4px;
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+  box-shadow: var(--shadow-2);
+  animation: popover-in var(--dur-fast) var(--ease-out);
 }
 
 .tab-add-item {
@@ -1264,7 +1580,7 @@ body {
   padding: 6px 10px;
   background: none;
   border: none;
-  border-radius: 3px;
+  border-radius: var(--r-sm);
   color: var(--text);
   text-align: left;
   cursor: pointer;
@@ -1272,7 +1588,7 @@ body {
 }
 
 .tab-add-item:hover {
-  background: var(--accent);
+  background: var(--accent-soft);
 }
 
 .session-termcount {
@@ -1319,11 +1635,15 @@ body {
 /* ---------- worktree (parallel task) sessions ---------- */
 
 .session-entry .fork {
-  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--dur-fast) var(--ease-out);
 }
 
-.session-entry:hover .fork {
-  visibility: visible;
+.session-entry:hover .fork,
+.session-entry:focus-within .fork {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 /* Indent worktree tasks under their parent, with a connector tick. */
@@ -1354,14 +1674,16 @@ body {
   max-width: 150px;
 }
 
-.merge-btn {
+.merge-btn,
+.review-btn {
   font-size: 11px;
   padding: 1px 7px;
   border: 1px solid var(--border);
   border-radius: 4px;
 }
 
-.merge-btn:hover {
+.merge-btn:hover,
+.review-btn:hover {
   border-color: var(--accent);
   color: var(--accent);
 }
@@ -1419,14 +1741,18 @@ body {
 /* ---------- prompt queue ---------- */
 
 .session-entry .queue-btn {
-  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
   position: relative;
+  transition: opacity var(--dur-fast) var(--ease-out);
 }
 
 /* With queued prompts, the button (and its count badge) is always visible. */
 .session-entry:hover .queue-btn,
+.session-entry:focus-within .queue-btn,
 .session-entry .queue-btn.has-items {
-  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .queue-badge {
@@ -1457,14 +1783,15 @@ body {
   position: fixed;
   width: 340px;
   max-width: calc(100vw - 24px);
-  background: var(--panel);
+  background: var(--panel-3);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--r-md);
   padding: 10px 12px;
   display: flex;
   flex-direction: column;
   gap: 8px;
-  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
+  box-shadow: var(--shadow-3);
+  animation: popover-in var(--dur-fast) var(--ease-out);
 }
 
 .queue-popover-title {
@@ -1565,17 +1892,20 @@ body {
 .modal-overlay {
   position: fixed;
   inset: 0;
-  z-index: 200;
-  background: rgba(0, 0, 0, 0.55);
+  z-index: var(--z-modal);
+  background: rgba(10, 11, 14, 0.55);
+  backdrop-filter: blur(6px) saturate(120%);
+  -webkit-backdrop-filter: blur(6px) saturate(120%);
   display: flex;
   align-items: center;
   justify-content: center;
+  animation: overlay-in var(--dur-base) var(--ease-out);
 }
 
 .modal {
-  background: var(--panel);
+  background: var(--panel-3);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: var(--r-lg);
   padding: 18px 20px;
   width: 420px;
   max-width: 90vw;
@@ -1584,7 +1914,8 @@ body {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
+  box-shadow: var(--shadow-4);
+  animation: modal-in var(--dur-base) var(--ease-out);
 }
 
 .modal-wide {
@@ -1628,18 +1959,22 @@ body {
 .field textarea {
   background: var(--bg);
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--r-sm);
   color: var(--text);
   font-size: 13px;
   padding: 5px 8px;
   outline: none;
   font-family: inherit;
+  transition:
+    border-color var(--dur-fast) var(--ease-out),
+    box-shadow var(--dur-fast) var(--ease-out);
 }
 
 .field input:focus,
 .field select:focus,
 .field textarea:focus {
   border-color: var(--accent);
+  box-shadow: var(--ring);
 }
 
 .field-hint {
@@ -1670,6 +2005,15 @@ body {
   cursor: pointer;
 }
 
+.check-row.disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.check-row.disabled input[type='checkbox'] {
+  cursor: default;
+}
+
 .check-row > span {
   display: flex;
   flex-direction: column;
@@ -1716,6 +2060,63 @@ body {
   font-size: 12px;
 }
 
+/* resume picker — list of prior conversations */
+.conv-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.conv-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: flex-start;
+  text-align: left;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  padding: 6px 9px;
+  cursor: pointer;
+  font: inherit;
+  width: 100%;
+}
+
+.conv-item:hover {
+  border-color: var(--accent);
+}
+
+.conv-item.sel {
+  border-color: var(--accent);
+  background: var(--panel-2);
+}
+
+.conv-preview {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.conv-meta {
+  font-size: 11px;
+  color: var(--dim);
+}
+
+.conv-fresh {
+  margin-bottom: 2px;
+}
+
+.conv-empty {
+  font-size: 12px;
+  color: var(--dim);
+  padding: 8px 2px;
+}
+
 .bg-preview {
   height: 140px;
   border: 1px solid var(--border);
@@ -1744,11 +2145,43 @@ body {
 .modal-error {
   background: rgba(229, 72, 77, 0.15);
   color: var(--error);
-  border-radius: 4px;
+  border-radius: var(--r-sm);
   padding: 6px 10px;
   font-size: 12px;
 }
 
+/* Entrance animations (auto-disabled by .reduce-motion and prefers-reduced-motion). */
+@keyframes overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
 /* ---------- broadcast-prompt dialog ---------- */
 
 .broadcast-list-header {
@@ -1811,10 +2244,120 @@ body {
   padding-left: 8px;
 }
 
-/* ---------- global search palette ---------- */
+/* ---------- repo status overview dialog ---------- */
 
-.gs-overlay {
-  position: fixed;
+.repo-overview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.repo-overview-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.repo-overview-header-actions .btn {
+  font-size: 11px;
+  padding: 1px 8px;
+  text-transform: none;
+  letter-spacing: normal;
+}
+
+.repo-overview-loading {
+  font-size: 11px;
+  color: var(--dim);
+}
+
+.repo-overview-list {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.repo-overview-empty {
+  padding: 12px;
+  font-size: 12px;
+  color: var(--dim);
+}
+
+.repo-overview-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 10px;
+  font-size: 13px;
+  cursor: pointer;
+  border-left: 2px solid transparent;
+}
+
+.repo-overview-row:hover {
+  background: var(--panel-2);
+}
+
+.repo-overview-row.flagged {
+  border-left-color: var(--attention);
+}
+
+.repo-overview-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+.repo-overview-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.repo-overview-sub {
+  font-size: 11px;
+  color: var(--dim);
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.repo-overview-chips {
+  padding: 0;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+}
+
+.repo-overview-note {
+  font-size: 11px;
+  color: var(--dim);
+  white-space: nowrap;
+}
+
+.repo-overview-note.error {
+  color: var(--error);
+}
+
+.repo-overview-subhead {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--dim);
+  padding: 8px 10px 4px;
+  border-top: 1px solid var(--border);
+  margin-top: 4px;
+}
+
+.repo-overview-row.non-repo .repo-overview-name {
+  color: var(--dim);
+}
+
+/* ---------- global search palette ---------- */
+
+.gs-overlay {
+  position: fixed;
   inset: 0;
   z-index: 200;
   background: rgba(0, 0, 0, 0.45);
@@ -1825,15 +2368,16 @@ body {
 }
 
 .gs-palette {
-  background: var(--panel);
+  background: var(--panel-3);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: var(--r-lg);
   width: 640px;
   max-width: 90vw;
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
+  box-shadow: var(--shadow-4);
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  animation: modal-in var(--dur-base) var(--ease-out);
 }
 
 .gs-input-row {
@@ -1949,30 +2493,81 @@ body {
   color: var(--dim);
 }
 
+/* ---------- conversation history recall (Ctrl+Shift+H) ---------- */
+
+.hr-row {
+  padding: 6px 12px;
+  cursor: pointer;
+  border-left: 2px solid transparent;
+}
+
+.hr-row.sel {
+  background: var(--panel-2);
+  border-left-color: var(--accent);
+}
+
+.hr-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 2px;
+}
+
+.hr-repo {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.hr-ago {
+  font-size: 11px;
+  color: var(--dim);
+}
+
+.hr-count {
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--dim);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 0 4px;
+  white-space: nowrap;
+}
+
+.hr-row .gs-snippet {
+  display: block;
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  font-size: 12px;
+}
+
 /* ---------- command palette (Ctrl+K) ---------- */
 
 .palette-overlay {
   position: fixed;
   inset: 0;
   z-index: 300;
-  background: rgba(0, 0, 0, 0.45);
+  background: rgba(10, 11, 14, 0.5);
+  backdrop-filter: blur(6px) saturate(120%);
+  -webkit-backdrop-filter: blur(6px) saturate(120%);
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding-top: 12vh;
+  animation: overlay-in var(--dur-base) var(--ease-out);
 }
 
 .palette {
-  background: var(--panel);
+  background: var(--panel-3);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: var(--r-lg);
   width: 560px;
   max-width: 90vw;
   max-height: 60vh;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
+  box-shadow: var(--shadow-4);
+  animation: modal-in var(--dur-base) var(--ease-out);
 }
 
 .palette-input {
@@ -2015,11 +2610,14 @@ body {
   text-overflow: ellipsis;
 }
 
-.palette-item.sel,
 .palette-item:hover {
   background: var(--panel-2);
 }
 
+.palette-item.sel {
+  background: var(--accent-soft);
+}
+
 .palette-sub {
   color: var(--dim);
   font-size: 11px;
@@ -2191,6 +2789,132 @@ body {
   min-height: 0;
 }
 
+/* ---------- handoff notes strip ---------- */
+
+.handoff-strip {
+  flex: none;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.handoff-icon {
+  opacity: 0.8;
+}
+
+/* Empty + collapsed: a minimal, unobtrusive "Add note" affordance. */
+.handoff-strip.collapsed.empty {
+  border-bottom: none;
+  background: transparent;
+}
+
+.handoff-add {
+  background: transparent;
+  border: none;
+  color: var(--dim);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 3px 10px;
+}
+
+.handoff-add:hover {
+  color: var(--text);
+}
+
+/* Non-empty + collapsed: a compact read-only preview, click to edit. */
+.handoff-strip.collapsed:not(.empty) {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+.handoff-strip.collapsed:not(.empty):hover {
+  background: var(--panel-2);
+}
+
+.handoff-preview {
+  flex: 1;
+  min-width: 0;
+  max-height: 3.4em;
+  overflow: hidden;
+  position: relative;
+  color: var(--dim);
+  font-size: 12px;
+}
+
+/* Fade the clipped bottom edge so the preview reads as truncated. */
+.handoff-preview::after {
+  content: '';
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 1.1em;
+  background: linear-gradient(transparent, var(--panel));
+  pointer-events: none;
+}
+
+.handoff-strip.collapsed:not(.empty):hover .handoff-preview::after {
+  background: linear-gradient(transparent, var(--panel-2));
+}
+
+.handoff-preview .md {
+  font-size: 12px;
+}
+
+.handoff-preview .md > :first-child {
+  margin-top: 0;
+}
+
+/* Expanded: an inline editable scratchpad. */
+.handoff-strip.expanded {
+  display: flex;
+  flex-direction: column;
+  padding: 6px 10px 8px;
+  gap: 6px;
+}
+
+.handoff-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.handoff-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.handoff-hint {
+  flex: 1;
+  font-size: 11px;
+  color: var(--dim);
+}
+
+.handoff-collapse {
+  padding: 2px 10px;
+  font-size: 12px;
+}
+
+.handoff-input {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  min-height: 84px;
+  max-height: 240px;
+  padding: 6px 8px;
+  outline: none;
+  resize: vertical;
+}
+
+.handoff-input:focus {
+  border-color: var(--accent);
+}
+
 /* ---------- terminal ---------- */
 
 .term-wrap {
@@ -2374,6 +3098,87 @@ body {
   color: var(--dim);
 }
 
+/* ---------- branch-review diff (changed-file list + combined diff) ---------- */
+
+.branch-diff-layout {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.branch-diff-files {
+  flex: none;
+  width: 240px;
+  overflow-y: auto;
+  border-right: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.branch-diff-files-head {
+  padding: 6px 10px;
+  font-size: 11px;
+  color: var(--dim);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  background: var(--bg);
+}
+
+.branch-diff-file {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  padding: 3px 10px;
+  border: none;
+  background: none;
+  color: var(--text);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.branch-diff-file:hover {
+  background: var(--panel-2);
+}
+
+.branch-diff-status {
+  flex: none;
+  width: 14px;
+  text-align: center;
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  font-weight: 700;
+  font-size: 11px;
+}
+
+.branch-diff-status.added {
+  color: var(--green);
+}
+
+.branch-diff-status.removed {
+  color: var(--error);
+}
+
+.branch-diff-status.modified {
+  color: var(--working);
+}
+
+.branch-diff-status.renamed {
+  color: var(--accent);
+}
+
+.branch-diff-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: 'Cascadia Mono', Consolas, monospace;
+}
+
+.branch-diff-layout .viewer-editor {
+  flex: 1;
+  min-width: 0;
+}
+
 .viewer-image {
   flex: 1;
   display: flex;
@@ -2536,8 +3341,9 @@ body {
 .statusbar {
   display: flex;
   align-items: center;
-  gap: 14px;
-  padding: 4px 12px;
+  gap: 10px;
+  padding: 5px 12px;
+  min-height: 28px;
   border-top: 1px solid var(--border);
   background: var(--panel);
   font-size: 11px;
@@ -2545,8 +3351,12 @@ body {
 }
 
 .status-pill {
-  padding: 1px 8px;
-  border-radius: 8px;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 1px 8px 1px 6px;
+  border-radius: var(--r-lg);
   font-weight: 600;
 }
 
@@ -2577,15 +3387,21 @@ body {
 }
 
 .statusbar-folder {
+  flex: 0 1 auto;
+  min-width: 40px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .statusbar-attention {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
   border: none;
   padding: 1px 8px;
-  border-radius: 8px;
+  border-radius: var(--r-lg);
   font-size: 11px;
   font-weight: 600;
   cursor: pointer;
@@ -2598,6 +3414,7 @@ body {
 }
 
 .statusbar-age {
+  flex: none;
   margin-left: auto;
 }
 
@@ -2814,6 +3631,23 @@ body {
   text-decoration: underline;
 }
 
+.sentinel-finding-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.btn.ghost.sentinel-fix-btn {
+  font-size: 10px;
+  padding: 2px 6px;
+}
+
+.sentinel-fix-ack {
+  font-size: 10px;
+  color: var(--accent);
+}
+
 /* sentinel dialog */
 .sentinel-prompt {
   resize: vertical;
@@ -3143,31 +3977,86 @@ body {
 
 /* ---------- app notice (brief auto-dismissing confirmation) ---------- */
 
-.app-notice {
-  position: fixed;
-  bottom: 36px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 400;
-  background: var(--panel-2);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 8px 16px;
-  font-size: 12px;
-  color: var(--text);
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
-  pointer-events: none;
-  animation: notice-in 0.15s ease-out;
+/* ---------- toasts (leveled, stacked bottom-right) ---------- */
+
+.toasts {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 360px;
+  pointer-events: none;
+}
+
+.toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  background: var(--panel-3);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--dim);
+  border-radius: var(--r-md);
+  padding: 10px 12px;
+  box-shadow: var(--shadow-3);
+  font-size: 12px;
+  color: var(--text);
+  pointer-events: auto;
+  animation: toast-in var(--dur-base) var(--ease-out);
+}
+
+.toast .toast-icon {
+  flex: none;
+  margin-top: 1px;
+}
+
+.toast.success {
+  border-left-color: var(--green);
+}
+.toast.success .toast-icon {
+  color: var(--green);
+}
+.toast.info {
+  border-left-color: var(--working);
+}
+.toast.info .toast-icon {
+  color: var(--working);
+}
+.toast.warn {
+  border-left-color: var(--attention);
+}
+.toast.warn .toast-icon {
+  color: var(--attention);
+}
+.toast.error {
+  border-left-color: var(--error);
+}
+.toast.error .toast-icon {
+  color: var(--error);
+}
+
+.toast-text {
+  flex: 1;
+  line-height: 1.4;
+  padding-top: 1px;
+}
+
+.toast .toast-close {
+  flex: none;
+  margin: -2px -4px 0 0;
+  color: var(--dim);
 }
 
-@keyframes notice-in {
+@keyframes toast-in {
   from {
     opacity: 0;
-    transform: translateX(-50%) translateY(6px);
+    transform: translateY(8px);
   }
   to {
     opacity: 1;
-    transform: translateX(-50%) translateY(0);
+    transform: none;
   }
 }
 
@@ -4792,10 +5681,23 @@ body {
   display: flex;
   align-items: center;
   gap: 10px;
+  flex: 0 1 auto;
+  overflow: hidden;
   white-space: nowrap;
 }
 
+.statusbar-tokens > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .statusbar-te {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
   background: none;
   border: none;
   font: inherit;
@@ -4807,6 +5709,384 @@ body {
 .statusbar-te.pending {
   color: var(--attention);
 }
+
+/* ===================== gamification ===================== */
+
+/* --- XP progress bar primitive (also used in the Arcade) --- */
+.xp-bar {
+  flex: 1;
+  height: 7px;
+  border-radius: 4px;
+  background: var(--border);
+  overflow: hidden;
+}
+.xp-bar.lg {
+  height: 10px;
+}
+.xp-bar-fill {
+  height: 100%;
+  border-radius: 4px;
+  background: linear-gradient(90deg, var(--xp), var(--accent));
+  transition: width 0.5s ease;
+}
+
+/* --- sidebar XP HUD --- */
+.xp-hud {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  font-size: 11px;
+}
+.xp-hud:hover {
+  background: var(--panel-2);
+}
+.xp-level {
+  font-weight: 700;
+  color: var(--level-up);
+  white-space: nowrap;
+}
+.xp-streak {
+  color: var(--attention);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* --- celebration toast + confetti --- */
+.celebration {
+  position: fixed;
+  inset: 0;
+  z-index: 600;
+  pointer-events: none;
+  overflow: hidden;
+}
+.celebration-card {
+  position: absolute;
+  left: 50%;
+  bottom: 64px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 18px;
+  border-radius: 12px;
+  background: var(--panel);
+  border: 1px solid var(--accent);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
+  animation: celebrate-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
+}
+.celebration.kind-level-up .celebration-card {
+  border-color: var(--level-up);
+  box-shadow: 0 0 32px rgba(255, 213, 74, 0.35), 0 12px 40px rgba(0, 0, 0, 0.55);
+  animation: celebrate-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1), level-up-glow 1.4s ease-in-out 0.4s 2;
+}
+.celebration-icon {
+  font-size: 26px;
+  line-height: 1;
+}
+.celebration-title {
+  font-weight: 700;
+  font-size: 14px;
+}
+.celebration-sub {
+  font-size: 12px;
+  color: var(--dim);
+}
+.celebration-xp {
+  margin-left: 6px;
+  font-weight: 700;
+  color: var(--level-up);
+}
+
+.confetti {
+  position: absolute;
+  inset: 0;
+}
+.confetti-bit {
+  position: absolute;
+  top: -12px;
+  width: 8px;
+  height: 12px;
+  border-radius: 1px;
+  background: var(--celebrate-1);
+  animation: confetti-fall 1.7s ease-in forwards;
+}
+.confetti-bit.hue-0 { background: var(--celebrate-1); }
+.confetti-bit.hue-1 { background: var(--celebrate-2); }
+.confetti-bit.hue-2 { background: var(--level-up); }
+.confetti-bit.hue-3 { background: var(--accent); }
+.confetti-bit.hue-4 { background: var(--working); }
+.confetti-bit.hue-5 { background: var(--green); }
+
+@keyframes confetti-fall {
+  0% {
+    transform: translate(0, 0) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(calc(var(--dx) * 140px), calc(var(--dy) * 460px))
+      rotate(calc(var(--rot) * 3));
+    opacity: 0;
+  }
+}
+@keyframes celebrate-pop {
+  0% {
+    transform: translateX(-50%) scale(0.7);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(-50%) scale(1);
+    opacity: 1;
+  }
+}
+@keyframes level-up-glow {
+  0%, 100% {
+    box-shadow: 0 0 18px rgba(255, 213, 74, 0.3), 0 12px 40px rgba(0, 0, 0, 0.55);
+  }
+  50% {
+    box-shadow: 0 0 38px rgba(255, 213, 74, 0.6), 0 12px 40px rgba(0, 0, 0, 0.55);
+  }
+}
+@keyframes badge-pop {
+  0% { transform: scale(0.6); opacity: 0; }
+  60% { transform: scale(1.15); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+/* --- Arcade pane --- */
+.arcade-pane {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 18px 22px;
+}
+.arcade-empty {
+  color: var(--dim);
+  padding: 40px;
+  text-align: center;
+}
+.arcade-header {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.arcade-header h2 {
+  margin: 0;
+  font-size: 20px;
+}
+.arcade-sub,
+.arcade-dim {
+  color: var(--dim);
+  font-size: 12px;
+}
+.arcade-dim.small {
+  font-size: 11px;
+}
+.arcade-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 14px;
+  margin-bottom: 14px;
+}
+.arcade-card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 14px;
+}
+.arcade-card-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.arcade-card-head h3,
+.arcade-section h3 {
+  margin: 0;
+  font-size: 14px;
+}
+.arcade-hero {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  margin-bottom: 0;
+}
+.arcade-level-badge {
+  flex: none;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 16px;
+  color: #1a1208;
+  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--level-up));
+  box-shadow: 0 0 22px rgba(255, 213, 74, 0.35);
+}
+.arcade-hero-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.arcade-xp-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  font-weight: 600;
+}
+.arcade-streak {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 0;
+}
+.arcade-streak-flame {
+  font-size: 38px;
+}
+.arcade-streak-num {
+  font-size: 26px;
+  font-weight: 800;
+  color: var(--attention);
+}
+.arcade-quests {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.quest-row .quest-top {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  font-size: 13px;
+}
+.quest-row.done .quest-title {
+  color: var(--dim);
+  text-decoration: line-through;
+}
+.quest-reward {
+  font-weight: 700;
+  color: var(--level-up);
+}
+.quest-row.done .quest-reward {
+  color: var(--green);
+}
+.arcade-ach-group {
+  margin-bottom: 14px;
+}
+.arcade-ach-cat {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--dim);
+  margin-bottom: 8px;
+}
+.arcade-ach-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 8px;
+}
+.achievement {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  font-size: 12px;
+}
+.achievement.unlocked {
+  border-color: var(--badge);
+  animation: badge-pop 0.4s ease-out;
+}
+.achievement.locked {
+  opacity: 0.45;
+  filter: grayscale(0.6);
+}
+.achievement-icon {
+  font-size: 17px;
+}
+.achievement-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.arcade-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+  gap: 12px;
+}
+.arcade-stat {
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px;
+  text-align: center;
+}
+.arcade-stat-num {
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--accent);
+}
+
+/* --- Settings → Appearance tab --- */
+.appearance-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  padding: 16px 4px;
+}
+.appearance-section h3 {
+  margin: 0 0 10px;
+  font-size: 13px;
+}
+.appearance-themes {
+  display: flex;
+  gap: 10px;
+}
+.theme-swatch {
+  flex: 1;
+  height: 56px;
+  border-radius: 10px;
+  border: 2px solid var(--border);
+  cursor: pointer;
+  display: flex;
+  align-items: flex-end;
+  padding: 8px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+}
+.theme-swatch.sel {
+  border-color: var(--text);
+}
+.theme-swatch.theme-dark {
+  background: linear-gradient(135deg, #16171a, #2a2c33);
+}
+.theme-swatch.theme-neon {
+  background: linear-gradient(135deg, #0c0e14, #22d3ee);
+}
+.theme-swatch.theme-synthwave {
+  background: linear-gradient(135deg, #190f2e, #ff2e88);
+}
+.swatch-default {
+  background: conic-gradient(#d97757, #22d3ee, #a855f7, #22c55e, #ff2e88, #d97757);
+}
+.appearance-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  margin-bottom: 8px;
+  cursor: pointer;
+}
 /**
  * Copyright (c) 2014 The xterm.js authors. All rights reserved.
  * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)