Upload folder using huggingface_hub

index.html

@@ -5,8 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="description" content="Hardened Gemma 3 LLM Container Security Dashboard">
-  <title>Gemma 3 Hardened Container Dashboard</title>
+  <meta name="description" content="Hardened Gemma 3 LLM Container Security Dashboard - Enhanced Security Edition">
+  <title>Gemma 3 Hardened Container Dashboard - Enhanced Security</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
     :root {
@@ -20,6 +20,8 @@
       --info: #17a2b8;
       --light: #f8f9fa;
       --dark: #0a0a0f;
+      --purple: #9b59b6;
+      --orange: #e67e22;
       --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
       --radius: 12px;
       --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -58,7 +60,7 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      max-width: 1600px;
+      max-width: 1800px;
       margin: 0 auto;
       width: 100%;
     }
@@ -67,6 +69,7 @@
       display: flex;
       align-items: center;
       gap: 1rem;
+      flex-wrap: wrap;
     }
 
     .logo {
@@ -99,6 +102,18 @@
       color: var(--highlight);
     }
 
+    .security-level-badge {
+      background: linear-gradient(135deg, var(--success), #00b386);
+      padding: 0.3rem 0.8rem;
+      border-radius: 20px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: white;
+      display: flex;
+      align-items: center;
+      gap: 0.3rem;
+    }
+
     .built-with {
       font-size: 0.85rem;
       opacity: 0.9;
@@ -129,6 +144,7 @@
       display: flex;
       list-style: none;
       gap: 0.5rem;
+      flex-wrap: wrap;
     }
 
     nav a {
@@ -169,7 +185,7 @@
     /* Main Content */
     main {
       flex: 1;
-      max-width: 1600px;
+      max-width: 1800px;
       margin: 2rem auto;
       padding: 0 1.5rem;
       width: 100%;
@@ -189,6 +205,87 @@
       color: var(--highlight);
     }
 
+    /* Security Score */
+    .security-score-container {
+      background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
+      border-radius: var(--radius);
+      padding: 2rem;
+      margin-bottom: 2rem;
+      border: 1px solid rgba(0, 217, 160, 0.3);
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 2rem;
+      align-items: center;
+    }
+
+    .score-circle {
+      width: 150px;
+      height: 150px;
+      border-radius: 50%;
+      background: conic-gradient(var(--success) 0deg, var(--success) 324deg, rgba(255,255,255,0.1) 324deg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    .score-circle::before {
+      content: '';
+      position: absolute;
+      width: 120px;
+      height: 120px;
+      background: var(--primary);
+      border-radius: 50%;
+    }
+
+    .score-value {
+      position: relative;
+      z-index: 1;
+      font-size: 2.5rem;
+      font-weight: 700;
+      color: var(--success);
+    }
+
+    .score-details {
+      flex: 1;
+    }
+
+    .score-title {
+      font-size: 1.5rem;
+      margin-bottom: 0.5rem;
+      color: var(--light);
+    }
+
+    .score-subtitle {
+      color: rgba(255,255,255,0.7);
+      margin-bottom: 1rem;
+    }
+
+    .score-breakdown {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 1rem;
+    }
+
+    .score-item {
+      background: rgba(255,255,255,0.05);
+      padding: 0.8rem;
+      border-radius: 8px;
+      text-align: center;
+    }
+
+    .score-item-value {
+      font-size: 1.3rem;
+      font-weight: 600;
+      color: var(--success);
+    }
+
+    .score-item-label {
+      font-size: 0.75rem;
+      color: rgba(255,255,255,0.6);
+      text-transform: uppercase;
+    }
+
     /* Dashboard Grid */
     .dashboard-grid {
       display: grid;
@@ -228,6 +325,40 @@
       background: linear-gradient(90deg, var(--highlight), var(--success));
     }
 
+    .card.new-feature::before {
+      background: linear-gradient(90deg, var(--purple), var(--info));
+    }
+
+    .card.enhanced::before {
+      background: linear-gradient(90deg, var(--success), #00ff88);
+    }
+
+    .card-badge {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      padding: 0.2rem 0.6rem;
+      border-radius: 12px;
+      font-size: 0.65rem;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .badge-new {
+      background: var(--purple);
+      color: white;
+    }
+
+    .badge-enhanced {
+      background: var(--success);
+      color: white;
+    }
+
+    .badge-critical {
+      background: var(--danger);
+      color: white;
+    }
+
     .card-icon {
       width: 48px;
       height: 48px;
@@ -242,6 +373,22 @@
       box-shadow: 0 4px 15px rgba(233, 69, 96, 0.3);
     }
 
+    .card-icon.purple {
+      background: linear-gradient(135deg, var(--purple), #8e44ad);
+    }
+
+    .card-icon.green {
+      background: linear-gradient(135deg, var(--success), #00b386);
+    }
+
+    .card-icon.blue {
+      background: linear-gradient(135deg, var(--info), #138496);
+    }
+
+    .card-icon.orange {
+      background: linear-gradient(135deg, var(--orange), #d35400);
+    }
+
     .card-title {
       font-size: 1.15rem;
       margin-bottom: 0.6rem;
@@ -292,6 +439,148 @@
       font-weight: 500;
     }
 
+    /* Security Layers Section */
+    .security-layers {
+      background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
+      border-radius: var(--radius);
+      padding: 2rem;
+      margin-bottom: 2rem;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .layers-title {
+      font-size: 1.3rem;
+      margin-bottom: 1.5rem;
+      color: var(--light);
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .layers-title i {
+      color: var(--highlight);
+    }
+
+    .layer-diagram {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .layer {
+      padding: 1rem 1.5rem;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      transition: var(--transition);
+      cursor: pointer;
+    }
+
+    .layer:hover {
+      transform: translateX(10px);
+    }
+
+    .layer-external {
+      background: linear-gradient(90deg, rgba(220, 53, 69, 0.3), rgba(220, 53, 69, 0.1));
+      border-left: 4px solid var(--danger);
+    }
+
+    .layer-network {
+      background: linear-gradient(90deg, rgba(230, 126, 34, 0.3), rgba(230, 126, 34, 0.1));
+      border-left: 4px solid var(--orange);
+    }
+
+    .layer-host {
+      background: linear-gradient(90deg, rgba(255, 193, 7, 0.3), rgba(255, 193, 7, 0.1));
+      border-left: 4px solid var(--warning);
+    }
+
+    .layer-runtime {
+      background: linear-gradient(90deg, rgba(23, 162, 184, 0.3), rgba(23, 162, 184, 0.1));
+      border-left: 4px solid var(--info);
+    }
+
+    .layer-container {
+      background: linear-gradient(90deg, rgba(155, 89, 182, 0.3), rgba(155, 89, 182, 0.1));
+      border-left: 4px solid var(--purple);
+    }
+
+    .layer-application {
+      background: linear-gradient(90deg, rgba(0, 217, 160, 0.3), rgba(0, 217, 160, 0.1));
+      border-left: 4px solid var(--success);
+    }
+
+    .layer-info {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .layer-name {
+      font-weight: 600;
+      color: var(--light);
+    }
+
+    .layer-controls {
+      display: flex;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+    }
+
+    .layer-control {
+      background: rgba(0, 0, 0, 0.3);
+      padding: 0.3rem 0.6rem;
+      border-radius: 4px;
+      font-size: 0.7rem;
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    /* Improvement Categories */
+    .improvements-section {
+      margin-bottom: 2rem;
+    }
+
+    .improvements-tabs {
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 1.5rem;
+      flex-wrap: wrap;
+    }
+
+    .improvement-tab {
+      padding: 0.8rem 1.5rem;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+      color: rgba(255, 255, 255, 0.7);
+      cursor: pointer;
+      transition: var(--transition);
+      font-size: 0.9rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .improvement-tab:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: var(--light);
+    }
+
+    .improvement-tab.active {
+      background: linear-gradient(135deg, var(--highlight), #ff6b6b);
+      color: white;
+      border-color: var(--highlight);
+    }
+
+    .improvement-content {
+      display: none;
+    }
+
+    .improvement-content.active {
+      display: block;
+    }
+
     /* Security Controls Section */
     .security-section {
       background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
@@ -367,6 +656,16 @@
       background: rgba(255, 255, 255, 0.2);
     }
 
+    .btn-success {
+      background: linear-gradient(135deg, var(--success), #00b386);
+      color: white;
+    }
+
+    .btn-success:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 15px rgba(0, 217, 160, 0.4);
+    }
+
     /* Security Item */
     .security-item {
       margin-bottom: 1rem;
@@ -390,6 +689,14 @@
       border-left-color: var(--danger);
     }
 
+    .security-item.new {
+      border-left-color: var(--purple);
+    }
+
+    .security-item.enhanced {
+      border-left-color: var(--info);
+    }
+
     .security-header {
       display: flex;
       justify-content: space-between;
@@ -477,10 +784,85 @@
       color: #4ec9b0;
     }
 
+    /* Threat Model Section */
+    .threat-model {
+      background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
+      border-radius: var(--radius);
+      padding: 1.5rem;
+      margin-bottom: 2rem;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .threat-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1rem;
+    }
+
+    .threat-card {
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 8px;
+      padding: 1.2rem;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .threat-header {
+      display: flex;
+      align-items: center;
+      gap: 0.8rem;
+      margin-bottom: 0.8rem;
+    }
+
+    .threat-icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1rem;
+    }
+
+    .threat-icon.high {
+      background: rgba(220, 53, 69, 0.3);
+      color: var(--danger);
+    }
+
+    .threat-icon.medium {
+      background: rgba(255, 193, 7, 0.3);
+      color: var(--warning);
+    }
+
+    .threat-icon.low {
+      background: rgba(0, 217, 160, 0.3);
+      color: var(--success);
+    }
+
+    .threat-title {
+      font-weight: 600;
+      color: var(--light);
+      font-size: 0.95rem;
+    }
+
+    .threat-description {
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 0.8rem;
+      margin-bottom: 0.8rem;
+    }
+
+    .threat-mitigation {
+      background: rgba(0, 217, 160, 0.1);
+      padding: 0.6rem;
+      border-radius: 6px;
+      font-size: 0.75rem;
+      color: var(--success);
+      border-left: 3px solid var(--success);
+    }
+
     /* System Health Section */
     .health-section {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
       gap: 1rem;
       margin-bottom: 2rem;
     }
@@ -563,6 +945,7 @@
       display: flex;
       background: rgba(0, 0, 0, 0.3);
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      overflow-x: auto;
     }
 
     .script-tab {
@@ -574,6 +957,7 @@
       transition: var(--transition);
       font-size: 0.85rem;
       border-bottom: 2px solid transparent;
+      white-space: nowrap;
     }
 
     .script-tab:hover {
@@ -589,7 +973,7 @@
 
     .script-content {
       padding: 1rem;
-      max-height: 500px;
+      max-height: 600px;
       overflow-y: auto;
     }
 
@@ -635,6 +1019,12 @@
       color: var(--info);
     }
 
+    .alert-purple {
+      background: rgba(155, 89, 182, 0.15);
+      border: 1px solid rgba(155, 89, 182, 0.3);
+      color: var(--purple);
+    }
+
     .alert i {
       font-size: 1.2rem;
       margin-top: 0.1rem;
@@ -654,6 +1044,69 @@
       opacity: 0.9;
     }
 
+    /* Checklist */
+    .checklist {
+      list-style: none;
+      padding: 0;
+    }
+
+    .checklist-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.8rem;
+      padding: 0.8rem;
+      background: rgba(255, 255, 255, 0.03);
+      border-radius: 8px;
+      margin-bottom: 0.5rem;
+      transition: var(--transition);
+    }
+
+    .checklist-item:hover {
+      background: rgba(255, 255, 255, 0.06);
+    }
+
+    .checklist-icon {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      flex-shrink: 0;
+    }
+
+    .checklist-icon.done {
+      background: var(--success);
+      color: white;
+    }
+
+    .checklist-icon.pending {
+      background: var(--warning);
+      color: white;
+    }
+
+    .checklist-icon.new {
+      background: var(--purple);
+      color: white;
+    }
+
+    .checklist-content {
+      flex: 1;
+    }
+
+    .checklist-title {
+      font-weight: 600;
+      color: var(--light);
+      font-size: 0.9rem;
+      margin-bottom: 0.2rem;
+    }
+
+    .checklist-description {
+      color: rgba(255, 255, 255, 0.6);
+      font-size: 0.8rem;
+    }
+
     /* Modal */
     .modal {
       position: fixed;
@@ -682,7 +1135,7 @@
       border-radius: var(--radius);
       padding: 1.5rem;
       width: 90%;
-      max-width: 900px;
+      max-width: 1000px;
       max-height: 90vh;
       overflow-y: auto;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
@@ -757,387 +1210,4 @@
     .modal-footer {
       display: flex;
       justify-content: flex-end;
-      gap: 1rem;
-    }
-
-    /* Footer */
-    footer {
-      background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);
-      color: white;
-      text-align: center;
-      padding: 1.5rem;
-      margin-top: auto;
-      border-top: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .footer-content {
-      max-width: 1600px;
-      margin: 0 auto;
-    }
-
-    .footer-links {
-      display: flex;
-      justify-content: center;
-      gap: 1.5rem;
-      margin-bottom: 1rem;
-      flex-wrap: wrap;
-    }
-
-    .footer-links a {
-      color: rgba(255, 255, 255, 0.7);
-      text-decoration: none;
-      padding: 0.4rem 0.8rem;
-      border-radius: 6px;
-      transition: var(--transition);
-      font-size: 0.85rem;
-    }
-
-    .footer-links a:hover {
-      color: var(--highlight);
-      background: rgba(255, 255, 255, 0.05);
-    }
-
-    .copyright {
-      opacity: 0.6;
-      font-size: 0.8rem;
-    }
-
-    /* Responsive Design */
-    @media (max-width: 1024px) {
-      .header-content {
-        flex-direction: column;
-        gap: 1rem;
-      }
-
-      nav ul {
-        flex-wrap: wrap;
-        justify-content: center;
-      }
-
-      .security-content {
-        grid-template-columns: 1fr;
-      }
-
-      .security-actions {
-        align-items: flex-start;
-        flex-direction: row;
-      }
-    }
-
-    @media (max-width: 768px) {
-      .dashboard-grid {
-        grid-template-columns: 1fr;
-      }
-
-      .health-section {
-        grid-template-columns: 1fr 1fr;
-      }
-
-      header {
-        padding: 1rem;
-      }
-
-      main {
-        padding: 0 1rem;
-      }
-
-      .script-content pre {
-        font-size: 0.65rem;
-      }
-    }
-
-    @media (max-width: 480px) {
-      .health-section {
-        grid-template-columns: 1fr;
-      }
-
-      .logo {
-        font-size: 1.3rem;
-      }
-
-      nav a {
-        padding: 0.4rem 0.6rem;
-        font-size: 0.8rem;
-      }
-
-      .section-title-main {
-        font-size: 1.4rem;
-      }
-    }
-
-    /* Animations */
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-        transform: translateY(20px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
-    .fade-in {
-      animation: fadeIn 0.5s ease-out forwards;
-    }
-
-    /* Scrollbar */
-    ::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-
-    ::-webkit-scrollbar-track {
-      background: rgba(0, 0, 0, 0.2);
-    }
-
-    ::-webkit-scrollbar-thumb {
-      background: var(--highlight);
-      border-radius: 4px;
-    }
-
-    ::-webkit-scrollbar-thumb:hover {
-      background: #ff6b6b;
-    }
-
-    /* Notification */
-    .notification {
-      position: fixed;
-      top: 100px;
-      right: 20px;
-      padding: 1rem 1.5rem;
-      border-radius: 8px;
-      background: var(--secondary);
-      color: var(--light);
-      box-shadow: var(--shadow);
-      transform: translateX(150%);
-      transition: var(--transition);
-      z-index: 3000;
-      display: flex;
-      align-items: center;
-      gap: 0.8rem;
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .notification.show {
-      transform: translateX(0);
-    }
-
-    .notification.success {
-      border-left: 4px solid var(--success);
-    }
-
-    .notification.warning {
-      border-left: 4px solid var(--warning);
-    }
-
-    .notification.error {
-      border-left: 4px solid var(--danger);
-    }
-
-    .notification.info {
-      border-left: 4px solid var(--info);
-    }
-  </style>
-</head>
-
-<body>
-  <header>
-    <div class="header-content">
-      <div class="logo-container">
-        <a href="#" class="logo">
-          <div class="logo-icon">
-            <i class="fas fa-shield-alt"></i>
-          </div>
-          <span>Gemma 3 Hardened</span>
-        </a>
-        <span class="model-badge">gemma-3-12b-it-abliterated-v2.q4_k_m.gguf</span>
-        <div class="built-with">
-          <i class="fas fa-code"></i>
-          Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
-        </div>
-      </div>
-      <nav>
-        <ul>
-          <li><a href="#dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
-          <li><a href="#security-controls"><i class="fas fa-lock"></i> Security</a></li>
-          <li><a href="#deployment-script"><i class="fas fa-terminal"></i> Script</a></li>
-          <li><a href="#system-health"><i class="fas fa-heartbeat"></i> Health</a></li>
-        </ul>
-      </nav>
-    </div>
-  </header>
-
-  <main>
-    <!-- Alerts Section -->
-    <section id="alerts" class="fade-in">
-      <div class="alert alert-success">
-        <i class="fas fa-check-circle"></i>
-        <div class="alert-content">
-          <div class="alert-title">Security Improvements Applied</div>
-          <div class="alert-text">All three security concerns have been addressed: Enhanced entropy handling, dual MAC/Seccomp hardening, and persistent forensic logging.</div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Dashboard Section -->
-    <section id="dashboard" class="fade-in">
-      <h1 class="section-title-main"><i class="fas fa-shield-alt"></i> Security Overview - Gemma 3 Model</h1>
-      <div class="dashboard-grid">
-        <!-- Entropy Card -->
-        <div class="card">
-          <div class="card-icon">
-            <i class="fas fa-random"></i>
-          </div>
-          <h3 class="card-title">Entropy Management</h3>
-          <p class="card-description">Hardware entropy mirroring via /dev/random bind mount from host. rngd sidecar container ensures continuous entropy pool replenishment for cryptographic operations.</p>
-          <div class="card-status">
-            <div class="status-indicator"></div>
-            <span class="status-text">Healthy (>3000 bits)</span>
-          </div>
-        </div>
-
-        <!-- Dual MAC/Seccomp Card -->
-        <div class="card">
-          <div class="card-icon">
-            <i class="fas fa-layer-group"></i>
-          </div>
-          <h3 class="card-title">Dual Security Layers</h3>
-          <p class="card-description">Combined AppArmor profile (usr.bin.gemma) AND Seccomp filter (45 syscalls allowlist) for maximum defense-in-depth protection.</p>
-          <div class="card-status">
-            <div class="status-indicator"></div>
-            <span class="status-text">Both Active</span>
-          </div>
-        </div>
-
-        <!-- Forensic Logging Card -->
-        <div class="card">
-          <div class="card-icon">
-            <i class="fas fa-file-alt"></i>
-          </div>
-          <h3 class="card-title">Forensic Logging</h3>
-          <p class="card-description">Persistent log storage via host-mounted /var/log directory. Logs survive container restarts and are available for forensic analysis.</p>
-          <div class="card-status">
-            <div class="status-indicator"></div>
-            <span class="status-text">Persistent</span>
-          </div>
-        </div>
-
-        <!-- Network Isolation Card -->
-        <div class="card">
-          <div class="card-icon">
-            <i class="fas fa-network-wired"></i>
-          </div>
-          <h3 class="card-title">Network Isolation</h3>
-          <p class="card-description">Strict network blockade with allowlisted single API port on loopback interface only. All external connections blocked by default.</p>
-          <div class="card-status">
-            <div class="status-indicator"></div>
-            <span class="status-text">Active</span>
-          </div>
-        </div>
-
-        <!-- Non-Root Execution Card -->
-        <div class="card">
-          <div class="card-icon">
-            <i class="fas fa-user-shield"></i>
-          </div>
-          <h3 class="card-title">Non-Root Execution</h3>
-          <p class="card-description">Application runs as dedicated unprivileged user (llm_agent) with minimal capabilities. No root access or privilege escalation possible.</p>
-          <div class="card-status">
-            <div class="status-indicator"></div>
-            <span class="status-text">Secure</span>
-          </div>
-        </div>
-
-        <!-- Read-Only Filesystem Card -->
-        <div class="card">
-          <div class="card-icon">
-            <i class="fas fa-hdd"></i>
-          </div>
-          <h3 class="card-title">Read-Only Filesystem</h3>
-          <p class="card-description">Complete read-only root filesystem with tmpfs mounts for temporary files. Prevents persistent modifications to system files.</p>
-          <div class="card-status">
-            <div class="status-indicator"></div>
-            <span class="status-text">Protected</span>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Security Controls Section -->
-    <section id="security-controls" class="security-section fade-in">
-      <div class="section-header">
-        <h2 class="section-title"><i class="fas fa-cogs"></i> Security Controls</h2>
-        <div class="section-actions">
-          <button class="btn btn-secondary" id="refresh-btn">
-            <i class="fas fa-sync-alt"></i> Refresh
-          </button>
-          <button class="btn btn-primary" id="run-audit">
-            <i class="fas fa-search"></i> Run Audit
-          </button>
-        </div>
-      </div>
-
-      <!-- Entropy Security Item -->
-      <div class="security-item">
-        <div class="security-header">
-          <h3 class="security-title"><i class="fas fa-random"></i> Entropy Source (FIXED)</h3>
-          <div class="security-status">
-            <div class="status-indicator"></div>
-            <span>Healthy</span>
-          </div>
-        </div>
-        <div class="security-content">
-          <div>
-            <p class="security-details"><strong>Implementation:</strong> Host entropy mirroring + rngd sidecar container</p>
-            <p class="security-details"><strong>Mount:</strong> /dev/random and /dev/urandom bind-mounted from host</p>
-            <p class="security-details"><strong>Current Pool:</strong> 3847 bits available</p>
-            <p class="security-details"><strong>Sidecar:</strong> rngd actively feeding entropy from hardware sources</p>
-          </div>
-          <div class="security-actions">
-            <button class="btn btn-sm btn-secondary view-details" data-target="entropy">
-              <i class="fas fa-info-circle"></i> Details
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Dual Security Layers Item -->
-      <div class="security-item">
-        <div class="security-header">
-          <h3 class="security-title"><i class="fas fa-layer-group"></i> Dual MAC + Seccomp (FIXED)</h3>
-          <div class="security-status">
-            <div class="status-indicator"></div>
-            <span>Both Active</span>
-          </div>
-        </div>
-        <div class="security-content">
-          <div>
-            <p class="security-details"><strong>AppArmor Profile:</strong> usr.bin.gemma (enforce mode)</p>
-            <p class="security-details"><strong>Seccomp Filter:</strong> 45 syscalls allowlist (strict mode)</p>
-            <p class="security-details"><strong>Defense Layers:</strong> Mandatory Access Control + System Call Filtering</p>
-            <p class="security-details"><strong>Block Rate:</strong> 85.6% of syscalls blocked</p>
-          </div>
-          <div class="security-actions">
-            <button class="btn btn-sm btn-secondary view-details" data-target="dual-security">
-              <i class="fas fa-info-circle"></i> Details
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Forensic Logging Item -->
-      <div class="security-item">
-        <div class="security-header">
-          <h3 class="security-title"><i class="fas fa-file-alt"></i> Forensic Logging (FIXED)</h3>
-          <div class="security-status">
-            <div class="status-indicator"></div>
-            <span>Persistent</span>
-          </div>
-        </div>
-        <div class="security-content">
-          <div>
-            <p class="security-details"><strong>Log Mount:</strong> Host directory bind-mounted to /var/log</p>
-            <p class="security-details"><strong>Host Path:</strong> /var/log/gemma-container/</p>
-            <p class="security-details"><strong>Retention:</strong> Logs persist across container restarts</p>
-            <p class="security
+      gap: