The Vault: Vanguard Edition (v4.2) — Production HUD overhaul with global error interception and kinetic UI textures

server/static/app.js

@@ -203,6 +203,9 @@ const app = {
         
         const config = JSON.parse(sessionStorage.getItem('env_config') || '{}');
         this.ws.send(JSON.stringify({ action: "run_agent", config: config }));
+
+        // Kinetic Active State
+        document.querySelectorAll('.card').forEach(c => c.style.borderColor = 'var(--indigo-500)');
     },
     
     handleStreamChunk: function(content) {
@@ -231,16 +234,39 @@ const app = {
             this.terminalActiveLine = null;
         }
 
-        const rw = result.reward;
+        // Reset Kinetic States
+        document.querySelectorAll('.card').forEach(c => c.style.borderColor = '');
+
         const scoreDisplay = document.getElementById('reward-display');
-        scoreDisplay.textContent = rw.toFixed(4);
+        const title = document.getElementById('diagnostic-title');
+        const rw = result.reward;
+        const feedback = result.info.feedback || "";
         
-        // Dynamic Grading Color
-        if (rw >= 0.8) scoreDisplay.style.color = 'var(--indigo-500)';
-        else if (rw >= 0.4) scoreDisplay.style.color = 'var(--warning)';
-        else scoreDisplay.style.color = 'var(--danger)';
+        // --- Credential Interceptor (Vanguard Logic) ---
+        const isAuthError = feedback.includes("401") || feedback.includes("Invalid API key") || feedback.includes("Incorrect API key");
+        
+        if (isAuthError) {
+            this.terminalPrint("ALERT: Security Handshake Failed. Halting operations.");
+            this.isAutoTraining = false; // Kill loop
+            title.textContent = "SECURITY_HANDSHAKE_FAILED";
+            title.style.color = "var(--rose-500)";
+            scoreDisplay.textContent = "FAULT";
+            scoreDisplay.style.color = "var(--rose-500)";
+            document.getElementById('btn-auto-loop').innerHTML = '<i class="fa-solid fa-bolt"></i> Training Loop';
+            document.getElementById('btn-auto-loop').style.background = '';
+            document.getElementById('btn-auto-loop').style.color = '';
+        } else {
+            title.textContent = "Judicial Alignment Captured";
+            title.style.color = "var(--indigo-500)";
+            scoreDisplay.textContent = rw.toFixed(4);
+            
+            // Dynamic Grading Color
+            if (rw >= 0.8) scoreDisplay.style.color = 'var(--emerald-500)';
+            else if (rw >= 0.4) scoreDisplay.style.color = 'var(--amber-500)';
+            else scoreDisplay.style.color = 'var(--rose-500)';
+        }
 
-        document.getElementById('feedback-display').textContent = result.info.feedback;
+        document.getElementById('feedback-display').textContent = feedback;
         document.getElementById('reward-overlay').style.display = 'flex';
         
         document.getElementById('btn-run-agent').disabled = false;

server/static/index.html

@@ -12,6 +12,7 @@
 
     <!-- Dynamic Environment Layer -->
     <canvas id="fluid-canvas"></canvas>
+    <div class="scanline"></div>
 
     <div class="app-shell">
         
@@ -180,10 +181,10 @@
                             <!-- Live Streams -->
                         </div>
 
-                        <!-- Reward Feedback Overlay -->
+                        <!-- Diagnostic Port (Refactored Outcome Overlay) -->
                         <div class="reward-overlay" id="reward-overlay" style="display:none;">
                             <span id="reward-display" class="reward-score">0.00</span>
-                            <h3 class="text-primary">Judicial Alignment Captured</h3>
+                            <h3 id="diagnostic-title" class="text-primary">Judicial Alignment Captured</h3>
                             <div id="feedback-display" class="feedback-bubble">...</div>
                             <button class="btn btn-secondary" style="width: auto; padding: 12px 24px;" onclick="app.closeReward()">Dismiss Signal</button>
                         </div>

server/static/style.css

@@ -1,28 +1,29 @@
 /* 
- * THE VAULT (v4.1) — High-Fidelity Design System
- * Engineering-first CSS architecture for ContentGuardEnv.
- * Built with a focus on hierarchy, typography, and motion fidelity.
+ * THE VAULT: VANGUARD EDITION (v4.2)
+ * High-Fidelity Infrastructure — Meta × PyTorch HQ
+ * Production-grade surfaces with kinetic texture and diagnostic resilience.
  */
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
 
 :root {
-    /* --- COLOR TOKENS (SOCIOPATHIC PRECISION) --- */
+    /* --- COLOR TOKENS (VANGUARD PRECISION) --- */
     --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7;
     --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a;
     --zinc-600: #52525b; --zinc-700: #3f3f46; --zinc-800: #27272a;
-    --zinc-900: #18181b; --zinc-950: #09090b;
+    --zinc-900: #18181b; --zinc-950: #060608;
 
     --indigo-500: #6366f1; --indigo-600: #4f46e5; --indigo-700: #4338ca;
+    --emerald-500: #10b981; --rose-500: #f43f5e; --amber-500: #f59e0b;
 
     /* --- SEMANTIC THEME --- */
     --bg-app: var(--zinc-950);
-    --surface-base: var(--zinc-900);
-    --surface-overlay: #1c1c1f;
+    --surface-base: #0c0c0e;
+    --surface-overlay: #141417;
     --surface-accent: rgba(99, 102, 241, 0.08);
 
     --border-subtle: rgba(255, 255, 255, 0.04);
-    --border-medium: rgba(255, 255, 255, 0.08);
+    --border-medium: rgba(255, 255, 255, 0.07);
     --border-accent: rgba(99, 102, 241, 0.3);
 
     --text-primary: var(--zinc-50);
@@ -31,25 +32,21 @@
     --text-accent: var(--indigo-500);
 
     /* --- UTILITY TOKENS --- */
-    --radius-sm: 6px;
-    --radius-md: 10px;
-    --radius-lg: 14px;
-    --radius-xl: 24px;
-
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    
     /* --- PHYSICS-BASED MOTION --- */
     --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
     --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
     --spring-snappy: cubic-bezier(0.175, 0.885, 0.32, 1.275);
     
-    /* --- SPACING (8PX SCALE) --- */
-    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; 
-    --s-6: 24px; --s-8: 32px; --s-12: 48px;
-
-    /* --- SIDEBAR CONFIG --- */
-    --sidebar-w: 260px;
+    /* --- SPACING (SENIOR SCALE) --- */
+    --sidebar-w: 280px;
+    --hud-gap: 24px;
 }
 
-/* --- RESET & GLOBAL (SENIOR DEFAULTS) --- */
+/* --- RESET & GLOBAL --- */
 * { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
 
 body {
@@ -57,363 +54,257 @@ body {
     padding: 0;
     background-color: var(--bg-app);
     color: var(--text-primary);
-    font-family: 'Inter', -apple-system, system-ui, sans-serif;
+    font-family: 'Inter', sans-serif;
     height: 100vh;
     overflow: hidden;
     letter-spacing: -0.01em;
 }
 
-h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
-p { margin: 0; line-height: 1.6; }
-button { font-family: inherit; }
-
-/* --- BACKGROUND NOISE (THE TEXTURE) --- */
-body::before {
+/* --- KINETIC TEXTURE (THE VANGUARD LOOK) --- */
+body::after {
     content: '';
     position: fixed;
     inset: 0;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
-    opacity: 0.03;
+    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.4) 100%);
     pointer-events: none;
+    z-index: 9999;
+}
+
+.scanline {
+    position: fixed;
+    top: 0; left: 0;
+    width: 100%; height: 100px;
+    background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.03), transparent);
     z-index: 1000;
+    pointer-events: none;
+    animation: scan 8s linear infinite;
+}
+
+@keyframes scan {
+    from { transform: translateY(-100px); }
+    to { transform: translateY(110vh); }
 }
 
 #fluid-canvas {
     position: fixed;
     inset: 0;
     z-index: -1;
