style(dashboard): implement retro terminal gruvbox aesthetic

This commit overhauls the dashboard styling to achieve a 'retro terminal' look matching the Gruvbox color palette. Changes include switching the global font to JetBrains Mono/Fira Code, removing rounded corners on all major elements (cards, buttons, inputs, modals, badges), and replacing modern soft shadows with sharp, hard-offset block shadows.

static/css/dashboard.css

@@ -61,9 +61,9 @@
     --text-white: var(--fg0);
     
     /* Borders */
-    --border-color: var(--bg2);
+    --border-color: var(--bg3);
-    --border-radius: 8px;
+    --border-radius: 0px;
-    --border-radius-sm: 4px;
+    --border-radius-sm: 0px;
     
     /* Spacing System */
     --spacing-xs: 0.25rem;
@@ -72,15 +72,15 @@
     --spacing-lg: 1.5rem;
     --spacing-xl: 2rem;
     
-    /* Shadows */
+    /* Shadows - Retro Block Style */
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+    --shadow-sm: 2px 2px 0px rgba(0, 0, 0, 0.4);
-    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+    --shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
-    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+    --shadow-md: 6px 6px 0px rgba(0, 0, 0, 0.6);
-    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 8px 8px 0px rgba(0, 0, 0, 0.7);
 }
 
 body {
-    font-family: 'Inter', -apple-system, sans-serif;
+    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
     background-color: var(--bg-primary);
     color: var(--text-primary);
     line-height: 1.6;
@@ -105,12 +105,12 @@ body {
 
 .login-card {
     background: var(--bg1);
-    border-radius: 24px;
+    border-radius: var(--border-radius);
     padding: 4rem 2.5rem 3rem;
     width: 100%;
     max-width: 440px;
     box-shadow: var(--shadow-lg);
-    border: 1px solid var(--bg2);
+    border: 2px solid var(--bg3);
     text-align: center;
     animation: slideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
     position: relative;
@@ -191,7 +191,7 @@ body {
     color: var(--fg3);
     pointer-events: none;
     transition: all 0.25s ease;
-    background: var(--bg1);
+    background: transparent;
     padding: 0 0.375rem;
     z-index: 2;
     font-weight: 500;
@@ -202,30 +202,32 @@ body {
 
 .form-group input:focus ~ label,
 .form-group input:not(:placeholder-shown) ~ label {
-    top: -0.625rem;
+    top: 0;
     left: 0.875rem;
-    font-size: 0.7rem;
+    font-size: 0.75rem;
     color: var(--orange);
     font-weight: 600;
-    transform: translateY(0);
+    transform: translateY(-50%);
+    background: linear-gradient(180deg, var(--bg1) 50%, var(--bg0) 50%);
 }
 
 .form-group input {
     padding: 1rem 1.25rem;
     background: var(--bg0);
     border: 2px solid var(--bg3);
-    border-radius: 12px;
+    border-radius: var(--border-radius);
+    font-family: inherit;
     font-size: 1rem;
     color: var(--fg1);
-    transition: all 0.3s;
+    transition: all 0.2s;
     width: 100%;
     box-sizing: border-box;
 }
 
 .form-group input:focus {
     border-color: var(--orange);
-    box-shadow: 0 0 0 4px rgba(214, 93, 14, 0.2);
     outline: none;
+    box-shadow: 4px 4px 0px rgba(214, 93, 14, 0.4);
 }
 
 .login-btn {
@@ -732,11 +734,11 @@ body {
 .stat-change.positive { color: var(--green-light); }
 .stat-change.negative { color: var(--red-light); }
 
-/* Generic Cards */
+/* Cards */
 .card {
     background: var(--bg1);
     border-radius: var(--border-radius);
-    border: 1px solid var(--bg2);
+    border: 1px solid var(--bg3);
     box-shadow: var(--shadow-sm);
     margin-bottom: 1.5rem;
     display: flex;
@@ -749,6 +751,15 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.card-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
 }
 
 .card-title {
@@ -817,25 +828,26 @@ body {
 /* Badges */
 .status-badge {
     padding: 0.25rem 0.75rem;
-    border-radius: 9999px;
+    border-radius: var(--border-radius);
     font-size: 0.7rem;
     font-weight: 700;
     text-transform: uppercase;
     display: inline-flex;
     align-items: center;
     gap: 0.375rem;
+    border: 1px solid transparent;
 }
 
-.status-badge.online, .status-badge.success { background: rgba(184, 187, 38, 0.2); color: var(--green-light); }
+.status-badge.online, .status-badge.success { background: rgba(184, 187, 38, 0.2); color: var(--green-light); border-color: rgba(184, 187, 38, 0.4); }
-.status-badge.offline, .status-badge.danger { background: rgba(251, 73, 52, 0.2); color: var(--red-light); }
+.status-badge.offline, .status-badge.danger { background: rgba(251, 73, 52, 0.2); color: var(--red-light); border-color: rgba(251, 73, 52, 0.4); }
-.status-badge.warning { background: rgba(250, 189, 47, 0.2); color: var(--yellow-light); }
+.status-badge.warning { background: rgba(250, 189, 47, 0.2); color: var(--yellow-light); border-color: rgba(250, 189, 47, 0.4); }
 
 .badge-client {
     background: var(--bg2);
     color: var(--blue-light);
     padding: 2px 8px;
-    border-radius: 6px;
+    border-radius: var(--border-radius);
-    font-family: monospace;
+    font-family: inherit;
     font-size: 0.85rem;
     border: 1px solid var(--bg3);
 }
@@ -889,7 +901,7 @@ body {
     width: 100%;
     background: var(--bg0);
     border: 1px solid var(--bg3);
-    border-radius: 8px;
+    border-radius: var(--border-radius);
     padding: 0.75rem;
     font-family: inherit;
     font-size: 0.875rem;
@@ -900,7 +912,7 @@ body {
 .form-control input:focus, .form-control textarea:focus, .form-control select:focus {
     outline: none;
     border-color: var(--orange);
-    box-shadow: 0 0 0 2px rgba(214, 93, 14, 0.2);
+    box-shadow: 2px 2px 0px rgba(214, 93, 14, 0.4);
 }
 
 .btn {
@@ -908,21 +920,27 @@ body {
     align-items: center;
     gap: 0.5rem;
     padding: 0.625rem 1.25rem;
-    border-radius: 8px;
+    border-radius: var(--border-radius);
     font-weight: 600;
     font-size: 0.875rem;
     cursor: pointer;
-    transition: all 0.2s;
+    transition: all 0.1s;
     border: 1px solid transparent;
+    text-transform: uppercase;
 }
 
-.btn-primary { background: var(--orange); color: var(--bg0); }
+.btn:active {
+    transform: translate(2px, 2px);
+    box-shadow: none !important;
+}
+
+.btn-primary { background: var(--orange); color: var(--bg0); box-shadow: 2px 2px 0px var(--bg4); }
 .btn-primary:hover { background: var(--orange-light); }
 
-.btn-secondary { background: var(--bg2); border-color: var(--bg3); color: var(--fg1); }
+.btn-secondary { background: var(--bg2); border-color: var(--bg3); color: var(--fg1); box-shadow: 2px 2px 0px var(--bg0); }
 .btn-secondary:hover { background: var(--bg3); color: var(--fg0); }
 
-.btn-danger { background: var(--red); color: var(--fg0); }
+.btn-danger { background: var(--red); color: var(--fg0); box-shadow: 2px 2px 0px var(--bg4); }
 .btn-danger:hover { background: var(--red-light); }
 
 /* Small inline action buttons (edit, delete, copy) */
@@ -981,13 +999,13 @@ body {
 
 .modal-content {
     background: var(--bg1);
-    border-radius: 16px;
+    border-radius: var(--border-radius);
     width: 90%;
     max-width: 500px;
     box-shadow: var(--shadow-lg);
-    border: 1px solid var(--bg3);
+    border: 2px solid var(--bg3);
     transform: translateY(20px);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.2s;
 }
 
 .modal.active .modal-content {

static/index.html

@@ -4,11 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LLM Proxy Gateway - Admin Dashboard</title>
-    <link rel="stylesheet" href="/css/dashboard.css?v=7">
+    <link rel="stylesheet" href="/css/dashboard.css?v=11">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="icon" href="img/logo-icon.png" type="image/png" sizes="any">
     <link rel="apple-touch-icon" href="img/logo-icon.png">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/luxon@3.4.4/build/global/luxon.min.js"></script>
 </head>
@@ -17,8 +17,7 @@
     <div id="login-screen" class="login-container">
         <div class="login-card">
             <div class="login-header">
-                <img src="img/logo-full.png" alt="LLM Proxy Logo" class="login-logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
+                <i class="fas fa-terminal login-logo-fallback"></i>
-                <i class="fas fa-robot login-logo-fallback" style="display: none;"></i>
                 <h1>LLM Proxy Gateway</h1>
                 <p class="login-subtitle">Admin Dashboard</p>
             </div>

static/js/dashboard.js

@@ -284,7 +284,7 @@ class Dashboard {
                         <h3 class="card-title">Model Registry</h3>
                         <p class="card-subtitle">Manage model availability and custom pricing</p>
                     </div>
-                    <div class="card-actions" style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
+                    <div class="card-actions">
                         <select id="model-provider-filter" class="form-control" style="margin-bottom: 0; padding: 4px 8px; width: auto;">
                             <option value="">All Providers</option>
                             <option value="openai">OpenAI</option>