Upload 21 files

Dockerfile

@@ -1,7 +1,7 @@
 FROM python:3.11-slim
 
 # ── Install Litestream ──
-ADD https://github.com/benbjohnson/litestream/releases/download/v0.3.13/litestream-v0.3.13-linux-amd64.tar.gz  /tmp/litestream.tar.gz
+ADD https://github.com/benbjohnson/litestream/releases/download/v0.3.13/litestream-v0.3.13-linux-amd64.tar.gz /tmp/litestream.tar.gz
 RUN tar -C /usr/local/bin -xzf /tmp/litestream.tar.gz && rm /tmp/litestream.tar.gz
 
 # ── Install SQLite3 CLI (for integrity checks + manual backup) ──

app/__init__.py

@@ -1 +1 @@
-# SQLite DBaaS - App Package
+# SQLite DBaaS Application Package

app/admin/router.py

@@ -13,8 +13,8 @@ Features:
   - Integrity checks
 
 Source inspiration: 
-  - sqlite-web: https://github.com/coleifer/sqlite-web 
-  - Flask-Admin: https://github.com/flask-admin/flask-admin 
+  - sqlite-web: https://github.com/coleifer/sqlite-web
+  - Flask-Admin: https://github.com/flask-admin/flask-admin
 """
 
 from fastapi import APIRouter, Request, Depends, HTTPException, Form

app/admin/templates/backups.html

@@ -1,82 +1,60 @@
 {% extends "base.html" %}
-
 {% block title %}Backups - SQLite Admin{% endblock %}
-
 {% block content %}
-<div class="page-header">
-    <h1><i class="fas fa-hdd"></i> Backup Management</h1>
-</div>
-
-<!-- Health Status -->
-<div class="card">
-    <div class="card-header">
-        <h3><i class="fas fa-heartbeat"></i> Database Health</h3>
+<div class="backups-page">
+    <div class="page-header">
+        <h1>💾 Backup Management</h1>
+        <a href="/admin/dashboard" class="btn-secondary">← Back to Dashboard</a>
     </div>
-    <div class="card-body">
+    
+    <!-- Health Status -->
+    <div class="card">
+        <h2>Database Status</h2>
         <div class="health-grid">
             <div class="health-item">
-                <span class="health-label">Integrity</span>
-                <span class="health-value {% if health.integrity == 'ok' %}status-success{% else %}status-error{% endif %}">
-                    <i class="fas fa-{% if health.integrity == 'ok' %}check-circle{% else %}times-circle{% endif %}"></i>
+                <span class="label">Integrity</span>
+                <span class="value {% if health.integrity == 'ok' %}success{% else %}error{% endif %}">
                     {{ health.integrity }}
                 </span>
             </div>
             <div class="health-item">
-                <span class="health-label">Size</span>
-                <span class="health-value">{{ health.db_size_mb }} MB</span>
-            </div>
-            <div class="health-item">
-                <span class="health-label">Pages</span>
-                <span class="health-value">{{ health.page_count }}</span>
+                <span class="label">Size</span>
+                <span class="value">{{ health.db_size_mb }} MB</span>
             </div>
         </div>
     </div>
-</div>
-
-<!-- Backup Actions -->
-<div class="card">
-    <div class="card-header">
-        <h3><i class="fas fa-cogs"></i> Create Backup</h3>
-    </div>
-    <div class="card-body">
+    
+    <!-- Create Backup -->
+    <div class="card">
+        <h2>Create Backup</h2>
+        <p class="info-text">
+            Create a backup of your database. Backups are stored locally and can be uploaded to HF Bucket for persistence.
+        </p>
         <div class="backup-actions">
-            <form method="post" action="/admin/backups/create" class="inline-form">
+            <form method="POST" action="/admin/backups/create" style="display:inline;">
                 <input type="hidden" name="backup_type" value="snapshot">
-                <button type="submit" class="btn btn-primary">
-                    <i class="fas fa-camera"></i> Snapshot
-                </button>
+                <button type="submit" class="btn-primary">📸 Create Snapshot</button>
             </form>
-            
-            <form method="post" action="/admin/backups/create" class="inline-form">
+            <form method="POST" action="/admin/backups/create" style="display:inline;">
                 <input type="hidden" name="backup_type" value="compressed">
-                <button type="submit" class="btn btn-primary">
-                    <i class="fas fa-compress"></i> Compressed
-                </button>
+                <button type="submit" class="btn-secondary">🗜️ Compressed Snapshot</button>
             </form>
-            
-            <form method="post" action="/admin/backups/create" class="inline-form">
+            <form method="POST" action="/admin/backups/create" style="display:inline;">
                 <input type="hidden" name="backup_type" value="vacuum">
-                <button type="submit" class="btn btn-primary">
-                    <i class="fas fa-broom"></i> VACUUM
-                </button>
+                <button type="submit" class="btn-secondary">🧹 VACUUM Snapshot</button>
             </form>
-            
-            <form method="post" action="/admin/backups/create" class="inline-form">
+            <form method="POST" action="/admin/backups/create" style="display:inline;">
                 <input type="hidden" name="backup_type" value="hf_upload">
-                <button type="submit" class="btn btn-success">
-                    <i class="fas fa-cloud-upload-alt"></i> Upload to HF
-                </button>
+                <button type="submit" class="btn-primary">☁️ Upload to HF Bucket</button>
             </form>
         </div>
     </div>
-</div>
-
-<!-- Local Snapshots -->
-<div class="card">
-    <div class="card-header">
-        <h3><i class="fas fa-folder-open"></i> Local Snapshots</h3>
-    </div>
-    <div class="card-body">
+    
+    <!-- Local Snapshots -->
+    <div class="card">
+        <h2>📁 Local Snapshots</h2>
+        <p class="info-text">Directory: <code>{{ backups.snapshot_dir }}</code></p>
+        
         {% if backups.local_snapshots %}
         <table class="data-table">
             <thead>
@@ -90,42 +68,36 @@
             <tbody>
                 {% for snapshot in backups.local_snapshots %}
                 <tr>
-                    <td><i class="fas fa-file-archive text-primary"></i> {{ snapshot.name }}</td>
+                    <td class="code">{{ snapshot.name }}</td>
                     <td>{{ snapshot.size_mb }} MB</td>
                     <td>{{ snapshot.modified }}</td>
                     <td>
-                        <a href="/admin/backups/download/{{ snapshot.name }}" class="btn btn-sm btn-primary">
-                            <i class="fas fa-download"></i> Download
-                        </a>
+                        <a href="/admin/backups/download/{{ snapshot.name }}" class="btn-small">⬇️ Download</a>
                     </td>
                 </tr>
                 {% endfor %}
             </tbody>
         </table>
         {% else %}
-        <p class="text-muted">No local snapshots yet. Create one using the buttons above.</p>
+        <p class="empty-state">No local snapshots yet. Create one above!</p>
         {% endif %}
     </div>
-</div>
-
-<!-- Backup Info -->
-<div class="card">
-    <div class="card-header">
-        <h3><i class="fas fa-info-circle"></i> Backup Strategy</h3>
-    </div>
-    <div class="card-body">
-        <div class="backup-strategy">
+    
+    <!-- Backup Strategy Info -->
+    <div class="card">
+        <h2>📚 3-Layer Backup Strategy</h2>
+        <div class="strategy-info">
             <div class="strategy-layer">
-                <h4><span class="layer-badge">1</span> Litestream (Automatic)</h4>
-                <p>Replicates every write to local file replica. Max 1 second data loss. Local only.</p>
+                <h3>Layer 1: Litestream (Automatic)</h3>
+                <p>Real-time replication to local file. Catches every write with max 1 second data loss.</p>
             </div>
             <div class="strategy-layer">
-                <h4><span class="layer-badge">2</span> Python Snapshots (30 min)</h4>
-                <p>Atomic backups using sqlite3.backup(). Compressed with gzip (60-80% smaller).</p>
+                <h3>Layer 2: Python sqlite3.backup()</h3>
+                <p>On-demand atomic snapshots. Consistent backups while DB is in use. Compressed with gzip.</p>
             </div>
             <div class="strategy-layer">
-                <h4><span class="layer-badge">3</span> HF Bucket (30 min)</h4>
-                <p>Uploads to HuggingFace Dataset repo. Survives restarts. 100GB free storage.</p>
+                <h3>Layer 3: HF Bucket Upload</h3>
+                <p>Persistent storage on HuggingFace. 100GB free private storage. Survives container restarts.</p>
             </div>
         </div>
     </div>

app/admin/templates/base.html

@@ -5,33 +5,25 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}SQLite Admin{% endblock %}</title>
     <link rel="stylesheet" href="/static/admin.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body>
-    <div class="admin-container">
-        {% if request.cookies.get('admin_token') %}
-        <nav class="sidebar">
-            <div class="sidebar-header">
-                <i class="fas fa-database"></i>
-                <span>SQLite Admin</span>
-            </div>
-            <ul class="nav-menu">
-                <li><a href="/admin/dashboard" class="{% if request.url.path == '/admin/dashboard' %}active{% endif %}">
-                    <i class="fas fa-tachometer-alt"></i> Dashboard
-                </a></li>
-                <li><a href="/admin/query" class="{% if request.url.path == '/admin/query' %}active{% endif %}">
-                    <i class="fas fa-code"></i> SQL Query
-                </a></li>
-                <li><a href="/admin/backups" class="{% if request.url.path == '/admin/backups' %}active{% endif %}">
-                    <i class="fas fa-hdd"></i> Backups
-                </a></li>
-            </ul>
-        </nav>
-        {% endif %}
-        
-        <main class="main-content">
-            {% block content %}{% endblock %}
-        </main>
-    </div>
+    <nav class="navbar">
+        <div class="nav-brand">
+            <a href="/admin/dashboard">🗄️ SQLite DBaaS</a>
+        </div>
+        <div class="nav-links">
+            <a href="/admin/dashboard">Dashboard</a>
+            <a href="/admin/query">Query</a>
+            <a href="/admin/backups">Backups</a>
+        </div>
+    </nav>
+    
+    <main class="container">
+        {% block content %}{% endblock %}
+    </main>
+    
+    <footer class="footer">
+        <p>SQLite DBaaS — Powered by FastAPI + Litestream + HF Bucket</p>
+    </footer>
 </body>
 </html>

app/admin/templates/dashboard.html

@@ -1,56 +1,46 @@
 {% extends "base.html" %}
-
 {% block title %}Dashboard - SQLite Admin{% endblock %}
-
 {% block content %}
-<div class="page-header">
-    <h1><i class="fas fa-tachometer-alt"></i> Dashboard</h1>
-</div>
-
-<!-- Health Status -->
-<div class="card">
-    <div class="card-header">
-        <h3><i class="fas fa-heartbeat"></i> Database Health</h3>
-    </div>
-    <div class="card-body">
+<div class="dashboard">
+    <h1>📊 Dashboard</h1>
+    
+    <!-- Health Status -->
+    <div class="card">
+        <h2>Database Health</h2>
         <div class="health-grid">
             <div class="health-item">
-                <span class="health-label">Integrity</span>
-                <span class="health-value {% if health.integrity == 'ok' %}status-success{% else %}status-error{% endif %}">
-                    <i class="fas fa-{% if health.integrity == 'ok' %}check-circle{% else %}times-circle{% endif %}"></i>
+                <span class="label">Integrity</span>
+                <span class="value {% if health.integrity == 'ok' %}success{% else %}error{% endif %}">
                     {{ health.integrity }}
                 </span>
             </div>
             <div class="health-item">
-                <span class="health-label">Size</span>
-                <span class="health-value">{{ health.db_size_mb }} MB</span>
+                <span class="label">Journal Mode</span>
+                <span class="value">{{ health.journal_mode }}</span>
             </div>
             <div class="health-item">
-                <span class="health-label">Pages</span>
-                <span class="health-value">{{ health.page_count }}</span>
+                <span class="label">Size</span>
+                <span class="value">{{ health.db_size_mb }} MB</span>
             </div>
             <div class="health-item">
-                <span class="health-label">Journal Mode</span>
-                <span class="health-value">{{ health.journal_mode }}</span>
+                <span class="label">Pages</span>
+                <span class="value">{{ health.page_count }}</span>
             </div>
             <div class="health-item">
-                <span class="health-label">Page Size</span>
-                <span class="health-value">{{ health.page_size }} bytes</span>
+                <span class="label">WAL Pages</span>
+                <span class="value">{{ health.wal_pages }}</span>
             </div>
             <div class="health-item">
-                <span class="health-label">WAL Pages</span>
-                <span class="health-value">{{ health.wal_pages }}</span>
+                <span class="label">DB Path</span>
+                <span class="value code">{{ db_path }}</span>
             </div>
         </div>
     </div>
-</div>
-
-<!-- Tables -->
-<div class="card">
-    <div class="card-header">
-        <h3><i class="fas fa-table"></i> Tables</h3>
-    </div>
-    <div class="card-body">
+    
+    <!-- Tables -->
+    <div class="card">
+        <h2>📋 Tables</h2>
+        {% if tables %}
         <table class="data-table">
             <thead>
                 <tr>
@@ -62,26 +52,23 @@
             <tbody>
                 {% for table in tables %}
                 <tr>
-                    <td><i class="fas fa-table text-primary"></i> {{ table.name }}</td>
+                    <td class="code">{{ table.name }}</td>
                     <td>{{ table.row_count }}</td>
                     <td>
-                        <a href="/admin/table/{{ table.name }}" class="btn btn-sm btn-primary">
-                            <i class="fas fa-eye"></i> View
-                        </a>
+                        <a href="/admin/table/{{ table.name }}" class="btn-small">View</a>
                     </td>
                 </tr>
                 {% endfor %}
             </tbody>
         </table>
+        {% else %}
+        <p class="empty-state">No tables found</p>
+        {% endif %}
     </div>
-</div>
-
-<!-- Recent Backups -->
-<div class="card">
-    <div class="card-header">
-        <h3><i class="fas fa-hdd"></i> Recent Backups</h3>
-    </div>
-    <div class="card-body">
+    
+    <!-- Recent Backups -->
+    <div class="card">
+        <h2>💾 Recent Backups</h2>
         {% if backups %}
         <table class="data-table">
             <thead>
@@ -97,21 +84,20 @@
                 {% for backup in backups %}
                 <tr>
                     <td>{{ backup.backup_type }}</td>
-                    <td class="truncate">{{ backup.file_path }}</td>
-                    <td>{{ (backup.file_size / 1024 / 1024) | round(2) }} MB</td>
-                    <td>
-                        <span class="badge {% if backup.status == 'success' %}badge-success{% else %}badge-error{% endif %}">
-                            {{ backup.status }}
-                        </span>
-                    </td>
+                    <td class="code">{{ backup.file_path|truncate(40) if backup.file_path else '-' }}</td>
+                    <td>{{ backup.file_size|default(0) }} bytes</td>
+                    <td class="status-{{ backup.status }}">{{ backup.status }}</td>
                     <td>{{ backup.created_at }}</td>
                 </tr>
                 {% endfor %}
             </tbody>
         </table>
         {% else %}
-        <p class="text-muted">No backups yet. <a href="/admin/backups">Create one</a>.</p>
+        <p class="empty-state">No backups yet</p>
         {% endif %}
+        <div class="card-actions">
+            <a href="/admin/backups" class="btn-secondary">Manage Backups</a>
+        </div>
     </div>
 </div>
 {% endblock %}

app/admin/templates/login.html

@@ -1,29 +1,24 @@
 {% extends "base.html" %}
-
 {% block title %}Login - SQLite Admin{% endblock %}
-
 {% block content %}
 <div class="login-container">
-    <div class="login-box">
-        <div class="login-header">
-            <i class="fas fa-lock"></i>
-            <h2>Admin Login</h2>
-        </div>
+    <div class="login-card">
+        <h1>🔐 Admin Login</h1>
+        <p class="login-subtitle">SQLite DBaaS Admin Console</p>
         
         {% if error %}
-        <div class="alert alert-error">
-            <i class="fas fa-exclamation-circle"></i> {{ error }}
+        <div class="error-message">
+            {{ error }}
         </div>
         {% endif %}
         
-        <form method="post" action="/admin/login">
+        <form method="POST" action="/admin/login">
             <div class="form-group">
                 <label for="password">Password</label>
-                <input type="password" id="password" name="password" required autofocus>
+                <input type="password" id="password" name="password" 
+                       placeholder="Enter admin password" required autofocus>
             </div>
-            <button type="submit" class="btn btn-primary btn-block">
-                <i class="fas fa-sign-in-alt"></i> Login
-            </button>
+            <button type="submit" class="btn-primary">Login</button>
         </form>
     </div>
 </div>

app/admin/templates/query.html

@@ -1,41 +1,35 @@
 {% extends "base.html" %}
-
-{% block title %}SQL Query - SQLite Admin{% endblock %}
-
+{% block title %}Query - SQLite Admin{% endblock %}
 {% block content %}
-<div class="page-header">
-    <h1><i class="fas fa-code"></i> SQL Query</h1>
-</div>
-
-<div class="card">
-    <div class="card-header">
-        <h3><i class="fas fa-terminal"></i> Query Editor</h3>
+<div class="query-page">
+    <div class="page-header">
+        <h1>🔍 SQL Query</h1>
+        <a href="/admin/dashboard" class="btn-secondary">← Back to Dashboard</a>
     </div>
-    <div class="card-body">
-        <form method="post" action="/admin/query">
+    
+    <div class="card">
+        <form method="POST" action="/admin/query">
             <div class="form-group">
-                <textarea name="sql" class="sql-editor" rows="8" placeholder="Enter SQL query...">{{ sql }}</textarea>
+                <label for="sql">SQL Query</label>
+                <textarea id="sql" name="sql" rows="6" 
+                          placeholder="SELECT * FROM users LIMIT 10;">{{ sql }}</textarea>
             </div>
-            <button type="submit" class="btn btn-primary">
-                <i class="fas fa-play"></i> Run Query
-            </button>
+            <button type="submit" class="btn-primary">Run Query</button>
         </form>
     </div>
-</div>
-
-{% if error %}
-<div class="alert alert-error">
-    <i class="fas fa-exclamation-circle"></i> {{ error }}
-</div>
-{% endif %}
-
-{% if results %}
-<div class="card">
-    <div class="card-header">
-        <h3><i class="fas fa-list"></i> Results ({{ results | length }} rows)</h3>
+    
+    {% if error %}
+    <div class="card error-card">
+        <h2>❌ Error</h2>
+        <pre class="error-text">{{ error }}</pre>
     </div>
-    <div class="card-body">
-        <div class="table-responsive">
+    {% endif %}
+    
+    {% if results %}
+    <div class="card">
+        <h2>✅ Results ({{ results|length }} rows)</h2>
+        {% if results|length > 0 %}
+        <div class="table-scroll">
             <table class="data-table">
                 <thead>
                     <tr>
@@ -48,21 +42,40 @@
                     {% for row in results %}
                     <tr>
                         {% for col in columns %}
-                        <td>
-                            {% set value = row[col] %}
-                            {% if value is none %}
-                            <span class="text-muted">NULL</span>
-                            {% else %}
-                            {{ value }}
-                            {% endif %}
-                        </td>
+                        <td class="code">{{ row[col]|truncate(100) if row[col] != None else '<span class="null">NULL</span>' }}</td>
                         {% endfor %}
                     </tr>
                     {% endfor %}
                 </tbody>
             </table>
         </div>
+        {% else %}
+        <p class="empty-state">No results</p>
+        {% endif %}
+    </div>
+    {% endif %}
+    
+    <!-- Quick Queries -->
+    <div class="card">
+        <h2>⚡ Quick Queries</h2>
+        <div class="quick-queries">
+            <form method="POST" action="/admin/query" style="display:inline;">
+                <input type="hidden" name="sql" value="SELECT name FROM sqlite_master WHERE type='table';">
+                <button type="submit" class="btn-small">List Tables</button>
+            </form>
+            <form method="POST" action="/admin/query" style="display:inline;">
+                <input type="hidden" name="sql" value="PRAGMA integrity_check;">
+                <button type="submit" class="btn-small">Integrity Check</button>
+            </form>
+            <form method="POST" action="/admin/query" style="display:inline;">
+                <input type="hidden" name="sql" value="SELECT * FROM backup_log ORDER BY created_at DESC LIMIT 10;">
+                <button type="submit" class="btn-small">Recent Backups</button>
+            </form>
+            <form method="POST" action="/admin/query" style="display:inline;">
+                <input type="hidden" name="sql" value="PRAGMA journal_mode;">
+                <button type="submit" class="btn-small">Journal Mode</button>
+            </form>
+        </div>
     </div>
 </div>
-{% endif %}
 {% endblock %}

app/admin/templates/table_view.html

@@ -1,21 +1,15 @@
 {% extends "base.html" %}
-
 {% block title %}{{ table_name }} - SQLite Admin{% endblock %}
-
 {% block content %}
-<div class="page-header">
-    <h1><i class="fas fa-table"></i> {{ table_name }}</h1>
-    <a href="/admin/dashboard" class="btn btn-secondary">
-        <i class="fas fa-arrow-left"></i> Back
-    </a>
-</div>
-
-<!-- Table Structure -->
-<div class="card">
-    <div class="card-header">
-        <h3><i class="fas fa-columns"></i> Structure</h3>
+<div class="table-view">
+    <div class="page-header">
+        <h1>📋 Table: {{ table_name }}</h1>
+        <a href="/admin/dashboard" class="btn-secondary">← Back to Dashboard</a>
     </div>
-    <div class="card-body">
+    
+    <!-- Columns Info -->
+    <div class="card">
+        <h2>Columns</h2>
         <table class="data-table">
             <thead>
                 <tr>
@@ -31,57 +25,49 @@
                 {% for col in columns %}
                 <tr>
                     <td>{{ col.cid }}</td>
-                    <td><code>{{ col.name }}</code></td>
+                    <td class="code">{{ col.name }}</td>
                     <td>{{ col.type }}</td>
-                    <td>{% if col.notnull %}<i class="fas fa-check text-success"></i>{% endif %}</td>
-                    <td>{{ col.dflt_value or '-' }}</td>
-                    <td>{% if col.pk %}<i class="fas fa-key text-primary"></i>{% endif %}</td>
+                    <td>{{ col.notnull }}</td>
+                    <td class="code">{{ col.dflt_value or '-' }}</td>
+                    <td>{{ col.pk }}</td>
                 </tr>
                 {% endfor %}
             </tbody>
         </table>
     </div>
-</div>
-
-<!-- Indexes -->
-{% if indexes %}
-<div class="card">
-    <div class="card-header">
-        <h3><i class="fas fa-list-ol"></i> Indexes</h3>
-    </div>
-    <div class="card-body">
+    
+    <!-- Indexes -->
+    {% if indexes %}
+    <div class="card">
+        <h2>Indexes</h2>
         <table class="data-table">
             <thead>
                 <tr>
+                    <th>Sequence</th>
                     <th>Name</th>
                     <th>Unique</th>
                     <th>Origin</th>
-                    <th>Partial</th>
                 </tr>
             </thead>
             <tbody>
                 {% for idx in indexes %}
                 <tr>
-                    <td><code>{{ idx.name }}</code></td>
-                    <td>{% if idx.unique %}<i class="fas fa-check text-success"></i>{% endif %}</td>
+                    <td>{{ idx.seq }}</td>
+                    <td class="code">{{ idx.name }}</td>
+                    <td>{{ idx.unique }}</td>
                     <td>{{ idx.origin }}</td>
-                    <td>{% if idx.partial %}<i class="fas fa-check text-success"></i>{% endif %}</td>
                 </tr>
                 {% endfor %}
             </tbody>
         </table>
     </div>
-</div>
-{% endif %}
-
-<!-- Data -->
-<div class="card">
-    <div class="card-header">
-        <h3><i class="fas fa-database"></i> Data ({{ total }} rows)</h3>
-    </div>
-    <div class="card-body">
+    {% endif %}
+    
+    <!-- Data -->
+    <div class="card">
+        <h2>Data ({{ total }} rows)</h2>
         {% if rows %}
-        <div class="table-responsive">
+        <div class="table-scroll">
             <table class="data-table">
                 <thead>
                     <tr>
@@ -94,14 +80,7 @@
                     {% for row in rows %}
                     <tr>
                         {% for col in columns %}
-                        <td>
-                            {% set value = row[col.name] %}
-                            {% if value is none %}
-                            <span class="text-muted">NULL</span>
-                            {% else %}
-                            <span class="truncate" title="{{ value }}">{{ value }}</span>
-                            {% endif %}
-                        </td>
+                        <td class="code">{{ row[col.name]|truncate(100) if row[col.name] else '<span class="null">NULL</span>' }}</td>
                         {% endfor %}
                     </tr>
                     {% endfor %}
@@ -112,23 +91,17 @@
         <!-- Pagination -->
         {% if total_pages > 1 %}
         <div class="pagination">
+            <span>Page {{ page }} of {{ total_pages }}</span>
             {% if page > 1 %}
-            <a href="/admin/table/{{ table_name }}?page={{ page - 1 }}" class="btn btn-sm btn-secondary">
-                <i class="fas fa-chevron-left"></i> Previous
-            </a>
+            <a href="?page={{ page - 1 }}" class="btn-small">← Prev</a>
             {% endif %}
-            
-            <span class="page-info">Page {{ page }} of {{ total_pages }}</span>
-            
             {% if page < total_pages %}
-            <a href="/admin/table/{{ table_name }}?page={{ page + 1 }}" class="btn btn-sm btn-secondary">
-                Next <i class="fas fa-chevron-right"></i>
-            </a>
+            <a href="?page={{ page + 1 }}" class="btn-small">Next →</a>
             {% endif %}
         </div>
         {% endif %}
         {% else %}
-        <p class="text-muted">No data in this table.</p>
+        <p class="empty-state">No data in this table</p>
         {% endif %}
     </div>
 </div>

app/api/routes.py

@@ -1,36 +1,25 @@
 """
 API Routes — Your Application Endpoints
 ────────────────────────────────────────