-    background: radial-gradient(circle at 50% -20%, #1e1b4b 0%, var(--bg-app) 100%);
-    opacity: 0.6;
+    background: radial-gradient(circle at 50% -20%, #0f172a 0%, var(--bg-app) 100%);
+    opacity: 0.8;
 }
 
-/* --- APP SHELL (HUB GRID) --- */
+/* --- APP SHELL --- */
 .app-shell {
     display: grid;
     grid-template-columns: var(--sidebar-w) 1fr;
     height: 100vh;
+    animation: appBreathe 1.2s var(--ease-out);
+}
+
+@keyframes appBreathe {
+    from { opacity: 0; transform: scale(0.99); }
+    to { opacity: 1; transform: scale(1); }
 }
 
-/* --- SIDEBAR (THE CONTROL STRIP) --- */
+/* --- SIDEBAR (MODERN CONTROL) --- */
 .sidebar {
     background: var(--surface-base);
     border-right: 1px solid var(--border-subtle);
     display: flex;
     flex-direction: column;
-    padding: var(--s-6);
+    padding: var(--hud-gap);
+    position: relative;
     z-index: 50;
-    animation: slideInLeft 0.8s var(--ease-out) backwards;
 }
 
 .sidebar-header {
-    display: flex;
-    align-items: center;
-    gap: var(--s-3);
-    margin-bottom: var(--s-12);
+    margin-bottom: 48px;
+    display: flex; align-items: center; gap: 16px;
 }
 
 .logo-icon {
-    width: 32px;
-    height: 32px;
-    border-radius: 8px;
-    background: linear-gradient(135deg, var(--indigo-500), var(--indigo-700));
+    width: 36px; height: 36px;
+    background: var(--indigo-600);
+    border-radius: var(--radius-sm);
+    display: flex; align-items: center; justify-content: center;
+    color: white; font-size: 1.2rem;
     box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
 }
 
-.brand-text { font-size: 1.1rem; font-weight: 700; }
+.brand-text { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.03em; }
 
-.nav-section { margin-bottom: var(--s-8); }
+.nav-section { margin-bottom: 32px; }
 .nav-label {
-    font-size: 0.7rem;
-    color: var(--text-tertiary);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    margin-bottom: var(--s-3);
+    font-size: 0.65rem; color: var(--text-tertiary);
+    text-transform: uppercase; letter-spacing: 0.15em;
+    margin-bottom: 12px; font-weight: 600;
 }
 
 .nav-item {
-    width: 100%;
-    padding: var(--s-2) var(--s-4);
+    width: 100%; padding: 10px 14px;
     border-radius: var(--radius-md);
-    background: transparent;
-    border: 1px solid transparent;
+    background: transparent; border: 1px solid transparent;
     color: var(--text-secondary);
-    display: flex;
-    align-items: center;
-    gap: var(--s-3);
-    cursor: pointer;
-    transition: all var(--transition-normal);
-    margin-bottom: 4px;
-    font-size: 0.9rem;
-    text-align: left;
-}
-
-.nav-item:hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: var(--text-primary);
+    display: flex; align-items: center; gap: 12px;
+    cursor: pointer; transition: all 0.2s var(--ease-out);
+    margin-bottom: 4px; font-size: 0.9rem; text-align: left;
 }
 
