@omnizap-system/omnizap 2.6.0 → 2.6.2

package/public/js/apps/userReactApp.js

@@ -1,3 +1,4 @@
+import { now as __timeNow, nowIso as __timeNowIso, toUnixMs as __timeNowMs } from '#time';
 import React, { useEffect, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import htm from 'htm';
@@ -7,7 +8,10 @@ const html = htm.bind(React.createElement);
 
 const DEFAULT_API_BASE_PATH = '/api';
 const DEFAULT_LOGIN_PATH = '/login';
+const DEFAULT_PASSWORD_RESET_WEB_PATH = '/user/password-reset';
 const DEFAULT_FALLBACK_AVATAR = '/assets/images/brand-logo-128.webp';
+const DEFAULT_SUPPORT_WHATSAPP_NUMBER = '';
+const DEFAULT_SUPPORT_WHATSAPP_URL = '/termos-de-uso/';
 
 const TABS = [
   { key: 'summary', label: 'Estatísticas', icon: '📊' },
@@ -16,12 +20,59 @@ const TABS = [
   { key: 'support', label: 'Suporte', icon: '🎧' },
 ];
 
+const shortNum = (value) =>
+  new Intl.NumberFormat('pt-BR', {
+    notation: Number(value) >= 1000 ? 'compact' : 'standard',
+    maximumFractionDigits: 1,
+  }).format(Math.max(0, Number(value) || 0));
+
+const normalizeRoutePath = (value, fallback) => {
+  const raw = String(value || '').trim();
+  if (!raw) return fallback;
+  if (!raw.startsWith('/')) return fallback;
+  if (/^\/\//.test(raw)) return fallback;
+  return raw;
+};
+
+const normalizePhoneDigits = (value) =>
+  String(value || '')
+    .replace(/\D+/g, '')
+    .slice(0, 15);
+
+const buildWhatsappUrl = (value) => {
+  const digits = normalizePhoneDigits(value);
+  if (!digits) return '';
+  return `https://wa.me/${digits}`;
+};
+
+const resolveSupportWhatsappUrl = (config) => {
+  const explicitUrl = String(config?.supportWhatsappUrl || '').trim();
+  if (/^https?:\/\/wa\.me\/\d{8,15}(?:\?.*)?$/i.test(explicitUrl)) return explicitUrl;
+  return buildWhatsappUrl(config?.supportWhatsappNumber) || DEFAULT_SUPPORT_WHATSAPP_URL;
+};
+
 const UserApp = ({ config }) => {
   const [activeTab, setActiveTab] = useState('summary');
   const [isLoading, setLoading] = useState(true);
   const [summary, setSummary] = useState(null);
   const [session, setSession] = useState(null);
-  const [isSidebarOpen, setSidebarOpen] = useState(false);
+  const [isSidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [passwordResetBusy, setPasswordResetBusy] = useState(false);
+  const [passwordResetError, setPasswordResetError] = useState('');
+  const [passwordResetInfo, setPasswordResetInfo] = useState('');
+
+  // Lock scroll when mobile menu is open
+  useEffect(() => {
+    if (isMobileMenuOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isMobileMenuOpen]);
 
   useEffect(() => {
     const observer =
@@ -82,113 +133,217 @@ const UserApp = ({ config }) => {
 
   const rpgInfo = useMemo(() => summary?.rpg || { level: 1, xp: 0, gold: 0, karma: { score: 0, positive: 0, negative: 0 }, pvp: { matches: 0, wins: 0, losses: 0 }, inventory_count: 0, total_pokemons: 0 }, [summary]);
   const usageInfo = useMemo(() => summary?.usage || { messages: 0, packs: 0, stickers: 0, activity_chart: [], insights: {}, first_message_at: null, last_message_at: null }, [summary]);
+  const supportWhatsappUrl = useMemo(() => resolveSupportWhatsappUrl(config), [config.supportWhatsappNumber, config.supportWhatsappUrl]);
 
   const daysMember = useMemo(() => {
     if (!rpgInfo.member_since) return 0;
-    const diff = new Date() - new Date(rpgInfo.member_since);
+    const diff = __timeNow() - new Date(rpgInfo.member_since);
     return Math.floor(diff / (1000 * 60 * 60 * 24));
   }, [rpgInfo.member_since]);
 
   const handleTabChange = (key) => {
     setActiveTab(key);
-    setSidebarOpen(false);
+    setMobileMenuOpen(false);
+  };
+
+  const toggleSidebar = () => {
+    if (window.innerWidth < 1024) {
+      setMobileMenuOpen(!isMobileMenuOpen);
+    } else {
+      setSidebarCollapsed(!isSidebarCollapsed);
+    }
+  };
+
+  const startPasswordResetFlow = async () => {
+    if (passwordResetBusy) return;
+    setPasswordResetError('');
+    setPasswordResetInfo('');
+    setPasswordResetBusy(true);
+
+    try {
+      const response = await fetch(`${config.apiBasePath}/auth/password/recovery/session`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json; charset=utf-8',
+        },
+        body: JSON.stringify({}),
+      });
+
+      let payload = null;
+      try {
+        payload = await response.json();
+      } catch {
+        payload = null;
+      }
+
+      if (!response.ok) {
+        throw new Error(payload?.error || `Falha HTTP ${response.status}`);
+      }
+
+      const data = payload?.data || {};
+      const sessionToken = String(data?.session_token || '')
+        .trim()
+        .slice(0, 4096);
+      const sessionPath = normalizeRoutePath(data?.session_path, config.passwordResetWebPath || DEFAULT_PASSWORD_RESET_WEB_PATH);
+      const targetUrl = new URL(sessionPath, window.location.origin);
+      if (sessionToken) {
+        targetUrl.searchParams.set('session_token', sessionToken);
+      }
+
+      setPasswordResetInfo('Sessão de redefinição criada. Redirecionando...');
+      window.setTimeout(() => {
+        window.location.assign(`${targetUrl.pathname}${targetUrl.search}`);
+      }, 120);
+    } catch (error) {
+      setPasswordResetError(error?.message || 'Não foi possível iniciar a redefinição de senha.');
+    } finally {
+      setPasswordResetBusy(false);
+    }
   };
 
   return html`
+    <style>
+      .sidebar-transition {
+        transition:
+          width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+          transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      .content-transition {
+        transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    </style>
+
     <div className="min-h-screen bg-[#020617] text-white font-sans selection:bg-primary selection:text-primary-content overflow-x-hidden">
-      <div className="fixed inset-0 pointer-events-none overflow-hidden">
+      <!-- Background Elements -->
+      <div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
         <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 blur-[120px] rounded-full animate-pulse"></div>
         <div className="absolute bottom-[10%] right-[-5%] w-[30%] h-[30%] bg-secondary/5 blur-[100px] rounded-full"></div>
       </div>
 
-      <!-- Backdrop for mobile sidebar (Solid overlay, no blur) -->
-      <div onClick=${() => setSidebarOpen(false)} className=${`fixed inset-0 z-[90] bg-[#020617]/90 lg:hidden transition-opacity duration-300 ${isSidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}></div>
+      <!-- Backdrop for mobile sidebar -->
+      <div onClick=${() => setMobileMenuOpen(false)} className=${`fixed inset-0 z-[50] bg-[#020617]/80 lg:hidden transition-opacity duration-300 ${isMobileMenuOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}></div>
 
       <!-- Navbar -->
-      <header className="sticky top-0 z-50 border-b border-white/5 bg-[#020617]">
-        <div className="container mx-auto px-4">
+      <header className="fixed inset-x-0 top-0 z-[40] border-b border-white/5 bg-[#020617]/80 backdrop-blur-xl">
+        <div className="px-4 lg:px-8">
           <div className="flex h-16 items-center justify-between gap-4">
             <div className="flex items-center gap-4">
-              <button onClick=${() => setSidebarOpen(true)} className="lg:hidden btn btn-ghost btn-square btn-sm bg-white/5 border border-white/10 rounded-xl">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M4 6h16M4 12h16M4 18h16" /></svg>
+              <button onClick=${toggleSidebar} className="btn btn-ghost btn-square btn-sm bg-white/5 border border-white/10 rounded-xl hover:bg-primary/10 hover:text-primary transition-all">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d=${isSidebarCollapsed ? 'M4 6h16M4 12h16M4 18h16' : 'M4 6h16M4 12h10M4 18h16'} />
+                </svg>
               </button>
 
               <a href="/" className="flex items-center gap-2.5 hover:opacity-80 transition-opacity">
-                <img src="/assets/images/brand-logo-128.webp" className="w-8 h-8 rounded-xl shadow-sm" alt="Logo" />
-                <span className="text-base sm:text-lg font-black tracking-tight">OmniZap<span className="text-primary">.</span></span>
+                <img src="/apple-touch-icon.png" className="w-8 h-8 rounded-xl shadow-sm" alt="Logo" />
+                <span className="hidden xs:block text-base sm:text-lg font-black tracking-tight">OmniZap<span className="text-primary">.</span></span>
               </a>
             </div>
 
             <div className="flex items-center gap-3">
-              <button onClick=${() => window.location.assign('/login/')} className="btn btn-ghost btn-sm h-9 min-h-0 gap-2 rounded-xl bg-white/5 border border-white/10 hover:bg-error hover:text-white transition-all px-4 font-black text-[10px] uppercase tracking-widest">Sair</button>
+              <button onClick=${() => window.location.assign('/login/')} className="btn btn-ghost btn-sm h-10 min-h-0 gap-2 rounded-xl bg-white/5 border border-white/10 hover:bg-error hover:text-white transition-all px-5 font-black text-[10px] uppercase tracking-widest group">
+                <span className="hidden sm:inline opacity-50 group-hover:opacity-100">Sair da Conta</span>
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
+              </button>
             </div>
           </div>
         </div>
       </header>
 
-      <main className="container mx-auto max-w-6xl px-4 py-8 lg:py-16">
-        <div className="grid lg:grid-cols-[300px_1fr] gap-8 items-start">
-          <!-- Sidebar Navigation (Drawer on Mobile) -->
-          <aside className=${`fixed lg:sticky top-0 lg:top-32 left-0 h-full lg:h-auto w-[280px] lg:w-auto z-[100] lg:z-0 bg-[#020617] lg:bg-transparent border-r lg:border-none border-white/10 p-6 lg:p-0 space-y-6 transform transition-transform duration-300 ease-out lg:translate-x-0 ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} shadow-[20px_0_60px_rgba(0,0,0,0.8)]`}>
-            <div className="lg:hidden flex items-center justify-between mb-8">
-              <span className="text-xs font-black uppercase tracking-[0.2em] text-white/30">Navegação</span>
-              <button onClick=${() => setSidebarOpen(false)} className="btn btn-ghost btn-square btn-xs">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg>
+      <div className="flex relative pt-16">
+        <!-- Sidebar -->
+        <aside className=${`fixed lg:fixed top-0 lg:top-[65px] lg:left-0 h-full lg:h-[calc(100vh-65px)] z-[60] lg:z-30 bg-[#020617] border-r border-white/5 sidebar-transition overflow-y-auto no-scrollbar ${isMobileMenuOpen ? 'translate-x-0 w-[280px]' : '-translate-x-full lg:translate-x-0'} ${isSidebarCollapsed ? 'lg:w-[85px]' : 'lg:w-[280px]'}`}>
+          <div className="p-4 flex flex-col h-full">
+            <!-- Mobile Header inside Sidebar -->
+            <div className="lg:hidden flex items-center justify-between mb-6 px-2">
+              <span className="text-[10px] font-black uppercase tracking-[0.2em] text-white/30">Menu do Sistema</span>
+              <button onClick=${() => setMobileMenuOpen(false)} className="btn btn-ghost btn-square btn-sm hover:bg-white/5">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M6 18L18 6M6 6l12 12" /></svg>
               </button>
             </div>
 
-            <div className="hidden lg:block relative group p-8 rounded-[2.5rem] bg-white/[0.03] border border-white/5 text-center space-y-6 overflow-hidden">
-              <div className="absolute inset-0 bg-gradient-to-b from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-
-              <div className="relative">
-                <div className="relative inline-block">
-                  <div className="absolute inset-0 bg-primary/20 blur-xl rounded-full animate-pulse"></div>
-                  <img src=${authInfo.image} className="relative w-24 h-24 rounded-[2rem] border-2 border-white/10 p-1.5 object-cover mx-auto shadow-2xl" />
-                  <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-success border-4 border-[#020617] rounded-full"></div>
+            <!-- Profile Snippet -->
+            <div className=${`mb-6 p-4 rounded-3xl bg-white/[0.03] border border-white/5 transition-all overflow-hidden ${isSidebarCollapsed ? 'items-center px-2' : ''}`}>
+              <div className=${`flex items-center gap-4 ${isSidebarCollapsed ? 'flex-col' : ''}`}>
+                <div className="relative flex-shrink-0">
+                  <div className="absolute inset-0 bg-primary/20 blur-lg rounded-full animate-pulse"></div>
+                  <img src=${authInfo.image} className="relative w-10 h-10 rounded-xl border border-white/10 p-0.5 object-cover" />
+                  <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-success border-2 border-[#020617] rounded-full"></div>
                 </div>
+                ${!isSidebarCollapsed &&
+                html`
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-sm font-black tracking-tight truncate text-white">${session?.user?.name || 'User'}</h3>
+                    <p className="text-[9px] font-black uppercase text-primary/60 tracking-wider">${summary?.plan_label || 'Plano Free'}</p>
+                  </div>
+                `}
               </div>
-
-              <div className="relative space-y-1">
-                <h2 className="text-xl font-black tracking-tight truncate px-2">${session?.user?.name || 'Carregando...'}</h2>
-                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-[10px] font-black uppercase tracking-widest">${summary?.plan_label || 'Plano Free'}</div>
-              </div>
-
-              <div className="relative grid grid-cols-2 gap-2 pt-2">
-                <div className="p-3 rounded-2xl bg-white/5 border border-white/5 text-center">
-                  <p className="text-[8px] font-black text-white/30 uppercase tracking-widest mb-1">Nível</p>
-                  <p className="text-lg font-black text-primary">${rpgInfo.level}</p>
-                </div>
-                <div className="p-3 rounded-2xl bg-white/5 border border-white/5 text-center">
-                  <p className="text-[8px] font-black text-white/30 uppercase tracking-widest mb-1">Gold</p>
-                  <p className="text-lg font-black text-warning">💰 ${rpgInfo.gold}</p>
+              ${!isSidebarCollapsed &&
+              html`
+                <div className="mt-4 pt-4 border-t border-white/5 grid grid-cols-2 gap-2">
+                  <div className="text-center p-2 rounded-xl bg-white/5">
+                    <p className="text-[7px] font-black text-white/20 uppercase">Nível</p>
+                    <p className="text-xs font-black text-primary">${rpgInfo.level}</p>
+                  </div>
+                  <div className="text-center p-2 rounded-xl bg-white/5">
+                    <p className="text-[7px] font-black text-white/20 uppercase">Gold</p>
+                    <p className="text-xs font-black text-warning">${shortNum(rpgInfo.gold)}</p>
+                  </div>
                 </div>
-              </div>
+              `}
             </div>
 
-            <nav className="p-2 rounded-[2rem] bg-white/[0.03] border border-white/5 space-y-1">
+            <!-- Navigation -->
+            <nav className="flex-1 space-y-1.5">
               ${TABS.map(
                 (tab) => html`
-                  <button onClick=${() => handleTabChange(tab.key)} className=${`w-full flex items-center gap-4 px-6 py-4 rounded-2xl font-black text-xs uppercase tracking-widest transition-all ${activeTab === tab.key ? 'bg-primary text-primary-content shadow-2xl shadow-primary/20 scale-[1.02]' : 'hover:bg-white/5 text-white/40 hover:text-white'}`}>
-                    <span className="text-xl opacity-80">${tab.icon}</span>
-                    ${tab.label}
+                  <button onClick=${() => handleTabChange(tab.key)} className=${`w-full flex items-center gap-4 px-4 py-3.5 rounded-2xl font-black text-[10px] uppercase tracking-[0.15em] transition-all relative group ${activeTab === tab.key ? 'bg-primary text-primary-content shadow-lg shadow-primary/10' : 'text-white/40 hover:bg-white/5 hover:text-white'}`}>
+                    <span className=${`text-xl transition-transform duration-500 ${activeTab === tab.key ? 'scale-110' : 'group-hover:scale-110'}`}>${tab.icon}</span>
+                    <span className=${`transition-all duration-300 ${isSidebarCollapsed ? 'opacity-0 w-0' : 'opacity-100'}`}>${tab.label}</span>
+                    ${isSidebarCollapsed && activeTab === tab.key && html`<div className="absolute right-0 w-1 h-6 bg-primary rounded-l-full"></div>`}
                   </button>
                 `,
               )}
             </nav>
-          </aside>
 
-          <!-- Content Area -->
-          <div className="space-y-8">
-            <div data-reveal="fade-up" className="space-y-2 text-center lg:text-left pt-4 lg:pt-0">
-              <h1 className="text-4xl sm:text-5xl font-black tracking-tighter">Painel do <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-400">Usuário</span></h1>
-              <p className="text-white/40 text-base font-medium">Bem-vindo de volta! Aqui estão suas estatísticas em tempo real.</p>
+            <!-- Sidebar Footer -->
+            <div className=${`mt-auto pt-6 border-t border-white/5 ${isSidebarCollapsed ? 'text-center' : ''}`}>
+              <div className="flex flex-col gap-2">
+                <div className=${`flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-white/5 ${isSidebarCollapsed ? 'justify-center' : ''}`}>
+                  <div className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></div>
+                  ${!isSidebarCollapsed && html`<span className="text-[8px] font-black uppercase tracking-widest text-white/30">v2.6.0 Connected</span>`}
+                </div>
+              </div>
+            </div>
+          </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main className=${`flex-1 min-w-0 content-transition px-4 lg:px-10 py-8 lg:py-12 ${isSidebarCollapsed ? 'lg:ml-[85px]' : 'lg:ml-[280px]'}`}>
+          <div className="max-w-5xl mx-auto space-y-10">
+            <div data-reveal="fade-up" className="flex flex-col md:flex-row md:items-end justify-between gap-6">
+              <div className="space-y-2">
+                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-[9px] font-black uppercase tracking-widest">Dashboard v3.0</div>
+                <h1 className="text-4xl lg:text-6xl font-black tracking-tighter">Painel do <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-400">Usuário</span></h1>
+                <p className="text-white/40 text-sm font-medium">Gerencie suas estatísticas, conquistas RPG e segurança em um só lugar.</p>
+              </div>
+              <div className="hidden md:flex items-center gap-4 text-right">
+                <div>
+                  <p className="text-[10px] font-black uppercase text-white/20 tracking-widest">Status da Sessão</p>
+                  <p className="text-xs font-bold text-success">Encriptada e Ativa</p>
+                </div>
+                <div className="w-10 h-10 rounded-xl bg-success/10 border border-success/20 flex items-center justify-center text-success">
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
+                </div>
+              </div>
             </div>
 
-            <div data-reveal="fade-up" className="relative p-1 rounded-[3rem] bg-gradient-to-br from-white/10 to-transparent">
-              <div className="bg-[#020617] rounded-[2.9rem] p-6 lg:p-12 min-h-[500px] overflow-hidden relative">
+            <div data-reveal="fade-up" className="relative p-1 rounded-[3.5rem] bg-gradient-to-br from-white/10 via-transparent to-transparent group">
+              <div className="bg-[#020617] rounded-[3.4rem] p-6 lg:p-12 min-h-[600px] overflow-hidden relative shadow-2xl">
                 ${isLoading
                   ? html`
-                      <div className="flex flex-col items-center justify-center h-full space-y-6 py-20 animate-in fade-in">
+                      <div className="flex flex-col items-center justify-center h-full space-y-6 py-32 animate-in fade-in">
                         <div className="relative">
                           <div className="absolute inset-0 bg-primary/20 blur-2xl rounded-full animate-ping"></div>
                           <span className="loading loading-ring w-20 h-20 text-primary relative"></span>
@@ -200,179 +355,131 @@ const UserApp = ({ config }) => {
                       <div className="animate-in fade-in slide-in-from-bottom-8 duration-700">
                         ${activeTab === 'summary' &&
                         html`
-                          <div className="grid gap-10 animate-in fade-in slide-in-from-bottom-8 duration-700">
+                          <div className="grid gap-10">
                             <!-- Main Metrics Row -->
                             <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-                              <div className="p-8 rounded-[2.5rem] bg-white/[0.03] border border-white/5 space-y-2 group hover:border-primary/30 transition-colors relative overflow-hidden">
-                                <div className="absolute -right-4 -bottom-4 text-6xl opacity-5">💬</div>
-                                <p className="text-[10px] font-black uppercase tracking-widest text-white/20 group-hover:text-primary transition-colors relative z-10">Total de Mensagens</p>
+                              <div className="p-8 rounded-[2.5rem] bg-white/[0.03] border border-white/5 space-y-2 group/card hover:border-primary/30 transition-all hover:bg-white/[0.05] relative overflow-hidden">
+                                <div className="absolute -right-4 -bottom-4 text-6xl opacity-5 group-hover/card:scale-110 transition-transform">💬</div>
+                                <p className="text-[10px] font-black uppercase tracking-widest text-white/20 group-hover/card:text-primary transition-colors relative z-10">Total de Mensagens</p>
                                 <p className="text-4xl font-black text-white relative z-10">${usageInfo.messages.toLocaleString()}</p>
                               </div>
-                              <div className="p-8 rounded-[2.5rem] bg-white/[0.03] border border-white/5 space-y-2 group hover:border-emerald-400/30 transition-colors relative overflow-hidden">
-                                <div className="absolute -right-4 -bottom-4 text-6xl opacity-5">🖼️</div>
-                                <p className="text-[10px] font-black uppercase tracking-widest text-white/20 group-hover:text-emerald-400 transition-colors relative z-10">Stickers Criados</p>
+                              <div className="p-8 rounded-[2.5rem] bg-white/[0.03] border border-white/5 space-y-2 group/card hover:border-emerald-400/30 transition-all hover:bg-white/[0.05] relative overflow-hidden">
+                                <div className="absolute -right-4 -bottom-4 text-6xl opacity-5 group-hover/card:scale-110 transition-transform">🖼️</div>
+                                <p className="text-[10px] font-black uppercase tracking-widest text-white/20 group-hover/card:text-emerald-400 transition-colors relative z-10">Stickers Criados</p>
                                 <p className="text-4xl font-black text-white relative z-10">${usageInfo.stickers.toLocaleString()}</p>
                               </div>
-                              <div className="p-8 rounded-[2.5rem] bg-white/[0.03] border border-white/5 space-y-2 group hover:border-warning/30 transition-colors relative overflow-hidden">
-                                <div className="absolute -right-4 -bottom-4 text-6xl opacity-5">📦</div>
-                                <p className="text-[10px] font-black uppercase tracking-widest text-white/20 group-hover:text-warning transition-colors relative z-10">Packs de Stickers</p>
+                              <div className="p-8 rounded-[2.5rem] bg-white/[0.03] border border-white/5 space-y-2 group/card hover:border-warning/30 transition-all hover:bg-white/[0.05] relative overflow-hidden">
+                                <div className="absolute -right-4 -bottom-4 text-6xl opacity-5 group-hover/card:scale-110 transition-transform">📦</div>
+                                <p className="text-[10px] font-black uppercase tracking-widest text-white/20 group-hover/card:text-warning transition-colors relative z-10">Packs Ativos</p>
                                 <p className="text-4xl font-black text-white relative z-10">${usageInfo.packs}</p>
                               </div>
                             </div>
 
                             <!-- Deep Insights Grid -->
                             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                              <div className="p-6 rounded-[2rem] bg-white/[0.02] border border-white/5 space-y-4">
-                                <h4 className="text-[10px] font-black uppercase tracking-widest text-white/30">Comandos</h4>
-                                <div className="space-y-3">
+                              <div className="p-7 rounded-[2.5rem] bg-white/[0.02] border border-white/5 space-y-5 hover:border-white/10 transition-colors group/insight">
+                                <div className="flex items-center justify-between">
+                                  <h4 className="text-[10px] font-black uppercase tracking-widest text-white/30 group-hover/insight:text-white/50 transition-colors">Comandos</h4>
+                                  <span className="text-xs">⌨️</span>
+                                </div>
+                                <div className="space-y-3.5">
                                   <div className="flex justify-between items-center">
-                                    <span className="text-xs font-medium text-white/50">Total Usados</span>
+                                    <span className="text-xs font-medium text-white/40">Total Usados</span>
                                     <span className="text-sm font-black">${usageInfo.insights?.commands_total || 0}</span>
                                   </div>
                                   <div className="flex justify-between items-center">
-                                    <span className="text-xs font-medium text-white/50">Favorito</span>
-                                    <span className="text-sm font-black text-primary">${usageInfo.insights?.top_command || 'N/D'}</span>
+                                    <span className="text-xs font-medium text-white/40">Favorito</span>
+                                    <span className="text-sm font-black text-primary truncate ml-4">${usageInfo.insights?.top_command || 'N/D'}</span>
                                   </div>
                                   <div className="flex justify-between items-center">
-                                    <span className="text-xs font-medium text-white/50">Uso do Favorito</span>
-                                    <span className="text-sm font-black">${usageInfo.insights?.top_command_count || 0}x</span>
+                                    <span className="text-xs font-medium text-white/40">Frequência</span>
+                                    <span className="text-sm font-black">${usageInfo.insights?.top_command_count || 0} execs</span>
                                   </div>
                                 </div>
                               </div>
 
-                              <div className="p-6 rounded-[2rem] bg-white/[0.02] border border-white/5 space-y-4">
-                                <h4 className="text-[10px] font-black uppercase tracking-widest text-white/30">Comunidade</h4>
-                                <div className="space-y-3">
+                              <div className="p-7 rounded-[2.5rem] bg-white/[0.02] border border-white/5 space-y-5 hover:border-white/10 transition-colors group/insight">
+                                <div className="flex items-center justify-between">
+                                  <h4 className="text-[10px] font-black uppercase tracking-widest text-white/30 group-hover/insight:text-white/50 transition-colors">Comunidade</h4>
+                                  <span className="text-xs">👥</span>
+                                </div>
+                                <div className="space-y-3.5">
                                   <div className="flex justify-between items-center">
-                                    <span className="text-xs font-medium text-white/50">Grupos Ativos</span>
+                                    <span className="text-xs font-medium text-white/40">Grupos Ativos</span>
                                     <span className="text-sm font-black">${usageInfo.insights?.groups_active || 0}</span>
                                   </div>
                                   <div className="flex justify-between items-center">
-                                    <span className="text-xs font-medium text-white/50">Grupo Principal</span>
-                                    <span className="text-sm font-black text-emerald-400 truncate max-w-[120px]">${usageInfo.insights?.top_group || 'N/D'}</span>
+                                    <span className="text-xs font-medium text-white/40">Hub Principal</span>
+                                    <span className="text-sm font-black text-emerald-400 truncate ml-4">${usageInfo.insights?.top_group || 'N/D'}</span>
                                   </div>
                                   <div className="flex justify-between items-center">
-                                    <span className="text-xs font-medium text-white/50">Tipo mais comum</span>
-                                    <span className="text-sm font-black capitalize">${usageInfo.insights?.top_message_type || 'texto'}</span>
+                                    <span className="text-xs font-medium text-white/40">Perfil Social</span>
+                                    <span className="text-sm font-black capitalize">${usageInfo.insights?.top_message_type || 'Texto'}</span>
                                   </div>
                                 </div>
                               </div>
 
-                              <div className="p-6 rounded-[2rem] bg-white/[0.02] border border-white/5 space-y-4">
-                                <h4 className="text-[10px] font-black uppercase tracking-widest text-white/30">Hábito de Uso</h4>
-                                <div className="space-y-3">
+                              <div className="p-7 rounded-[2.5rem] bg-white/[0.02] border border-white/5 space-y-5 hover:border-white/10 transition-colors group/insight">
+                                <div className="flex items-center justify-between">
+                                  <h4 className="text-[10px] font-black uppercase tracking-widest text-white/30 group-hover/insight:text-white/50 transition-colors">Hábitos</h4>
+                                  <span className="text-xs">⚡</span>
+                                </div>
+                                <div className="space-y-3.5">
                                   <div className="flex justify-between items-center">
-                                    <span className="text-xs font-medium text-white/50">Horário de Pico</span>
+                                    <span className="text-xs font-medium text-white/40">Pico de Atividade</span>
                                     <span className="text-sm font-black">${usageInfo.insights?.active_hour !== null ? usageInfo.insights.active_hour + ':00' : 'N/D'}</span>
                                   </div>
                                   <div className="flex justify-between items-center">
-                                    <span className="text-xs font-medium text-white/50">Média Diária</span>
-                                    <span className="text-sm font-black text-info">${usageInfo.insights?.avg_daily || 0} msg</span>
+                                    <span className="text-xs font-medium text-white/40">Engajamento Médio</span>
+                                    <span className="text-sm font-black text-info">${usageInfo.insights?.avg_daily || 0} msgs/dia</span>
                                   </div>
                                   <div className="flex justify-between items-center">
-                                    <span className="text-xs font-medium text-white/50">Karma Atual</span>
-                                    <span className="text-sm font-black text-warning">${rpgInfo.karma?.score || 0}</span>
+                                    <span className="text-xs font-medium text-white/40">Reputação Karma</span>
+                                    <span className="text-sm font-black text-warning">${rpgInfo.karma?.score || 0} pts</span>
                                   </div>
                                 </div>
                               </div>
                             </div>
 
-                            <!-- Activity Chart -->
-                            ${usageInfo.activity_chart && usageInfo.activity_chart.length > 0
-                              ? html`
-                                  <div className="p-8 rounded-[3rem] bg-white/[0.02] border border-white/5 space-y-6">
-                                    <h3 className="font-black text-lg flex items-center gap-3">
-                                      <span className="text-primary">📈</span>
-                                      Fluxo de Mensagens (7 dias)
-                                    </h3>
-                                    <div className="flex items-end justify-between gap-2 h-40 pt-4 px-2">
-                                      ${usageInfo.activity_chart.map((data) => {
-                                        const maxCount = Math.max(...usageInfo.activity_chart.map((d) => d.count), 1);
-                                        const heightPercent = Math.max((data.count / maxCount) * 100, 5);
-                                        return html`
-                                          <div key=${data.day} className="flex flex-col items-center gap-2 flex-1 group min-w-0">
-                                            <div className="w-full relative flex justify-center h-full items-end">
-                                              <div className="w-full max-w-[2rem] bg-primary/20 hover:bg-primary transition-all rounded-t-lg group-hover:shadow-[0_0_20px_rgba(34,197,94,0.4)]" style=${{ height: heightPercent + '%' }}>
-                                                <div className="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-white text-[#020617] text-[10px] font-black px-2 py-1 rounded-lg pointer-events-none whitespace-nowrap z-20">${data.count} msgs</div>
-                                              </div>
-                                            </div>
-                                            <span className="text-[8px] font-bold text-white/20 uppercase tracking-tighter truncate w-full text-center">${data.day.split('-').reverse().join('/')}</span>
-                                          </div>
-                                        `;
-                                      })}
-                                    </div>
-                                  </div>
-                                `
-                              : null}
-
-                            <!-- RPG & Social Snippet -->
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                              <div className="p-8 rounded-[2.5rem] bg-emerald-500/5 border border-emerald-500/10 space-y-4">
-                                <h4 className="text-[10px] font-black uppercase tracking-widest text-emerald-400/40">Engajamento Social</h4>
-                                <div className="grid grid-cols-2 gap-4">
-                                  <div className="space-y-1">
-                                    <p className="text-[8px] font-black text-white/20 uppercase">Votos Positivos</p>
-                                    <p className="text-xl font-black text-emerald-400">+${rpgInfo.karma?.positive || 0}</p>
-                                  </div>
-                                  <div className="space-y-1">
-                                    <p className="text-[8px] font-black text-white/20 uppercase">Votos Negativos</p>
-                                    <p className="text-xl font-black text-rose-500">-${rpgInfo.karma?.negative || 0}</p>
-                                  </div>
-                                </div>
-                              </div>
-                              <div className="p-8 rounded-[2.5rem] bg-info/5 border border-info/10 space-y-4">
-                                <h4 className="text-[10px] font-black uppercase tracking-widest text-info/40">Exploração</h4>
-                                <div className="grid grid-cols-2 gap-4">
-                                  <div className="space-y-1">
-                                    <p className="text-[8px] font-black text-white/20 uppercase">Itens Inventário</p>
-                                    <p className="text-xl font-black text-white">${rpgInfo.inventory_count || 0}</p>
-                                  </div>
-                                  <div className="space-y-1">
-                                    <p className="text-[8px] font-black text-white/20 uppercase">Pokémons</p>
-                                    <p className="text-xl font-black text-white">${rpgInfo.total_pokemons || 0}</p>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-
-                            <!-- Account Details -->
-                            <div className="p-6 sm:p-10 rounded-[2.5rem] sm:rounded-[3rem] bg-primary/5 border border-primary/10 relative overflow-hidden">
-                              <div className="absolute top-[-20%] right-[-10%] w-64 h-64 bg-primary/10 blur-[80px] rounded-full"></div>
-                              <h3 className="relative font-black text-xl mb-8 flex items-center gap-3">
-                                <span className="w-2 h-2 rounded-full bg-primary shadow-[0_0_10px_rgba(34,197,94,0.8)]"></span>
-                                Detalhes da Identidade
+                            <!-- Details Card -->
+                            <div className="p-8 lg:p-12 rounded-[3.5rem] bg-white/[0.03] border border-white/5 relative overflow-hidden">
+                              <div className="absolute top-0 right-0 w-64 h-64 bg-primary/5 blur-[80px] rounded-full -translate-y-1/2 translate-x-1/2"></div>
+                              <h3 className="relative font-black text-2xl mb-10 flex items-center gap-4">
+                                <div className="w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center text-lg">🪪</div>
+                                Metadados da Identidade
                               </h3>
-                              <div className="relative grid grid-cols-1 sm:grid-cols-2 gap-y-6 sm:gap-y-8 gap-x-12 border-b border-white/5 pb-8 mb-8">
-                                <div>
-                                  <p className="text-[9px] font-black uppercase text-white/20 tracking-[0.2em] mb-1">Endereço de E-mail</p>
-                                  <p className="text-sm sm:text-lg font-bold text-white/80 break-all">${session?.user?.email}</p>
+
+                              <div className="relative grid grid-cols-1 sm:grid-cols-2 gap-10 border-b border-white/5 pb-10 mb-10">
+                                <div className="space-y-1.5">
+                                  <p className="text-[10px] font-black uppercase text-white/20 tracking-widest">E-mail de Autenticação</p>
+                                  <p className="text-lg font-bold text-white/80">${session?.user?.email}</p>
                                 </div>
-                                <div>
-                                  <p className="text-[9px] font-black uppercase text-white/20 tracking-[0.2em] mb-1">WhatsApp Vinculado</p>
-                                  <p className="text-sm sm:text-lg font-bold text-white/80">${summary?.owner_phone ? `+${formatPhone(summary.owner_phone)}` : 'Não vinculado'}</p>
+                                <div className="space-y-1.5">
+                                  <p className="text-[10px] font-black uppercase text-white/20 tracking-widest">WhatsApp Vinculado</p>
+                                  <p className="text-lg font-bold text-primary">${summary?.owner_phone ? formatPhone(summary.owner_phone) : 'Vincular Conta'}</p>
                                 </div>
-                                <div>
-                                  <p className="text-[9px] font-black uppercase text-white/20 tracking-[0.2em] mb-1">Última Atividade</p>
-                                  <p className="text-sm sm:text-lg font-bold text-white/80">${formatDateTime(summary?.last_seen_at) || 'Ativo agora'}</p>
+                                <div className="space-y-1.5">
+                                  <p className="text-[10px] font-black uppercase text-white/20 tracking-widest">Última Conexão</p>
+                                  <p className="text-lg font-bold text-white/80">${formatDateTime(summary?.last_seen_at) || 'Online agora'}</p>
                                 </div>
-                                <div>
-                                  <p className="text-[9px] font-black uppercase text-white/20 tracking-[0.2em] mb-1">Membro Desde</p>
-                                  <p className="text-sm sm:text-lg font-bold text-white/80">${formatDateTime(rpgInfo.member_since) || 'Recentemente'}</p>
+                                <div className="space-y-1.5">
+                                  <p className="text-[10px] font-black uppercase text-white/20 tracking-widest">Membro da Rede Desde</p>
+                                  <p className="text-lg font-bold text-white/80">${formatDateTime(rpgInfo.member_since) || 'Recentemente'}</p>
                                 </div>
                               </div>
 
-                              <div className="relative grid grid-cols-2 sm:grid-cols-3 gap-6">
+                              <div className="relative grid grid-cols-2 sm:grid-cols-3 gap-8">
                                 <div>
-                                  <p className="text-[9px] font-black uppercase text-white/20 mb-1">Tempo como Membro</p>
-                                  <p className="text-sm font-black text-primary">${daysMember} dias</p>
+                                  <p className="text-[9px] font-black uppercase text-white/20 mb-1">Tempo de Rede</p>
+                                  <p className="text-base font-black text-primary">${daysMember} dias ativos</p>
                                 </div>
                                 <div>
-                                  <p className="text-[9px] font-black uppercase text-white/20 mb-1">Primeira Mensagem</p>
-                                  <p className="text-[10px] font-bold text-white/60">${formatDateTime(usageInfo.first_message_at) || 'N/D'}</p>
+                                  <p className="text-[9px] font-black uppercase text-white/20 mb-1">Primeira Interação</p>
+                                  <p className="text-[11px] font-bold text-white/50">${formatDateTime(usageInfo.first_message_at) || 'N/D'}</p>
                                 </div>
                                 <div>
-                                  <p className="text-[9px] font-black uppercase text-white/20 mb-1">Última Mensagem</p>
-                                  <p className="text-[10px] font-bold text-white/60">${formatDateTime(usageInfo.last_message_at) || 'N/D'}</p>
+                                  <p className="text-[9px] font-black uppercase text-white/20 mb-1">Última Interação</p>
+                                  <p className="text-[11px] font-bold text-white/50">${formatDateTime(usageInfo.last_message_at) || 'N/D'}</p>
                                 </div>
                               </div>
                             </div>
@@ -380,142 +487,107 @@ const UserApp = ({ config }) => {
                         `}
                         ${activeTab === 'rpg' &&
                         html`
-                          <div className="space-y-10 animate-in fade-in slide-in-from-bottom-8 duration-700">
-                            <!-- RPG Header -->
-                            <div className="flex flex-col sm:flex-row gap-6 items-center sm:items-stretch">
-                              <div className="flex-1 p-8 rounded-[3rem] bg-gradient-to-br from-primary/10 to-transparent border border-primary/20 relative overflow-hidden w-full">
-                                <div className="absolute top-0 right-0 p-6 text-6xl opacity-10">⚔️</div>
-                                <h3 className="text-sm font-black uppercase tracking-widest text-primary mb-6">Status do Treinador</h3>
-                                <div className="flex items-baseline gap-4 mb-4">
-                                  <span className="text-6xl font-black text-white">${rpgInfo.level}</span>
-                                  <span className="text-sm font-bold text-white/40 uppercase tracking-widest">Nível Atual</span>
-                                </div>
-
-                                <div className="space-y-2 w-full max-w-sm">
-                                  <div className="flex justify-between text-[10px] font-black uppercase tracking-widest text-white/50">
-                                    <span>XP Atual: ${rpgInfo.xp}</span>
-                                    <span>Próximo Nível</span>
+                          <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
+                            <div className="p-8 rounded-[3rem] bg-gradient-to-br from-primary/10 via-transparent to-transparent border border-primary/20">
+                              <div className="flex flex-col md:flex-row items-center gap-8">
+                                <div className="relative">
+                                  <div className="absolute inset-0 bg-primary/20 blur-3xl rounded-full"></div>
+                                  <div className="relative w-32 h-32 rounded-full border-4 border-primary/20 p-2 flex items-center justify-center bg-[#020617]">
+                                    <span className="text-5xl font-black text-white">${rpgInfo.level}</span>
                                   </div>
-                                  <div className="h-3 w-full bg-[#020617] rounded-full overflow-hidden border border-white/5">
-                                    <div className="h-full bg-gradient-to-r from-primary to-emerald-400 rounded-full transition-all duration-1000" style=${{ width: Math.min((rpgInfo.xp / (rpgInfo.level * 100)) * 100, 100) + '%' }}></div>
+                                  <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 bg-primary text-primary-content px-4 py-1 rounded-full text-[10px] font-black uppercase tracking-widest shadow-xl">Nível</div>
+                                </div>
+                                <div className="flex-1 text-center md:text-left space-y-4">
+                                  <h3 className="text-2xl font-black tracking-tight">Status do Treinador</h3>
+                                  <div className="space-y-2">
+                                    <div className="flex justify-between text-[10px] font-black uppercase tracking-widest text-white/40">
+                                      <span>Experiência: ${rpgInfo.xp} XP</span>
+                                      <span>Próximo nível: ${(rpgInfo.level + 1) * 100}</span>
+                                    </div>
+                                    <div className="h-4 w-full bg-white/5 rounded-full overflow-hidden border border-white/5">
+                                      <div className="h-full bg-gradient-to-r from-primary to-emerald-400 transition-all duration-1000" style=${{ width: Math.min((rpgInfo.xp / ((rpgInfo.level + 1) * 100)) * 100, 100) + '%' }}></div>
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
-
-                              <div className="p-8 rounded-[3rem] bg-warning/5 border border-warning/10 flex flex-col justify-center items-center sm:min-w-[200px] w-full sm:w-auto">
-                                <span className="text-4xl mb-4 animate-bounce">💰</span>
-                                <span className="text-4xl font-black text-warning mb-1">${rpgInfo.gold}</span>
-                                <span className="text-[10px] font-black uppercase tracking-widest text-warning/50">Gold Acumulado</span>
+                                <div className="p-6 rounded-[2.5rem] bg-warning/5 border border-warning/10 text-center min-w-[160px]">
+                                  <p className="text-[9px] font-black uppercase tracking-widest text-warning/50 mb-1">Tesouro</p>
+                                  <p className="text-3xl font-black text-warning">💰 ${shortNum(rpgInfo.gold)}</p>
+                                </div>
                               </div>
                             </div>
 
-                            <!-- Pokemon & PvP -->
                             <div className="grid md:grid-cols-2 gap-6">
-                              <!-- Active Pokemon -->
-                              <div className="p-8 rounded-[2.5rem] bg-white/[0.03] border border-white/5 space-y-6">
-                                <div className="flex items-center gap-3">
-                                  <span className="text-xl">🐉</span>
-                                  <h3 className="font-black text-lg">Pokémon Ativo</h3>
-                                </div>
-
+                              <div className="p-8 rounded-[3rem] bg-white/[0.03] border border-white/5 space-y-6">
+                                <h4 className="text-lg font-black flex items-center gap-3">🐉 Pokémon em Destaque</h4>
                                 ${rpgInfo.active_pokemon
                                   ? html`
-                                      <div className="flex items-center gap-6 p-6 rounded-3xl bg-white/5 border border-white/5 group hover:border-primary/30 transition-colors">
+                                      <div className="p-6 rounded-3xl bg-white/5 border border-white/10 flex items-center gap-6 group hover:border-primary/40 transition-all">
                                         <div className="relative">
-                                          <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center text-3xl">
-                                            <img src=${'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/' + (rpgInfo.active_pokemon.is_shiny ? 'shiny/' : '') + rpgInfo.active_pokemon.poke_id + '.png'} alt="Pokemon" className="w-20 h-20 scale-125 object-contain" />
-                                          </div>
-                                          ${rpgInfo.active_pokemon.is_shiny && html`<div className="absolute -top-2 -right-2 text-warning animate-pulse">✨</div>`}
+                                          <img src=${'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/' + (rpgInfo.active_pokemon.is_shiny ? 'shiny/' : '') + rpgInfo.active_pokemon.poke_id + '.png'} className="w-24 h-24 object-contain drop-shadow-2xl" />
+                                          ${rpgInfo.active_pokemon.is_shiny && html`<div className="absolute top-0 right-0 text-xl animate-pulse">✨</div>`}
                                         </div>
                                         <div>
-                                          <h4 className="text-xl font-black capitalize text-white group-hover:text-primary transition-colors">${rpgInfo.active_pokemon.nickname || 'Desconhecido'}</h4>
-                                          <p className="text-xs font-bold text-white/50 uppercase tracking-widest mt-1">Nível ${rpgInfo.active_pokemon.level}</p>
+                                          <h5 className="text-xl font-black capitalize text-white group-hover:text-primary transition-colors">${rpgInfo.active_pokemon.nickname}</h5>
+                                          <p className="text-xs font-bold text-white/40 uppercase tracking-widest">Nível ${rpgInfo.active_pokemon.level}</p>
                                         </div>
                                       </div>
                                     `
-                                  : html`
-                                      <div className="p-6 text-center rounded-3xl bg-white/5 border border-white/5 border-dashed">
-                                        <p className="text-sm font-bold text-white/40">Nenhum Pokémon ativo no momento.</p>
-                                      </div>
-                                    `}
-
-                                <div className="flex items-center justify-between p-4 rounded-2xl bg-white/5">
-                                  <span className="text-[10px] font-black uppercase tracking-widest text-white/40">Total Capturados</span>
-                                  <span className="text-lg font-black text-white">${rpgInfo.total_pokemons}</span>
-                                </div>
+                                  : html`<div className="p-10 text-center border-2 border-dashed border-white/5 rounded-3xl text-white/20 font-bold">Nenhum Pokémon ativo</div>`}
                               </div>
 
-                              <!-- PvP Stats -->
-                              <div className="p-8 rounded-[2.5rem] bg-white/[0.03] border border-white/5 space-y-6">
-                                <div className="flex items-center gap-3">
-                                  <span className="text-xl">🏆</span>
-                                  <h3 className="font-black text-lg">Arena PvP (Semanal)</h3>
-                                </div>
-
+                              <div className="p-8 rounded-[3rem] bg-white/[0.03] border border-white/5 space-y-6 text-center">
+                                <h4 className="text-lg font-black flex items-center gap-3 justify-center">🏆 Arena Competitiva</h4>
                                 <div className="grid grid-cols-2 gap-4">
-                                  <div className="p-4 rounded-2xl bg-white/5 text-center">
-                                    <p className="text-3xl font-black text-white mb-1">${rpgInfo.pvp?.matches || 0}</p>
-                                    <p className="text-[9px] font-black uppercase tracking-widest text-white/40">Batalhas</p>
-                                  </div>
-                                  <div className="p-4 rounded-2xl bg-success/10 border border-success/20 text-center">
-                                    <p className="text-3xl font-black text-success mb-1">${rpgInfo.pvp?.matches > 0 ? Math.round(((rpgInfo.pvp?.wins || 0) / rpgInfo.pvp.matches) * 100) : 0}%</p>
-                                    <p className="text-[9px] font-black uppercase tracking-widest text-success/60">Vitórias</p>
-                                  </div>
-                                  <div className="p-4 rounded-2xl bg-info/10 text-center">
-                                    <p className="text-xl font-black text-info mb-1">${rpgInfo.pvp?.wins || 0}</p>
-                                    <p className="text-[9px] font-black uppercase tracking-widest text-info/60">Ganha</p>
+                                  <div className="bg-white/5 p-5 rounded-3xl">
+                                    <p className="text-2xl font-black text-white">${rpgInfo.pvp?.wins || 0}</p>
+                                    <p className="text-[9px] font-black uppercase text-white/30">Vitórias</p>
                                   </div>
-                                  <div className="p-4 rounded-2xl bg-error/10 text-center">
-                                    <p className="text-xl font-black text-error mb-1">${rpgInfo.pvp?.losses || 0}</p>
-                                    <p className="text-[9px] font-black uppercase tracking-widest text-error/60">Perdida</p>
+                                  <div className="bg-white/5 p-5 rounded-3xl">
+                                    <p className="text-2xl font-black text-white">${rpgInfo.pvp?.losses || 0}</p>
+                                    <p className="text-[9px] font-black uppercase text-white/30">Derrotas</p>
                                   </div>
                                 </div>
+                                <div className="bg-primary/10 p-4 rounded-2xl border border-primary/20">
+                                  <p className="text-sm font-black text-primary">${rpgInfo.karma?.score || 0} Karma Global</p>
+                                </div>
                               </div>
                             </div>
                           </div>
                         `}
                         ${activeTab === 'account' &&
                         html`
-                          <div className="space-y-10 max-w-2xl mx-auto lg:mx-0">
-                            <div className="flex items-center gap-6">
-                              <div className="w-16 h-16 rounded-3xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-3xl">🛡️</div>
-                              <div>
-                                <h3 className="text-2xl font-black tracking-tight">Segurança da Conta</h3>
-                                <p className="text-white/40 font-medium text-sm leading-relaxed">Mantenha sua chave de acesso segura e atualizada.</p>
-                              </div>
-                            </div>
-
-                            <form className="space-y-6">
-                              <div className="grid sm:grid-cols-2 gap-6">
-                                <div className="space-y-2">
-                                  <label className="text-[10px] font-black uppercase tracking-widest text-white/30 ml-4">Nova Senha</label>
-                                  <input type="password" placeholder="••••••••" className="w-full h-14 bg-white/5 border border-white/10 rounded-2xl px-6 focus:border-primary outline-none transition-all font-mono" />
+                          <div className="max-w-xl animate-in fade-in slide-in-from-bottom-4 duration-500">
+                            <div className="space-y-10">
+                              <div className="flex items-center gap-6">
+                                <div className="w-16 h-16 rounded-[2rem] bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-3xl shadow-lg">🛡️</div>
+                                <div>
+                                  <h3 className="text-2xl font-black tracking-tight">Segurança</h3>
+                                  <p className="text-sm text-white/40 font-medium">Proteja seu acesso ao ecossistema OmniZap.</p>
                                 </div>
-                                <div className="space-y-2">
-                                  <label className="text-[10px] font-black uppercase tracking-widest text-white/30 ml-4">Confirmar</label>
-                                  <input type="password" placeholder="••••••••" className="w-full h-14 bg-white/5 border border-white/10 rounded-2xl px-6 focus:border-primary outline-none transition-all font-mono" />
+                              </div>
+                              <div className="p-8 rounded-[3rem] bg-white/[0.03] border border-white/5 space-y-8">
+                                <div className="space-y-4">
+                                  <p className="text-sm text-white/60 leading-relaxed">Para alterar sua senha com segurança, o OmniZap envia um código de verificação para o e-mail vinculado à sua conta.</p>
+                                  <div className="rounded-2xl border border-white/10 bg-white/[0.02] px-4 py-3 text-xs text-white/50">Fluxo: criar sessão de redefinição → receber código por e-mail → confirmar nova senha.</div>
                                 </div>
+
+                                <button type="button" className="btn btn-primary btn-block h-14 rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] shadow-xl shadow-primary/20" disabled=${passwordResetBusy} onClick=${startPasswordResetFlow}>${passwordResetBusy ? 'Preparando redefinição...' : 'Alterar Senha com Verificação'}</button>
+
+                                ${passwordResetInfo ? html` <div className="rounded-2xl border border-emerald-400/30 bg-emerald-500/10 px-4 py-3 text-xs font-semibold text-emerald-300">${passwordResetInfo}</div> ` : null} ${passwordResetError ? html` <div className="rounded-2xl border border-red-400/30 bg-red-500/10 px-4 py-3 text-xs font-semibold text-red-300">${passwordResetError}</div> ` : null}
                               </div>
-                              <button className="group relative inline-flex items-center justify-center">
-                                <div className="absolute inset-0 bg-primary/20 blur-xl rounded-xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
-                                <div className="relative bg-primary text-primary-content px-10 py-4 rounded-xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl hover:scale-105 transition-all">Atualizar Credenciais</div>
-                              </button>
-                            </form>
+                            </div>
                           </div>
                         `}
                         ${activeTab === 'support' &&
                         html`
-                          <div className="text-center max-w-lg mx-auto py-16 space-y-10 relative">
-                            <div className="absolute inset-0 bg-primary/5 blur-[100px] rounded-full"></div>
-                            <div className="relative w-24 h-24 rounded-[2.5rem] bg-primary/10 border border-primary/20 flex items-center justify-center text-5xl mx-auto shadow-2xl">🎧</div>
-                            <div className="relative space-y-3">
-                              <h3 className="text-3xl font-black tracking-tighter text-white">Canal de Suporte</h3>
-                              <p className="text-white/40 font-medium leading-relaxed">Nosso time de especialistas está pronto para te ajudar com qualquer dúvida técnica ou financeira.</p>
+                          <div className="py-16 text-center max-w-lg mx-auto animate-in fade-in slide-in-from-bottom-4 duration-500">
+                            <div className="relative inline-block mb-10">
+                              <div className="absolute inset-0 bg-primary/20 blur-[60px] rounded-full animate-pulse"></div>
+                              <div className="relative w-28 h-28 rounded-[3rem] bg-white/5 border border-white/10 flex items-center justify-center text-5xl shadow-2xl">🎧</div>
                             </div>
-                            <a href="https://wa.me/559591122954" target="_blank" className="relative flex group">
-                              <div className="absolute inset-0 bg-success/20 blur-2xl rounded-2xl group-hover:bg-success/40 transition-all"></div>
-                              <div className="relative w-full bg-success text-white py-5 rounded-2xl font-black text-xs uppercase tracking-[0.3em] shadow-2xl group-hover:scale-[1.02] active:scale-95 transition-all">Iniciar Chat no WhatsApp</div>
-                            </a>
+                            <h3 className="text-3xl font-black tracking-tighter mb-4">Central de Atendimento</h3>
+                            <p className="text-white/40 font-medium leading-relaxed mb-10 text-lg">Dúvidas sobre o sistema, planos ou bugs? Fale diretamente com nossa equipe técnica.</p>
+                            <a href=${supportWhatsappUrl} target="_blank" className="btn btn-primary btn-lg btn-block rounded-[2rem] font-black uppercase text-xs tracking-widest h-16 shadow-2xl shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all">Iniciar Chat Suporte</a>
                           </div>
                         `}
                       </div>
@@ -523,11 +595,11 @@ const UserApp = ({ config }) => {
               </div>
             </div>
           </div>
-        </div>
-      </main>
+        </main>
+      </div>
 
-      <!-- Footer Minimal -->
-      <footer className="py-12 border-t border-white/5 mt-auto relative z-10 bg-[#020617]">
+      <!-- Footer -->
+      <footer className="py-12 border-t border-white/5 mt-auto relative z-[70] bg-[#020617]">
         <div className="container mx-auto px-4 text-center">
           <p className="text-[10px] font-black uppercase tracking-[0.5em] text-white/10">© 2026 OMNIZAP CORE · SECURE USER ENVIRONMENT</p>
         </div>
@@ -541,7 +613,10 @@ if (rootElement) {
   const config = {
     apiBasePath: rootElement.dataset.apiBasePath || DEFAULT_API_BASE_PATH,
     loginPath: rootElement.dataset.loginPath || DEFAULT_LOGIN_PATH,
+    passwordResetWebPath: normalizeRoutePath(rootElement.dataset.passwordResetWebPath, DEFAULT_PASSWORD_RESET_WEB_PATH),
     fallbackAvatar: DEFAULT_FALLBACK_AVATAR,
+    supportWhatsappNumber: rootElement.dataset.supportWhatsappNumber || DEFAULT_SUPPORT_WHATSAPP_NUMBER,
+    supportWhatsappUrl: rootElement.dataset.supportWhatsappUrl || DEFAULT_SUPPORT_WHATSAPP_URL,
   };
   createRoot(rootElement).render(html`<${UserApp} config=${config} />`);
 }