Improve playground UI with better status indicators

- Enhanced status badge styling with background colors and borders
- Added visual distinction for ready/compiling/error states
- Refined spacing and typography for better readability

Author: cs01

nullsafe-playground/index.html

@@ -166,41 +166,35 @@
         }
 
         .status {
-            color: var(--text-muted);
-            font-size: 14px;
+            color: var(--text-primary);
+            font-size: 13px;
             margin-left: auto;
-            display: flex;
+            display: inline-flex;
             align-items: center;
-            gap: 8px;
-        }
-
-        .status::before {
-            content: '';
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: var(--text-muted);
-            display: inline-block;
-            animation: pulse 2s infinite;
-        }
-
-        .status.ready::before {
-            background: var(--success);
-            animation: none;
+            gap: 6px;
+            padding: 6px 14px;
+            border-radius: 16px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            font-weight: 500;
         }
 
-        .status.compiling::before {
-            background: var(--warning);
+        .status.ready {
+            background: rgba(78, 201, 176, 0.15);
+            border-color: rgba(78, 201, 176, 0.3);
+            color: var(--success);
         }
 
-        .status.error::before {
-            background: var(--error);
-            animation: none;
+        .status.compiling {
+            background: rgba(255, 184, 77, 0.15);
+            border-color: rgba(255, 184, 77, 0.3);
+            color: var(--warning);
         }
 
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
+        .status.error {
+            background: rgba(255, 82, 82, 0.15);
+            border-color: rgba(255, 82, 82, 0.3);
+            color: var(--error);
         }
 
         .loading-spinner {
@@ -212,7 +206,7 @@
 
         .loading-bar {
             width: 3px;
-            background: white;
+            background: currentColor;
             border-radius: 2px;
             animation: loading-bounce 0.8s ease-in-out infinite;
         }
@@ -238,14 +232,6 @@
             }
         }
 
-        .status:has(.loading-spinner)::before {
-            display: none;
-        }
-
-        .status.ready { color: var(--success); }
-        .status.compiling { color: var(--warning); }
-        .status.error { color: var(--error); }
-
         .main-container {
             display: flex;
             flex: 1;