-.nav-item.active {
-    background: var(--surface-accent);
-    color: var(--indigo-500);
-    border-color: rgba(99, 102, 241, 0.2);
-}
-
-.nav-badge {
-    margin-left: auto;
-    font-size: 0.7rem;
-    padding: 2px 8px;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 20px;
-    color: var(--text-tertiary);
-}
+.nav-item:hover { background: rgba(255,255,255,0.03); color: var(--text-primary); }
+.nav-item.active { background: var(--surface-accent); color: var(--indigo-500); border-color: rgba(99,102,241,0.2); }
 
-/* --- MAIN CONTENT (THE STAGE) --- */
+/* --- MAIN HUD --- */
 .main-content {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
+    display: flex; flex-direction: column; overflow: hidden;
     position: relative;
 }
 
 .topbar {
-    height: 70px;
+    height: 72px; padding: 0 var(--hud-gap);
     border-bottom: 1px solid var(--border-subtle);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 var(--s-8);
-    background: rgba(9, 9, 11, 0.5);
-    backdrop-filter: blur(8px);
-    z-index: 40;
+    display: flex; align-items: center; justify-content: space-between;
+    background: rgba(6, 6, 8, 0.7);
+    backdrop-filter: blur(12px); z-index: 100;
 }
 
-.hud-item { display: flex; align-items: center; gap: var(--s-4); }
-.hud-label { font-size: 0.7rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
-.hud-value { 
-    font-family: 'JetBrains Mono', monospace; 
-    font-size: 1rem; 
-    font-weight: 600; 
-    color: var(--indigo-500); 
-}
+.hud-group { display: flex; flex-direction: column; align-items: flex-end; }
+.hud-label { font-size: 0.6rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; }
+.hud-value { font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; font-weight: 600; color: var(--indigo-500); }
 
-/* --- WORKSPACE VIEW --- */
+/* --- WORKSPACE GRID --- */
 .workspace {
-    flex: 1;
-    display: grid;
-    grid-template-columns: 1fr 400px;
-    gap: 1px;
-    background: var(--border-subtle);
-    overflow: hidden;
+    flex: 1; display: grid; grid-template-columns: 1fr 440px;
+    background: var(--bg-app); overflow: hidden;
 }
 
 .view-col {
-    background: var(--bg-app);
-    overflow-y: auto;
-    padding: var(--s-8);
-    display: flex;
-    flex-direction: column;
+    overflow-y: auto; padding: var(--hud-gap);
+    display: flex; flex-direction: column; gap: var(--hud-gap);
 }
 
-/* --- PANELS (RETINA SURFACES) --- */
+/* --- VANGUARD CARDS (HUD SURFACE) --- */
 .card {
     background: var(--surface-base);
     border: 1px solid var(--border-medium);
     border-radius: var(--radius-lg);
-    padding: var(--s-6);
-    margin-bottom: var(--s-6);
-    position: relative;
+    padding: 24px; position: relative;
     overflow: hidden;
-    transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
-    animation: fadeIn 0.8s var(--ease-out) backwards;
+    transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
 }
 
 .card:hover {
     border-color: var(--border-accent);
+    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
 }
 
-.card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--s-6);
+/* HUD Corners */
+.card::before, .card::after {
+    content: ''; position: absolute; width: 8px; height: 8px;
+    border-color: var(--text-tertiary); border-style: solid; opacity: 0.3;
 }
