refactor: update border color handling and improve UI element styles

scripts/gen-question-fixtures.ts

@@ -1131,7 +1131,15 @@ function applyRewrite(id: string, q: any): Rewrite | undefined {
 }
 
 // ── emit ─────────────────────────────────────────────────────────────────────
+// Deferred to a later version: these questions require coordination/auxiliary
+// nodes (idempotency-manager, event-sourcing-store, distributed-lock, rate-limiter)
+// that are not in the V1 palette and have no special simulation behavior yet. Their
+// generated trios live under `deferred-v2/`; skip them here so the V1 bank has only
+// the 9 buildable, physics-relevant questions.
+const DEFERRED_V2 = new Set(['payment-system', 'ticketmaster', 'rate-limiter'])
+
 for (const [id, build] of Object.entries(builders)) {
+  if (DEFERRED_V2.has(id)) continue
   const trio = build()
   const dir = join(ROOT, id)
   mkdirSync(dir, { recursive: true })

src/renderer/src/assets/main.css

@@ -10,6 +10,8 @@
     --nss-input-bg: #ffffff;
 
     --nss-border: #e2e8f0;
+    /* RGB channels so the `border`/`bg-nss-border` Tailwind token supports /opacity. */
+    --nss-border-rgb: 226 232 240;
     --nss-border-high: #cbd5e1;
     --nss-text: #0f172a;
     --nss-muted: #64748b;
@@ -33,6 +35,7 @@
     --nss-input-bg: #18181b;
 
     --nss-border: #1f2937;
+    --nss-border-rgb: 31 41 55;
     --nss-border-high: #374151;
     --nss-text: #e5e7eb;
     --nss-muted: #6b7280;

src/renderer/src/components/question/QuestionPanel.tsx

@@ -743,19 +743,21 @@ export const QuestionPanel = () => {
                     key={row.id}
                     className="rounded border border-nss-border/70 bg-nss-surface/40 p-2"
                   >
-                    <div className="flex items-start gap-2 text-xs">
+                    <div className="flex items-center gap-2 text-xs">
                       <span
                         className={
                           row.status === 'passed'
-                            ? 'text-nss-success'
+                            ? 'shrink-0 text-nss-success'
                             : row.status === 'failed'
-                              ? 'text-nss-danger'
-                              : 'text-nss-warning'
+                              ? 'shrink-0 text-nss-danger'
+                              : 'shrink-0 text-nss-warning'
                         }
                       >
                         {row.status === 'passed' ? '✓' : row.status === 'failed' ? '✗' : '•'}
                       </span>
-                      <span className="min-w-0 flex-1 text-nss-muted">{row.name}</span>
+                      <span className="min-w-0 flex-1 truncate text-nss-muted" title={row.name}>
+                        {row.name}
+                      </span>
                       <span className="shrink-0 text-[10px] text-nss-muted/70">{row.scope}</span>
                     </div>
                     {row.detail && (

tailwind.config.js

@@ -13,7 +13,7 @@ module.exports = {
           'input-bg': 'var(--nss-input-bg)',
 
           // Borders & Text
-          border: 'var(--nss-border)',
+          border: 'rgb(var(--nss-border-rgb) / <alpha-value>)',
           borderHigh: 'var(--nss-border-high)',
           text: 'var(--nss-text)',
           muted: 'var(--nss-muted)',