-These are the actual API endpoints for your application.
+This is where your actual API endpoints go.
 The admin panel is separate at /admin/*
 """
 
 from fastapi import APIRouter, HTTPException
 from pydantic import BaseModel
-from typing import List, Optional
+from typing import Optional
 import uuid
-from datetime import datetime
-
 from app.database import get_db
 
 router = APIRouter(prefix="/api", tags=["api"])
 
 
-# ═══════════════════════════════════════════════════════
-#  Pydantic Models
-# ═══════════════════════════════════════════════════════
-
+# ── Models ──
 class UserCreate(BaseModel):
     email: str
     name: Optional[str] = None
     avatar_url: Optional[str] = None
 
-class UserResponse(BaseModel):
-    id: str
-    email: str
-    name: Optional[str]
-    avatar_url: Optional[str]
-    created_at: str
 
 class ProjectCreate(BaseModel):
     user_id: str
@@ -38,13 +27,6 @@ class ProjectCreate(BaseModel):
     description: Optional[str] = None
     design_tokens: Optional[dict] = None
 
-class ProjectResponse(BaseModel):
-    id: str
-    user_id: str
-    name: str
-    description: Optional[str]
-    status: str
-    created_at: str
 
 class ColorPaletteCreate(BaseModel):
     project_id: str
@@ -53,41 +35,31 @@ class ColorPaletteCreate(BaseModel):
     mood: Optional[str] = None
 
 
-# ═══════════════════════════════════════════════════════
-#  User Endpoints
-# ═══════════════════════════════════════════════════════
-
-@router.post("/users", response_model=UserResponse)
+# ── Users ──
+@router.post("/users")
 async def create_user(user: UserCreate):
-    """Create a new user."""
     conn = get_db()
-    user_id = str(uuid.uuid4())[:8]
-    
+    user_id = str(uuid.uuid4())
     try:
         conn.execute(
-            """INSERT INTO users (id, email, name, avatar_url) 
-               VALUES (?, ?, ?, ?)""",
+            "INSERT INTO users (id, email, name, avatar_url) VALUES (?, ?, ?, ?)",
             (user_id, user.email, user.name, user.avatar_url)
         )
         conn.commit()
-        
-        row = conn.execute(
-            "SELECT * FROM users WHERE id = ?", (user_id,)
-        ).fetchone()
-        return dict(row)
+        return {"id": user_id, "email": user.email}
     except Exception as e:
         raise HTTPException(status_code=400, detail=str(e))
 
-@router.get("/users", response_model=List[UserResponse])
+
+@router.get("/users")
 async def list_users():
-    """List all users."""
     conn = get_db()
     rows = conn.execute("SELECT * FROM users ORDER BY created_at DESC").fetchall()
     return [dict(r) for r in rows]
 
-@router.get("/users/{user_id}", response_model=UserResponse)
+
+@router.get("/users/{user_id}")
 async def get_user(user_id: str):
-    """Get a specific user."""
     conn = get_db()
     row = conn.execute("SELECT * FROM users WHERE id = ?", (user_id,)).fetchone()
     if not row:
@@ -95,108 +67,69 @@ async def get_user(user_id: str):
     return dict(row)
 
 
-# ═══════════════════════════════════════════════════════
-#  Project Endpoints
-# ═══════════════════════════════════════════════════════
-
-@router.post("/projects", response_model=ProjectResponse)
+# ── Projects ──
+@router.post("/projects")
 async def create_project(project: ProjectCreate):
-    """Create a new project."""
     conn = get_db()
-    project_id = str(uuid.uuid4())[:8]
-    
-    import json
-    design_tokens_json = json.dumps(project.design_tokens) if project.design_tokens else None
-    
-    conn.execute(
-        """INSERT INTO projects (id, user_id, name, description, design_tokens) 
-           VALUES (?, ?, ?, ?, ?)""",
-        (project_id, project.user_id, project.name, project.description, design_tokens_json)
-    )
-    conn.commit()
-    
-    row = conn.execute("SELECT * FROM projects WHERE id = ?", (project_id,)).fetchone()
-    return dict(row)
+    project_id = str(uuid.uuid4())
+    try:
+        conn.execute(
+            "INSERT INTO projects (id, user_id, name, description, design_tokens) VALUES (?, ?, ?, ?, ?)",
+            (project_id, project.user_id, project.name, project.description, str(project.design_tokens))
+        )
+        conn.commit()
+        return {"id": project_id, "name": project.name}
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
 
 @router.get("/projects")
 async def list_projects(user_id: Optional[str] = None):
-    """List projects, optionally filtered by user_id."""
     conn = get_db()
     if user_id:
-        rows = conn.execute(
-            "SELECT * FROM projects WHERE user_id = ? ORDER BY created_at DESC",
-            (user_id,)
-        ).fetchall()
+        rows = conn.execute("SELECT * FROM projects WHERE user_id = ? ORDER BY created_at DESC", (user_id,)).fetchall()
     else:
         rows = conn.execute("SELECT * FROM projects ORDER BY created_at DESC").fetchall()
     return [dict(r) for r in rows]
 
+
 @router.get("/projects/{project_id}")
 async def get_project(project_id: str):
-    """Get a specific project with its palettes and assets."""
     conn = get_db()
-    
-    project = conn.execute(
-        "SELECT * FROM projects WHERE id = ?", (project_id,)
-    ).fetchone()
-    if not project:
+    row = conn.execute("SELECT * FROM projects WHERE id = ?", (project_id,)).fetchone()
+    if not row:
         raise HTTPException(status_code=404, detail="Project not found")
-    
-    palettes = conn.execute(
-        "SELECT * FROM color_palettes WHERE project_id = ?", (project_id,)
-    ).fetchall()
-    
-    assets = conn.execute(
-        "SELECT * FROM design_assets WHERE project_id = ?", (project_id,)
-    ).fetchall()
-    
-    return {
-        "project": dict(project),
-        "palettes": [dict(p) for p in palettes],
-        "assets": [dict(a) for a in assets]
-    }
-
-
-# ═══════════════════════════════════════════════════════
-#  Color Palette Endpoints
-# ═══════════════════════════════════════════════════════
+    return dict(row)
+
 
+# ── Color Palettes ──
 @router.post("/palettes")
 async def create_palette(palette: ColorPaletteCreate):
-    """Create a new color palette."""
     conn = get_db()
-    palette_id = str(uuid.uuid4())[:8]
-    
-    import json
-    colors_json = json.dumps(palette.colors)
-    
-    conn.execute(
-        """INSERT INTO color_palettes (id, project_id, name, colors, mood) 
-           VALUES (?, ?, ?, ?, ?)""",
-        (palette_id, palette.project_id, palette.name, colors_json, palette.mood)
-    )
-    conn.commit()
-    
-    row = conn.execute("SELECT * FROM color_palettes WHERE id = ?", (palette_id,)).fetchone()
-    return dict(row)
+    palette_id = str(uuid.uuid4())
+    try:
+        conn.execute(
+            "INSERT INTO color_palettes (id, project_id, name, colors, mood) VALUES (?, ?, ?, ?, ?)",
+            (palette_id, palette.project_id, palette.name, str(palette.colors), palette.mood)
+        )
+        conn.commit()
+        return {"id": palette_id, "name": palette.name}
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
 
-@router.get("/palettes/{project_id}")
-async def list_palettes(project_id: str):
-    """List all palettes for a project."""
+@router.get("/palettes")
+async def list_palettes(project_id: Optional[str] = None):
     conn = get_db()
-    rows = conn.execute(
-        "SELECT * FROM color_palettes WHERE project_id = ? ORDER BY created_at DESC",
-        (project_id,)
-    ).fetchall()
+    if project_id:
+        rows = conn.execute("SELECT * FROM color_palettes WHERE project_id = ? ORDER BY created_at DESC", (project_id,)).fetchall()
+    else:
+        rows = conn.execute("SELECT * FROM color_palettes ORDER BY created_at DESC").fetchall()
     return [dict(r) for r in rows]
 
 
-# ═══════════════════════════════════════════════════════
-#  Health & Status
-# ═══════════════════════════════════════════════════════
-
+# ── Health Check ──
 @router.get("/health")
 async def health_check():
-    """API health check."""
     from app.database import integrity_check
     return integrity_check()

app/backup.py

@@ -6,11 +6,11 @@ Layer 2: Python sqlite3.backup() → snapshot to /tmp (on-demand + scheduled)
 Layer 3: Upload snapshot to HF Bucket (persistent, survives restarts)
 
 Sources:
-  - Python backup API: https://docs.python.org/3/library/sqlite3.html#sqlite3.Connection.backup 
-  - SQLite Backup API:  https://sqlite.org/backup.html 
-  - Litestream:         https://litestream.io/how-it-works/ 
-  - HF Hub API:         https://huggingface.co/docs/huggingface_hub 
-  - SQLite VACUUM INTO: https://www.sqlite.org/lang_vacuum.html 
+  - Python backup API: https://docs.python.org/3/library/sqlite3.html#sqlite3.Connection.backup
+  - SQLite Backup API:  https://sqlite.org/backup.html
+  - Litestream:         https://litestream.io/how-it-works/
+  - HF Hub API:         https://huggingface.co/docs/huggingface_hub
+  - SQLite VACUUM INTO: https://www.sqlite.org/lang_vacuum.html
 """
 
 import sqlite3
@@ -47,7 +47,7 @@ def create_snapshot(label: str = "manual") -> dict:
     This uses SQLite's Online Backup API under the hood — it's safe to call
     while the database is being written to. The backup is atomic and consistent.
     
-    Source: https://docs.python.org/3/library/sqlite3.html#sqlite3.Connection.backup 
+    Source: https://docs.python.org/3/library/sqlite3.html#sqlite3.Connection.backup
     """
     if not os.path.exists(DB_PATH):
         return {"status": "error", "message": "Database not found"}
@@ -92,7 +92,7 @@ def create_compressed_snapshot() -> dict:
     Create a gzip-compressed snapshot.
     SQLite databases compress very well (often 60-80% reduction).
     
-    Source: https://litestream.io/alternatives/cron/ 
+    Source: https://litestream.io/alternatives/cron/
     """
     result = create_snapshot(label="compressed")
     if result["status"] != "success":
@@ -126,7 +126,7 @@ def create_vacuum_snapshot() -> dict:
     This creates a snapshot from a single transaction — best for high-write scenarios.
     Also removes any free pages, giving you the smallest possible backup.
     
-    Source: https://sqlite.org/lang_vacuum.html 
+    Source: https://sqlite.org/lang_vacuum.html
     """
     if not os.path.exists(DB_PATH):
         return {"status": "error", "message": "Database not found"}
@@ -164,7 +164,7 @@ def upload_to_hf_bucket(local_path: str = None) -> dict:
     
     If no local_path given, creates a fresh compressed snapshot first.
     
-    Source: https://huggingface.co/docs/huggingface_hub/guides/upload 
+    Source: https://huggingface.co/docs/huggingface_hub/guides/upload
     """
     if not HF_TOKEN or not HF_BUCKET_REPO:
         return {"status": "error", "message": "HF_TOKEN or HF_BUCKET_REPO not set"}
@@ -215,7 +215,7 @@ def restore_from_hf_bucket() -> dict:
     Restore database from HF Bucket.
     Called on startup by entrypoint.sh if local DB doesn't exist.
     
-    Source: https://huggingface.co/docs/huggingface_hub/guides/download 
+    Source: https://huggingface.co/docs/huggingface_hub/guides/download
     """
     if not HF_TOKEN or not HF_BUCKET_REPO:
         logger.warning("⚠️ HF credentials not set, skipping restore")

app/database.py

@@ -4,10 +4,10 @@ SQLite Database Module
 Handles connection, initialization, and health checks.
 
 Sources:
-  - Python sqlite3 docs: https://docs.python.org/3/library/sqlite3.html 
-  - Litestream tips: https://litestream.io/tips/ 
-  - SQLite WAL mode: https://www.sqlite.org/wal.html 
-  - SQLite PRAGMA: https://www.sqlite.org/pragma.html 
+  - Python sqlite3 docs: https://docs.python.org/3/library/sqlite3.html
+  - Litestream tips: https://litestream.io/tips/
+  - SQLite WAL mode: https://www.sqlite.org/wal.html
+  - SQLite PRAGMA: https://www.sqlite.org/pragma.html
 """
 
 import sqlite3
@@ -153,7 +153,7 @@ def integrity_check() -> dict:
     Run SQLite integrity check.
     Returns health status of the database.
     
-    Source: https://www.sqlite.org/pragma.html#pragma_integrity_check 
+    Source: https://www.sqlite.org/pragma.html#pragma_integrity_check
     """
     conn = get_db()
     result = conn.execute("PRAGMA integrity_check").fetchone()

app/main.py

@@ -4,8 +4,7 @@ Main FastAPI Application
 Ties everything together: API + Admin + MCP + Backup scheduler
 
 Sources:
-  - FastAPI:     https://fastapi.tiangolo.com/ 
-  - FastAPI-MCP: https://github.com/tadata-org/fastapi_mcp 
+  - FastAPI:     https://fastapi.tiangolo.com/
 """
 
 from fastapi import FastAPI
@@ -46,8 +45,8 @@ async def lifespan(app: FastAPI):
 
 
 app = FastAPI(
-    title="SQLite DBaaS",
-    description="SQLite + Litestream + HF Bucket powered Database-as-a-Service",
+    title="SQLite DBaaS - Admin Console",
+    description="SQLite + Litestream + HF Bucket powered database service",
     version="1.0.0",
     lifespan=lifespan,
 )
@@ -59,16 +58,12 @@ app.include_router(api_router)
 # ── Mount static files ──
 app.mount("/static", StaticFiles(directory="static"), name="static")
 
-# ── MCP Layer ──
-# Uncomment when ready:
-# from fastapi_mcp import FastApiMCP
-# mcp = FastApiMCP(app)
-# mcp.mount()
 
 @app.get("/")
 async def root():
     return {
         "status": "running",
+        "service": "SQLite DBaaS",
         "admin": "/admin/login",
         "docs": "/docs",
         "health": "/admin/api/health",

app/mcp/__init__.py

@@ -0,0 +1 @@
+# MCP Tools Package

app/mcp/tools.py

@@ -0,0 +1,36 @@
+"""
+MCP Tools — AI Integration Layer
+─────────────────────────────────
+Tools for AI assistants to interact with the database.
+"""
+
+from app.database import get_db
+
+def get_all_tables() -> list:
+    """Get all table names in the database."""
+    conn = get_db()
+    tables = conn.execute(
+        "SELECT name FROM sqlite_master WHERE type='table'"
+    ).fetchall()
+    return [t[0] for t in tables]
+
+
+def get_table_schema(table_name: str) -> list:
+    """Get the schema for a specific table."""
+    conn = get_db()
+    columns = conn.execute(f"PRAGMA table_info([{table_name}])").fetchall()
+    return [dict(c) for c in columns]
+
+
+def execute_safe_query(sql: str) -> list:
+    """
+    Execute a SELECT query safely.
+    Only allows SELECT and PRAGMA statements.
+    """
+    sql_upper = sql.strip().upper()
+    if not (sql_upper.startswith("SELECT") or sql_upper.startswith("PRAGMA")):
+        raise ValueError("Only SELECT and PRAGMA queries are allowed")
+    
+    conn = get_db()
+    rows = conn.execute(sql).fetchall()
+    return [dict(r) for r in rows]

requirements.txt

@@ -3,5 +3,4 @@ uvicorn==0.30.0
 jinja2==3.1.4
 python-multipart==0.0.9
 huggingface-hub==0.25.0
-fastapi-mcp==0.1.0
 aiofiles==24.1.0

static/admin.css

@@ -1,19 +1,21 @@
-/* SQLite Admin Panel Styles */
+/* ═══════════════════════════════════════════
+   SQLite DBaaS Admin Panel Styles
+   ═══════════════════════════════════════════ */
 
 :root {
-    --primary: #6366f1;
-    --primary-dark: #4f46e5;
-    --secondary: #64748b;
-    --success: #22c55e;
+    --primary: #10b981;
+    --primary-dark: #059669;
+    --secondary: #6b7280;
+    --background: #0f172a;
+    --surface: #1e293b;
+    --surface-light: #334155;
+    --text: #f8fafc;
+    --text-muted: #94a3b8;
     --error: #ef4444;
+    --success: #22c55e;
     --warning: #f59e0b;
-    --bg: #f8fafc;
-    --card-bg: #ffffff;
-    --text: #1e293b;
-    --text-muted: #64748b;
-    --border: #e2e8f0;
-    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
+    --border: #475569;
+    --code-bg: #0f172a;
 }
 
 * {
@@ -24,156 +26,188 @@
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    background: var(--bg);
+    background: var(--background);
     color: var(--text);
-    line-height: 1.6;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
-/* Layout */
-.admin-container {
+/* ═══════════════════════════════════════════
+   Navigation
+   ═══════════════════════════════════════════ */
+
+.navbar {
+    background: var(--surface);
+    padding: 1rem 2rem;
     display: flex;
-    min-height: 100vh;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--border);
+}
+
+.nav-brand a {
+    color: var(--primary);
+    text-decoration: none;
+    font-size: 1.25rem;
+    font-weight: 700;
+}
+
+.nav-links a {
+    color: var(--text-muted);
+    text-decoration: none;
+    margin-left: 1.5rem;
+    transition: color 0.2s;
 }
 
-.sidebar {
-    width: 260px;
-    background: var(--card-bg);
-    border-right: 1px solid var(--border);
-    position: fixed;
-    height: 100vh;
-    overflow-y: auto;
+.nav-links a:hover {
+    color: var(--primary);
+}
+
+/* ═══════════════════════════════════════════
+   Container
+   ═══════════════════════════════════════════ */
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
+    flex: 1;
 }
 
-.sidebar-header {
+/* ═══════════════════════════════════════════
+   Cards
+   ═══════════════════════════════════════════ */
+
+.card {
+    background: var(--surface);
+    border-radius: 12px;
     padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--border);
+}
+
+.card h2 {
+    font-size: 1.1rem;
+    color: var(--text);
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
     border-bottom: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: var(--primary);
 }
 
-.nav-menu {
-    list-style: none;
-    padding: 1rem 0;
+.card-actions {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border);
 }
 
-.nav-menu a {
+/* ═══════════════════════════════════════════
+   Page Header
+   ═══════════════════════════════════════════ */
+
+.page-header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    gap: 0.75rem;
-    padding: 0.875rem 1.5rem;
-    color: var(--text);
-    text-decoration: none;
-    transition: all 0.2s;
+    margin-bottom: 1.5rem;
 }
 
-.nav-menu a:hover,
-.nav-menu a.active {
-    background: rgba(99, 102, 241, 0.1);
-    color: var(--primary);
+.page-header h1 {
+    font-size: 1.5rem;
 }
 
-.main-content {
-    flex: 1;
-    margin-left: 260px;
-    padding: 2rem;
-    max-width: calc(100% - 260px);
+/* ═══════════════════════════════════════════
+   Health Grid
+   ═══════════════════════════════════════════ */
+
+.health-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
 }
 
-/* Login */
-.login-container {
+.health-item {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+    flex-direction: column;
+    gap: 0.25rem;
 }
 
-.login-box {
-    background: var(--card-bg);
-    padding: 2.5rem;
-    border-radius: 12px;
-    box-shadow: var(--shadow-lg);
-    width: 100%;
-    max-width: 400px;
+.health-item .label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }
 
-.login-header {
-    text-align: center;
-    margin-bottom: 2rem;
+.health-item .value {
+    font-size: 1rem;
+    font-weight: 600;
 }
 
-.login-header i {
-    font-size: 3rem;
-    color: var(--primary);
-    margin-bottom: 1rem;
+.health-item .value.success {
+    color: var(--success);
 }
 
-.login-header h2 {
-    font-size: 1.5rem;
-    color: var(--text);
+.health-item .value.error {
+    color: var(--error);
 }
 
-/* Cards */
-.card {
-    background: var(--card-bg);
-    border-radius: 8px;
-    box-shadow: var(--shadow);
-    margin-bottom: 1.5rem;
-    overflow: hidden;
+/* ═══════════════════════════════════════════
+   Tables
+   ═══════════════════════════════════════════ */
+
+.table-scroll {
+    overflow-x: auto;
 }
 
-.card-header {
-    padding: 1.25rem 1.5rem;
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.data-table th,
+.data-table td {
+    padding: 0.75rem 1rem;
+    text-align: left;
     border-bottom: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
 }
 
-.card-header h3 {
-    font-size: 1.125rem;
+.data-table th {
+    background: var(--surface-light);
     font-weight: 600;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-muted);
 }
 
-.card-body {
-    padding: 1.5rem;
+.data-table tr:hover {
+    background: var(--surface-light);
 }
 
-/* Page Header */
-.page-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2rem;
+.data-table .code {
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+    font-size: 0.85rem;
 }
 
-.page-header h1 {
-    font-size: 1.875rem;
-    font-weight: 700;
+.null {
+    color: var(--text-muted);
+    font-style: italic;
 }
 
-/* Buttons */
-.btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.625rem 1.25rem;
-    border-radius: 6px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    text-decoration: none;
-    border: none;
-    cursor: pointer;
-    transition: all 0.2s;
-}
+/* ═══════════════════════════════════════════
+   Buttons
+   ═══════════════════════════════════════════ */
 
 .btn-primary {
     background: var(--primary);
     color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: background 0.2s;
 }
 
 .btn-primary:hover {
@@ -181,125 +215,127 @@ body {
 }
 
 .btn-secondary {
-    background: var(--secondary);
-    color: white;
+    background: var(--surface-light);
+    color: var(--text);
+    border: 1px solid var(--border);
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 500;
+    text-decoration: none;
+    display: inline-block;
+    transition: background 0.2s;
 }
 
 .btn-secondary:hover {
-    background: #475569;
+    background: var(--surface);
 }
 
-.btn-success {
-    background: var(--success);
-    color: white;
-}
-
-.btn-success:hover {
-    background: #16a34a;
-}
-
-.btn-sm {
-    padding: 0.375rem 0.75rem;
-    font-size: 0.75rem;
+.btn-small {
+    background: var(--surface-light);
+    color: var(--text);
+    border: 1px solid var(--border);
+    padding: 0.4rem 0.75rem;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    text-decoration: none;
+    display: inline-block;
 }
 
-.btn-block {
-    width: 100%;
-    justify-content: center;
-}
+/* ═══════════════════════════════════════════
+   Forms
+   ═══════════════════════════════════════════ */
 
-/* Forms */
 .form-group {
-    margin-bottom: 1.25rem;
+    margin-bottom: 1rem;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 500;
-    font-size: 0.875rem;
+    color: var(--text-muted);
 }
 
 .form-group input,
-.form-group textarea,
-.sql-editor {
+.form-group textarea {
     width: 100%;
     padding: 0.75rem 1rem;
+    background: var(--background);
     border: 1px solid var(--border);
-    border-radius: 6px;
-    font-size: 0.875rem;
+    border-radius: 8px;
+    color: var(--text);
+    font-size: 1rem;
     font-family: inherit;
-    transition: border-color 0.2s;
 }
 
 .form-group input:focus,
-.form-group textarea:focus,
-.sql-editor:focus {
+.form-group textarea:focus {
     outline: none;
     border-color: var(--primary);
 }
 
-.sql-editor {
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    resize: vertical;
-    min-height: 120px;
+.form-group textarea {
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
 }
 
-/* Tables */
-.data-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 0.875rem;
-}
+/* ═══════════════════════════════════════════
+   Login Page
+   ═══════════════════════════════════════════ */
 
-.data-table th,
-.data-table td {
-    padding: 0.875rem 1rem;
-    text-align: left;
-    border-bottom: 1px solid var(--border);
+.login-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 80vh;
 }
 
-.data-table th {
-    font-weight: 600;
-    background: var(--bg);
-    color: var(--text-muted);
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+.login-card {
+    background: var(--surface);
+    padding: 2.5rem;
+    border-radius: 16px;
+    width: 100%;
+    max-width: 400px;
+    border: 1px solid var(--border);
 }
 
-.data-table tr:hover {
-    background: var(--bg);
+.login-card h1 {
+    text-align: center;
+    margin-bottom: 0.5rem;
 }
 
-.table-responsive {
-    overflow-x: auto;
+.login-subtitle {
+    text-align: center;
+    color: var(--text-muted);
+    margin-bottom: 2rem;
 }
 
-/* Health Grid */
-.health-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 1.5rem;
+.error-message {
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid var(--error);
+    color: var(--error);
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    margin-bottom: 1rem;
 }
 
-.health-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-}
+/* ═══════════════════════════════════════════
+   Pagination
+   ═══════════════════════════════════════════ */
 
-.health-label {
-    font-size: 0.75rem;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+.pagination {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border);
 }
 
-.health-value {
-    font-size: 1.125rem;
-    font-weight: 600;
-}
+/* ═══════════════════════════════════════════
+   Status Colors
+   ═══════════════════════════════════════════ */
 
 .status-success {
     color: var(--success);
@@ -309,151 +345,133 @@ body {
     color: var(--error);
 }
 
-/* Alerts */
-.alert {
-    padding: 1rem 1.25rem;
-    border-radius: 6px;
-    margin-bottom: 1.5rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
+/* ═══════════════════════════════════════════
+   Error Card
+   ═══════════════════════════════════════════ */
+
+.error-card {
+    border-color: var(--error);
 }
 
-.alert-error {
-    background: rgba(239, 68, 68, 0.1);
+.error-text {
+    background: var(--background);
+    padding: 1rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+    font-size: 0.85rem;
     color: var(--error);
-    border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
-/* Badges */
-.badge {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.625rem;
-    border-radius: 9999px;
-    font-size: 0.75rem;
-    font-weight: 500;
-}
+/* ═══════════════════════════════════════════
+   Empty State
+   ═══════════════════════════════════════════ */
 
-.badge-success {
-    background: rgba(34, 197, 94, 0.1);
-    color: var(--success);
+.empty-state {
+    text-align: center;
+    color: var(--text-muted);
+    padding: 2rem;
 }
 
-.badge-error {
-    background: rgba(239, 68, 68, 0.1);
-    color: var(--error);
-}
+/* ═══════════════════════════════════════════
+   Quick Queries
+   ═══════════════════════════════════════════ */
 
-/* Pagination */
-.pagination {
+.quick-queries {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 1rem;
-    margin-top: 1.5rem;
+    flex-wrap: wrap;
+    gap: 0.75rem;
 }
 
-.page-info {
-    color: var(--text-muted);
-    font-size: 0.875rem;
-}
+/* ═══════════════════════════════════════════
+   Backup Actions
+   ═══════════════════════════════════════════ */
 
-/* Backup Actions */
 .backup-actions {
     display: flex;
-    gap: 0.75rem;
     flex-wrap: wrap;
+    gap: 0.75rem;
 }
 
-.inline-form {
-    display: inline;
+/* ═══════════════════════════════════════════
+   Info Text
+   ═══════════════════════════════════════════ */
+
+.info-text {
+    color: var(--text-muted);
+    margin-bottom: 1rem;
 }
 
-/* Backup Strategy */
-.backup-strategy {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
+.info-text code {
+    background: var(--background);
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.85rem;
+}
+
+/* ═══════════════════════════════════════════
+   Strategy Info
+   ═══════════════════════════════════════════ */
+
+.strategy-info {
+    display: grid;
+    gap: 1rem;
 }
 
 .strategy-layer {
-    padding: 1.25rem;
-    background: var(--bg);
+    background: var(--background);
+    padding: 1rem;
     border-radius: 8px;
-    border-left: 4px solid var(--primary);
+    border-left: 3px solid var(--primary);
 }
 
-.strategy-layer h4 {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
+.strategy-layer h3 {
+    font-size: 0.9rem;
+    color: var(--primary);
     margin-bottom: 0.5rem;
-    font-size: 1rem;
-}
-
-.layer-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    background: var(--primary);
-    color: white;
-    border-radius: 50%;
-    font-size: 0.75rem;
-    font-weight: 600;
 }
 
 .strategy-layer p {
+    font-size: 0.85rem;
     color: var(--text-muted);
-    font-size: 0.875rem;
-    margin-left: 2rem;
-}
-
-/* Utilities */
-.text-primary {
-    color: var(--primary);
+    line-height: 1.5;
 }
 
-.text-success {
-    color: var(--success);
-}
+/* ═══════════════════════════════════════════
+   Footer
+   ═══════════════════════════════════════════ */
 
-.text-muted {
+.footer {
+    text-align: center;
+    padding: 1.5rem;
     color: var(--text-muted);
+    font-size: 0.85rem;
+    border-top: 1px solid var(--border);
 }
 
-.truncate {
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-code {
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    background: var(--bg);
-    padding: 0.125rem 0.375rem;
-    border-radius: 4px;
-    font-size: 0.875rem;
-}
+/* ═══════════════════════════════════════════
+   Responsive
+   ═══════════════════════════════════════════ */
 
-/* Responsive */
 @media (max-width: 768px) {
-    .sidebar {
-        width: 100%;
-        position: relative;
-        height: auto;
+    .navbar {
+        flex-direction: column;
+        gap: 1rem;
     }
     
-    .main-content {
+    .nav-links a {
         margin-left: 0;
-        max-width: 100%;
+        margin-right: 1rem;
+    }
+    
+    .container {
+        padding: 1rem;
     }
     
-    .admin-container {
+    .page-header {
         flex-direction: column;
+        gap: 1rem;
+        align-items: flex-start;
     }
     
     .health-grid {