+.card::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
+.card::after { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }
 
-/* --- CONTENT PREVIEW (SENIOR TYPOGRAPHY) --- */
+.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+.card-header h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
+
+/* --- CONTENT PORTAL --- */
 .content-box {
-    background: var(--zinc-950);
-    padding: var(--s-6);
+    background: #000; padding: 20px;
     border-radius: var(--radius-md);
-    border-left: 2px solid var(--indigo-500);
-    font-size: 1.05rem;
-    line-height: 1.7;
-    color: var(--zinc-100);
-    font-weight: 300;
-    margin-bottom: var(--s-6);
-}
-
-.stat-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--s-3);
+    border-left: 3px solid var(--indigo-600);
+    font-size: 1.1rem; line-height: 1.6;
+    color: var(--zinc-100); font-weight: 300;
 }
 
+.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
 .stat-item {
-    padding: var(--s-3) var(--s-4);
-    background: rgba(255, 255, 255, 0.02);
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--border-subtle);
+    background: rgba(255,255,255,0.02); padding: 12px 16px;
+    border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
 }
-.stat-item .label { font-size: 0.65rem; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 2px; }
-.stat-item .value { font-size: 0.95rem; font-weight: 500; }
+.stat-item .label { font-size: 0.6rem; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 2px; }
+.stat-item .value { font-size: 1rem; font-weight: 500; }
 
-/* --- TERMINAL (THE COMMAND ENGINE) --- */
+/* --- TERMINAL (DIAGNOSTIC CORE) --- */
 .terminal-card {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    overflow: hidden;
-    background: #050505;
+    flex: 1; display: flex; flex-direction: column;
+    background: #000; border: none; border-radius: 0;
+    margin: 0; padding: 0;
 }
 
 .terminal-header {
-    background: #0d0d0f;
-    padding: var(--s-3) var(--s-4);
-    display: flex;
-    align-items: center;
-    gap: var(--s-2);
+    background: #09090b; padding: 12px 16px;
+    display: flex; align-items: center; gap: 10px;
     border-bottom: 1px solid var(--border-subtle);
 }
 
-.dot { width: 10px; height: 10px; border-radius: 50%; opacity: 0.6; }
-.dot.red { background: #ff5f57; }
-.dot.yellow { background: #febc2e; }
-.dot.green { background: #28c840; }
+.dot { width: 8px; height: 8px; border-radius: 50%; }
+.dot.red { background: var(--rose-500); }
+.dot.yellow { background: var(--amber-500); }
+.dot.green { background: var(--emerald-500); }
 
-.terminal-title { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-tertiary); margin-left: 10px; }
+.terminal-title { 
+    font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; 
+    color: var(--text-tertiary); font-weight: 600; 
+}
 
 .terminal-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: var(--s-6);
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 0.85rem;
-    color: var(--zinc-400);
-    line-height: 1.7;
+    flex: 1; overflow-y: auto; padding: 24px;
+    font-family: 'JetBrains Mono', monospace; font-size: 0.85rem;
+    color: var(--text-secondary); line-height: 1.8;
 }
 
-.log-line { margin-bottom: 6px; }
+.log-line { margin-bottom: 8px; }
 .log-line.active::after {
-    content: '_';
-    animation: blink 1s step-end infinite;
-    color: var(--indigo-500);
-}
-
-/* --- FORMS & ACTION BUTTONS --- */
-.form-group { margin-bottom: var(--s-6); }
-label { display: block; font-size: 0.7rem; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.05em; }
-
-select, input {
-    width: 100%;
-    background: var(--zinc-950);
-    border: 1px solid var(--border-medium);
-    padding: var(--s-3) var(--s-4);
-    border-radius: var(--radius-md);
-    color: var(--zinc-100);
-    font-size: 0.9rem;
-    transition: border-color 0.2s;
-}
-
-select:focus, input:focus { outline: none; border-color: var(--indigo-500); }
-
-.btn {
-    width: 100%;
-    padding: var(--s-4);
-    border-radius: var(--radius-md);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--s-2);
-    cursor: pointer;
-    font-weight: 600;
-    transition: all 0.2s var(--ease-out);
-    border: none;
-    font-size: 0.9rem;
-}
-
-.btn-primary { 
-    background: var(--indigo-600); 
-    color: white; 
-    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
-}
-.btn-primary:hover { 
-    background: var(--indigo-500); 
-    transform: translateY(-1px);
-    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
-}
-
-.btn-secondary {
-    background: rgba(255, 255, 255, 0.05);
-    color: var(--text-primary);
-    border: 1px solid var(--border-medium);
+    content: '_'; animation: blink 1s step-end infinite; color: var(--indigo-500);
 }
-.btn-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--border-accent); }
 
-/* --- REWARD OVERLAY (SOPHISTICATED MODAL) --- */
+/* --- DIAGNOSTIC OVERLAY (THE RESILIENT FIX) --- */
 .reward-overlay {
-    position: absolute;
-    inset: 0;
-    background: rgba(9, 9, 11, 0.9);
-    backdrop-filter: blur(12px);
-    z-index: 100;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    animation: fadeIn 0.4s var(--ease-out);
+    position: absolute; inset: 0;
+    background: rgba(6, 6, 8, 0.95);
+    backdrop-filter: blur(16px); z-index: 500;
+    display: flex; flex-direction: column;
+    padding: 48px; align-items: center; justify-content: center;
+    text-align: center; animation: overlayIn 0.4s var(--ease-out);
 }
 
+@keyframes overlayIn { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(16px); } }
+
 .reward-score {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 4rem;
-    font-weight: 700;
-    color: var(--indigo-500);
-    margin-bottom: var(--s-4);
+    font-family: 'JetBrains Mono', monospace; font-size: 4rem; font-weight: 800;
+    margin-bottom: 12px; letter-spacing: -0.05em;
 }
 
 .feedback-bubble {
-    max-width: 400px;
-    text-align: center;
-    color: var(--text-secondary);
-    padding: var(--s-6);
+    width: 100%; max-width: 600px; max-height: 250px;
+    overflow-y: auto; background: rgba(255,255,255,0.03);
+    padding: 24px; border-radius: var(--radius-md);
+    border: 1px solid var(--border-medium);
+    font-size: 0.95rem; line-height: 1.8; color: var(--text-secondary);
+    font-family: 'JetBrains Mono', monospace; text-align: left;
 }
 
-/* --- ANIMATIONS (ELASTIC & SMOOTH) --- */
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
+/* Modal Actions */
+.btn {
+    border: none; padding: 14px 24px; border-radius: var(--radius-sm);
+    font-family: inherit; font-size: 0.85rem; font-weight: 700;
+    cursor: pointer; transition: all 0.2s var(--ease-out);
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+    text-transform: uppercase; letter-spacing: 0.05em;
 }
 
-@keyframes slideInLeft {
-    from { transform: translateX(-20px); opacity: 0; }
-    to { transform: translateX(0); opacity: 1; }
-}
+.btn-primary { background: var(--indigo-600); color: white; }
+.btn-primary:active { transform: scale(0.98); }
+
+.btn-secondary { background: rgba(255,255,255,0.06); color: var(--text-primary); border: 1px solid var(--border-medium); }
+.btn-secondary:hover { background: rgba(255,255,255,0.1); }
 
+/* --- ANIMATIONS --- */
 @keyframes blink { 50% { opacity: 0; } }
 
-/* --- SCROLLBARS (MINIMALIST) --- */
-::-webkit-scrollbar { width: 5px; }
+/* --- SCROLLBARS --- */
+::-webkit-scrollbar { width: 4px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
-::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
-
-/* --- STAGGERED LOAD DELAYS --- */
-.sidebar { animation-delay: 0.1s; }
-.topbar { animation: fadeIn 0.8s var(--ease-out) 0.3s backwards; }
-.card:nth-child(1) { animation-delay: 0.5s; }
-.card:nth-child(2) { animation-delay: 0.6s; }
-.terminal-card { animation-delay: 0.7s; }
+::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--indigo-500); }