From 6df952acae07359da3901572c532f21680dc73a6 Mon Sep 17 00:00:00 2001
From: VPS 4 Builder <deploy@clube67.com>
Date: Tue, 26 May 2026 19:41:32 +0200
Subject: [PATCH] feat: update to v2.0.3, premium redesign and fix navigation
 bugs

---
 dental-server/auth/login.html           |  118 +-
 dental-server/package.json              |    2 +-
 dental-server/public/admin-clinics.css  |   63 +-
 dental-server/public/admin-clinics.html |   38 +-
 dental-server/public/admin-clinics.js   |    4 +-
 dental-server/public/app.js             |   15 +
 dental-server/public/clients.html       |  314 ++---
 dental-server/public/index.html         |  106 +-
 dental-server/public/style.css          | 1595 +++++++++--------------
 leia-primeiro-fdp.md                    |   21 +
 10 files changed, 983 insertions(+), 1293 deletions(-)
 create mode 100644 leia-primeiro-fdp.md

diff --git a/dental-server/auth/login.html b/dental-server/auth/login.html
index c3c6b52..3e5c642 100644
--- a/dental-server/auth/login.html
+++ b/dental-server/auth/login.html
@@ -4,7 +4,21 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login - Dental Server</title>
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
     <style>
+        :root {
+            --primary-color: #4f46e5;
+            --secondary-color: #ec4899;
+            --dark-color: #0f172a;
+            --bg-color: #f8fafc;
+            --bg-surface: #ffffff;
+            --border-color: #e2e8f0;
+            --text-primary: #1e293b;
+            --text-secondary: #64748b;
+            --radius-lg: 20px;
+            --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        }
+
         * {
             margin: 0;
             padding: 0;
@@ -12,8 +26,8 @@
         }
 
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: linear-gradient(135deg, var(--bg-color) 0%, #eff6ff 100%);
             min-height: 100vh;
             display: flex;
             justify-content: center;
@@ -22,67 +36,82 @@
         }
 
         .login-container {
-            background: white;
-            border-radius: 15px;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-            padding: 40px;
-            max-width: 400px;
+            background: var(--bg-surface);
+            border-radius: var(--radius-lg);
+            box-shadow: var(--shadow-lg);
+            padding: 48px;
+            max-width: 420px;
             width: 100%;
+            border: 1px solid var(--border-color);
         }
 
         h1 {
             text-align: center;
-            color: #667eea;
-            font-size: 2rem;
-            margin-bottom: 10px;
+            font-size: 2.2rem;
+            margin-bottom: 8px;
+            font-weight: 700;
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
 
         p {
             text-align: center;
-            color: #666;
-            margin-bottom: 30px;
+            color: var(--text-secondary);
+            margin-bottom: 32px;
+            font-size: 1.05rem;
+            font-weight: 500;
         }
 
         .form-group {
-            margin-bottom: 20px;
+            margin-bottom: 24px;
         }
 
         label {
             display: block;
             margin-bottom: 8px;
-            color: #333;
+            color: var(--text-primary);
             font-weight: 600;
+            font-size: 0.95rem;
         }
 
         input {
             width: 100%;
-            padding: 12px;
-            border: 2px solid #e0e0e0;
-            border-radius: 8px;
+            padding: 14px 16px;
+            border: 2px solid var(--border-color);
+            border-radius: 12px;
             font-size: 1rem;
-            transition: border-color 0.3s;
+            transition: all 0.2s ease;
+            color: var(--text-primary);
+            background: var(--bg-color);
+            outline: none;
         }
 
         input:focus {
-            outline: none;
-            border-color: #667eea;
+            border-color: var(--primary-color);
+            background: var(--bg-surface);
+            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
         }
 
         button {
             width: 100%;
-            padding: 12px;
-            background: linear-gradient(135deg, #667eea, #764ba2);
+            padding: 14px;
+            background: linear-gradient(135deg, var(--primary-color) 0%, #4338ca 100%);
             color: white;
             border: none;
-            border-radius: 8px;
-            font-size: 1rem;
+            border-radius: 12px;
+            font-size: 1.05rem;
             font-weight: 600;
             cursor: pointer;
-            transition: transform 0.3s;
+            transition: all 0.2s;
+            margin-top: 8px;
+            box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
         }
 
         button:hover {
             transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3);
         }
 
         button:active {
@@ -90,22 +119,24 @@
         }
 
         .alert {
-            padding: 12px;
-            border-radius: 8px;
-            margin-bottom: 20px;
+            padding: 14px 16px;
+            border-radius: 12px;
+            margin-bottom: 24px;
             display: none;
+            font-weight: 500;
+            font-size: 0.95rem;
         }
 
         .alert.error {
-            background: #fee;
-            color: #c33;
-            border: 1px solid #fcc;
+            background: rgba(239, 68, 68, 0.1);
+            color: #dc2626;
+            border: 1px solid rgba(239, 68, 68, 0.2);
         }
 
         .alert.success {
-            background: #efe;
-            color: #3c3;
-            border: 1px solid #cfc;
+            background: rgba(16, 185, 129, 0.1);
+            color: #059669;
+            border: 1px solid rgba(16, 185, 129, 0.2);
         }
 
         #loginBtn {
@@ -113,23 +144,27 @@
         }
 
         #loginBtn.loading {
-            opacity: 0.7;
+            opacity: 0.8;
             cursor: not-allowed;
+            color: transparent;
         }
 
         #loginBtn.loading::after {
             content: '';
             position: absolute;
-            width: 16px;
-            height: 16px;
-            border: 2px solid #fff;
-            border-top-color: transparent;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255,255,255,0.3);
+            border-top-color: white;
             border-radius: 50%;
             animation: spin 0.8s linear infinite;
         }
 
         @keyframes spin {
-            to { transform: rotate(360deg); }
+            to { transform: translate(-50%, -50%) rotate(360deg); }
         }
     </style>
 </head>
@@ -166,6 +201,9 @@
             
             <button type="submit" class="btn" id="loginBtn">Entrar</button>
         </form>
+        <div style="text-align: center; margin-top: 20px; color: var(--text-secondary); font-size: 0.85rem; font-weight: 500;">
+            v2.0.3
+        </div>
     </div>
 
     <script>
