refactor: Script Library and Builder design critique fixes

Library:
- Clear CTA hierarchy: "Build New Script" primary, "Import Script" ghost,
  "Manage" demoted to text link
- "New from Script" → "Import Script" (clearer label)

Script Builder:
- Add suggestion chips for first-time users (4 common MSP tasks)
- Chips auto-hide after first message

Design system normalization:
- ScriptPreviewModal: bg-black/80 → bg-black/40, text-blue-400 → text-accent-text,
  emerald save button → primary, inline rgba → CSS variables
- ScriptCodeBlock: bg-[rgba(0,0,0,0.3)] → bg-code, text-blue-400 → text-accent-text,
  text-text-muted typo fixed, emerald button → ghost style
- TemplateCard: emerald/amber/rose badges → success-dim/warning-dim/danger-dim,
  ShieldAlert amber → warning token
- ParameterDetectorStepper: blue focus ring → orange, amber → warning token,
  "Candidate" → "Variable" in stepper progress

Jargon clarification:
- "Detect Parameters" → "Find Variables"
- "Detected Parameters" → "Configurable Variables"
- "Parameters (N)" → "Variables (N)"
- Detection summary copy reworded for clarity

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/scripts/ParameterizeAndSavePanel.tsx

@@ -92,7 +92,7 @@ export function ParameterizeAndSavePanel({
     if (detected.length > 0) {
       setShowStepper(true)
     } else {
-      setDetectionSummary('No parameters detected — script will be saved as-is. Parameter detection currently supports PowerShell only.')
+      setDetectionSummary('No configurable values found — the script will be saved as-is. Variable detection currently supports PowerShell only.')
     }
   }, [])
 
@@ -298,7 +298,7 @@ export function ParameterizeAndSavePanel({
                   'disabled:opacity-50 disabled:cursor-not-allowed'
                 )}
               >
-                Detect Parameters
+                Find Variables
               </button>
             </section>
           )}
@@ -313,7 +313,7 @@ export function ParameterizeAndSavePanel({
                 <pre className="p-3 text-xs font-mono text-foreground whitespace-pre-wrap break-all">
                   {workingScript.split(/({{.*?}})/).map((part, i) =>
                     /^{{.*}}$/.test(part)
-                      ? <span key={i} className="text-amber-400 font-semibold">{part}</span>
+                      ? <span key={i} className="text-warning font-semibold">{part}</span>
                       : <span key={i}>{part}</span>
                   )}
                 </pre>
@@ -332,7 +332,7 @@ export function ParameterizeAndSavePanel({
           {showStepper && candidates.length > 0 && (
             <section className="space-y-2">
               <p className="font-sans text-xs uppercase tracking-widest text-muted-foreground">
-                Detected Parameters
+                Configurable Variables
               </p>
               <ParameterDetectorStepper
                 candidates={candidates}
@@ -348,7 +348,7 @@ export function ParameterizeAndSavePanel({
           {parameters.length > 0 && !showStepper && (
             <section className="space-y-2">
               <p className="font-sans text-xs uppercase tracking-widest text-muted-foreground">
-                Parameters ({parameters.length})
+                Variables ({parameters.length})
               </p>
               <div className="space-y-1">
                 {parameters.map((p) => (
@@ -357,7 +357,7 @@ export function ParameterizeAndSavePanel({
                     className="flex items-center justify-between rounded-lg bg-elevated px-3 py-2"
                   >
                     <div className="flex items-center gap-2">
-                      <code className="text-xs font-mono text-amber-400">{`{{${p.key}}}`}</code>
+                      <code className="text-xs font-mono text-warning">{`{{${p.key}}}`}</code>
                       <span className="text-xs text-muted-foreground">{p.label}</span>
                     </div>
                     <span className="text-[0.625rem] text-muted-foreground uppercase tracking-wide">

frontend/src/components/scripts/TemplateCard.tsx

@@ -3,9 +3,9 @@ import { cn } from '@/lib/utils'
 import type { ScriptTemplateListItem } from '@/types'
 
 const COMPLEXITY_CLASSES: Record<ScriptTemplateListItem['complexity'], string> = {
-  beginner: 'text-emerald-400 bg-emerald-400/10',
-  intermediate: 'text-amber-400 bg-amber-400/10',
-  advanced: 'text-rose-500 bg-rose-500/10',
+  beginner: 'text-success bg-success-dim',
+  intermediate: 'text-warning bg-warning-dim',
+  advanced: 'text-danger bg-danger-dim',
 }
 
 interface Props {
@@ -28,7 +28,7 @@ export function TemplateCard({ template, onConfigure }: Props) {
         <div className="flex items-center gap-1.5 shrink-0">
           {template.requires_elevation && (
             <span title="Requires administrator elevation">
-              <ShieldAlert size={13} className="text-amber-400" />
+              <ShieldAlert size={13} className="text-warning" />
             </span>
           )}
           <span className={cn('font-sans text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded', COMPLEXITY_CLASSES[template.complexity])}>
@@ -62,7 +62,7 @@ export function TemplateCard({ template, onConfigure }: Props) {
         <button
           type="button"
           onClick={() => onConfigure(template.id)}
-          className="shrink-0 bg-primary/10 border border-primary/20 text-primary text-xs px-2.5 py-1 rounded-md hover:bg-primary/20 transition-colors"
+          className="shrink-0 bg-accent-dim border border-primary/20 text-accent-text text-xs px-2.5 py-1 rounded-md hover:bg-primary/20 transition-colors"
         >
           Configure →
         </button>