From 28bf4e2a6f074a8b5b370eeeef997cdfc72b78e5 Mon Sep 17 00:00:00 2001
From: Bhuvanesh S <YOUR_GITHUB_EMAIL>
Date: Sat, 20 Jun 2026 22:37:01 +0530
Subject: [PATCH] feat: add Digital Marketing Analytics Center example

---
 .../README.md                                 |  22 ++
 .../demo.html                                 | 256 ++++++++++++
 .../style.css                                 | 369 ++++++++++++++++++
 3 files changed, 647 insertions(+)
 create mode 100644 submissions/examples/digital-marketing-analytics-center/README.md
 create mode 100644 submissions/examples/digital-marketing-analytics-center/demo.html
 create mode 100644 submissions/examples/digital-marketing-analytics-center/style.css
diff --git a/submissions/examples/digital-marketing-analytics-center/README.md b/submissions/examples/digital-marketing-analytics-center/README.md
new file mode 100644
index 0000000000..33c3db2f6e
--- /dev/null
+++ b/submissions/examples/digital-marketing-analytics-center/README.md
@@ -0,0 +1,22 @@
+# Digital Marketing Analytics Center
+
+## Overview
+Build a marketing performance dashboard.
+
+This project implements the Phase 110 requirements for the EaseMotion CSS catalog, demonstrating advanced UI development using modern CSS techniques without external UI frameworks.
+
+## Features Included
+- **Campaign overview**: Built with glassmorphism and CSS grid/flexbox.
+- **Traffic analytics**: Built with glassmorphism and CSS grid/flexbox.
+- **Conversion metrics**: Built with glassmorphism and CSS grid/flexbox.
+- **KPI widgets**: Built with glassmorphism and CSS grid/flexbox.
+- **Responsive cards**: Built with glassmorphism and CSS grid/flexbox.
+
+## Architecture
+- **Pure CSS**: No preprocessors or Tailwind used.
+- **Interactivity**: Utilizes CSS pseudo-classes (`:hover`, `:checked`) for interactivity, avoiding JavaScript where possible.
+- **Animations**: Custom keyframes for charts, loaders, and state transitions.
+- **Variables**: Fully themeable using CSS custom properties.
+
+## Setup
+Simply open `demo.html` in any modern browser to view the interactive dashboard.
diff --git a/submissions/examples/digital-marketing-analytics-center/demo.html b/submissions/examples/digital-marketing-analytics-center/demo.html
new file mode 100644
index 0000000000..561852a39c
--- /dev/null
+++ b/submissions/examples/digital-marketing-analytics-center/demo.html
@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Digital Marketing Analytics Center</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+
+  <!-- Modal Interactivity Hack -->
+  <input type="checkbox" id="config-modal" class="modal-trigger">
+  <div class="modal-overlay">
+    <div class="modal-content glass">
+      <label for="config-modal" class="modal-close">&times;</label>
+      <h3 style="margin-bottom: 15px;">Dashboard Configuration</h3>
+      <p style="color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 20px;">
+        Adjust operational rules and bounds for Digital Marketing Analytics Center. Changes propagate dynamically.
+      </p>
+      <form style="display: flex; flex-direction: column; gap: 15px;">
+        <div>
+          <label style="display: block; margin-bottom: 5px; font-size: 0.85rem; color: var(--text-secondary);">Threshold Limit</label>
+          <input type="range" min="0" max="100" value="75" style="width: 100%;">
+        </div>
+        <div>
+          <label style="display: block; margin-bottom: 5px; font-size: 0.85rem; color: var(--text-secondary);">Refresh Interval (ms)</label>
+          <input type="text" value="2500" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--border-glass); background: rgba(0,0,0,0.2); color: white;">
+        </div>
+        <label for="config-modal" style="background: var(--primary); text-align: center; color: white; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: 600;">Save & Apply Settings</label>
+      </form>
+    </div>
+  </div>
+
+  <div class="app-container">
+    <!-- Sidebar component -->
+    <aside class="sidebar" id="navigation-sidebar">
+      <div class="brand">
+        <div class="brand-dot"></div>
+        <span>Console</span>
+      </div>
+      <ul class="nav-links">
+        <li class="nav-link active"><a href="#dashboard">Overview</a></li>
+        <li class="nav-link"><a href="#modules">Components</a></li>
+        <li class="nav-link"><a href="#analytics">Deep Analytics</a></li>
+        <li class="nav-link"><a href="#settings">Settings</a></li>
+      </ul>
+      <div class="sidebar-footer" style="padding-top: 20px; border-top: 1px solid var(--border-glass); text-align: center;">
+        <label for="config-modal" style="background: rgba(255,255,255,0.05); border: 1px solid var(--border-glass); padding: 8px 16px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; display: inline-block; width: 100%;">Config Panel</label>
+      </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Section 1: Top Navigation Banner -->
+      <header class="header" id="header-section">
+        <div>
+          <h1 style="font-size: 1.75rem; font-weight: 700;">Digital Marketing Analytics Center</h1>
+          <p style="color: var(--text-secondary); font-size: 0.9rem;">Build a marketing performance dashboard.</p>
+        </div>
+        <div class="user-profile">
+          <div style="text-align: right;">
+            <p style="font-weight: 600; font-size: 0.95rem;">Admin User</p>
+            <p style="color: var(--success); font-size: 0.8rem; font-weight: 600;">System Online</p>
+          </div>
+          <div class="avatar" style="background-color: var(--primary);"></div>
+        </div>
+      </header>
+
+      <!-- Section 2: Global Telemetry Stats -->
+      <section class="stats-grid" id="telemetry-stats">
+        <div class="stat-card glass">
+          <p style="color: var(--text-secondary); font-size: 0.85rem;">Overall Status</p>
+          <div class="stat-value">99.94%</div>
+          <span class="stat-change change-up">&#8593; +0.02%</span>
+        </div>
+        <div class="stat-card glass">
+          <p style="color: var(--text-secondary); font-size: 0.85rem;">Active Modules</p>
+          <div class="stat-value">5 / 5</div>
+          <span class="stat-change change-up">&#8594; Optimizing</span>
+        </div>
+        <div class="stat-card glass">
+          <p style="color: var(--text-secondary); font-size: 0.85rem;">Performance Score</p>
+          <div class="stat-value">A+</div>
+          <span class="stat-change change-up">&#8593; Optimal</span>
+        </div>
+        <div class="stat-card glass">
+          <p style="color: var(--text-secondary); font-size: 0.85rem;">Weekly Growth</p>
+          <div class="stat-value">+14.2%</div>
+          <span class="stat-change change-up">&#8593; +2%</span>
+        </div>
+      </section>
+
+      <!-- Section 3: Tabs Control -->
+      <section class="tabs-container" id="tabs-section" style="margin-bottom: 24px;">
+        <div class="tabs">
+          <button class="tab-btn active">Live Dashboard</button>
+          <button class="tab-btn">Analytical Reports</button>
+          <button class="tab-btn">System Settings</button>
+        </div>
+      </section>
+
+      <!-- Section 4: Module Grid (Bento Grid) -->
+      <section class="bento-grid" id="modules-bento">
+        <!-- Bento Card 1: Principal Monitor Graph -->
+        <div class="bento-card bento-large glass" id="monitor-card">
+          <div>
+            <span class="status-badge status-active">Live stream</span>
+            <h3 style="margin-top: 15px;">Campaign overview</h3>
+            <p style="color: var(--text-secondary); font-size: 0.9rem;">Visualizing activity dynamics over time.</p>
+          </div>
+          <div class="chart-container">
+            <svg class="chart-svg" viewBox="0 0 500 200">
+              <defs>
+                <linearGradient id="gradient-fill" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="var(--primary)" stop-opacity="0.3"/>
+                  <stop offset="100%" stop-color="var(--primary)" stop-opacity="0"/>
+                </linearGradient>
+              </defs>
+              <line class="grid-line" x1="0" y1="50" x2="500" y2="50" />
+              <line class="grid-line" x1="0" y1="100" x2="500" y2="100" />
+              <line class="grid-line" x1="0" y1="150" x2="500" y2="150" />
+              <path class="chart-area" d="M 0,200 L 0,150 Q 100,50 200,120 T 400,30 T 500,80 L 500,200 Z" />
+              <path class="chart-line" d="M 0,150 Q 100,50 200,120 T 400,30 T 500,80" />
+            </svg>
+          </div>
+        </div>
+
+        <!-- Bento Card 2: Interactive Metric Meter (Widget) -->
+        <div class="bento-card glass" id="meter-card">
+          <div>
+            <h3 style="margin-bottom: 10px;">Traffic analytics</h3>
+            <p style="color: var(--text-secondary); font-size: 0.9rem;">Completion efficiency index.</p>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 20px 0;">
+            <svg width="120" height="120" viewBox="0 0 100 100">
+              <circle cx="50" cy="50" r="40" stroke="var(--border-glass)" stroke-width="8" fill="none"/>
+              <circle cx="50" cy="50" r="40" stroke="var(--secondary)" stroke-width="8" fill="none"
+                      stroke-dasharray="251" stroke-dashoffset="62" stroke-linecap="round"/>
+              <text x="50" y="55" text-anchor="middle" fill="white" font-size="16" font-weight="700">75%</text>
+            </svg>
+          </div>
+          <div style="font-size: 0.85rem; color: var(--text-secondary); text-align: center;">Optimal progress reported.</div>
+        </div>
+
+        <!-- Bento Card 3: Alert Feeds / Logs (Widget 2) -->
+        <div class="bento-card glass" id="logs-card">
+          <div>
+            <h3 style="margin-bottom: 10px;">Conversion metrics</h3>
+            <p style="color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 15px;">Recent events feed</p>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 10px; height: 160px; overflow-y: auto;">
+            <div style="font-size: 0.8rem; background: rgba(0,0,0,0.2); padding: 8px; border-radius: 6px; border-left: 3px solid var(--success);">
+              <span style="color: var(--text-muted);">[12:15:32]</span> Connection established securely.
+            </div>
+            <div style="font-size: 0.8rem; background: rgba(0,0,0,0.2); padding: 8px; border-radius: 6px; border-left: 3px solid var(--primary);">
+              <span style="color: var(--text-muted);">[12:16:01]</span> Data synchronization completed.
+            </div>
+            <div style="font-size: 0.8rem; background: rgba(0,0,0,0.2); padding: 8px; border-radius: 6px; border-left: 3px solid var(--warning);">
+              <span style="color: var(--text-muted);">[12:17:45]</span> Report generation triggered.
+            </div>
+          </div>
+        </div>
+
+        <!-- Bento Card 4: Platform Modules (Bento Spans remaining modules) -->
+        <div class="bento-card bento-large glass" id="modules-list-card">
+          <div>
+            <h3 style="margin-bottom: 10px;">System Components</h3>
+            <p style="color: var(--text-secondary); font-size: 0.9rem;">Status of required sub-modules</p>
+          </div>
+          <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 20px;">
+            
+              <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-glass); border-radius: 8px;">
+                <span style="font-weight: 500; font-size: 0.9rem;">Campaign overview</span>
+                <span class="status-badge status-active">Active</span>
+              </div>
+            
+              <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-glass); border-radius: 8px;">
+                <span style="font-weight: 500; font-size: 0.9rem;">Traffic analytics</span>
+                <span class="status-badge status-active">Active</span>
+              </div>
+            
+              <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-glass); border-radius: 8px;">
+                <span style="font-weight: 500; font-size: 0.9rem;">Conversion metrics</span>
+                <span class="status-badge status-active">Active</span>
+              </div>
+            
+              <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-glass); border-radius: 8px;">
+                <span style="font-weight: 500; font-size: 0.9rem;">KPI widgets</span>
+                <span class="status-badge status-active">Active</span>
+              </div>
+            
+              <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-glass); border-radius: 8px;">
+                <span style="font-weight: 500; font-size: 0.9rem;">Responsive cards</span>
+                <span class="status-badge status-active">Active</span>
+              </div>
+            
+          </div>
+        </div>
+      </section>
+
+      <!-- Section 5: Dynamic List View (Custom table) -->
+      <section class="table-section glass" style="padding: 24px; margin-bottom: 32px;" id="data-registry">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+          <div>
+            <h3 style="font-size: 1.2rem;">Detailed Logs</h3>
+            <p style="color: var(--text-secondary); font-size: 0.85rem;">Recent operations executed by the system.</p>
+          </div>
+          <button style="padding: 8px 16px; background: var(--primary); border: none; border-radius: 6px; color: white; font-weight: 600; cursor: pointer;">Export CSV</button>
+        </div>
+        <div class="table-wrapper">
+          <table class="custom-table">
+            <thead>
+              <tr>
+                <th>Resource ID</th>
+                <th>Status</th>
+                <th>Timestamp</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>RES-10492</td>
+                <td><span class="status-badge status-active">Processed</span></td>
+                <td>2026-06-20 12:15:32</td>
+                <td style="color: var(--primary); cursor: pointer;">View Details</td>
+              </tr>
+              <tr>
+                <td>RES-10491</td>
+                <td><span class="status-badge status-pending">Queued</span></td>
+                <td>2026-06-20 12:12:05</td>
+                <td style="color: var(--primary); cursor: pointer;">View Details</td>
+              </tr>
+              <tr>
+                <td>RES-10490</td>
+                <td><span class="status-badge status-alert">Failed</span></td>
+                <td>2026-06-20 12:08:44</td>
+                <td style="color: var(--primary); cursor: pointer;">View Details</td>
+              </tr>
+              <tr>
+                <td>RES-10489</td>
+                <td><span class="status-badge status-active">Processed</span></td>
+                <td>2026-06-20 11:55:10</td>
+                <td style="color: var(--primary); cursor: pointer;">View Details</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+    </main>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/submissions/examples/digital-marketing-analytics-center/style.css b/submissions/examples/digital-marketing-analytics-center/style.css
new file mode 100644
index 0000000000..978b4861bd
--- /dev/null
+++ b/submissions/examples/digital-marketing-analytics-center/style.css
@@ -0,0 +1,369 @@
+:root {
+  --bg-dark: #08090f;
+  --bg-card: rgba(17, 18, 30, 0.45);
+  --border-glass: rgba(255, 255, 255, 0.06);
+  --border-active: rgba(255, 255, 255, 0.12);
+  --text-primary: #f8fafc;
+  --text-secondary: #94a3b8;
+  --text-muted: #64748b;
+  --primary: #84cc16;
+  --secondary: #10b981;
+  --accent: #a3e635;
+  --success: #10b981;
+  --warning: #f59e0b;
+  --danger: #ef4444;
+  --primary-glow: rgba(132, 204, 22, 0.15);
+  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--bg-dark);
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  min-height: 100vh;
+  overflow-x: hidden;
+  background-image: 
+    radial-gradient(circle at 10% 20%, var(--primary-glow) 0%, transparent 40%),
+    radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.1), transparent 45%);
+}
+
+/* Glassmorphism Styles */
+.glass {
+  background: var(--bg-card);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--border-glass);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glass:hover {
+  border-color: var(--border-active);
+  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
+  transform: translateY(-2px);
+}
+
+/* Keyframe Animations */
+@keyframes pulseGlow {
+  0%, 100% {
+    opacity: 0.4;
+    box-shadow: 0 0 15px var(--primary-glow);
+  }
+  50% {
+    opacity: 0.8;
+    box-shadow: 0 0 25px rgba(132, 204, 22, 0.4);
+  }
+}
+
+@keyframes gridSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Base Layout Structure */
+.app-container {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  min-height: 100vh;
+}
+
+/* Sidebar Navigation */
+.sidebar {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border-glass);
+  background: rgba(8, 9, 15, 0.8);
+}
+
+.brand {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 36px;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.brand-dot {
+  width: 8px;
+  height: 8px;
+  background-color: var(--primary);
+  border-radius: 50%;
+  animation: pulseGlow 2s infinite;
+}
+
+.nav-links {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: auto;
+}
+
+.nav-link a {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  color: var(--text-secondary);
+  text-decoration: none;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  transition: all 0.2s ease;
+}
+
+.nav-link.active a, .nav-link a:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
+  border-left: 3px solid var(--primary);
+}
+
+/* Main Dashboard Panel */
+.main-content {
+  display: flex;
+  flex-direction: column;
+  padding: 32px;
+  overflow-y: auto;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+}
+
+.user-profile {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px solid var(--primary);
+}
+
+/* Statistics Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px;
+  margin-bottom: 32px;
+}
+
+.stat-card {
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin: 10px 0 5px;
+}
+
+.stat-change {
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.change-up { color: var(--success); }
+.change-down { color: var(--danger); }
+
+/* Bento Module Grid */
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  margin-bottom: 32px;
+}
+
+.bento-large {
+  grid-column: span 2;
+}
+
+.bento-card {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 320px;
+  position: relative;
+}
+
+/* Interactive SVG Charts */
+.chart-container {
+  width: 100%;
+  height: 200px;
+  margin-top: 20px;
+}
+
+.chart-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.grid-line {
+  stroke: rgba(255, 255, 255, 0.05);
+  stroke-dasharray: 4;
+}
+
+.chart-line {
+  fill: none;
+  stroke: var(--primary);
+  stroke-width: 3;
+  stroke-linecap: round;
+  filter: drop-shadow(0px 4px 10px rgba(132, 204, 22, 0.4));
+}
+
+.chart-area {
+  fill: url(#gradient-fill);
+}
+
+/* Custom Table Controls */
+.table-wrapper {
+  overflow-x: auto;
+  margin-top: 16px;
+}
+
+.custom-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+.custom-table th {
+  padding: 16px;
+  border-bottom: 1px solid var(--border-glass);
+  color: var(--text-secondary);
+  font-weight: 600;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+}
+
+.custom-table td {
+  padding: 16px;
+  border-bottom: 1px solid var(--border-glass);
+  font-size: 0.95rem;
+}
+
+.custom-table tr:hover td {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.status-badge {
+  padding: 6px 12px;
+  border-radius: 50px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.status-active { background: rgba(16, 185, 129, 0.1); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.2); }
+.status-pending { background: rgba(245, 158, 11, 0.1); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.2); }
+.status-alert { background: rgba(239, 68, 68, 0.1); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.2); }
+
+/* CSS Tabs */
+.tabs {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.tab-btn {
+  padding: 8px 16px;
+  background: transparent;
+  border: 1px solid var(--border-glass);
+  color: var(--text-secondary);
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.tab-btn.active, .tab-btn:hover {
+  background: var(--primary);
+  color: var(--text-primary);
+  border-color: var(--primary);
+}
+
+/* Modals & Interactivity via Checkbox hack */
+.modal-trigger {
+  display: none;
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(10px);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-trigger:checked + .modal-overlay {
+  display: flex;
+}
+
+.modal-content {
+  width: 90%;
+  max-width: 500px;
+  padding: 32px;
+  position: relative;
+}
+
+.modal-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  cursor: pointer;
+  color: var(--text-secondary);
+}
+
+/* Responsive Adaptation */
+@media (max-width: 1024px) {
+  .app-container {
+    grid-template-columns: 1fr;
+  }
+  
+  .sidebar {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .bento-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .bento-large {
+    grid-column: span 1;
+  }
+}
\ No newline at end of file

Resource ID	Status	Timestamp	Action
RES-10492	Processed	2026-06-20 12:15:32	View Details
RES-10491	Queued	2026-06-20 12:12:05	View Details
RES-10490	Failed	2026-06-20 12:08:44	View Details
RES-10489	Processed	2026-06-20 11:55:10	View Details