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/script-builder/ScriptCodeBlock.tsx

@@ -5,7 +5,6 @@ import bash from 'react-syntax-highlighter/dist/esm/languages/hljs/bash'
 import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python'
 import atomOneDark from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark'
 import { Eye, Copy, Check, BookmarkPlus } from 'lucide-react'
-import { cn } from '@/lib/utils'
 
 SyntaxHighlighter.registerLanguage('powershell', powershell)
 SyntaxHighlighter.registerLanguage('bash', bash)
@@ -52,10 +51,10 @@ export function ScriptCodeBlock({
   }
 
   return (
-    <div className="mt-3 rounded-lg border bg-[rgba(0,0,0,0.3)] border-[rgba(255,255,255,0.06)] overflow-hidden">
+    <div className="mt-3 rounded-lg border border-border bg-[var(--color-bg-code)] overflow-hidden">
       {/* Header */}
-      <div className="flex items-center justify-between px-3 py-2 border-b border-[rgba(255,255,255,0.06)]">
-        <span className="font-mono text-xs text-blue-400 truncate">
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+        <span className="font-mono text-xs text-accent-text truncate">
           {filename || 'script'}
         </span>
         {lineCount != null && (
@@ -85,40 +84,31 @@ export function ScriptCodeBlock({
           {previewLines}
         </SyntaxHighlighter>
         {remainingLines > 0 && (
-          <div className="px-3 pb-2 font-mono text-[0.625rem] text-text-muted">
+          <div className="px-3 pb-2 font-mono text-[0.625rem] text-muted-foreground">
             {"··· "}{remainingLines} more line{remainingLines !== 1 ? 's' : ''}
           </div>
         )}
       </button>
 
       {/* Action buttons */}
-      <div className="flex items-center gap-2 px-3 py-2 border-t border-[rgba(255,255,255,0.06)]">
+      <div className="flex items-center gap-2 px-3 py-2 border-t border-border">
         <button
           onClick={onViewFull}
-          className={cn(
-            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all",
-            "bg-primary text-white hover:brightness-110 active:scale-[0.98]"
-          )}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all bg-primary text-white hover:brightness-110 active:scale-[0.98]"
         >
           <Eye size={14} />
           View Full Script
         </button>
         <button
           onClick={handleCopy}
-          className={cn(
-            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-            "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
-          )}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border border-border text-foreground hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)]"
         >
-          {copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
+          {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
           {copied ? 'Copied' : 'Copy'}
         </button>
         <button
           onClick={(e) => { e.stopPropagation(); onSave() }}
-          className={cn(
-            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-            "bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/15"
-          )}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border border-border text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)]"
         >
           <BookmarkPlus size={14} />
           Save to Library