diff --git a/dental-server/package.json b/dental-server/package.json
index 6844a3f..32fe5e5 100644
--- a/dental-server/package.json
+++ b/dental-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dental-image-server",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Servidor Socket.IO para receber e processar imagens dentais com interface web",
   "main": "server.js",
   "scripts": {
diff --git a/dental-server/public/admin-clinics.css b/dental-server/public/admin-clinics.css
index ea13657..f827c71 100644
--- a/dental-server/public/admin-clinics.css
+++ b/dental-server/public/admin-clinics.css
@@ -1,22 +1,23 @@
 :root {
-  --primary: #4361ee;
-  --primary-hover: #3a56d4;
-  --primary-light: rgba(67, 97, 238, 0.1);
-  --success: #2ec4b6;
-  --success-light: rgba(46, 196, 182, 0.15);
-  --danger: #ef476f;
-  --danger-light: rgba(239, 71, 111, 0.15);
-  --warning: #ff9f1c;
-  --dark: #0b132b;
-  --gray-900: #1c2541;
-  --gray-800: #2b3a67;
+  --primary: #4f46e5;
+  --primary-hover: #4338ca;
+  --primary-light: rgba(79, 70, 229, 0.1);
+  --success: #10b981;
+  --success-light: rgba(16, 185, 129, 0.15);
+  --danger: #ef4444;
+  --danger-light: rgba(239, 68, 68, 0.15);
+  --warning: #f59e0b;
+  
+  --dark: #0f172a;
+  --gray-900: #f8fafc;
+  --gray-800: #e2e8f0;
   --gray-200: #e2e8f0;
-  --light: #f8f9fa;
+  --light: #1e293b;
   --white: #ffffff;
   
-  --glass-bg: rgba(255, 255, 255, 0.05);
-  --glass-border: rgba(255, 255, 255, 0.1);
-  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.5);
+  --glass-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   
   --font-heading: 'Outfit', sans-serif;
   --font-body: 'Inter', sans-serif;
@@ -30,7 +31,7 @@
 
 body {
   font-family: var(--font-body);
-  background: linear-gradient(135deg, var(--dark) 0%, var(--gray-900) 100%);
+  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
   color: var(--light);
   min-height: 100vh;
   display: flex;
@@ -66,12 +67,15 @@ body {
 /* Sidebar */
 .sidebar {
   width: 260px;
-  background: rgba(11, 19, 43, 0.8);
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   border-right: 1px solid var(--glass-border);
   display: flex;
   flex-direction: column;
   padding: 24px 0;
   z-index: 10;
+  box-shadow: var(--glass-shadow);
 }
 
 .sidebar-header {
@@ -111,7 +115,8 @@ body {
 .nav-item {
   padding: 12px 16px;
   border-radius: 10px;
-  color: #a0aec0;
+  color: var(--dark);
+  opacity: 0.7;
   text-decoration: none;
   font-weight: 500;
   display: flex;
@@ -127,15 +132,19 @@ body {
 }
 
 .nav-item:hover {
-  background: var(--glass-bg);
-  color: var(--white);
+  background: var(--white);
+  color: var(--primary);
+  opacity: 1;
   transform: translateX(4px);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }
 
 .nav-item.active {
-  background: var(--primary-light);
-  color: #4cc9f0;
-  border-left: 3px solid #4cc9f0;
+  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
+  color: var(--white);
+  opacity: 1;
+  box-shadow: var(--glass-shadow);
+  font-weight: 600;
 }
 
 .sidebar-footer {
@@ -216,9 +225,9 @@ body {
 }
 
 .secondary-btn {
-  background: transparent;
-  color: var(--white);
-  border: 1px solid var(--glass-border);
+  background: var(--white);
+  color: var(--dark);
+  border: 1px solid var(--gray-800);
   padding: 12px 24px;
   border-radius: 10px;
   font-family: var(--font-body);
@@ -228,7 +237,7 @@ body {
 }
 
 .secondary-btn:hover {
-  background: var(--glass-bg);
+  background: var(--gray-900);
 }
 
 .icon-btn {
diff --git a/dental-server/public/admin-clinics.html b/dental-server/public/admin-clinics.html
index a0f0450..9b057ba 100644
--- a/dental-server/public/admin-clinics.html
+++ b/dental-server/public/admin-clinics.html
@@ -21,28 +21,42 @@
   <!-- Sidebar -->
   <aside class="sidebar">
     <div class="sidebar-header">
-      <div class="logo-icon">
-        <i class="fa-solid fa-tooth"></i>
-      </div>
-      <h2>RF Dental</h2>
+      <h2>🦷 DentalSys</h2>
     </div>
-    
     <nav class="sidebar-nav">
       <a href="/" class="nav-item">
-        <i class="fa-solid fa-chart-line"></i> Dashboard
+        <span class="icon">🖼️</span> Pacientes
+      </a>
+      <a href="/?action=new-patient" class="nav-item">
+        <span class="icon">➕</span> Novo Paciente
       </a>
       <a href="/clients" class="nav-item">
-        <i class="fa-solid fa-network-wired"></i> Conexões
+        <span class="icon">🖥️</span> Dispositivos
+      </a>
+      <a href="/?action=settings" class="nav-item">
+        <span class="icon">⚙️</span> Configurações
+      </a>
+      <a href="/?action=plugins" class="nav-item">
+        <span class="icon">🔌</span> Plugins / Wasabi
+      </a>
+      <a href="/?action=sync" class="nav-item">
+        <span class="icon">🔄</span> Sincronização
+      </a>
+      <a href="/reset" class="nav-item text-danger">
+        <span class="icon">⚠️</span> Zerar Sistema
       </a>
       <a href="/admin-clinics" class="nav-item active">
-        <i class="fa-solid fa-hospital"></i> Clínicas e Acessos
+        <span class="icon">🏢</span> Gerenciar Clínicas
+      </a>
+      <a href="#" class="nav-item" onclick="logout(); return false;">
+        <span class="icon">🚪</span> Sair
       </a>
     </nav>
-    
     <div class="sidebar-footer">
-      <button id="logoutBtn" class="logout-btn">
-        <i class="fa-solid fa-arrow-right-from-bracket"></i> Sair
-      </button>
+      <div class="sidebar-brand" style="color: var(--dark); opacity: 0.8; font-weight: 500; text-align: center; font-size: 14px;">
+        <span>🦷 DentalSys</span>
+        <span class="version-badge">v2.0.3</span>
+      </div>
     </div>
   </aside>
 
diff --git a/dental-server/public/admin-clinics.js b/dental-server/public/admin-clinics.js
index b710a2f..4c8441d 100644
--- a/dental-server/public/admin-clinics.js
+++ b/dental-server/public/admin-clinics.js
@@ -234,10 +234,10 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   });
 
-  document.getElementById('logoutBtn').addEventListener('click', () => {
+  window.logout = function() {
     localStorage.removeItem('auth_token');
     window.location.href = '/login';
-  });
+  };
 
   function showToast(message, type = 'success') {
     const toast = document.getElementById('toast');
diff --git a/dental-server/public/app.js b/dental-server/public/app.js
index e8740e3..6b3a757 100644
--- a/dental-server/public/app.js
+++ b/dental-server/public/app.js
@@ -152,6 +152,21 @@ document.addEventListener('DOMContentLoaded', async () => {
         setupEventListeners();
         initDragAndDrop();
         setInterval(loadClientsList, 5000);
+
+        // Process Querystring actions (from navigation links in other pages)
+        const urlParams = new URLSearchParams(window.location.search);
+        const action = urlParams.get('action');
+        if (action) {
+            setTimeout(() => {
+                if (action === 'new-patient') window.openCreatePatientModal();
+                else if (action === 'settings') window.openSettingsModal();
+                else if (action === 'plugins') window.openPluginsModal();
+                else if (action === 'sync') window.openSyncModal();
+                
+                // Remove querystring to prevent reopening on reload
+                window.history.replaceState({}, document.title, window.location.pathname);
+            }, 300);
+        }
     } catch (error) {
         _log.error('INIT', 'Erro fatal na inicialização:', error.message, error);
         showErrorBanner('Erro na inicialização', error.message);
diff --git a/dental-server/public/clients.html b/dental-server/public/clients.html
index 7934046..64f9e32 100644
--- a/dental-server/public/clients.html
+++ b/dental-server/public/clients.html
@@ -4,133 +4,103 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Clientes Conectados - Dental Server</title>
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="/style.css">
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: #f5f5f5;
-            padding: 20px;
-        }
-        
-        .container {
+        .clients-container {
             max-width: 1200px;
             margin: 0 auto;
+            padding: 40px 20px;
         }
         
-        .header {
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        .clients-header {
+            background: var(--glass-bg);
+            backdrop-filter: var(--glass-blur);
+            -webkit-backdrop-filter: var(--glass-blur);
+            border: 1px solid var(--glass-border);
+            padding: 24px 32px;
+            border-radius: var(--radius-lg);
+            margin-bottom: 32px;
+            box-shadow: var(--shadow-md);
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
         
-        .header h1 {
-            color: #333;
-            margin-bottom: 0;
+        .clients-header h1 {
+            color: var(--dark-color);
+            margin-bottom: 4px;
+            font-size: 1.8rem;
+            font-weight: 700;
         }
         
         .header-actions {
             display: flex;
-            gap: 10px;
-        }
-        
-        .btn {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: 600;
-            transition: all 0.3s;
-        }
-        
-        .btn-primary {
-            background: #667eea;
-            color: white;
-        }
-        
-        .btn-primary:hover {
-            background: #5568d3;
-        }
-        
-        .btn-success {
-            background: #48bb78;
-            color: white;
-        }
-        
-        .btn-success:hover {
-            background: #38a169;
-        }
-        
-        .btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-        
-        .btn-link {
-            background: transparent;
-            color: #667eea;
-            text-decoration: none;
-            border: 1px solid #667eea;
-        }
-        
-        .btn-link:hover {
-            background: #667eea;
-            color: white;
+            gap: 12px;
         }
         
         .stats {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 15px;
-            margin-bottom: 20px;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 24px;
+            margin-bottom: 32px;
         }
         
         .stat-card {
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            background: var(--bg-surface);
+            padding: 24px;
+            border-radius: var(--radius-lg);
+            box-shadow: var(--shadow);
+            border: 1px solid var(--border-color);
+            transition: all 0.3s ease;
+        }
+        
+        .stat-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-md);
+            border-color: var(--primary-light);
         }
         
         .stat-card .label {
-            color: #666;
-            font-size: 14px;
-            margin-bottom: 5px;
+            color: var(--text-secondary);
+            font-size: 0.95rem;
+            font-weight: 600;
+            margin-bottom: 8px;
         }
         
         .stat-card .value {
-            font-size: 32px;
-            font-weight: bold;
-            color: #667eea;
+            font-size: 2.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
         
-        .clients-list {
-            background: white;
-            border-radius: 10px;
-            padding: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        .clients-list-card {
+            background: var(--bg-surface);
+            border-radius: var(--radius-lg);
+            padding: 32px;
+            box-shadow: var(--shadow);
+            border: 1px solid var(--border-color);
         }
         
         .client-item {
-            padding: 15px;
-            border-bottom: 1px solid #eee;
+            padding: 20px;
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius);
+            margin-bottom: 16px;
             display: flex;
             justify-content: space-between;
             align-items: center;
+            transition: all 0.2s ease;
+            background: #fdfdfd;
         }
         
-        .client-item:last-child {
-            border-bottom: none;
+        .client-item:hover {
+            border-color: var(--primary-light);
+            background: var(--bg-surface);
+            box-shadow: var(--shadow-sm);
         }
         
         .client-info {
@@ -138,94 +108,75 @@
         }
         
         .client-name {
-            font-weight: 600;
-            color: #333;
-            margin-bottom: 5px;
+            font-weight: 700;
+            font-size: 1.1rem;
+            color: var(--dark-color);
+            margin-bottom: 6px;
         }
         
         .client-details {
-            font-size: 12px;
-            color: #666;
-            line-height: 1.6;
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+            line-height: 1.5;
         }
         
         .client-status {
-            padding: 5px 15px;
-            border-radius: 20px;
-            font-size: 12px;
-            font-weight: 600;
-            margin-left: 10px;
+            padding: 8px 16px;
+            border-radius: var(--radius-full);
+            font-size: 0.85rem;
+            font-weight: 700;
+            margin-left: 20px;
+            box-shadow: var(--shadow-sm);
         }
         
         .status-connected {
-            background: #d4edda;
-            color: #155724;
+            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+            color: white;
         }
         
         .status-identified {
-            background: #cce5ff;
-            color: #004085;
+            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+            color: white;
         }
         
         .status-unknown {
-            background: #fff3cd;
-            color: #856404;
+            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+            color: white;
         }
         
         .status-testing {
-            background: #e2e3e5;
-            color: #383d41;
-        }
-        
-        .empty-state {
-            text-align: center;
-            padding: 40px;
-            color: #666;
+            background: #e2e8f0;
+            color: var(--text-primary);
         }
         
         .timestamp {
-            font-size: 12px;
-            color: #999;
-            margin-top: 10px;
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            margin-top: 20px;
+            text-align: right;
+            font-weight: 500;
         }
         
         .test-result {
-            margin-top: 10px;
-            padding: 10px;
-            border-radius: 5px;
-            font-size: 12px;
+            margin-top: 12px;
+            padding: 10px 16px;
+            border-radius: var(--radius-sm);
+            font-size: 0.85rem;
+            font-weight: 600;
         }
         
         .test-result.success {
-            background: #d4edda;
-            color: #155724;
+            background: rgba(16, 185, 129, 0.1);
+            color: var(--success-color);
+            border: 1px solid rgba(16, 185, 129, 0.2);
         }
         
         .test-result.error {
-            background: #f8d7da;
-            color: #721c24;
+            background: rgba(239, 68, 68, 0.1);
+            color: var(--danger-color);
+            border: 1px solid rgba(239, 68, 68, 0.2);
         }
         
-        .test-result.info {
-            background: #d1ecf1;
-            color: #0c5460;
-        }
-        
-        .loading {
-            display: inline-block;
-            width: 14px;
-            height: 14px;
-            border: 2px solid #f3f3f3;
-            border-top: 2px solid #667eea;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin-left: 5px;
-        }
-        
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
     </style>
     <script>
         // Redirecionar se não estiver autenticado
@@ -234,15 +185,58 @@
         }
     </script>
 </head>
-<body>
-    <div class="container">
-        <div class="header">
-            <div>
-                <h1>🖥️ Clientes Conectados</h1>
-                <p style="color: #666; margin-top: 5px; font-size: 14px;">Monitoramento em tempo real dos clientes Socket.IO</p>
+<body class="app-container">
+    <!-- Sidebar -->
+    <aside class="sidebar">
+        <div class="sidebar-header">
+            <h2>🦷 DentalSys</h2>
+        </div>
+        <nav class="sidebar-nav">
+            <a href="/" class="nav-item">
+                <span class="icon">🖼️</span> Pacientes
+            </a>
+            <a href="/?action=new-patient" class="nav-item">
+                <span class="icon">➕</span> Novo Paciente
+            </a>
+            <a href="/clients" class="nav-item active">
+                <span class="icon">🖥️</span> Dispositivos
+            </a>
+            <a href="/?action=settings" class="nav-item">
+                <span class="icon">⚙️</span> Configurações
+            </a>
+            <a href="/?action=plugins" class="nav-item">
+                <span class="icon">🔌</span> Plugins / Wasabi
+            </a>
+            <a href="/?action=sync" class="nav-item">
+                <span class="icon">🔄</span> Sincronização
+            </a>
+            <a href="/reset" class="nav-item text-danger">
+                <span class="icon">⚠️</span> Zerar Sistema
+            </a>
+            <a href="/admin-clinics" class="nav-item">
+                <span class="icon">🏢</span> Gerenciar Clínicas
+            </a>
+            <a href="#" class="nav-item" onclick="logout(); return false;">
+                <span class="icon">🚪</span> Sair
+            </a>
+        </nav>
+        <div class="sidebar-footer">
+            <div class="sidebar-brand">
+                <span>🦷 DentalSys</span>
+                <span class="version-badge">v2.0.3</span>
+            </div>
+        </div>
+    </aside>
+
+    <main class="main-content">
+        <div class="clients-container">
+            <div class="clients-header">
+                <div>
+                    <h1>🖥️ Clientes Conectados</h1>
+                <p style="color: var(--text-secondary); margin-top: 5px; font-size: 1rem; font-weight: 500;">Monitoramento em tempo real dos clientes Socket.IO</p>
             </div>
             <div class="header-actions">
-                <a href="/" class="btn btn-link">← Voltar</a>
+                <a href="/" class="btn btn-secondary">← Voltar</a>
                 <button class="btn btn-primary" onclick="loadClients()">🔄 Atualizar</button>
                 <button class="btn btn-success" onclick="testConnection()" id="testBtn">🧪 Testar Conexão</button>
             </div>
@@ -252,9 +246,12 @@
             <!-- Stats serão carregados aqui -->
         </div>
         
-        <div class="clients-list">
+        <div class="clients-list-card">
             <div id="clientsList">
-                <div class="empty-state">Carregando...</div>
+                <div class="empty-state">
+                    <div class="spinner" style="margin: 0 auto 16px auto;"></div>
+                    Carregando...
+                </div>
             </div>
             <div class="timestamp" id="timestamp"></div>
         </div>
@@ -468,10 +465,14 @@
         }
         
         function updateTestResults() {
-            // Atualizar interface com resultados
             loadClients();
         }
         
+        function logout() {
+            localStorage.removeItem('auth_token');
+            window.location.replace('/login');
+        }
+        
         // Inicializar Socket.IO e carregar clientes
         initSocket();
         loadClients();
@@ -479,6 +480,7 @@
         // Atualizar a cada 3 segundos
         setInterval(loadClients, 3000);
     </script>
+    </main>
 </body>
 </html>
 
diff --git a/dental-server/public/index.html b/dental-server/public/index.html
index 1134b17..a710f4b 100644
--- a/dental-server/public/index.html
+++ b/dental-server/public/index.html
@@ -19,22 +19,22 @@
                 <a href="/" class="nav-item active">
                     <span class="icon">🖼️</span> Pacientes
                 </a>
-                <a href="#" class="nav-item" onclick="openCreatePatientModal(); return false;">
+                <a href="/?action=new-patient" class="nav-item">
                     <span class="icon">➕</span> Novo Paciente
                 </a>
                 <a href="/clients" class="nav-item">
                     <span class="icon">🖥️</span> Dispositivos
                 </a>
-                <a href="#" class="nav-item" onclick="openSettingsModal(); return false;">
+                <a href="/?action=settings" class="nav-item">
                     <span class="icon">⚙️</span> Configurações
                 </a>
-                <a href="#" class="nav-item" onclick="openPluginsModal(); return false;">
+                <a href="/?action=plugins" class="nav-item">
                     <span class="icon">🔌</span> Plugins / Wasabi
                 </a>
-                <a href="#" class="nav-item" onclick="openSyncModal(); return false;">
+                <a href="/?action=sync" class="nav-item">
                     <span class="icon">🔄</span> Sincronização
                 </a>
-                <a href="/reset" class="nav-item" style="color: #dc3545;">
+                <a href="/reset" class="nav-item text-danger">
                     <span class="icon">⚠️</span> Zerar Sistema
                 </a>
                 <a href="/admin-clinics" class="nav-item">
@@ -44,19 +44,19 @@
                     <span class="icon">🚪</span> Sair
                 </a>
                 <div class="nav-divider"></div>
-                <div style="padding: 10px 20px;">
-                    <select id="clientFilter" class="client-filter" style="width: 100%; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: white; border-radius: 6px; padding: 8px;">
-                        <option value="" style="color: black;">📋 Todos os Clientes</option>
+                <div class="sidebar-filter-wrapper">
+                    <select id="clientFilter" class="client-filter">
+                        <option value="">📋 Todos os Clientes</option>
                     </select>
                 </div>
-                <button id="toggleDisabledBtn" class="btn btn-secondary" style="margin: 10px 20px; width: calc(100% - 40px);">
+                <button id="toggleDisabledBtn" class="btn btn-secondary btn-block" style="margin: 0 12px; width: calc(100% - 24px);">
                     <span id="toggleText">Ocultas</span>
                 </button>
             </nav>
-            <div style="padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); margin-top: auto;">
-                <div style="display: flex; align-items: center; gap: 8px; opacity: 0.5;">
-                    <span style="font-size: 11px; color: rgba(255,255,255,0.7);">🦷 DentalSys</span>
-                    <span style="font-size: 10px; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); padding: 2px 7px; border-radius: 20px; font-family: monospace; letter-spacing: 0.5px;">Server v2.0.0</span>
+            <div class="sidebar-footer">
+                <div class="sidebar-brand">
+                    <span>🦷 DentalSys</span>
+                    <span class="version-badge">v2.0.3</span>
                 </div>
             </div>
         </aside>
@@ -120,75 +120,77 @@
     <!-- Transform Modal -->
     <div id="transformModal" class="modal">
         <div class="modal-content modal-large">
-            <div class="modal-header" style="display: flex; justify-content: space-between; width: 100%; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 15px;">
-                <div style="display: flex; align-items: center; gap: 15px; flex-wrap: wrap;">
-                    <h2 id="transformModalTitle" style="margin: 0; font-size: 1.4rem;"><!-- Dynamic Title (Patient + Date) --></h2>
-                    <div style="display: flex; gap: 8px;">
-                        <button id="btnShowTransform" class="btn btn-primary" onclick="toggleModalView('transform')" style="width: 60px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;" title="Ajustar Imagem">🔄</button>
-                        <button id="btnShowGto" class="btn btn-secondary" onclick="toggleModalView('gto')" style="width: 60px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;" title="Gerenciar GTOs">📋</button>
-                        <button id="btnShowInfo" class="btn btn-secondary" onclick="toggleModalInfo()" style="width: 60px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;" title="Informações">ℹ️</button>
-                        <button id="btnResetImage" class="btn btn-danger" onclick="resetImageToOriginal()" style="width: 60px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background-color: #ff6b6b; border-color: #ff6b6b; color: white;" title="Resetar para Original">↩️</button>
+            <div class="modal-header">
+                <div class="modal-title-group">
+                    <h2 id="transformModalTitle"><!-- Dynamic Title --></h2>
+                    <div class="modal-actions-group">
+                        <button id="btnShowTransform" class="btn btn-primary" onclick="toggleModalView('transform')" title="Ajustar Imagem">🔄</button>
+                        <button id="btnShowGto" class="btn btn-secondary" onclick="toggleModalView('gto')" title="Gerenciar GTOs">📋</button>
+                        <button id="btnShowInfo" class="btn btn-secondary" onclick="toggleModalInfo()" title="Informações">ℹ️</button>
+                        <button id="btnResetImage" class="btn btn-danger" onclick="resetImageToOriginal()" title="Resetar para Original">↩️</button>
                     </div>
                 </div>
-                <span class="modal-close" id="closeTransformModal">×</span>
+                <span class="modal-close" id="closeTransformModal">&times;</span>
             </div>
             
-            <div class="modal-body" style="padding-top: 15px;">
+            <div class="modal-body">
                 <!-- Bloco oculto de informações -->
-                <div id="transformExtraInfo" style="display: none; font-size: 0.95rem; color: #555; background: #f8f9fa; padding: 12px 20px; border-radius: 8px; border: 1px solid #eee; margin-bottom: 15px;">
+                <div id="transformExtraInfo" class="extra-info-panel" style="display: none;">
                     <!-- Preenchido via JS -->
                 </div>
 
                 <!-- View 1: Transforms -->
-                <div id="transformViewWrapper" style="display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%;">
-                    <div id="transformOptions" class="transform-grid" style="flex: 1; min-height: 0;"></div>
-                    <div id="transformActionArea" style="display: none; margin-top: 20px; background: #f8f9fa; padding: 15px; border-radius: 8px; flex-shrink: 0; border: 1px solid #e3e8ee;">
+                <div id="transformViewWrapper" class="transform-view-wrapper">
+                    <div id="transformOptions" class="transform-grid"></div>
+                    <div id="transformActionArea" class="transform-action-area" style="display: none;">
                         <!-- Ajuste Fino de Rotação -->
-                        <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #e3e8ee; padding-bottom: 15px;">
-                            <span style="font-weight: 700; font-size: 0.95rem; margin-bottom: 10px; color: var(--dark-color); display: flex; align-items: center; gap: 6px;">
+                        <div class="fine-tune-section">
+                            <span class="fine-tune-title">
                                 📐 Ajuste Fino de Ângulo (Sensor Inclinado)
                             </span>
-                            <div style="display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap;">
-                                <button type="button" class="btn btn-secondary" style="padding: 6px 12px; font-size: 0.85rem; display: flex; align-items: center; gap: 3px;" onclick="adjustFineTune(-5)" title="Rotacionar -5°">🔄 -5°</button>
-                                <button type="button" class="btn btn-secondary" style="padding: 6px 12px; font-size: 0.85rem; display: flex; align-items: center; gap: 3px;" onclick="adjustFineTune(-1)" title="Rotacionar -1°">🔄 -1°</button>
+                            <div class="fine-tune-controls">
+                                <button type="button" class="btn btn-secondary btn-small" onclick="adjustFineTune(-5)" title="Rotacionar -5°">🔄 -5°</button>
+                                <button type="button" class="btn btn-secondary btn-small" onclick="adjustFineTune(-1)" title="Rotacionar -1°">🔄 -1°</button>
                                 
-                                <div style="min-width: 100px; text-align: center; padding: 6px 12px; background: white; border: 1px solid #cbd5e0; border-radius: 6px; font-family: monospace; font-weight: 700; font-size: 1.1rem; color: var(--primary-color);" id="fineTuneValDisplay">
+                                <div id="fineTuneValDisplay" class="fine-tune-display">
                                     0°
                                 </div>
                                 
-                                <button type="button" class="btn btn-secondary" style="padding: 6px 12px; font-size: 0.85rem; display: flex; align-items: center; gap: 3px;" onclick="adjustFineTune(1)" title="Rotacionar +1°">🔄 +1°</button>
-                                <button type="button" class="btn btn-secondary" style="padding: 6px 12px; font-size: 0.85rem; display: flex; align-items: center; gap: 3px;" onclick="adjustFineTune(5)" title="Rotacionar +5°">🔄 +5°</button>
+                                <button type="button" class="btn btn-secondary btn-small" onclick="adjustFineTune(1)" title="Rotacionar +1°">🔄 +1°</button>
+                                <button type="button" class="btn btn-secondary btn-small" onclick="adjustFineTune(5)" title="Rotacionar +5°">🔄 +5°</button>
                                 
-                                <button type="button" class="btn btn-danger btn-small" style="padding: 6px 12px; font-size: 0.85rem; margin-left: 8px; display: none; background: #e53e3e; border-color: #e53e3e; color: white;" id="btnResetFineTune" onclick="resetFineTune()" title="Resetar ajuste fino">Reset</button>
+                                <button type="button" class="btn btn-danger btn-small" id="btnResetFineTune" onclick="resetFineTune()" style="display: none;" title="Resetar ajuste fino">Reset</button>
                             </div>
                         </div>
 
-                        <label style="font-weight: 600; display: block; margin-bottom: 8px;">Nova Observação / Detalhes (Opcional):</label>
-                        <textarea id="newImageRemark" class="search-input" rows="2" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px;" placeholder="Ex: Raio-X Dente 45..."></textarea>
-                        <div style="display: flex; gap: 10px; margin-top: 10px;">
-                            <button class="btn btn-secondary" style="flex: 1; padding: 12px; font-size: 1.1rem;" onclick="clearTransformSelection()">Cancelar</button>
-                            <button id="btnSaveTransform" class="btn btn-primary" style="flex: 2; padding: 12px; font-size: 1.1rem;" onclick="saveSelectedTransform()">Salvar Nova Imagem</button>
+                        <div class="form-group">
+                            <label>Nova Observação / Detalhes (Opcional):</label>
+                            <textarea id="newImageRemark" class="form-control" rows="2" placeholder="Ex: Raio-X Dente 45..."></textarea>
+                        </div>
+                        <div class="form-actions-inline">
+                            <button class="btn btn-secondary" onclick="clearTransformSelection()">Cancelar</button>
+                            <button id="btnSaveTransform" class="btn btn-primary" onclick="saveSelectedTransform()">Salvar Nova Imagem</button>
                         </div>
                     </div>
                 </div>
 
                 <!-- View 2: GTO List & Link -->
                 <div id="gtoView" style="display: none;">
-                    <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
-                        <h3 style="margin-top: 0; font-size: 1.1rem; margin-bottom: 15px;">Cadastrar Nova GTO</h3>
-                        <div style="display: flex; gap: 10px;">
-                            <input type="text" id="inlineGtoNumber" class="search-input" placeholder="Número/ID da GTO" style="flex: 1; padding: 10px;">
-                            <input type="text" id="inlineGtoDesc" class="search-input" placeholder="Descrição (Opcional)" style="flex: 2; padding: 10px;">
+                    <div class="gto-create-section">
+                        <h3 class="section-title">Cadastrar Nova GTO</h3>
+                        <div class="form-actions-inline">
+                            <input type="text" id="inlineGtoNumber" class="form-control" placeholder="Número/ID da GTO" style="flex: 1;">
+                            <input type="text" id="inlineGtoDesc" class="form-control" placeholder="Descrição (Opcional)" style="flex: 2;">
                             <button class="btn btn-primary" onclick="inlineCreateGto()">Cadastrar</button>
                         </div>
                     </div>
 
-                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;">
-                        <h3 style="margin: 0; font-size: 1.1rem;">Vincular esta imagem a uma GTO:</h3>
+                    <div class="gto-link-section">
+                        <h3 class="section-title">Vincular esta imagem a uma GTO:</h3>
                         <button class="btn btn-success" onclick="linkImageToGto()" id="btnLinkGto">✅ Vincular Selecionada</button>
                     </div>
                     
-                    <div id="gtoListContainer" style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
+                    <div id="gtoListContainer" class="gto-list-container">
                         <!-- GTO list goes here -->
                     </div>
                 </div>
@@ -198,12 +200,12 @@
 
     <!-- Modal Novo Paciente -->
     <div class="modal" id="create-patient-modal">
-        <div class="modal-content" style="max-width: 500px; height: auto; border-radius: var(--radius);">
+        <div class="modal-content">
             <div class="modal-header">
                 <h2>Novo Paciente</h2>
                 <div class="modal-close" onclick="closeCreatePatientModal()">&times;</div>
             </div>
-            <div class="modal-body" style="overflow-y: auto;">
+            <div class="modal-body">
                 <form id="create-patient-form" onsubmit="submitCreatePatient(event)">
                     <div class="form-group">
                         <label>Nome *</label>
@@ -248,7 +250,7 @@
 
     <!-- Modal Nova GTO -->
     <div class="modal" id="create-gto-modal">
-        <div class="modal-content" style="max-width: 400px; height: auto; border-radius: var(--radius);">
+        <div class="modal-content">
             <div class="modal-header">
                 <h2>Nova GTO</h2>
                 <div class="modal-close" onclick="closeCreateGtoModal()">&times;</div>
diff --git a/dental-server/public/style.css b/dental-server/public/style.css
index 8d40961..e259d01 100644
--- a/dental-server/public/style.css
+++ b/dental-server/public/style.css
@@ -1,29 +1,49 @@
 /* ================================================================
-   DENTAL IMAGE MANAGER - STYLES (Mobile-First)
+   DENTAL IMAGE MANAGER - PREMIUM STYLES (Mobile-First)
    ================================================================ */
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 :root {
-    --primary-color: #667eea;
-    --primary-dark: #5568d3;
-    --secondary-color: #764ba2;
-    --success-color: #51cf66;
-    --danger-color: #ff6b6b;
-    --warning-color: #ffd43b;
-    --info-color: #339af0;
-    --dark-color: #1a202c;
-    --light-color: #f0f4ff;
-    --border-color: #e2e8f0;
-    --text-secondary: #718096;
-    --card-bg: #ffffff;
-    --shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
-    --shadow-lg: 0 10px 30px rgba(102, 126, 234, 0.15);
-    --radius: 14px;
+    /* Premium Color Palette */
+    --primary-color: #4f46e5;       /* Indigo 600 */
+    --primary-light: #6366f1;       /* Indigo 500 */
+    --primary-dark: #4338ca;        /* Indigo 700 */
+    --secondary-color: #ec4899;     /* Pink 500 */
+    
+    --success-color: #10b981;       /* Emerald 500 */
+    --danger-color: #ef4444;        /* Red 500 */
+    --warning-color: #f59e0b;       /* Amber 500 */
+    --info-color: #3b82f6;          /* Blue 500 */
+    
+    /* Neutrals & Typography */
+    --dark-color: #0f172a;          /* Slate 900 */
+    --text-primary: #1e293b;        /* Slate 800 */
+    --text-secondary: #64748b;      /* Slate 500 */
+    --text-muted: #94a3b8;          /* Slate 400 */
+    
+    /* Backgrounds & Borders */
+    --bg-color: #f8fafc;            /* Slate 50 */
+    --bg-surface: #ffffff;
+    --border-color: #e2e8f0;        /* Slate 200 */
+    
+    /* Shadows & Effects */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    
+    /* Glassmorphism */
+    --glass-bg: rgba(255, 255, 255, 0.7);
+    --glass-border: rgba(255, 255, 255, 0.5);
+    --glass-blur: blur(12px);
+    
+    /* Layout */
     --radius-sm: 8px;
-    --header-h: 60px;
-    --bg-color: var(--light-color);
-    --text-color: var(--dark-color);
+    --radius: 12px;
+    --radius-lg: 20px;
+    --radius-full: 9999px;
+    --sidebar-width: 280px;
 }
 
 * {
@@ -39,225 +59,241 @@ html {
 
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    background: var(--light-color);
-    color: var(--dark-color);
+    background: var(--bg-color);
+    color: var(--text-primary);
     line-height: 1.6;
     min-height: 100vh;
     -webkit-font-smoothing: antialiased;
 }
 
 /* ================================================================
-   LAYOUT CONTAINER
+   LAYOUT & SIDEBAR (Glassmorphism)
    ================================================================ */
 
-.container {
-    width: 100%;
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 12px;
+.app-container {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
 }
 
-@media (min-width: 768px) {
-    .container {
-        padding: 24px;
-    }
-}
-
-/* ================================================================
-   HEADER
-   ================================================================ */
-
-.header {
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-    color: white;
-    padding: 18px 16px;
-    border-radius: var(--radius);
-    box-shadow: var(--shadow-lg);
-    margin-bottom: 16px;
-    position: sticky;
-    top: 8px;
-    z-index: 100;
-}
-
-@media (min-width: 768px) {
-    .header {
-        padding: 28px 30px;
-        margin-bottom: 28px;
-        position: static;
-    }
-}
-
-.header-content {
+.sidebar {
+    width: var(--sidebar-width);
+    background: var(--glass-bg);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+    border-right: 1px solid var(--glass-border);
     display: flex;
     flex-direction: column;
+    flex-shrink: 0;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 100;
+    box-shadow: var(--shadow-md);
+}
+
+.sidebar-header {
+    padding: 24px 20px;
+    background: transparent;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-header h2 {
+    margin: 0;
+    font-size: 1.4rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.sidebar-nav {
+    flex: 1;
+    padding: 20px 12px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-weight: 500;
+    border-radius: var(--radius);
+    transition: all 0.2s ease;
     gap: 12px;
 }
 
-@media (min-width: 768px) {
-    .header-content {
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-    }
+.nav-item .icon {
+    font-size: 1.2rem;
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+}
+
+.nav-item:hover {
+    background-color: var(--bg-surface);
+    color: var(--primary-color);
+    box-shadow: var(--shadow-sm);
+    transform: translateX(4px);
+}
+
+.nav-item:hover .icon {
+    transform: scale(1.1);
+}
+
+.nav-item.active {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+    color: white;
+    box-shadow: var(--shadow);
+    font-weight: 600;
+}
+
+.nav-divider {
+    height: 1px;
+    background: var(--border-color);
+    margin: 16px 0;
+}
+
+.client-filter {
+    width: 100%;
+    border: 1px solid var(--border-color);
+    background: var(--bg-surface);
+    color: var(--text-primary);
+    border-radius: var(--radius-sm);
+    padding: 10px 14px;
+    font-family: inherit;
+    font-size: 0.95rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: var(--shadow-sm);
+    outline: none;
+}
+
+.client-filter:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+}
+
+/* ================================================================
+   MAIN CONTENT & HEADER
+   ================================================================ */
+
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+}
+
+.header {
+    background: var(--glass-bg);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+    border-bottom: 1px solid var(--glass-border);
+    padding: 16px 32px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 90;
+    box-shadow: var(--shadow-sm);
+    flex-shrink: 0;
 }
 
 .header-left {
     display: flex;
     align-items: center;
-    gap: 12px;
-    min-width: 0;
+    gap: 16px;
 }
 
 .header h1 {
-    font-size: 1.3rem;
+    font-size: 1.5rem;
     font-weight: 700;
-    letter-spacing: -0.3px;
-    white-space: nowrap;
-}
-
-@media (min-width: 768px) {
-    .header h1 {
-        font-size: 1.8rem;
-    }
-}
-
-/* Back button */
-.btn-back {
-    background: rgba(255,255,255,0.15);
-    color: white;
-    border: 1px solid rgba(255,255,255,0.3);
-    padding: 8px 14px;
-    font-size: 0.85rem;
-    border-radius: 50px;
-    white-space: nowrap;
-    flex-shrink: 0;
-}
-
-.btn-back:hover {
-    background: rgba(255,255,255,0.28);
-    transform: none;
-    box-shadow: none;
-}
-
-/* Patient sub-header */
-.patient-header {
-    margin-top: 14px;
-    padding-top: 14px;
-    border-top: 1px solid rgba(255,255,255,0.15);
-}
-
-.patient-header-name {
-    font-size: 1.15rem;
-    font-weight: 700;
-    color: white;
-}
-
-.patient-header-meta {
-    font-size: 0.82rem;
-    color: rgba(255,255,255,0.7);
-    margin-top: 2px;
-}
-
-.header-actions {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-}
-
-@media (min-width: 768px) {
-    .header-actions {
-        display: flex;
-        flex-direction: row;
-        gap: 12px;
-        align-items: center;
-    }
-}
-
-.client-filter {
-    grid-column: span 2;
-    padding: 10px 14px;
-    border: none;
-    border-radius: var(--radius-sm);
-    font-size: 0.9rem;
-    font-family: inherit;
-    background: rgba(255,255,255,0.95);
     color: var(--dark-color);
-    cursor: pointer;
-    width: 100%;
-    font-weight: 500;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-
-@media (min-width: 768px) {
-    .client-filter {
-        min-width: 220px;
-        width: auto;
-        grid-column: auto;
-        padding: 12px 18px;
-        font-size: 1rem;
-    }
-}
-
-.client-filter:focus {
-    outline: 3px solid rgba(255,255,255,0.4);
+    letter-spacing: -0.5px;
 }
 
 .search-input {
-    grid-column: span 2;
-    padding: 10px 14px;
-    border: none;
-    border-radius: var(--radius-sm);
-    font-size: 0.9rem;
+    padding: 10px 16px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-full);
+    font-size: 0.95rem;
     font-family: inherit;
-    background: rgba(255,255,255,0.95);
+    background: var(--bg-surface);
+    color: var(--text-primary);
     width: 100%;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-
-@media (min-width: 768px) {
-    .search-input {
-        flex: 1;
-        grid-column: auto;
-        min-width: 220px;
-        padding: 12px 18px;
-        font-size: 1rem;
-    }
+    min-width: 260px;
+    box-shadow: var(--shadow-sm);
+    transition: all 0.2s ease;
+    outline: none;
 }
 
 .search-input:focus {
-    outline: 3px solid rgba(255,255,255,0.4);
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+    transform: translateY(-1px);
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.content-scroll {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 32px;
 }
 
 /* ================================================================
-   BUTTONS
+   BUTTONS (Premium)
    ================================================================ */
 
 .btn {
-    padding: 10px 16px;
+    padding: 10px 20px;
     border: none;
-    border-radius: var(--radius-sm);
-    font-size: 0.875rem;
+    border-radius: var(--radius-full);
+    font-size: 0.95rem;
     font-weight: 600;
     font-family: inherit;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     white-space: nowrap;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 6px;
-    touch-action: manipulation;
+    gap: 8px;
+    box-shadow: var(--shadow-sm);
+    position: relative;
+    overflow: hidden;
 }
 
-@media (min-width: 768px) {
-    .btn {
-        padding: 12px 22px;
-        font-size: 0.95rem;
-    }
+.btn::after {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 100%;
+    background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0));
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.btn:hover::after {
+    opacity: 1;
 }
 
 .btn:hover {
-    transform: translateY(-1px);
+    transform: translateY(-2px);
     box-shadow: var(--shadow);
 }
 
@@ -266,300 +302,150 @@ body {
 }
 
 .btn-primary {
-    background: var(--primary-color);
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
     color: white;
 }
 
-.btn-primary:hover {
-    background: var(--primary-dark);
-}
-
 .btn-secondary {
-    background: rgba(255,255,255,0.2);
-    color: white;
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255,255,255,0.3);
+    background: var(--bg-surface);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
 }
 
 .btn-secondary:hover {
-    background: rgba(255,255,255,0.3);
+    background: #f1f5f9;
+    border-color: #cbd5e1;
 }
 
 .btn-success {
-    background: var(--success-color);
+    background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
     color: white;
 }
 
-.btn-success:hover {
-    background: #43b558;
-}
-
 .btn-danger {
-    background: var(--danger-color);
+    background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
     color: white;
 }
 
-.btn-danger:hover {
-    background: #f03e3e;
-}
-
-.btn-info {
-    background: var(--info-color);
-    color: white;
-    text-decoration: none;
-}
-
-.btn-info:hover {
-    background: #228be6;
-}
-
 .btn-block {
     width: 100%;
-    margin-top: 10px;
 }
 
-.btn-small {
-    padding: 7px 12px;
-    font-size: 0.8rem;
+.btn-back {
+    background: var(--bg-surface);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+    padding: 8px 16px;
 }
 
 /* ================================================================
-   IMAGES GRID
+   GRID & CARDS
    ================================================================ */
 
 .images-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 12px;
-    margin-bottom: 40px;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 24px;
 }
 
-@media (min-width: 480px) {
-    .images-grid {
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-        gap: 14px;
-    }
-}
-
-@media (min-width: 768px) {
-    .images-grid {
-        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-        gap: 20px;
-    }
-}
-
-/* ================================================================
-   IMAGE CARD
-   ================================================================ */
-
-.image-card {
-    background: var(--card-bg);
-    border-radius: var(--radius);
+.image-card, .patient-card {
+    background: var(--bg-surface);
+    border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
     position: relative;
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--glass-border);
     display: flex;
     flex-direction: column;
 }
 
-.image-card:hover {
-    transform: translateY(-3px);
+.image-card:hover, .patient-card:hover {
+    transform: translateY(-6px);
     box-shadow: var(--shadow-lg);
-}
-
-.image-card:active {
-    transform: translateY(-1px);
-}
-
-.image-card.disabled {
-    opacity: 0.65;
-    border: 2px dashed var(--warning-color);
+    border-color: var(--primary-light);
 }
 
 .image-preview {
     width: 100%;
-    height: 160px;
-    min-height: 160px;
+    height: 220px;
     object-fit: cover;
-    background: linear-gradient(135deg, #e2e8f0, #cbd5e0);
-    flex-shrink: 0;
+    background: #e2e8f0;
+    position: relative;
+    transition: transform 0.3s ease;
 }
 
-@media (min-width: 480px) {
-    .image-preview {
-        height: 200px;
-        min-height: 200px;
-    }
+.image-card:hover .image-preview {
+    transform: scale(1.03);
 }
 
-@media (min-width: 768px) {
-    .image-preview {
-        height: 240px;
-        min-height: 240px;
-    }
+.image-preview-wrapper {
+    overflow: hidden;
+    position: relative;
 }
 
 .image-info {
-    padding: 12px;
-}
-
-@media (min-width: 768px) {
-    .image-info {
-        padding: 15px;
-    }
+    padding: 20px;
+    background: var(--bg-surface);
+    position: relative;
+    z-index: 2;
 }
 
 .image-patient-name {
     font-weight: 700;
-    margin-bottom: 3px;
-    font-size: 0.95rem;
+    font-size: 1.1rem;
     color: var(--dark-color);
-    line-height: 1.3;
+    margin-bottom: 4px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-@media (min-width: 768px) {
-    .image-patient-name {
-        font-size: 1.05rem;
-    }
-}
-
-.image-guid {
-    font-size: 0.72rem;
-    color: var(--text-secondary);
-    margin-bottom: 8px;
-    word-break: break-all;
-    line-height: 1.4;
-    /* Show only 2 lines */
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
 .image-meta {
     display: flex;
     justify-content: space-between;
-    font-size: 0.78rem;
-    color: #888;
-    flex-wrap: wrap;
-    gap: 4px;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    font-weight: 500;
 }
 
 .image-doctor-remark {
-    margin-top: 6px;
-    padding-top: 6px;
-    border-top: 1px dashed #edf2f7;
-    font-size: 0.75rem;
-    color: #4a5568;
-    line-height: 1.5;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border-color);
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    font-style: italic;
 }
 
-.image-doctor-remark div {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.image-actions {
-    display: flex;
-    gap: 6px;
-    margin-top: 10px;
-    flex-wrap: wrap;
-}
-
-.image-actions .btn {
-    flex: 1;
-    min-width: 0;
-    padding: 7px 8px;
-    font-size: 0.75rem;
-}
-
-@media (min-width: 480px) {
-    .image-actions .btn {
-        font-size: 0.8rem;
-        padding: 8px 10px;
-    }
-}
-
-.image-badge {
+.delete-patient-btn {
     position: absolute;
-    top: 8px;
-    right: 8px;
-    background: var(--danger-color);
-    color: white;
-    padding: 4px 8px;
-    border-radius: 20px;
-    font-size: 0.72rem;
-    font-weight: 700;
-    letter-spacing: 0.3px;
-}
-
-/* Patient count badge (in thumbnail overlay) */
-.patient-count-badge {
-    position: absolute;
-    bottom: 10px;
-    left: 10px;
-    background: rgba(0,0,0,0.65);
-    color: white;
-    padding: 4px 10px;
-    border-radius: 20px;
-    font-size: 0.78rem;
-    font-weight: 600;
+    top: 12px;
+    right: 12px;
+    background: rgba(239, 68, 68, 0.9);
     backdrop-filter: blur(4px);
-}
-
-/* Patient card image-preview needs relative positioning */
-.patient-card .image-preview {
-    position: relative;
-}
-
-/* Subtle scale on patient card click */
-.patient-card:active {
-    transform: scale(0.98);
-}
-
-/* ================================================================
-   LOADING & EMPTY STATES
-   ================================================================ */
-
-.loading {
-    text-align: center;
-    padding: 60px 20px;
-}
-
-.spinner {
-    border: 3px solid var(--border-color);
-    border-top: 3px solid var(--primary-color);
+    color: white;
+    border: none;
     border-radius: 50%;
-    width: 44px;
-    height: 44px;
-    animation: spin 0.8s linear infinite;
-    margin: 0 auto 20px;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 10;
+    transition: all 0.2s ease;
+    box-shadow: var(--shadow-md);
 }
 
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-.empty-state {
-    text-align: center;
-    padding: 60px 20px;
-}
-
-.empty-icon {
-    font-size: 3.5rem;
-    margin-bottom: 16px;
+.delete-patient-btn:hover {
+    transform: scale(1.15) rotate(90deg);
+    background: var(--danger-color);
 }
 
 /* ================================================================
-   MODAL
+   MODALS (Premium Overlay)
    ================================================================ */
 
 .modal {
@@ -570,742 +456,445 @@ body {
     top: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0,0,0,0.65);
-    backdrop-filter: blur(4px);
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
+    background: rgba(15, 23, 42, 0.6);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    opacity: 0;
+    transition: opacity 0.3s ease;
 }
 
 .modal.active {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0;
+    opacity: 1;
 }
 
 .modal-content {
-    background: white;
-    border-radius: 0;
-    width: 100vw;
-    height: 100vh;
-    max-height: 100vh;
-    max-width: 100vw;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    box-shadow: none;
-    animation: slideUp 0.3s ease;
+    background: var(--bg-surface);
+    border-radius: var(--radius-lg);
+    width: 90%;
+    max-width: 500px;
+    max-height: 90vh;
+    box-shadow: var(--shadow-lg);
     display: flex;
     flex-direction: column;
+    transform: translateY(20px) scale(0.95);
+    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    overflow: hidden;
+}
+
+.modal.active .modal-content {
+    transform: translateY(0) scale(1);
 }
 
 .modal-large {
-    width: 90vw;
-    height: 98vh;
-    max-width: 90vw;
-    max-height: 98vh;
-    border-radius: 16px;
-    box-shadow: 0 24px 80px rgba(0,0,0,0.45);
-    animation: modalAppear 0.25s ease;
-}
-
-@keyframes modalAppear {
-    from { opacity: 0; transform: scale(0.95); }
-    to   { opacity: 1; transform: scale(1); }
-}
-
-@keyframes slideUp {
-    from { transform: translateY(100%); }
-    to { transform: translateY(0); }
-}
-
-@keyframes slideDown {
-    from { opacity: 0; transform: translateY(-30px); }
-    to { opacity: 1; transform: translateY(0); }
+    max-width: 1100px;
+    height: 90vh;
 }
 
 .modal-header {
-    padding: 18px 20px;
+    padding: 24px 32px;
     border-bottom: 1px solid var(--border-color);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    position: sticky;
-    top: 0;
-    background: white;
-    z-index: 1;
+    background: var(--bg-surface);
 }
 
 .modal-header h2 {
-    font-size: 1.1rem;
-    color: var(--dark-color);
+    font-size: 1.4rem;
     font-weight: 700;
-}
-
-@media (min-width: 600px) {
-    .modal-header {
-        padding: 24px 28px;
-    }
-    .modal-header h2 {
-        font-size: 1.4rem;
-    }
+    color: var(--dark-color);
 }
 
 .modal-close {
-    font-size: 1.8rem;
-    cursor: pointer;
-    color: #888;
-    transition: color 0.2s;
-    line-height: 1;
-    padding: 4px;
-    border-radius: 50%;
     width: 36px;
     height: 36px;
+    border-radius: 50%;
+    background: var(--bg-color);
     display: flex;
     align-items: center;
     justify-content: center;
-    flex-shrink: 0;
+    font-size: 1.5rem;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.2s ease;
 }
 
 .modal-close:hover {
+    background: #fee2e2;
     color: var(--danger-color);
-    background: #fff0f0;
+    transform: rotate(90deg);
 }
 
 .modal-body {
-    padding: 20px;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
+    padding: 32px;
     overflow-y: auto;
-}
-
-@media (min-width: 600px) {
-    .modal-body {
-        padding: 28px;
-    }
+    flex: 1;
 }
 
 /* ================================================================
-   TRANSFORM GRID — Adaptativo por orientação da imagem
-   ================================================================
+   FORMS & INPUTS
+   ================================================================ */
 
-   HORIZONTAL (original paisagem):
-     - Original           → coluna 1, 2 linhas
-     - Flip H + Flip V    → coluna 2, empilhados (um sobre o outro)
-     - +90° e -90°       → colunas 3 e 4, lado a lado
+.form-group {
+    margin-bottom: 24px;
+}
 
-   VERTICAL (original retrato):
-     - Original           → coluna 1, 2 linhas
-     - Flip H + Flip V    → colunas 2 e 3, lado a lado
-     - +90° e -90°       → coluna 4, empilhados (um sobre o outro)
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+    font-size: 0.95rem;
+    color: var(--text-primary);
+}
+
+.form-control,
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 14px 16px;
+    border: 2px solid var(--border-color);
+    border-radius: var(--radius);
+    font-size: 1rem;
+    font-family: inherit;
+    transition: all 0.2s ease;
+    background: var(--bg-color);
+    color: var(--text-primary);
+    outline: none;
+}
+
+.form-control:focus,
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    border-color: var(--primary-color);
+    background: var(--bg-surface);
+    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
+}
+
+/* ================================================================
+   TRANSFORM GRID (Editor de Imagens)
    ================================================================ */
 
 .transform-grid {
     display: grid;
-    gap: 12px;
-    height: 100%;
-    align-items: stretch;
+    gap: 16px;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
-/* ---- HORIZONTAL (paisagem) ---- */
-.transform-grid.grid-landscape {
-    grid-template-columns: 2fr 1.3fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-}
-/* Original: col 1, 2 linhas */
-.transform-grid.grid-landscape .transform-option:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
-/* Flip H: col 2, linha 1 */
-.transform-grid.grid-landscape .transform-option:nth-child(2) { grid-column: 2; grid-row: 1; }
-/* Flip V: col 2, linha 2 (empilhado sob Flip H) */
-.transform-grid.grid-landscape .transform-option:nth-child(3) { grid-column: 2; grid-row: 2; }
-/* +90°: col 3, 2 linhas (lado a lado com -90°) */
-.transform-grid.grid-landscape .transform-option:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
-/* -90°: col 4, 2 linhas (lado a lado com +90°) */
-.transform-grid.grid-landscape .transform-option:nth-child(5) { grid-column: 4; grid-row: 1 / span 2; }
-
-/* ---- VERTICAL (retrato) ---- */
-.transform-grid.grid-portrait {
-    grid-template-columns: 1fr 1fr 1fr 1.6fr;
-    grid-template-rows: 1fr 1fr;
-}
-/* Original: col 1, 2 linhas */
-.transform-grid.grid-portrait .transform-option:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
-/* Flip H: col 2, 2 linhas (lado a lado com Flip V) */
-.transform-grid.grid-portrait .transform-option:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
-/* Flip V: col 3, 2 linhas (lado a lado com Flip H) */
-.transform-grid.grid-portrait .transform-option:nth-child(3) { grid-column: 3; grid-row: 1 / span 2; }
-/* +90°: col 4, linha 1 (empilhado sobre -90°) */
-.transform-grid.grid-portrait .transform-option:nth-child(4) {
-    grid-column: 4;
-    grid-row: 1;
-}
-
-/* Modo de Seleção Ativa (Exibe apenas 2 imagens) */
-.selection-mode {
-    display: flex !important;
-    justify-content: center;
-    gap: 30px;
-    align-items: center;
-    flex-wrap: wrap;
-}
-.selection-mode .transform-option {
-    width: 45%;
-    max-width: 450px;
-    grid-column: auto !important;
-    grid-row: auto !important;
-}
-.selection-mode .transform-option img {
-    height: 35vh !important;
-    max-height: 400px;
-    object-fit: contain;
-}
-/* -90°: col 4, linha 2 (empilhado sob +90°) */
-.transform-grid.grid-portrait .transform-option:nth-child(5) { grid-column: 4; grid-row: 2; }
-
-/* ---- Fallback (sem classe de orientação ainda) ---- */
-.transform-grid:not(.grid-landscape):not(.grid-portrait) {
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-}
-.transform-grid:not(.grid-landscape):not(.grid-portrait) .transform-option:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
-.transform-grid:not(.grid-landscape):not(.grid-portrait) .transform-option:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
-.transform-grid:not(.grid-landscape):not(.grid-portrait) .transform-option:nth-child(3) { grid-column: 3; grid-row: 1 / span 2; }
-.transform-grid:not(.grid-landscape):not(.grid-portrait) .transform-option:nth-child(4) { grid-column: 4; grid-row: 1; }
-.transform-grid:not(.grid-landscape):not(.grid-portrait) .transform-option:nth-child(5) { grid-column: 4; grid-row: 2; }
-
 .transform-option {
+    background: var(--bg-surface);
     border: 2px solid var(--border-color);
-    border-radius: var(--radius-sm);
-    padding: 10px;
+    border-radius: var(--radius-lg);
+    padding: 16px;
     cursor: pointer;
     transition: all 0.2s ease;
     text-align: center;
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-    min-height: 0;
-    overflow: hidden;
+    box-shadow: var(--shadow-sm);
 }
 
 .transform-option:hover {
-    border-color: var(--primary-color);
-    transform: scale(1.02);
+    border-color: var(--primary-light);
+    transform: translateY(-4px);
+    box-shadow: var(--shadow);
 }
 
 .transform-option.selected {
-    border-color: var(--success-color);
-    background: rgba(81, 207, 102, 0.08);
+    border-color: var(--primary-color);
+    background: rgba(79, 70, 229, 0.05);
+    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
 }
 
 .transform-option img {
     max-width: 100%;
-    flex: 1;
-    min-height: 0;
+    height: 180px;
     object-fit: contain;
-    border-radius: 4px;
-    margin-bottom: 10px;
-}
-
-.transform-name {
-    font-size: 0.9rem;
-    font-weight: 600;
-    color: var(--dark-color);
-    flex-shrink: 0;
-}
-
-
-
-/* ================================================================
-   FORMS
-   ================================================================ */
-
-.form-group {
-    margin-bottom: 18px;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 7px;
-    font-weight: 600;
-    font-size: 0.9rem;
-    color: var(--dark-color);
-}
-
-.form-group input,
-.form-group select {
-    width: 100%;
-    padding: 12px 14px;
-    border: 2px solid var(--border-color);
     border-radius: var(--radius-sm);
-    font-size: 1rem;
-    font-family: inherit;
-    transition: border-color 0.2s;
-    background: white;
-    -webkit-appearance: none;
-    appearance: none;
-}
-
-.form-group input:focus,
-.form-group select:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
-}
-
-.form-group small {
-    display: block;
-    margin-top: 5px;
-    color: var(--text-secondary);
-    font-size: 0.8rem;
-}
-
-.form-actions {
-    margin-top: 20px;
+    margin-bottom: 12px;
 }
 
 /* ================================================================
-   TOAST NOTIFICATION
+   TOAST NOTIFICATIONS
    ================================================================ */
 
 .toast {
     position: fixed;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%) translateY(120px);
-    padding: 13px 22px;
-    border-radius: 50px;
+    bottom: 32px;
+    right: 32px;
+    padding: 16px 24px;
+    border-radius: var(--radius-lg);
     color: white;
     font-weight: 600;
-    font-size: 0.9rem;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+    font-size: 1rem;
+    box-shadow: var(--shadow-lg);
+    transform: translateY(100px);
     opacity: 0;
-    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
     z-index: 2000;
-    white-space: nowrap;
-    max-width: calc(100vw - 32px);
-    text-align: center;
-}
-
-@media (min-width: 600px) {
-    .toast {
-        bottom: 30px;
-        right: 30px;
-        left: auto;
-        transform: translateX(0) translateY(120px);
-        border-radius: 10px;
-    }
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }
 
 .toast.show {
-    transform: translateX(-50%) translateY(0);
+    transform: translateY(0);
     opacity: 1;
 }
 
-@media (min-width: 600px) {
-    .toast.show {
-        transform: translateX(0) translateY(0);
-    }
-}
-
-.toast.success { background: var(--success-color); }
-.toast.error { background: var(--danger-color); }
-.toast.info { background: var(--primary-color); }
+.toast.success { background: linear-gradient(135deg, var(--success-color), #059669); }
+.toast.error { background: linear-gradient(135deg, var(--danger-color), #dc2626); }
+.toast.info { background: linear-gradient(135deg, var(--info-color), #2563eb); }
+.toast.warning { background: linear-gradient(135deg, var(--warning-color), #d97706); }
 
 /* ================================================================
-   SIDEBAR LAYOUT
+   NEW MODAL & SIDEBAR CLASSES
    ================================================================ */
 
-.app-container {
-    display: flex;
-    height: 100vh;
-    width: 100vw;
-    overflow: hidden;
-    background-color: var(--bg-color);
+.sidebar-filter-wrapper {
+    padding: 10px 16px;
 }
 
-.sidebar {
-    width: 250px;
-    background: #fff;
-    border-right: 1px solid var(--border-color);
+.sidebar-footer {
+    padding: 20px;
+    border-top: 1px solid var(--border-color);
+    margin-top: auto;
+}
+
+.sidebar-brand {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    opacity: 0.7;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.version-badge {
+    background: rgba(79, 70, 229, 0.1);
+    color: var(--primary-color);
+    padding: 2px 8px;
+    border-radius: var(--radius-full);
+    font-family: monospace;
+    font-size: 0.75rem;
+}
+
+.modal-title-group {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.modal-actions-group {
+    display: flex;
+    gap: 8px;
+}
+
+.modal-actions-group .btn {
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    font-size: 1.2rem;
+}
+
+.extra-info-panel {
+    font-size: 0.95rem;
+    color: var(--text-secondary);
+    background: #f8f9fa;
+    padding: 16px 24px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-color);
+    margin-bottom: 20px;
+}
+
+.transform-view-wrapper {
     display: flex;
     flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+}
+
+.transform-action-area {
+    margin-top: 24px;
+    background: #f8f9fa;
+    padding: 24px;
+    border-radius: var(--radius-sm);
     flex-shrink: 0;
-    transition: all 0.3s ease;
-    z-index: 10;
+    border: 1px solid var(--border-color);
 }
 
-.sidebar-header {
-    padding: 20px;
-    border-bottom: 1px solid rgba(255,255,255,0.15);
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+.fine-tune-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 24px;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 24px;
 }
 
-.sidebar-header h2 {
-    margin: 0;
-    font-size: 1.2rem;
-    color: #fff;
+.fine-tune-title {
+    font-weight: 700;
+    font-size: 1rem;
+    margin-bottom: 16px;
+    color: var(--dark-color);
     display: flex;
     align-items: center;
     gap: 8px;
 }
 
-.sidebar-nav {
-    flex: 1;
-    padding: 12px 0;
-    overflow-y: auto;
-}
-
-.nav-item {
+.fine-tune-controls {
     display: flex;
     align-items: center;
-    padding: 12px 20px;
-    color: var(--text-color);
-    text-decoration: none;
-    font-weight: 500;
-    transition: all 0.2s;
-    gap: 10px;
-    border-left: 3px solid transparent;
+    gap: 12px;
+    justify-content: center;
+    flex-wrap: wrap;
 }
 
-.nav-item .icon {
-    font-size: 1.1rem;
-    flex-shrink: 0;
-}
-
-.nav-item:hover {
-    background-color: rgba(102, 126, 234, 0.08);
+.fine-tune-display {
+    min-width: 100px;
+    text-align: center;
+    padding: 8px 16px;
+    background: white;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    font-family: monospace;
+    font-weight: 700;
+    font-size: 1.2rem;
     color: var(--primary-color);
-    border-left-color: var(--primary-color);
 }
 
-.nav-item.active {
-    background-color: rgba(102, 126, 234, 0.12);
-    color: var(--primary-color);
-    border-left-color: var(--primary-color);
-    font-weight: 600;
+.btn-small {
+    padding: 6px 12px;
+    font-size: 0.85rem;
 }
 
-.nav-divider {
-    height: 1px;
-    background: var(--border-color);
-    margin: 10px 0;
-}
-
-/* ---------------------------------------------------------------
-   MAIN CONTENT — header fixo + área interna rolável
-   --------------------------------------------------------------- */
-.main-content {
-    flex: 1;
+.form-actions-inline {
     display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    min-width: 0;
+    gap: 12px;
+    margin-top: 16px;
 }
 
-.main-content .header {
-    border-radius: 0;
+.gto-create-section, .gto-link-section {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: var(--radius-sm);
+    margin-bottom: 24px;
+    border: 1px solid var(--border-color);
+}
+
+.gto-link-section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.section-title {
     margin: 0;
-    border-bottom: 1px solid rgba(255,255,255,0.2);
-    box-shadow: none;
-    flex-shrink: 0;
+    font-size: 1.1rem;
+    color: var(--dark-color);
 }
 
-/* Wrapper rolável que envolve loading/empty/grid */
-.content-scroll {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-    background: var(--bg-color);
-}
-
-/* Compatibilidade */
-.app-container .container { display: none; }
-
-/* Header padding */
-.header-content { padding: 14px 20px; }
-
-/* ---------------------------------------------------------------
-   IMAGES GRID — grid puro sem flex tricks
-   --------------------------------------------------------------- */
-.app-container #imagesGrid {
-    display: grid !important;
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    gap: 20px;
-    padding: 24px;
-    align-content: start;
-}
-
-@media (min-width: 1400px) {
-    .app-container #imagesGrid {
-        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    }
-}
-
-@media (max-width: 900px) {
-    .app-container #imagesGrid {
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-        gap: 14px;
-        padding: 16px;
-    }
-}
-
-/* Image preview — altura fixa garantida */
-.app-container .image-preview {
-    height: 200px !important;
-    min-height: 200px !important;
-    flex-shrink: 0 !important;
-    background-size: cover !important;
-    background-position: center !important;
-}
-
-/* ---------------------------------------------------------------
-   RESPONSIVE SIDEBAR
-   --------------------------------------------------------------- */
-@media (max-width: 768px) {
-    .sidebar { width: 60px; }
-    .sidebar-header { padding: 14px 10px; }
-    .sidebar-header h2 span:not(.icon) { display: none; }
-    .nav-item span:not(.icon) { display: none; }
-    .nav-item { justify-content: center; padding: 14px 0; gap: 0; }
-    .nav-item .icon { margin-right: 0; font-size: 1.3rem; }
-    #toggleDisabledBtn { font-size: 0; padding: 10px; }
-    #toggleDisabledBtn::before { content: '👁'; font-size: 1.1rem; }
+.gto-list-container {
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
 }
 
 /* ================================================================
-   SYNC & UPLOAD MODAL STYLES
+   UTILITIES & STATES
    ================================================================ */
 
-.sync-tabs {
+.loading {
     display: flex;
-    border-bottom: 2px solid var(--border-color);
-    margin-bottom: 20px;
-    gap: 10px;
-}
-
-.sync-tab-btn {
-    padding: 12px 20px;
-    background: none;
-    border: none;
-    border-bottom: 3px solid transparent;
-    font-size: 1rem;
-    font-weight: 600;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
     color: var(--text-secondary);
-    cursor: pointer;
-    transition: all 0.25s ease;
-}
-
-.sync-tab-btn:hover {
-    color: var(--primary-color);
-}
-
-.sync-tab-btn.active {
-    color: var(--primary-color);
-    border-bottom-color: var(--primary-color);
-}
-
-.sync-tab-content {
-    display: none;
-    animation: slideDown 0.25s ease;
-}
-
-.sync-tab-content.active {
-    display: block;
-}
-
-/* Área de Drag & Drop */
-.drag-drop-zone {
-    border: 3px dashed var(--border-color);
-    border-radius: var(--radius);
-    padding: 40px 20px;
-    text-align: center;
-    background: #fdfdfd;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    margin-bottom: 20px;
-}
-
-.drag-drop-zone:hover,
-.drag-drop-zone.drag-active {
-    border-color: var(--primary-color);
-    background: rgba(102, 126, 234, 0.04);
-}
-
-.drag-drop-icon {
-    font-size: 3rem;
-    margin-bottom: 12px;
-}
-
-.drag-drop-text {
-    font-size: 1rem;
-    color: var(--text-color);
     font-weight: 500;
-    margin-bottom: 6px;
 }
 
-.drag-drop-subtext {
-    font-size: 0.82rem;
+.spinner {
+    width: 48px;
+    height: 48px;
+    border: 4px solid var(--border-color);
+    border-top: 4px solid var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 16px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.empty-state {
+    text-align: center;
+    padding: 80px 20px;
     color: var(--text-secondary);
 }
 
-/* Preview de arquivos selecionados */
-.upload-previews {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-    gap: 10px;
-    margin-bottom: 20px;
+.empty-icon {
+    font-size: 4rem;
+    margin-bottom: 24px;
+    opacity: 0.5;
 }
 
-.preview-item {
-    position: relative;
-    aspect-ratio: 1;
-    border-radius: 6px;
-    overflow: hidden;
-    border: 1px solid var(--border-color);
-}
+/* ================================================================
+   RESPONSIVE OVERRIDES
+   ================================================================ */
 
-.preview-item img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.preview-remove {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    background: rgba(220, 53, 69, 0.85);
-    color: white;
-    border: none;
-    border-radius: 50%;
-    width: 18px;
-    height: 18px;
-    font-size: 10px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-}
-
-.preview-remove:hover {
-    background: #dc3545;
-}
-
-/* Barra de Progresso */
-.upload-progress-container {
-    background: #f8f9fa;
-    border-radius: 8px;
-    padding: 15px;
-    margin-bottom: 20px;
-    border: 1px solid var(--border-color);
-}
-
-.progress-bar-label {
-    display: flex;
-    justify-content: space-between;
-    font-size: 0.85rem;
-    font-weight: 600;
-    margin-bottom: 8px;
-    color: var(--dark-color);
-}
-
-.progress-bar-track {
-    background: #e2e8f0;
-    border-radius: 10px;
-    height: 8px;
-    overflow: hidden;
-}
-
-.progress-bar-fill {
-    background: linear-gradient(90deg, var(--primary-color) 0%, #764ba2 100%);
-    height: 100%;
-    width: 0%;
-    transition: width 0.2s ease;
-}
-
-/* Lista de dispositivos online */
-.sync-device-list {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    margin: 20px 0;
-}
-
-.sync-device-card {
-    background: #f8f9fa;
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-sm);
-    padding: 15px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    transition: all 0.2s ease;
-}
-
-.sync-device-card:hover {
-    border-color: var(--primary-color);
-    background: #fff;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
-}
-
-.device-card-left {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.device-card-title {
-    font-weight: 700;
-    font-size: 0.95rem;
-    color: var(--dark-color);
-}
-
-.device-card-subtitle {
-    font-size: 0.78rem;
-    color: var(--text-secondary);
-}
-
-.device-card-badge {
-    padding: 5px 12px;
-    border-radius: 20px;
-    font-size: 0.72rem;
-    font-weight: 700;
-}
-
-.badge-connected {
-    background: rgba(81, 207, 102, 0.15);
-    color: var(--success-color);
-}
-
-.badge-disconnected {
-    background: rgba(220, 53, 69, 0.1);
-    color: var(--danger-color);
-}
-
-/* Botão de Excluir Paciente nos cards iniciais */
-.delete-patient-btn {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: rgba(220, 53, 69, 0.85);
-    color: white;
-    border: none;
-    border-radius: 50%;
-    width: 34px;
-    height: 34px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    z-index: 5;
-    transition: all 0.2s ease;
-    font-size: 1.05rem;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
-}
-
-.delete-patient-btn:hover {
-    background: #dc3545;
-    transform: scale(1.1);
+@media (max-width: 768px) {
+    .app-container {
+        flex-direction: column;
+    }
+    .sidebar {
+        width: 100%;
+        height: auto;
+        border-right: none;
+        border-bottom: 1px solid var(--border-color);
+        flex-direction: row;
+        align-items: center;
+        padding: 0 16px;
+    }
+    .sidebar-header {
+        padding: 16px 0;
+        border-bottom: none;
+    }
+    .sidebar-nav {
+        flex-direction: row;
+        overflow-x: auto;
+        padding: 0 16px;
+        gap: 16px;
+    }
+    .nav-item {
+        padding: 12px;
+    }
+    .nav-item span:not(.icon) {
+        display: none;
+    }
+    .content-scroll {
+        padding: 16px;
+    }
+    .header {
+        padding: 16px;
+        flex-direction: column;
+        gap: 16px;
+        align-items: flex-start;
+    }
+    .search-input {
+        min-width: 100%;
+    }
+    .modal-content {
+        width: 95%;
+        max-height: 95vh;
+    }
 }
diff --git a/leia-primeiro-fdp.md b/leia-primeiro-fdp.md
new file mode 100644
index 0000000..33c0881
--- /dev/null
+++ b/leia-primeiro-fdp.md
@@ -0,0 +1,21 @@
+Responda, raciocinios durante as implementações em pt-br
+
+Se encontrar problemas com deploy ou com o servidor, me avise
+
+Se algo não der certo revise outras partes do projeto em questão, não deve mexer em outro projeto se ele não fizer parte da estrutura do atual que esta sendo implementado.
+
+Temos uma rede vpn
+notebook 10.99.0.10
+vps1 10.99.0.1 - roteador traefik e docker sem root apenas produção, sem build
+vps3 10.99.0.3 - apenas postgresql e dragonflydb e o gitea central de documentações
+vps4 10.99.0.4 - apenas desenvolvimento nunca banco de dados
+
+Possuimos um sistema de Deploy automativo via gitea, quando é feito push para o branch main ou master ele faz o deploy automatico. A vps1 é a que tem o docker-compose principal que fica em /opt/stack
+
+Toda e qualquer implementação deve ser feita pensando em segurança, escalabilidade e manutenibilidade. 
+
+Você deve me consultar antes de fazer qualquer alteração significativa no código ou estrutura de arquivos. 
+
+Estou debaixo de um sistema de VPN, todos os acessos ao servidor são feitos via VPN. Se cair a conexão da VPN, me avise e não continue a implementação. 
+
+Todos os projetos devem ser versionados, v.2.0.0 como exemplo cada deploy deve gerar uma nova versão. A pagina de login deve conter a versão do sistema. Dentro das paginas caso não tenha tbm devem conter a versão do sistema.
\ No newline at end of file