diff --git a/templates/index.html b/templates/index.html
index fd63c53..d520102 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -654,6 +654,24 @@
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
         }
+
+        /* Novas classes para substituir estilos inline */
+        .login-error { margin-top: 10px; font-size: 0.75rem; color: var(--danger); font-weight: bold; text-transform: uppercase; }
+        .status-bar-info { margin-bottom: 1rem; padding: 0.75rem; background: var(--bg-input); border-radius: 8px; font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+        .status-bar-success { margin-bottom: 1rem; padding: 0.5rem 0.75rem; background: var(--success); opacity: 0.15; border-radius: 6px; font-size: 0.75rem; }
+        .btn-xs { padding: 0.4rem 0.75rem; font-size: 0.75rem; }
+        .config-section-card { padding: 1rem; background: var(--bg-input); border-radius: 8px; border: 1px solid var(--border); }
+        .config-section-title { margin-bottom: 0.75rem; font-size: 0.9rem; display: flex; align-items: center; gap: 0.25rem; }
+        .config-section-title.accent { color: var(--accent); }
+        .config-section-title.success { color: var(--success); }
+        .config-section-icon { vertical-align: middle; }
+        .mt-4 { margin-top: 1rem; }
+        .flex-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
+        .text-sm-muted { font-size: 0.85rem; color: var(--text-muted); }
+        .scroll-y-auto { overflow-y: auto; }
+        .max-h-300 { max-height: 300px; }
+        .p-4 { padding: 1rem; }
+        .chat-input-container { padding: 0.75rem; gap: 0.5rem; }
     </style>
 </head>
 
@@ -666,7 +684,7 @@
             <p class="login-desc">DNS restrito. Digite a senha de acesso.</p>
             <input type="password" id="login-pass" class="form-input login-input" placeholder="••••••••" autofocus>
             <button type="button" class="btn btn-primary w-full mt-2" onclick="checkAuth()">ACESSAR HUB</button>
-            <div id="login-error" class="hidden" style="margin-top: 10px; font-size: 0.75rem; color: var(--danger); font-weight: bold; text-transform: uppercase;">Senha Incorreta</div>
+            <div id="login-error" class="hidden login-error">Senha Incorreta</div>
         </div>
     </div>
 
@@ -698,21 +716,21 @@
                     <h3>CPU</h3>
                     <div class="stat-value" id="cpu-val">--%</div>
                     <div class="progress-bar-bg">
-                        <div class="progress-bar" id="cpu-bar" style="width: 0%"></div>
+                        <div class="progress-bar" id="cpu-bar"></div>
                     </div>
                 </div>
                 <div class="card stat-card">
                     <h3>RAM</h3>
                     <div class="stat-value" id="ram-val">-- / -- GB</div>
                     <div class="progress-bar-bg">
-                        <div class="progress-bar" id="ram-bar" style="width: 0%"></div>
+                        <div class="progress-bar" id="ram-bar"></div>
                     </div>
                 </div>
                 <div class="card stat-card">
                     <h3>Disk</h3>
                     <div class="stat-value" id="disk-val">--%</div>
                     <div class="progress-bar-bg">
-                        <div class="progress-bar" id="disk-bar" style="width: 0%"></div>
+                        <div class="progress-bar" id="disk-bar"></div>
                     </div>
                 </div>
             </div>
@@ -784,26 +802,26 @@
             <!-- ORCHESTRATOR CONFIG -->
             <div class="section-title">Orquestrador AI (Planner + Executor)</div>
             <div class="card">
-                <div style="margin-bottom: 1rem; padding: 0.75rem; background: var(--bg-input); border-radius: 8px; font-size: 0.85rem;">
+                <div class="status-bar-info">
                     <strong>Status:</strong> <span id="orchestrator-status">Carregando...</span>
-                    <button type="button" class="btn" style="margin-left: 0.5rem; padding: 0.4rem 0.75rem; font-size: 0.75rem;" onclick="syncFromRepo()">
+                    <button type="button" class="btn btn-xs" onclick="syncFromRepo()">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
                         Sync Repo
                     </button>
-                    <button type="button" class="btn" style="margin-left: 0.5rem; padding: 0.4rem 0.75rem; font-size: 0.75rem;" onclick="syncCredentials()">
+                    <button type="button" class="btn btn-xs" onclick="syncCredentials()">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                         Sync Local
                     </button>
                 </div>
-                <div style="margin-bottom: 1rem; padding: 0.5rem 0.75rem; background: var(--success); opacity: 0.15; border-radius: 6px; font-size: 0.75rem;">
+                <div class="status-bar-success">
                     <strong>Repo Gitea:</strong> <span id="repo-status">Carregando...</span>
                 </div>
                 
                 <div class="config-grid">
                     <!-- PLANNER CONFIG -->
-                    <div style="padding: 1rem; background: var(--bg-input); border-radius: 8px; border: 1px solid var(--border);">
-                        <h4 style="margin-bottom: 0.75rem; color: var(--accent); font-size: 0.9rem;">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style="vertical-align: middle; margin-right: 0.25rem;"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                    <div class="config-section-card">
+                        <h4 class="config-section-title accent">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" class="config-section-icon"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                             Planner (Planejador)
                         </h4>
                         <div class="form-group">
@@ -824,9 +842,9 @@
                     </div>
                     
                     <!-- EXECUTOR CONFIG -->
-                    <div style="padding: 1rem; background: var(--bg-input); border-radius: 8px; border: 1px solid var(--border);">
-                        <h4 style="margin-bottom: 0.75rem; color: var(--success); font-size: 0.9rem;">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style="vertical-align: middle; margin-right: 0.25rem;"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+                    <div class="config-section-card">
+                        <h4 class="config-section-title success">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" class="config-section-icon"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                             Executor (Executor)
                         </h4>
                         <div class="form-group">
@@ -845,7 +863,7 @@
                     </div>
                 </div>
                 
-                <div style="margin-top: 1rem;">
+                <div class="mt-4">
                     <button type="button" class="btn btn-primary" onclick="saveLLMConfig()">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                             <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
@@ -860,11 +878,11 @@
             <!-- CREDENCIAIS CARREGADAS -->
             <div class="section-title">Credenciais Carregadas</div>
             <div class="card">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
-                    <span style="font-size: 0.85rem; color: var(--text-muted);">
+                <div class="flex-between">
+                    <span class="text-sm-muted">
                         Credenciais sincronizadas dos serviços (Coolify, Gitea, Supabase, etc)
                     </span>
-                    <button type="button" class="btn" onclick="loadCredentials()" style="padding: 0.4rem 0.75rem; font-size: 0.75rem;">
+                    <button type="button" class="btn btn-xs" onclick="loadCredentials()">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14">
                             <path d="M23 4v6h-6M1 20v-6h6"/>
                             <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
@@ -872,10 +890,10 @@
                         Atualizar
                     </button>
                 </div>
-                <div id="credentials-container" style="display: none;">
-                    <div id="credentials-list" style="max-height: 300px; overflow-y: auto;"></div>
+                <div id="credentials-container" class="hidden">
+                    <div id="credentials-list" class="max-h-300 scroll-y-auto"></div>
                 </div>
-                <div id="credentials-loading" style="text-align: center; padding: 1rem; color: var(--text-muted);">
+                <div id="credentials-loading" class="text-center p-4 text-sm-muted">
                     Clique em "Atualizar" para carregar as credenciais
                 </div>
             </div>
@@ -891,7 +909,7 @@
                             terminal técnico.
                         </div>
                     </div>
-                    <div class="chat-input-area" style="padding: 0.75rem; gap: 0.5rem;">
+                    <div class="chat-input-area chat-input-container">
                         <input type="text" id="chat-input" aria-label="Comando do chat" class="chat-input"
                             placeholder="Comande sua VPS aqui..." onkeypress="handleKeyPress(event)">