@kaikybrofc/omnizap-system 2.2.10 → 2.3.1

package/public/js/apps/stickersApp.js

@@ -50,8 +50,7 @@ const normalizeCreatorsSort = (value, fallback = DEFAULT_CREATORS_SORT) => {
   return fallback;
 };
 
-const catalogSortLabel = (sort) =>
-  CATALOG_SORT_OPTIONS.find((entry) => entry.value === normalizeCatalogSort(sort))?.label || 'Ordenar';
+const catalogSortLabel = (sort) => CATALOG_SORT_OPTIONS.find((entry) => entry.value === normalizeCatalogSort(sort))?.label || 'Ordenar';
 
 const getPackTrendScore = (pack) => safeNumber(pack?.signals?.trend_score);
 const getPackRankingScore = (pack) => safeNumber(pack?.signals?.ranking_score);
@@ -277,12 +276,13 @@ const getPackEngagement = (pack) => {
   };
 };
 
-const getAvatarUrl = (name) =>
-  `https://api.dicebear.com/8.x/thumbs/svg?seed=${encodeURIComponent(String(name || 'omnizap'))}`;
+const getAvatarUrl = (name) => `https://api.dicebear.com/8.x/thumbs/svg?seed=${encodeURIComponent(String(name || 'omnizap'))}`;
 
 const parseCatalogSearchState = (search = '') => {
   const params = new URLSearchParams(String(search || ''));
-  const filter = String(params.get('filter') || '').trim().toLowerCase();
+  const filter = String(params.get('filter') || '')
+    .trim()
+    .toLowerCase();
   const hasTrendingFilter = filter === 'trending';
   const q = hasTrendingFilter ? '' : String(params.get('q') || '').trim();
   const category = hasTrendingFilter
@@ -321,10 +321,22 @@ const parseStickersLocation = (webPath = '/stickers') => {
 
   try {
     const firstSegment = decodeURIComponent(firstSegmentRaw);
-    if (PROFILE_ROUTE_SEGMENTS.has(String(firstSegment || '').trim().toLowerCase())) {
+    if (
+      PROFILE_ROUTE_SEGMENTS.has(
+        String(firstSegment || '')
+          .trim()
+          .toLowerCase(),
+      )
+    ) {
       return { view: 'profile', packKey: '' };
     }
-    if (CREATORS_ROUTE_SEGMENTS.has(String(firstSegment || '').trim().toLowerCase())) {
+    if (
+      CREATORS_ROUTE_SEGMENTS.has(
+        String(firstSegment || '')
+          .trim()
+          .toLowerCase(),
+      )
+    ) {
       return { view: 'creators', packKey: '' };
     }
     return { view: 'pack', packKey: firstSegment };
@@ -455,17 +467,13 @@ function UploadTaskWidget({ task, onClose }) {
       </div>
       <div className="mt-2 flex items-center justify-between text-[11px]">
         <span className="text-slate-400">${task.current || 0}/${task.total || 0}</span>
-        <span className=${`${isError ? 'text-rose-300' : isDone ? 'text-emerald-300' : isPaused ? 'text-amber-300' : 'text-cyan-300'} font-semibold`}>
-          ${progress}%
-        </span>
+        <span className=${`${isError ? 'text-rose-300' : isDone ? 'text-emerald-300' : isPaused ? 'text-amber-300' : 'text-cyan-300'} font-semibold`}> ${progress}% </span>
       </div>
       ${(isDone || isPaused) && packUrl
         ? html`
             <div className="mt-2 flex gap-2">
               <a href=${packUrl} className="inline-flex rounded-lg border border-cyan-500/40 bg-cyan-500/10 px-2.5 py-1.5 text-[11px] font-semibold text-cyan-200">Abrir pack</a>
-              ${isPaused
-                ? html`<a href="/stickers/create/" className="inline-flex rounded-lg border border-amber-500/40 bg-amber-500/10 px-2.5 py-1.5 text-[11px] font-semibold text-amber-200">Retomar envio</a>`
-                : null}
+              ${isPaused ? html`<a href="/stickers/create/" className="inline-flex rounded-lg border border-amber-500/40 bg-amber-500/10 px-2.5 py-1.5 text-[11px] font-semibold text-amber-200">Retomar envio</a>` : null}
             </div>
           `
         : null}
@@ -488,32 +496,11 @@ function PackCard({ pack, index, onOpen, hasNsfwAccess = true, onRequireLogin })
   };
 
   return html`
-    <button
-      type="button"
-      onClick=${handleOpen}
-      className="group w-full text-left rounded-2xl border border-slate-800 bg-slate-900/90 shadow-soft overflow-hidden transition-all duration-200 active:scale-[0.985] md:hover:scale-[1.02] hover:-translate-y-0.5 hover:shadow-lg touch-manipulation"
-    >
+    <button type="button" onClick=${handleOpen} className="group w-full text-left rounded-2xl border border-slate-800 bg-slate-900/90 shadow-soft overflow-hidden transition-all duration-200 active:scale-[0.985] md:hover:scale-[1.02] hover:-translate-y-0.5 hover:shadow-lg touch-manipulation">
       <div className="relative aspect-[5/6] sm:aspect-[4/5] bg-slate-900 overflow-hidden">
-        <img
-          src=${coverUrl}
-          alt=${`Capa de ${pack.name}`}
-          className=${`w-full h-full object-cover transition-transform duration-300 ${
-            lockedByNsfw ? 'blur-md scale-105' : 'md:group-hover:scale-[1.05] group-active:scale-[1.02]'
-          }`}
-          loading="lazy"
-        />
+        <img src=${coverUrl} alt=${`Capa de ${pack.name}`} className=${`w-full h-full object-cover transition-transform duration-300 ${lockedByNsfw ? 'blur-md scale-105' : 'md:group-hover:scale-[1.05] group-active:scale-[1.02]'}`} loading="lazy" />
         <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/60 to-transparent"></div>
-        <div className="absolute top-2 left-2 flex items-center gap-1">
-          ${lockedByNsfw
-            ? html`<span className="rounded-full border border-amber-300/35 bg-amber-500/25 backdrop-blur px-1.5 py-0.5 text-[9px] font-bold text-amber-100">🔞 Login</span>`
-            : null}
-          ${isTrending
-            ? html`<span className="rounded-full border border-emerald-300/30 bg-emerald-400/80 backdrop-blur px-1.5 py-0.5 text-[9px] font-bold text-slate-900">Trending</span>`
-            : null}
-          ${isNew
-            ? html`<span className="rounded-full border border-white/15 bg-black/45 backdrop-blur px-1.5 py-0.5 text-[9px] font-semibold text-slate-100">Novo</span>`
-            : null}
-        </div>
+        <div className="absolute top-2 left-2 flex items-center gap-1">${lockedByNsfw ? html`<span className="rounded-full border border-amber-300/35 bg-amber-500/25 backdrop-blur px-1.5 py-0.5 text-[9px] font-bold text-amber-100">🔞 Login</span>` : null} ${isTrending ? html`<span className="rounded-full border border-emerald-300/30 bg-emerald-400/80 backdrop-blur px-1.5 py-0.5 text-[9px] font-bold text-slate-900">Trending</span>` : null} ${isNew ? html`<span className="rounded-full border border-white/15 bg-black/45 backdrop-blur px-1.5 py-0.5 text-[9px] font-semibold text-slate-100">Novo</span>` : null}</div>
 
         <div className="absolute inset-x-0 bottom-0 p-2">
           <h3 className="font-semibold text-sm leading-5 line-clamp-2">${pack.name || 'Pack sem nome'}</h3>
@@ -529,40 +516,25 @@ function PackCard({ pack, index, onOpen, hasNsfwAccess = true, onRequireLogin })
         </div>
 
         <div className="pointer-events-none absolute inset-x-2 bottom-2 hidden md:flex justify-center opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-          <span className="inline-flex h-8 w-full items-center justify-center rounded-xl border border-emerald-400/35 bg-emerald-400/12 px-3 text-xs font-semibold text-emerald-200 backdrop-blur">
-            ${lockedByNsfw ? 'Entrar para desbloquear' : 'Abrir pack'}
-          </span>
+          <span className="inline-flex h-8 w-full items-center justify-center rounded-xl border border-emerald-400/35 bg-emerald-400/12 px-3 text-xs font-semibold text-emerald-200 backdrop-blur"> ${lockedByNsfw ? 'Entrar para desbloquear' : 'Abrir pack'} </span>
         </div>
         ${lockedByNsfw
           ? html`
               <div className="pointer-events-none absolute inset-x-0 top-[42%] flex justify-center px-3">
-                <span className="inline-flex rounded-xl border border-amber-400/40 bg-slate-950/70 px-2.5 py-1 text-[10px] font-semibold text-amber-100 backdrop-blur">
-                  Conteúdo sensível
-                </span>
+                <span className="inline-flex rounded-xl border border-amber-400/40 bg-slate-950/70 px-2.5 py-1 text-[10px] font-semibold text-amber-100 backdrop-blur"> Conteúdo sensível </span>
               </div>
             `
           : null}
       </div>
 
       <div className="px-2 pb-2 pt-1 bg-slate-900/95 md:hidden">
-        <span className="inline-flex h-[34px] w-full items-center justify-center rounded-xl border border-emerald-400/30 bg-emerald-400/10 text-xs font-semibold text-emerald-200 transition group-active:brightness-110">
-          ${lockedByNsfw ? 'Entrar para desbloquear' : 'Abrir pack'}
-        </span>
+        <span className="inline-flex h-[34px] w-full items-center justify-center rounded-xl border border-emerald-400/30 bg-emerald-400/10 text-xs font-semibold text-emerald-200 transition group-active:brightness-110"> ${lockedByNsfw ? 'Entrar para desbloquear' : 'Abrir pack'} </span>
       </div>
     </button>
   `;
 }
 
-function CatalogMetricCard({
-  label,
-  value = '',
-  valueRaw = null,
-  numberFormat = 'compact',
-  icon = '📊',
-  hint = '',
-  bars = [],
-  tone = 'slate',
-}) {
+function CatalogMetricCard({ label, value = '', valueRaw = null, numberFormat = 'compact', icon = '📊', hint = '', bars = [], tone = 'slate' }) {
   const toneMap = {
     slate: 'border-slate-800 bg-slate-900/60',
     emerald: 'border-emerald-500/20 bg-emerald-500/5',
@@ -606,29 +578,13 @@ function CatalogMetricCard({
     };
   }, [numericTarget]);
 
-  const resolvedValue =
-    numericTarget === null
-      ? String(value || '0')
-      : numberFormat === 'full'
-        ? formatFullNum(animatedValue)
-        : shortNum(animatedValue);
+  const resolvedValue = numericTarget === null ? String(value || '0') : numberFormat === 'full' ? formatFullNum(animatedValue) : shortNum(animatedValue);
 
   return html`
-    <article
-      className=${`rounded-xl border p-2.5 ${toneMap[tone] || toneMap.slate}`}
-      title=${hint || label}
-    >
+    <article className=${`rounded-xl border p-2.5 ${toneMap[tone] || toneMap.slate}`} title=${hint || label}>
       <div className="flex items-center justify-between gap-2">
         <span className="text-sm">${icon}</span>
-        <div className="flex items-end gap-0.5">
-          ${(Array.isArray(bars) ? bars : []).slice(0, 7).map((bar, index) => html`
-            <span
-              key=${index}
-              className="w-1 rounded-full bg-white/15"
-              style=${{ height: `${Math.max(4, Math.min(16, Number(bar || 0)))}px` }}
-            ></span>
-          `)}
-        </div>
+        <div className="flex items-end gap-0.5">${(Array.isArray(bars) ? bars : []).slice(0, 7).map((bar, index) => html` <span key=${index} className="w-1 rounded-full bg-white/15" style=${{ height: `${Math.max(4, Math.min(16, Number(bar || 0)))}px` }}></span> `)}</div>
       </div>
       <p className="mt-1 text-base font-bold text-slate-100">${resolvedValue}</p>
       <p className="text-[11px] text-slate-400">${label}</p>
@@ -648,22 +604,11 @@ function DiscoverPackRowItem({ pack, onOpen, rank = 0, hasNsfwAccess = true, onR
     onOpen(pack.pack_key);
   };
   return html`
-    <button
-      type="button"
-      onClick=${handleOpen}
-      className="w-full flex items-center gap-2 rounded-xl border border-slate-800 bg-slate-900/50 px-2 py-1.5 text-left hover:bg-slate-800/90"
-    >
-      <img
-        src=${lockedByNsfw ? NSFW_STICKER_PLACEHOLDER_URL : pack.cover_url || DEFAULT_STICKER_PLACEHOLDER_URL}
-        alt=""
-        className=${`h-9 w-9 rounded-lg object-cover bg-slate-800 ${lockedByNsfw ? 'blur-sm' : ''}`}
-        loading="lazy"
-      />
+    <button type="button" onClick=${handleOpen} className="w-full flex items-center gap-2 rounded-xl border border-slate-800 bg-slate-900/50 px-2 py-1.5 text-left hover:bg-slate-800/90">
+      <img src=${lockedByNsfw ? NSFW_STICKER_PLACEHOLDER_URL : pack.cover_url || DEFAULT_STICKER_PLACEHOLDER_URL} alt="" className=${`h-9 w-9 rounded-lg object-cover bg-slate-800 ${lockedByNsfw ? 'blur-sm' : ''}`} loading="lazy" />
       <span className="min-w-0 flex-1">
         <span className="block truncate text-xs font-medium text-slate-100">${rank > 0 ? `${rank}. ` : ''}${pack.name || 'Pack'}</span>
-        <span className="block truncate text-[10px] text-slate-400">
-          ${lockedByNsfw ? '🔒 Entrar para desbloquear' : `${pack.publisher || '-'} · ❤️ ${shortNum(getPackEngagement(pack).likeCount)}`}
-        </span>
+        <span className="block truncate text-[10px] text-slate-400"> ${lockedByNsfw ? '🔒 Entrar para desbloquear' : `${pack.publisher || '-'} · ❤️ ${shortNum(getPackEngagement(pack).likeCount)}`} </span>
       </span>
       <span className="text-[10px] text-slate-500">→</span>
     </button>
@@ -682,28 +627,15 @@ function DiscoverPackMiniCard({ pack, onOpen, hasNsfwAccess = true, onRequireLog
     onOpen(pack.pack_key);
   };
   return html`
-    <button
-      type="button"
-      onClick=${handleOpen}
-      className="group w-[170px] shrink-0 overflow-hidden rounded-xl border border-slate-800 bg-slate-900/80 text-left"
-    >
+    <button type="button" onClick=${handleOpen} className="group w-[170px] shrink-0 overflow-hidden rounded-xl border border-slate-800 bg-slate-900/80 text-left">
       <div className="relative h-24 bg-slate-900">
-        <img
-          src=${lockedByNsfw ? NSFW_STICKER_PLACEHOLDER_URL : pack.cover_url || DEFAULT_STICKER_PLACEHOLDER_URL}
-          alt=""
-          className=${`h-full w-full object-cover transition-transform duration-200 ${
-            lockedByNsfw ? 'blur-sm scale-105' : 'group-active:scale-[1.02]'
-          }`}
-          loading="lazy"
-        />
+        <img src=${lockedByNsfw ? NSFW_STICKER_PLACEHOLDER_URL : pack.cover_url || DEFAULT_STICKER_PLACEHOLDER_URL} alt="" className=${`h-full w-full object-cover transition-transform duration-200 ${lockedByNsfw ? 'blur-sm scale-105' : 'group-active:scale-[1.02]'}`} loading="lazy" />
         <div className="absolute inset-0 bg-gradient-to-t from-slate-950/90 to-transparent"></div>
         ${lockedByNsfw ? html`<span className="absolute top-1.5 left-1.5 rounded-full border border-amber-300/35 bg-amber-500/25 px-1.5 py-0.5 text-[9px] font-semibold text-amber-100">🔞 Login</span>` : null}
       </div>
       <div className="p-2">
         <p className="truncate text-xs font-semibold text-slate-100">${pack.name || 'Pack'}</p>
-        <p className="mt-1 truncate text-[10px] text-slate-400">
-          ${lockedByNsfw ? 'Entrar para desbloquear' : `⬇ ${shortNum(engagement.openCount)} · ❤️ ${shortNum(engagement.likeCount)}`}
-        </p>
+        <p className="mt-1 truncate text-[10px] text-slate-400">${lockedByNsfw ? 'Entrar para desbloquear' : `⬇ ${shortNum(engagement.openCount)} · ❤️ ${shortNum(engagement.likeCount)}`}</p>
       </div>
     </button>
   `;
@@ -712,11 +644,7 @@ function DiscoverPackMiniCard({ pack, onOpen, hasNsfwAccess = true, onRequireLog
 function DiscoverCreatorMiniCard({ creator, onPick }) {
   if (!creator?.publisher) return null;
   return html`
-    <button
-      type="button"
-      onClick=${() => onPick(creator.publisher)}
-      className="w-[190px] shrink-0 rounded-xl border border-slate-800 bg-slate-900/70 p-2 text-left hover:bg-slate-800/90"
-    >
+    <button type="button" onClick=${() => onPick(creator.publisher)} className="w-[190px] shrink-0 rounded-xl border border-slate-800 bg-slate-900/70 p-2 text-left hover:bg-slate-800/90">
       <div className="flex items-center gap-2">
         <img src=${getAvatarUrl(creator.publisher)} alt="" className="h-9 w-9 rounded-full bg-slate-800" />
         <span className="min-w-0">
@@ -780,70 +708,22 @@ function MyPackCard({ pack, onOpenPublic }) {
         </div>
       </div>
       <div className="mt-3 flex flex-wrap gap-2">
-        ${shareable
-          ? html`
-              <button
-                type="button"
-                onClick=${() => onOpenPublic(pack.pack_key)}
-                className="inline-flex h-9 items-center justify-center rounded-xl border border-emerald-500/35 bg-emerald-500/10 px-3 text-xs font-semibold text-emerald-200 hover:bg-emerald-500/20"
-              >
-                Abrir no catálogo
-              </button>
-            `
-          : html`
-              <span className="inline-flex h-9 items-center justify-center rounded-xl border border-slate-700 bg-slate-900/70 px-3 text-xs text-slate-400">
-                Não visível no catálogo
-              </span>
-            `}
-        <a
-          href="/stickers/create/"
-          className="inline-flex h-9 items-center justify-center rounded-xl border border-cyan-500/35 bg-cyan-500/10 px-3 text-xs font-semibold text-cyan-200 hover:bg-cyan-500/20"
-        >
-          Criar/gerenciar packs
-        </a>
+        ${shareable ? html` <button type="button" onClick=${() => onOpenPublic(pack.pack_key)} className="inline-flex h-9 items-center justify-center rounded-xl border border-emerald-500/35 bg-emerald-500/10 px-3 text-xs font-semibold text-emerald-200 hover:bg-emerald-500/20">Abrir no catálogo</button> ` : html` <span className="inline-flex h-9 items-center justify-center rounded-xl border border-slate-700 bg-slate-900/70 px-3 text-xs text-slate-400"> Não visível no catálogo </span> `}
+        <a href="/stickers/create/" className="inline-flex h-9 items-center justify-center rounded-xl border border-cyan-500/35 bg-cyan-500/10 px-3 text-xs font-semibold text-cyan-200 hover:bg-cyan-500/20"> Criar/gerenciar packs </a>
       </div>
     </article>
   `;
 }
 
-function ProfilePage({
-  googleAuthConfig,
-  googleAuth,
-  googleAuthBusy,
-  googleAuthError,
-  googleSessionChecked,
-  googleAuthUiReady,
-  googleButtonRef,
-  myPacks,
-  myPacksLoading,
-  myPacksError,
-  myProfileStats,
-  onBack,
-  onRefresh,
-  onLogout,
-  onOpenPublicPack,
-}) {
+function ProfilePage({ googleAuthConfig, googleAuth, googleAuthBusy, googleAuthError, googleSessionChecked, googleAuthUiReady, googleButtonRef, myPacks, myPacksLoading, myPacksError, myProfileStats, onBack, onRefresh, onLogout, onOpenPublicPack }) {
   const hasGoogleLogin = Boolean(googleAuth?.user?.sub);
   const googleLoginEnabled = Boolean(googleAuthConfig?.enabled && googleAuthConfig?.clientId);
 
   return html`
     <section className="space-y-4 pb-20 sm:pb-4">
       <div className="flex flex-wrap items-center justify-between gap-2">
-        <button
-          type="button"
-          onClick=${onBack}
-          className="inline-flex items-center gap-2 rounded-xl border border-slate-700 px-3 py-2 text-sm text-slate-200 hover:bg-slate-800"
-        >
-          ← Voltar para catálogo
-        </button>
-        <button
-          type="button"
-          onClick=${onRefresh}
-          disabled=${myPacksLoading || googleAuthBusy}
-          className="inline-flex items-center gap-2 rounded-xl border border-slate-700 px-3 py-2 text-sm text-slate-200 hover:bg-slate-800 disabled:opacity-60"
-        >
-          ${myPacksLoading ? 'Atualizando...' : 'Atualizar'}
-        </button>
+        <button type="button" onClick=${onBack} className="inline-flex items-center gap-2 rounded-xl border border-slate-700 px-3 py-2 text-sm text-slate-200 hover:bg-slate-800">← Voltar para catálogo</button>
+        <button type="button" onClick=${onRefresh} disabled=${myPacksLoading || googleAuthBusy} className="inline-flex items-center gap-2 rounded-xl border border-slate-700 px-3 py-2 text-sm text-slate-200 hover:bg-slate-800 disabled:opacity-60">${myPacksLoading ? 'Atualizando...' : 'Atualizar'}</button>
       </div>
 
       <section className="rounded-2xl border border-slate-800 bg-slate-900/80 p-4">
@@ -851,39 +731,20 @@ function ProfilePage({
           <div>
             <p className="text-xs uppercase tracking-wide text-slate-400">Perfil de criador</p>
             <h1 className="mt-1 text-xl font-bold">Meus packs</h1>
-            <p className="mt-1 text-sm text-slate-400">
-              Faça login com Google para ver e vincular os packs criados pela sua conta.
-            </p>
+            <p className="mt-1 text-sm text-slate-400">Faça login com Google para ver e vincular os packs criados pela sua conta.</p>
           </div>
-          ${hasGoogleLogin
-            ? html`
-                <button
-                  type="button"
-                  onClick=${onLogout}
-                  disabled=${googleAuthBusy}
-                  className="inline-flex h-10 items-center rounded-xl border border-slate-700 px-3 text-sm text-slate-200 hover:bg-slate-800 disabled:opacity-60"
-                >
-                  ${googleAuthBusy ? 'Saindo...' : 'Sair'}
-                </button>
-              `
-            : null}
+          ${hasGoogleLogin ? html` <button type="button" onClick=${onLogout} disabled=${googleAuthBusy} className="inline-flex h-10 items-center rounded-xl border border-slate-700 px-3 text-sm text-slate-200 hover:bg-slate-800 disabled:opacity-60">${googleAuthBusy ? 'Saindo...' : 'Sair'}</button> ` : null}
         </div>
 
         <div className="mt-4 rounded-2xl border border-slate-800 bg-slate-950/50 p-3">
           ${hasGoogleLogin
             ? html`
                 <div className="flex flex-wrap items-center gap-3">
-                  <img
-                    src=${googleAuth.user?.picture || getAvatarUrl(googleAuth.user?.name)}
-                    alt="Avatar do Google"
-                    className="h-12 w-12 rounded-full border border-slate-700 bg-slate-900 object-cover"
-                  />
+                  <img src=${googleAuth.user?.picture || getAvatarUrl(googleAuth.user?.name)} alt="Avatar do Google" className="h-12 w-12 rounded-full border border-slate-700 bg-slate-900 object-cover" />
                   <div className="min-w-0">
                     <p className="truncate text-sm font-semibold text-slate-100">${googleAuth.user?.name || 'Conta Google'}</p>
                     <p className="truncate text-xs text-slate-400">${googleAuth.user?.email || ''}</p>
-                    <p className="truncate text-[11px] text-slate-500">
-                      ${googleAuth.expiresAt ? `Sessão válida até ${new Date(googleAuth.expiresAt).toLocaleString('pt-BR')}` : 'Sessão ativa'}
-                    </p>
+                    <p className="truncate text-[11px] text-slate-500">${googleAuth.expiresAt ? `Sessão válida até ${new Date(googleAuth.expiresAt).toLocaleString('pt-BR')}` : 'Sessão ativa'}</p>
                   </div>
                 </div>
               `
@@ -891,22 +752,12 @@ function ProfilePage({
                 <div className="space-y-3">
                   <div className="rounded-xl border border-cyan-500/20 bg-cyan-500/5 p-3">
                     <p className="text-sm font-semibold text-cyan-200">Entrar com Google</p>
-                    <p className="mt-1 text-xs text-slate-300">
-                      ${googleLoginEnabled
-                        ? 'Use a mesma conta Google usada na criação de packs para carregar seus dados e packs automaticamente.'
-                        : 'Login Google indisponível no momento.'}
-                    </p>
+                    <p className="mt-1 text-xs text-slate-300">${googleLoginEnabled ? 'Use a mesma conta Google usada na criação de packs para carregar seus dados e packs automaticamente.' : 'Login Google indisponível no momento.'}</p>
                   </div>
                   ${googleLoginEnabled
                     ? html`
                         <div ref=${googleButtonRef} className="min-h-[42px] w-full max-w-[320px] overflow-hidden"></div>
-                        ${!googleSessionChecked
-                          ? html`<p className="text-xs text-slate-400">Verificando sessão Google...</p>`
-                          : googleAuthBusy
-                            ? html`<p className="text-xs text-slate-400">Conectando conta Google...</p>`
-                            : !googleAuthUiReady && !googleAuthError
-                              ? html`<p className="text-xs text-slate-400">Carregando login Google...</p>`
-                              : null}
+                        ${!googleSessionChecked ? html`<p className="text-xs text-slate-400">Verificando sessão Google...</p>` : googleAuthBusy ? html`<p className="text-xs text-slate-400">Conectando conta Google...</p>` : !googleAuthUiReady && !googleAuthError ? html`<p className="text-xs text-slate-400">Carregando login Google...</p>` : null}
                       `
                     : null}
                 </div>
@@ -916,15 +767,29 @@ function ProfilePage({
       </section>
 
       ${myPacksError ? html`<div className="rounded-2xl border border-rose-500/40 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">${myPacksError}</div>` : null}
-
       ${hasGoogleLogin
         ? html`
             <section className="grid grid-cols-2 lg:grid-cols-5 gap-3">
-              <article className="rounded-xl border border-slate-800 bg-slate-900/70 p-3"><p className="text-[11px] text-slate-400">Total</p><p className="text-lg font-semibold">${shortNum(myProfileStats?.total || 0)}</p></article>
-              <article className="rounded-xl border border-slate-800 bg-slate-900/70 p-3"><p className="text-[11px] text-slate-400">Publicados</p><p className="text-lg font-semibold">${shortNum(myProfileStats?.published || 0)}</p></article>
-              <article className="rounded-xl border border-slate-800 bg-slate-900/70 p-3"><p className="text-[11px] text-slate-400">Rascunhos</p><p className="text-lg font-semibold">${shortNum(myProfileStats?.drafts || 0)}</p></article>
-              <article className="rounded-xl border border-slate-800 bg-slate-900/70 p-3"><p className="text-[11px] text-slate-400">Privados</p><p className="text-lg font-semibold">${shortNum(myProfileStats?.private || 0)}</p></article>
-              <article className="rounded-xl border border-slate-800 bg-slate-900/70 p-3"><p className="text-[11px] text-slate-400">Não listados</p><p className="text-lg font-semibold">${shortNum(myProfileStats?.unlisted || 0)}</p></article>
+              <article className="rounded-xl border border-slate-800 bg-slate-900/70 p-3">
+                <p className="text-[11px] text-slate-400">Total</p>
+                <p className="text-lg font-semibold">${shortNum(myProfileStats?.total || 0)}</p>
+              </article>
+              <article className="rounded-xl border border-slate-800 bg-slate-900/70 p-3">
+                <p className="text-[11px] text-slate-400">Publicados</p>
+                <p className="text-lg font-semibold">${shortNum(myProfileStats?.published || 0)}</p>
+              </article>
+              <article className="rounded-xl border border-slate-800 bg-slate-900/70 p-3">
+                <p className="text-[11px] text-slate-400">Rascunhos</p>
+                <p className="text-lg font-semibold">${shortNum(myProfileStats?.drafts || 0)}</p>
+              </article>
+              <article className="rounded-xl border border-slate-800 bg-slate-900/70 p-3">
+                <p className="text-[11px] text-slate-400">Privados</p>
+                <p className="text-lg font-semibold">${shortNum(myProfileStats?.private || 0)}</p>
+              </article>
+              <article className="rounded-xl border border-slate-800 bg-slate-900/70 p-3">
+                <p className="text-[11px] text-slate-400">Não listados</p>
+                <p className="text-lg font-semibold">${shortNum(myProfileStats?.unlisted || 0)}</p>
+              </article>
             </section>
 
             <section className="space-y-3">
@@ -933,19 +798,9 @@ function ProfilePage({
                 <span className="text-xs text-slate-400">${myPacksLoading ? 'Carregando...' : `${myPacks.length} pack(s)`}</span>
               </div>
               ${myPacksLoading
-                ? html`
-                    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
-                      ${Array.from({ length: 6 }).map(
-                        (_, index) => html`<div key=${index} className="h-40 rounded-2xl border border-slate-800 bg-slate-900/70 animate-pulse"></div>`,
-                      )}
-                    </div>
-                  `
+                ? html` <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">${Array.from({ length: 6 }).map((_, index) => html`<div key=${index} className="h-40 rounded-2xl border border-slate-800 bg-slate-900/70 animate-pulse"></div>`)}</div> `
                 : myPacks.length
-                  ? html`
-                      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
-                        ${myPacks.map((pack) => html`<${MyPackCard} key=${pack.id || pack.pack_key} pack=${pack} onOpenPublic=${onOpenPublicPack} />`)}
-                      </div>
-                    `
+                  ? html` <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">${myPacks.map((pack) => html`<${MyPackCard} key=${pack.id || pack.pack_key} pack=${pack} onOpenPublic=${onOpenPublicPack} />`)}</div> `
                   : html`
                       <div className="rounded-2xl border border-dashed border-slate-700 bg-slate-900/60 p-6 text-center">
                         <p className="text-sm font-semibold text-slate-100">Nenhum pack encontrado para esta conta.</p>
@@ -965,25 +820,10 @@ function ToastStack({ toasts = [], onDismiss }) {
     <div className="fixed right-3 top-16 z-[90] flex w-[min(92vw,380px)] flex-col gap-2">
       ${toasts.map(
         (toast) => html`
-          <div
-            key=${toast.id}
-            className=${`rounded-2xl border px-3 py-2.5 shadow-xl backdrop-blur ${
-              toast.type === 'error'
-                ? 'border-rose-500/35 bg-rose-500/15 text-rose-100'
-                : toast.type === 'warning'
-                  ? 'border-amber-500/35 bg-amber-500/15 text-amber-100'
-                  : 'border-emerald-500/35 bg-emerald-500/15 text-emerald-100'
-            }`}
-          >
+          <div key=${toast.id} className=${`rounded-2xl border px-3 py-2.5 shadow-xl backdrop-blur ${toast.type === 'error' ? 'border-rose-500/35 bg-rose-500/15 text-rose-100' : toast.type === 'warning' ? 'border-amber-500/35 bg-amber-500/15 text-amber-100' : 'border-emerald-500/35 bg-emerald-500/15 text-emerald-100'}`}>
             <div className="flex items-start justify-between gap-2">
               <p className="text-sm leading-5">${toast.message || ''}</p>
-              <button
-                type="button"
-                onClick=${() => onDismiss?.(toast.id)}
-                className="rounded-md border border-white/10 px-1.5 py-0.5 text-[11px] text-white/70 hover:bg-white/10"
-              >
-                fechar
-              </button>
+              <button type="button" onClick=${() => onDismiss?.(toast.id)} className="rounded-md border border-white/10 px-1.5 py-0.5 text-[11px] text-white/70 hover:bg-white/10">fechar</button>
             </div>
           </div>
         `,
@@ -992,17 +832,7 @@ function ToastStack({ toasts = [], onDismiss }) {
   `;
 }
 
-function ConfirmDialog({
-  open = false,
-  title = 'Confirmar',
-  message = '',
-  confirmLabel = 'Confirmar',
-  cancelLabel = 'Cancelar',
-  busy = false,
-  danger = false,
-  onCancel,
-  onConfirm,
-}) {
+function ConfirmDialog({ open = false, title = 'Confirmar', message = '', confirmLabel = 'Confirmar', cancelLabel = 'Cancelar', busy = false, danger = false, onCancel, onConfirm }) {
   if (!open) return null;
   return html`
     <div className="fixed inset-0 z-[88] flex items-end justify-center bg-black/60 p-3 sm:items-center">
@@ -1011,26 +841,8 @@ function ConfirmDialog({
         <h3 className="text-base font-bold text-slate-100">${title}</h3>
         <p className="mt-2 text-sm text-slate-300">${message}</p>
         <div className="mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-          <button
-            type="button"
-            onClick=${onCancel}
-            disabled=${busy}
-            className="h-10 rounded-xl border border-slate-700 px-4 text-sm text-slate-200 hover:bg-slate-800 disabled:opacity-60"
-          >
-            ${cancelLabel}
-          </button>
-          <button
-            type="button"
-            onClick=${onConfirm}
-            disabled=${busy}
-            className=${`h-10 rounded-xl border px-4 text-sm font-semibold disabled:opacity-60 ${
-              danger
-                ? 'border-rose-500/35 bg-rose-500/15 text-rose-100 hover:bg-rose-500/20'
-                : 'border-emerald-500/35 bg-emerald-500/15 text-emerald-100 hover:bg-emerald-500/20'
-            }`}
-          >
-            ${busy ? 'Processando...' : confirmLabel}
-          </button>
+          <button type="button" onClick=${onCancel} disabled=${busy} className="h-10 rounded-xl border border-slate-700 px-4 text-sm text-slate-200 hover:bg-slate-800 disabled:opacity-60">${cancelLabel}</button>
+          <button type="button" onClick=${onConfirm} disabled=${busy} className=${`h-10 rounded-xl border px-4 text-sm font-semibold disabled:opacity-60 ${danger ? 'border-rose-500/35 bg-rose-500/15 text-rose-100 hover:bg-rose-500/20' : 'border-emerald-500/35 bg-emerald-500/15 text-emerald-100 hover:bg-emerald-500/20'}`}>${busy ? 'Processando...' : confirmLabel}</button>
         </div>
       </div>
     </div>
@@ -1061,25 +873,15 @@ function PackActionsSheet({ pack, open = false, busyAction = '', onClose, onActi
           </div>
         </div>
         <div className="space-y-1">
-          ${PROFILE_PACK_ACTIONS.map((action) => html`
-            <button
-              key=${action.key}
-              type="button"
-              onClick=${() => onAction?.(action.key, pack)}
-              disabled=${Boolean(busyAction)}
-              className=${`w-full rounded-xl border px-3 py-3 text-left text-sm transition disabled:opacity-60 ${
-                action.danger
-                  ? 'border-rose-500/25 bg-rose-500/10 text-rose-100 hover:bg-rose-500/15'
-                  : 'border-slate-700 bg-slate-950/60 text-slate-100 hover:bg-slate-800'
-              }`}
-            >
-              <span>${busyAction === action.key ? '⏳ ' : ''}${action.label}</span>
-            </button>
-          `)}
+          ${PROFILE_PACK_ACTIONS.map(
+            (action) => html`
+              <button key=${action.key} type="button" onClick=${() => onAction?.(action.key, pack)} disabled=${Boolean(busyAction)} className=${`w-full rounded-xl border px-3 py-3 text-left text-sm transition disabled:opacity-60 ${action.danger ? 'border-rose-500/25 bg-rose-500/10 text-rose-100 hover:bg-rose-500/15' : 'border-slate-700 bg-slate-950/60 text-slate-100 hover:bg-slate-800'}`}>
+                <span>${busyAction === action.key ? '⏳ ' : ''}${action.label}</span>
+              </button>
+            `,
+          )}
         </div>
-        <button type="button" onClick=${onClose} className="mt-3 h-10 w-full rounded-xl border border-slate-700 text-sm text-slate-200 hover:bg-slate-800">
-          Fechar
-        </button>
+        <button type="button" onClick=${onClose} className="mt-3 h-10 w-full rounded-xl border border-slate-700 text-sm text-slate-200 hover:bg-slate-800">Fechar</button>
       </section>
     </div>
   `;
@@ -1107,10 +909,22 @@ function PackAnalyticsModal({ open = false, pack = null, data = null, loading =
             ? html`<div className="mt-4 rounded-xl border border-rose-500/35 bg-rose-500/10 p-3 text-sm text-rose-200">${error}</div>`
             : html`
                 <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3">
-                  <article className="rounded-xl border border-slate-800 bg-slate-950/60 p-3"><p className="text-[11px] text-slate-400">Downloads</p><p className="text-lg font-bold text-slate-100">⬇ ${shortNum(analytics?.downloads || 0)}</p></article>
-                  <article className="rounded-xl border border-slate-800 bg-slate-950/60 p-3"><p className="text-[11px] text-slate-400">Likes</p><p className="text-lg font-bold text-slate-100">❤️ ${shortNum(analytics?.likes || 0)}</p></article>
-                  <article className="rounded-xl border border-slate-800 bg-slate-950/60 p-3"><p className="text-[11px] text-slate-400">Dislikes</p><p className="text-lg font-bold text-slate-100">👎 ${shortNum(analytics?.dislikes || 0)}</p></article>
-                  <article className="rounded-xl border border-slate-800 bg-slate-950/60 p-3"><p className="text-[11px] text-slate-400">Score</p><p className="text-lg font-bold text-slate-100">⭐ ${shortNum(analytics?.score || 0)}</p></article>
+                  <article className="rounded-xl border border-slate-800 bg-slate-950/60 p-3">
+                    <p className="text-[11px] text-slate-400">Downloads</p>
+                    <p className="text-lg font-bold text-slate-100">⬇ ${shortNum(analytics?.downloads || 0)}</p>
+                  </article>
+                  <article className="rounded-xl border border-slate-800 bg-slate-950/60 p-3">
+                    <p className="text-[11px] text-slate-400">Likes</p>
+                    <p className="text-lg font-bold text-slate-100">❤️ ${shortNum(analytics?.likes || 0)}</p>
+                  </article>
+                  <article className="rounded-xl border border-slate-800 bg-slate-950/60 p-3">
+                    <p className="text-[11px] text-slate-400">Dislikes</p>
+                    <p className="text-lg font-bold text-slate-100">👎 ${shortNum(analytics?.dislikes || 0)}</p>
+                  </article>
+                  <article className="rounded-xl border border-slate-800 bg-slate-950/60 p-3">
+                    <p className="text-[11px] text-slate-400">Score</p>
+                    <p className="text-lg font-bold text-slate-100">⭐ ${shortNum(analytics?.score || 0)}</p>
+                  </article>
                 </div>
                 <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
                   <article className="rounded-xl border border-slate-800 bg-slate-950/60 p-3">
@@ -1159,14 +973,7 @@ function CreatorStatCard({ icon, label, value, tone = 'slate', sublabel = '' })
   `;
 }
 
-function CreatorPackCardPro({
-  pack,
-  onOpenPublic,
-  onOpenActions,
-  onOpenManage,
-  onQuickDelete,
-  actionBusy = '',
-}) {
+function CreatorPackCardPro({ pack, onOpenPublic, onOpenActions, onOpenManage, onQuickDelete, actionBusy = '' }) {
   const visibilityPill = formatVisibilityPill(pack?.visibility);
   const statusPill = formatStatusPill(pack?.status);
   const engagement = getPackEngagement(pack);
@@ -1183,17 +990,8 @@ function CreatorPackCardPro({
           <span className=${`inline-flex rounded-full border px-2 py-0.5 text-[10px] ${statusPill.className}`}>${statusPill.label}</span>
           <span className=${`inline-flex rounded-full border px-2 py-0.5 text-[10px] ${visibilityPill.className}`}>${visibilityPill.label}</span>
         </div>
-        <button
-          type="button"
-          onClick=${() => onOpenActions?.(pack)}
-          className="absolute right-2 top-2 inline-flex h-8 w-8 items-center justify-center rounded-full border border-slate-700/90 bg-slate-950/80 text-slate-100 hover:bg-slate-800"
-          title="Ações"
-        >
-          ⋮
-        </button>
-        ${isCoverHidden
-          ? html`<div className="absolute bottom-2 left-2 rounded-full border border-slate-600 bg-slate-950/80 px-2 py-0.5 text-[10px] text-slate-300">🔒 capa oculta no catálogo</div>`
-          : null}
+        <button type="button" onClick=${() => onOpenActions?.(pack)} className="absolute right-2 top-2 inline-flex h-8 w-8 items-center justify-center rounded-full border border-slate-700/90 bg-slate-950/80 text-slate-100 hover:bg-slate-800" title="Ações">⋮</button>
+        ${isCoverHidden ? html`<div className="absolute bottom-2 left-2 rounded-full border border-slate-600 bg-slate-950/80 px-2 py-0.5 text-[10px] text-slate-300">🔒 capa oculta no catálogo</div>` : null}
       </div>
 
       <div className="min-w-0 p-2 space-y-1.5 sm:p-2.5 sm:space-y-2">
@@ -1210,80 +1008,30 @@ function CreatorPackCardPro({
         </div>
 
         <div className="grid grid-cols-3 gap-1.5">
-          <button
-            type="button"
-            onClick=${() => onOpenManage?.(pack)}
-            disabled=${Boolean(actionBusy)}
-            className="inline-flex h-8 items-center justify-center rounded-lg border border-slate-700 bg-slate-950/60 px-1 text-[11px] text-slate-100 hover:bg-slate-800 disabled:opacity-60"
-            title="Adicionar sticker"
-          >
+          <button type="button" onClick=${() => onOpenManage?.(pack)} disabled=${Boolean(actionBusy)} className="inline-flex h-8 items-center justify-center rounded-lg border border-slate-700 bg-slate-950/60 px-1 text-[11px] text-slate-100 hover:bg-slate-800 disabled:opacity-60" title="Adicionar sticker">
             <span className="sm:hidden">➕</span>
             <span className="hidden sm:inline">➕ Sticker</span>
           </button>
-          <button
-            type="button"
-            onClick=${() => onOpenManage?.(pack)}
-            disabled=${Boolean(actionBusy)}
-            className="inline-flex h-8 items-center justify-center rounded-lg border border-slate-700 bg-slate-950/60 px-1 text-[11px] text-slate-100 hover:bg-slate-800 disabled:opacity-60"
-            title="Editar pack"
-          >
+          <button type="button" onClick=${() => onOpenManage?.(pack)} disabled=${Boolean(actionBusy)} className="inline-flex h-8 items-center justify-center rounded-lg border border-slate-700 bg-slate-950/60 px-1 text-[11px] text-slate-100 hover:bg-slate-800 disabled:opacity-60" title="Editar pack">
             <span className="sm:hidden">✏️</span>
             <span className="hidden sm:inline">✏️ Editar</span>
           </button>
-          <button
-            type="button"
-            onClick=${() => onQuickDelete?.(pack)}
-            disabled=${Boolean(actionBusy)}
-            className="inline-flex h-8 items-center justify-center rounded-lg border border-rose-500/25 bg-rose-500/10 px-1 text-[11px] text-rose-100 hover:bg-rose-500/15 disabled:opacity-60"
-            title="Excluir pack"
-          >
+          <button type="button" onClick=${() => onQuickDelete?.(pack)} disabled=${Boolean(actionBusy)} className="inline-flex h-8 items-center justify-center rounded-lg border border-rose-500/25 bg-rose-500/10 px-1 text-[11px] text-rose-100 hover:bg-rose-500/15 disabled:opacity-60" title="Excluir pack">
             <span className="sm:hidden">🗑️</span>
             <span className="hidden sm:inline">🗑️ Excluir</span>
           </button>
         </div>
 
         <div className="flex gap-2">
-          <button
-            type="button"
-            onClick=${() => onOpenManage?.(pack)}
-            disabled=${Boolean(actionBusy)}
-            className="inline-flex h-8 flex-1 items-center justify-center rounded-xl border border-cyan-500/35 bg-cyan-500/10 px-2.5 text-[11px] font-semibold text-cyan-100 hover:bg-cyan-500/20 disabled:opacity-60 sm:h-9 sm:text-xs"
-          >
-            ${actionBusy === 'manage' ? 'Abrindo...' : 'Gerenciar pack'}
-          </button>
-          ${shareable
-            ? html`
-                <button
-                  type="button"
-                  onClick=${() => onOpenPublic?.(pack.pack_key)}
-                  className="inline-flex h-8 items-center justify-center rounded-xl border border-slate-700 bg-slate-950/60 px-2.5 text-[11px] font-medium text-slate-100 hover:bg-slate-800 sm:h-9 sm:px-3 sm:text-xs"
-                >
-                  Abrir
-                </button>
-              `
-            : html`<span className="inline-flex h-9 items-center justify-center rounded-xl border border-slate-800 bg-slate-950/40 px-3 text-[11px] text-slate-500">Sem link público</span>`}
+          <button type="button" onClick=${() => onOpenManage?.(pack)} disabled=${Boolean(actionBusy)} className="inline-flex h-8 flex-1 items-center justify-center rounded-xl border border-cyan-500/35 bg-cyan-500/10 px-2.5 text-[11px] font-semibold text-cyan-100 hover:bg-cyan-500/20 disabled:opacity-60 sm:h-9 sm:text-xs">${actionBusy === 'manage' ? 'Abrindo...' : 'Gerenciar pack'}</button>
+          ${shareable ? html` <button type="button" onClick=${() => onOpenPublic?.(pack.pack_key)} className="inline-flex h-8 items-center justify-center rounded-xl border border-slate-700 bg-slate-950/60 px-2.5 text-[11px] font-medium text-slate-100 hover:bg-slate-800 sm:h-9 sm:px-3 sm:text-xs">Abrir</button> ` : html`<span className="inline-flex h-9 items-center justify-center rounded-xl border border-slate-800 bg-slate-950/40 px-3 text-[11px] text-slate-500">Sem link público</span>`}
         </div>
       </div>
     </article>
   `;
 }
 
-function PackManagerModal({
-  open = false,
-  data = null,
-  loading = false,
-  error = '',
-  busyAction = '',
-  onClose,
-  onRefresh,
-  onSaveMetadata,
-  onAddSticker,
-  onRemoveSticker,
-  onReplaceSticker,
-  onSetCover,
-  onReorder,
-  onOpenAnalytics,
-}) {
+function PackManagerModal({ open = false, data = null, loading = false, error = '', busyAction = '', onClose, onRefresh, onSaveMetadata, onAddSticker, onRemoveSticker, onReplaceSticker, onSetCover, onReorder, onOpenAnalytics }) {
   const pack = data?.pack || null;
   const publishState = data?.publish_state || null;
   const analytics = data?.analytics || null;
@@ -1321,9 +1069,7 @@ function PackManagerModal({
 
   const orderMap = new Map(items.map((item) => [item.sticker_id, item]));
   const orderedItems = orderIds.map((id) => orderMap.get(id)).filter(Boolean);
-  const orderDirty =
-    orderedItems.length === items.length &&
-    orderedItems.some((item, index) => String(item?.sticker_id || '') !== String(items[index]?.sticker_id || ''));
+  const orderDirty = orderedItems.length === items.length && orderedItems.some((item, index) => String(item?.sticker_id || '') !== String(items[index]?.sticker_id || ''));
 
   return html`
     <div className="fixed inset-0 z-[85] flex items-end justify-center bg-black/65 p-2 sm:items-center sm:p-4">
@@ -1337,11 +1083,7 @@ function PackManagerModal({
               <p className="truncate text-xs text-slate-500">${pack?.pack_key || '-'}</p>
             </div>
             <div className="flex w-full flex-wrap items-center gap-1.5 sm:w-auto sm:justify-end sm:gap-2">
-              <label
-                className=${`inline-flex h-9 cursor-pointer items-center rounded-xl border border-emerald-500/35 bg-emerald-500/10 px-2.5 text-[11px] font-semibold text-emerald-100 hover:bg-emerald-500/20 sm:h-10 sm:px-3 sm:text-xs ${
-                  busyAction ? 'pointer-events-none opacity-60' : ''
-                }`}
-              >
+              <label className=${`inline-flex h-9 cursor-pointer items-center rounded-xl border border-emerald-500/35 bg-emerald-500/10 px-2.5 text-[11px] font-semibold text-emerald-100 hover:bg-emerald-500/20 sm:h-10 sm:px-3 sm:text-xs ${busyAction ? 'pointer-events-none opacity-60' : ''}`}>
                 <span className="sm:hidden">➕ Sticker</span>
                 <span className="hidden sm:inline">➕ Adicionar sticker</span>
                 <input
@@ -1392,10 +1134,22 @@ function PackManagerModal({
                             </div>
                           </div>
                           <div className="grid grid-cols-2 gap-2 text-xs">
-                            <div className="rounded-xl border border-slate-800 bg-slate-900/60 p-2"><p className="text-slate-400">Stickers</p><p className="font-semibold text-slate-100">${shortNum(pack.sticker_count || 0)}</p></div>
-                            <div className="rounded-xl border border-slate-800 bg-slate-900/60 p-2"><p className="text-slate-400">Downloads</p><p className="font-semibold text-slate-100">${shortNum(analytics?.downloads || 0)}</p></div>
-                            <div className="rounded-xl border border-slate-800 bg-slate-900/60 p-2"><p className="text-slate-400">Likes</p><p className="font-semibold text-slate-100">${shortNum(analytics?.likes || 0)}</p></div>
-                            <div className="rounded-xl border border-slate-800 bg-slate-900/60 p-2"><p className="text-slate-400">Pronto p/ publicar</p><p className="font-semibold text-slate-100">${publishState?.consistency?.can_publish ? 'Sim' : 'Não'}</p></div>
+                            <div className="rounded-xl border border-slate-800 bg-slate-900/60 p-2">
+                              <p className="text-slate-400">Stickers</p>
+                              <p className="font-semibold text-slate-100">${shortNum(pack.sticker_count || 0)}</p>
+                            </div>
+                            <div className="rounded-xl border border-slate-800 bg-slate-900/60 p-2">
+                              <p className="text-slate-400">Downloads</p>
+                              <p className="font-semibold text-slate-100">${shortNum(analytics?.downloads || 0)}</p>
+                            </div>
+                            <div className="rounded-xl border border-slate-800 bg-slate-900/60 p-2">
+                              <p className="text-slate-400">Likes</p>
+                              <p className="font-semibold text-slate-100">${shortNum(analytics?.likes || 0)}</p>
+                            </div>
+                            <div className="rounded-xl border border-slate-800 bg-slate-900/60 p-2">
+                              <p className="text-slate-400">Pronto p/ publicar</p>
+                              <p className="font-semibold text-slate-100">${publishState?.consistency?.can_publish ? 'Sim' : 'Não'}</p>
+                            </div>
                           </div>
                         </section>
 
@@ -1414,15 +1168,15 @@ function PackManagerModal({
                         >
                           <div>
                             <label className="mb-1 block text-[11px] uppercase tracking-wide text-slate-400">Nome</label>
-                            <input value=${name} onChange=${(e) => setName(e.target.value)} maxLength="120" className="h-11 w-full rounded-xl border border-slate-700 bg-slate-900 px-3 text-sm text-slate-100 outline-none focus:border-cyan-400/40" />
+                            <input value=${name} onChange=${(e) => setName(e.target.value)} maxlength="120" className="h-11 w-full rounded-xl border border-slate-700 bg-slate-900 px-3 text-sm text-slate-100 outline-none focus:border-cyan-400/40" />
                           </div>
                           <div>
                             <label className="mb-1 block text-[11px] uppercase tracking-wide text-slate-400">Publisher</label>
-                            <input value=${publisher} onChange=${(e) => setPublisher(e.target.value)} maxLength="120" className="h-11 w-full rounded-xl border border-slate-700 bg-slate-900 px-3 text-sm text-slate-100 outline-none focus:border-cyan-400/40" />
+                            <input value=${publisher} onChange=${(e) => setPublisher(e.target.value)} maxlength="120" className="h-11 w-full rounded-xl border border-slate-700 bg-slate-900 px-3 text-sm text-slate-100 outline-none focus:border-cyan-400/40" />
                           </div>
                           <div>
                             <label className="mb-1 block text-[11px] uppercase tracking-wide text-slate-400">Descrição</label>
-                            <textarea value=${description} onChange=${(e) => setDescription(e.target.value)} rows="3" maxLength="1024" className="w-full rounded-xl border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400/40"></textarea>
+                            <textarea value=${description} onChange=${(e) => setDescription(e.target.value)} rows="3" maxlength="1024" className="w-full rounded-xl border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400/40"></textarea>
                           </div>
                           <div>
                             <label className="mb-1 block text-[11px] uppercase tracking-wide text-slate-400">Tags (separadas por vírgula)</label>
@@ -1437,9 +1191,7 @@ function PackManagerModal({
                               <option value="private">Privado</option>
                             </select>
                           </div>
-                          <button type="submit" disabled=${Boolean(busyAction)} className="h-11 w-full rounded-xl border border-cyan-500/35 bg-cyan-500/10 text-sm font-semibold text-cyan-100 hover:bg-cyan-500/20 disabled:opacity-60">
-                            ${busyAction === 'saveMetadata' ? 'Salvando...' : 'Salvar alterações'}
-                          </button>
+                          <button type="submit" disabled=${Boolean(busyAction)} className="h-11 w-full rounded-xl border border-cyan-500/35 bg-cyan-500/10 text-sm font-semibold text-cyan-100 hover:bg-cyan-500/20 disabled:opacity-60">${busyAction === 'saveMetadata' ? 'Salvando...' : 'Salvar alterações'}</button>
                         </form>
                       </aside>
 
@@ -1449,18 +1201,7 @@ function PackManagerModal({
                             <h4 className="text-base font-bold text-slate-100">Stickers do pack</h4>
                             <p className="text-[11px] text-slate-400">Arraste para reordenar. Use ⭐, 🔁 e ❌.</p>
                           </div>
-                          ${orderDirty
-                            ? html`
-                                <button
-                                  type="button"
-                                  onClick=${() => onReorder?.(orderIds)}
-                                  disabled=${Boolean(busyAction)}
-                                  className="h-9 rounded-xl border border-amber-500/35 bg-amber-500/10 px-2.5 text-[11px] font-semibold text-amber-100 hover:bg-amber-500/20 disabled:opacity-60 sm:h-10 sm:px-3 sm:text-xs"
-                                >
-                                  ${busyAction === 'reorder' ? 'Salvando ordem...' : 'Salvar ordem'}
-                                </button>
-                              `
-                            : null}
+                          ${orderDirty ? html` <button type="button" onClick=${() => onReorder?.(orderIds)} disabled=${Boolean(busyAction)} className="h-9 rounded-xl border border-amber-500/35 bg-amber-500/10 px-2.5 text-[11px] font-semibold text-amber-100 hover:bg-amber-500/20 disabled:opacity-60 sm:h-10 sm:px-3 sm:text-xs">${busyAction === 'reorder' ? 'Salvando ordem...' : 'Salvar ordem'}</button> ` : null}
                         </div>
 
                         ${orderedItems.length
@@ -1493,21 +1234,8 @@ function PackManagerModal({
                                       <div className="p-1.5 space-y-1.5 sm:p-2 sm:space-y-2">
                                         <p className="truncate text-[10px] text-slate-500">${item.sticker_id}</p>
                                         <div className="grid grid-cols-3 gap-1.5">
-                                          <button
-                                            type="button"
-                                            title="Definir como capa"
-                                            onClick=${() => onSetCover?.(item.sticker_id)}
-                                            disabled=${Boolean(busyAction)}
-                                            className="h-8 rounded-lg border border-amber-500/30 bg-amber-500/10 text-[11px] text-amber-100 hover:bg-amber-500/15 disabled:opacity-60"
-                                          >
-                                            ⭐
-                                          </button>
-                                          <label
-                                            className=${`inline-flex h-8 cursor-pointer items-center justify-center rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-2 text-[11px] text-cyan-100 hover:bg-cyan-500/15 ${
-                                              busyAction ? 'pointer-events-none opacity-60' : ''
-                                            }`}
-                                            title="Substituir sticker"
-                                          >
+                                          <button type="button" title="Definir como capa" onClick=${() => onSetCover?.(item.sticker_id)} disabled=${Boolean(busyAction)} className="h-8 rounded-lg border border-amber-500/30 bg-amber-500/10 text-[11px] text-amber-100 hover:bg-amber-500/15 disabled:opacity-60">⭐</button>
+                                          <label className=${`inline-flex h-8 cursor-pointer items-center justify-center rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-2 text-[11px] text-cyan-100 hover:bg-cyan-500/15 ${busyAction ? 'pointer-events-none opacity-60' : ''}`} title="Substituir sticker">
                                             🔁
                                             <input
                                               type="file"
@@ -1522,15 +1250,7 @@ function PackManagerModal({
                                               }}
                                             />
                                           </label>
-                                          <button
-                                            type="button"
-                                            title="Remover sticker"
-                                            onClick=${() => onRemoveSticker?.(item.sticker_id)}
-                                            disabled=${Boolean(busyAction)}
-                                            className="h-8 rounded-lg border border-rose-500/30 bg-rose-500/10 text-[11px] text-rose-100 hover:bg-rose-500/15 disabled:opacity-60"
-                                          >
-                                            ❌
-                                          </button>
+                                          <button type="button" title="Remover sticker" onClick=${() => onRemoveSticker?.(item.sticker_id)} disabled=${Boolean(busyAction)} className="h-8 rounded-lg border border-rose-500/30 bg-rose-500/10 text-[11px] text-rose-100 hover:bg-rose-500/15 disabled:opacity-60">❌</button>
                                         </div>
                                       </div>
                                     </article>
@@ -1555,25 +1275,7 @@ function PackManagerModal({
   `;
 }
 
-function CreatorProfileDashboard({
-  googleAuthConfig,
-  googleAuth,
-  googleAuthBusy,
-  googleAuthError,
-  googleSessionChecked,
-  myPacks,
-  myPacksLoading,
-  myPacksError,
-  myProfileStats,
-  onBack,
-  onRefresh,
-  onLogout,
-  onOpenPublicPack,
-  onOpenPackActions,
-  onOpenManagePack,
-  onRequestDeletePack,
-  packActionBusyByKey = {},
-}) {
+function CreatorProfileDashboard({ googleAuthConfig, googleAuth, googleAuthBusy, googleAuthError, googleSessionChecked, myPacks, myPacksLoading, myPacksError, myProfileStats, onBack, onRefresh, onLogout, onOpenPublicPack, onOpenPackActions, onOpenManagePack, onRequestDeletePack, packActionBusyByKey = {} }) {
   const [packSearch, setPackSearch] = useState('');
   const [packSort, setPackSort] = useState('recent');
   const [packFilter, setPackFilter] = useState('all');
@@ -1605,15 +1307,7 @@ function CreatorProfileDashboard({
         if (packFilter === 'unlisted' && visibility !== 'unlisted') return false;
       }
       if (!q) return true;
-      const searchable = [
-        pack?.name,
-        pack?.publisher,
-        pack?.pack_key,
-        pack?.description,
-        ...(Array.isArray(pack?.manual_tags) ? pack.manual_tags : []),
-      ]
-        .map((value) => normalizeToken(value))
-        .join(' ');
+      const searchable = [pack?.name, pack?.publisher, pack?.pack_key, pack?.description, ...(Array.isArray(pack?.manual_tags) ? pack.manual_tags : [])].map((value) => normalizeToken(value)).join(' ');
       return searchable.includes(q);
     });
 
@@ -1657,11 +1351,7 @@ function CreatorProfileDashboard({
         <div className="relative">
           <div className="flex flex-wrap items-start justify-between gap-3">
             <div className="flex min-w-0 items-center gap-3">
-              <img
-                src=${googleAuth?.user?.picture || getAvatarUrl(googleAuth?.user?.name || 'creator')}
-                alt="Avatar"
-                className="h-20 w-20 rounded-2xl border border-slate-700 bg-slate-900 object-cover sm:h-24 sm:w-24"
-              />
+              <img src=${googleAuth?.user?.picture || getAvatarUrl(googleAuth?.user?.name || 'creator')} alt="Avatar" className="h-20 w-20 rounded-2xl border border-slate-700 bg-slate-900 object-cover sm:h-24 sm:w-24" />
               <div className="min-w-0">
                 <div className="mb-1 inline-flex items-center gap-1 rounded-full border border-cyan-400/25 bg-cyan-500/10 px-2 py-0.5 text-[11px] font-semibold text-cyan-100">🧩 Gestão de stickers</div>
                 <h1 className="truncate text-2xl font-extrabold tracking-tight text-slate-100 sm:text-3xl">Gerenciamento de Packs</h1>
@@ -1669,36 +1359,39 @@ function CreatorProfileDashboard({
                 <p className="mt-0.5 text-[11px] text-slate-500">Área exclusiva para gerenciamento dos seus packs.</p>
               </div>
             </div>
-            ${hasGoogleLogin
-              ? html`<button type="button" onClick=${onLogout} disabled=${googleAuthBusy} className="inline-flex h-10 items-center rounded-xl border border-slate-700 px-3 text-xs text-slate-200 hover:bg-slate-800 disabled:opacity-60">${googleAuthBusy ? 'Saindo...' : 'Sair'}</button>`
-              : null}
+            ${hasGoogleLogin ? html`<button type="button" onClick=${onLogout} disabled=${googleAuthBusy} className="inline-flex h-10 items-center rounded-xl border border-slate-700 px-3 text-xs text-slate-200 hover:bg-slate-800 disabled:opacity-60">${googleAuthBusy ? 'Saindo...' : 'Sair'}</button>` : null}
           </div>
 
           ${hasGoogleLogin
             ? html`
                 <div className="mt-3 rounded-2xl border border-slate-800 bg-slate-950/35 p-2.5">
                   <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-                    <div className="rounded-xl border border-slate-800 bg-slate-900/50 px-2.5 py-2"><p className="text-[10px] text-slate-400">Packs</p><p className="text-base font-bold text-slate-100">${shortNum(myProfileStats?.total || 0)}</p></div>
-                    <div className="rounded-xl border border-slate-800 bg-slate-900/50 px-2.5 py-2"><p className="text-[10px] text-slate-400">Downloads</p><p className="text-base font-bold text-slate-100">${shortNum(totals.downloads)}</p></div>
-                    <div className="rounded-xl border border-slate-800 bg-slate-900/50 px-2.5 py-2"><p className="text-[10px] text-slate-400">Likes</p><p className="text-base font-bold text-slate-100">${shortNum(totals.likes)}</p></div>
-                    <div className="rounded-xl border border-slate-800 bg-slate-900/50 px-2.5 py-2"><p className="text-[10px] text-slate-400">Stickers publicados</p><p className="text-base font-bold text-slate-100">${shortNum(totals.publishedStickers)}</p></div>
+                    <div className="rounded-xl border border-slate-800 bg-slate-900/50 px-2.5 py-2">
+                      <p className="text-[10px] text-slate-400">Packs</p>
+                      <p className="text-base font-bold text-slate-100">${shortNum(myProfileStats?.total || 0)}</p>
+                    </div>
+                    <div className="rounded-xl border border-slate-800 bg-slate-900/50 px-2.5 py-2">
+                      <p className="text-[10px] text-slate-400">Downloads</p>
+                      <p className="text-base font-bold text-slate-100">${shortNum(totals.downloads)}</p>
+                    </div>
+                    <div className="rounded-xl border border-slate-800 bg-slate-900/50 px-2.5 py-2">
+                      <p className="text-[10px] text-slate-400">Likes</p>
+                      <p className="text-base font-bold text-slate-100">${shortNum(totals.likes)}</p>
+                    </div>
+                    <div className="rounded-xl border border-slate-800 bg-slate-900/50 px-2.5 py-2">
+                      <p className="text-[10px] text-slate-400">Stickers publicados</p>
+                      <p className="text-base font-bold text-slate-100">${shortNum(totals.publishedStickers)}</p>
+                    </div>
                   </div>
                   <div className="mt-2 flex flex-wrap gap-1.5">
-                    ${profileStatusChips.map((chip) => html`
-                      <button
-                        key=${chip.key}
-                        type="button"
-                        onClick=${() => setPackFilter((prev) => (prev === chip.key ? 'all' : chip.key))}
-                        className=${`inline-flex items-center gap-1 rounded-full border px-2 py-1 text-[11px] ${
-                          packFilter === chip.key
-                            ? 'border-cyan-400/35 bg-cyan-500/10 text-cyan-100'
-                            : 'border-slate-700 bg-slate-900/50 text-slate-300 hover:bg-slate-800'
-                        }`}
-                      >
-                        <span>${chip.label}</span>
-                        <span className="font-semibold">${shortNum(chip.value)}</span>
-                      </button>
-                    `)}
+                    ${profileStatusChips.map(
+                      (chip) => html`
+                        <button key=${chip.key} type="button" onClick=${() => setPackFilter((prev) => (prev === chip.key ? 'all' : chip.key))} className=${`inline-flex items-center gap-1 rounded-full border px-2 py-1 text-[11px] ${packFilter === chip.key ? 'border-cyan-400/35 bg-cyan-500/10 text-cyan-100' : 'border-slate-700 bg-slate-900/50 text-slate-300 hover:bg-slate-800'}`}>
+                          <span>${chip.label}</span>
+                          <span className="font-semibold">${shortNum(chip.value)}</span>
+                        </button>
+                      `,
+                    )}
                   </div>
                 </div>
               `
@@ -1712,16 +1405,9 @@ function CreatorProfileDashboard({
               <div className="space-y-2.5">
                 <div className="rounded-xl border border-cyan-500/20 bg-cyan-500/5 p-3">
                   <p className="text-sm font-semibold text-cyan-200">Sessão necessária para gerenciamento</p>
-                  <p className="mt-1 text-xs text-slate-300">
-                    ${googleLoginEnabled
-                      ? 'Esta área é exclusiva para gerenciar seus packs e stickers. Redirecionando para o login...'
-                      : 'Login Google indisponível no momento.'}
-                  </p>
+                  <p className="mt-1 text-xs text-slate-300">${googleLoginEnabled ? 'Esta área é exclusiva para gerenciar seus packs e stickers. Redirecionando para o login...' : 'Login Google indisponível no momento.'}</p>
                 </div>
-                ${!googleSessionChecked
-                  ? html`<p className="text-xs text-slate-400">Verificando sessão...</p>`
-                  : null}
-                ${googleAuthError ? html`<p className="text-xs text-rose-300">${googleAuthError}</p>` : null}
+                ${!googleSessionChecked ? html`<p className="text-xs text-slate-400">Verificando sessão...</p>` : null} ${googleAuthError ? html`<p className="text-xs text-rose-300">${googleAuthError}</p>` : null}
               </div>
             </section>
           `
@@ -1741,75 +1427,37 @@ function CreatorProfileDashboard({
                 <div className="mt-2 grid gap-2 md:grid-cols-[minmax(0,1fr)_180px]">
                   <div className="relative">
                     <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">🔎</span>
-                    <input
-                      type="search"
-                      value=${packSearch}
-                      onChange=${(e) => setPackSearch(e.target.value)}
-                      placeholder="Buscar packs..."
-                      className="h-10 w-full rounded-xl border border-slate-700 bg-slate-950/60 pl-9 pr-3 text-sm text-slate-100 placeholder:text-slate-500 outline-none focus:border-cyan-400/40"
-                    />
+                    <input type="search" value=${packSearch} onChange=${(e) => setPackSearch(e.target.value)} placeholder="Buscar packs..." className="h-10 w-full rounded-xl border border-slate-700 bg-slate-950/60 pl-9 pr-3 text-sm text-slate-100 placeholder:text-slate-500 outline-none focus:border-cyan-400/40" />
                   </div>
-                  <select
-                    value=${packSort}
-                    onChange=${(e) => setPackSort(e.target.value)}
-                    className="h-10 rounded-xl border border-slate-700 bg-slate-950/60 px-3 text-sm text-slate-100 outline-none focus:border-cyan-400/40"
-                  >
+                  <select value=${packSort} onChange=${(e) => setPackSort(e.target.value)} className="h-10 rounded-xl border border-slate-700 bg-slate-950/60 px-3 text-sm text-slate-100 outline-none focus:border-cyan-400/40">
                     <option value="recent">Mais recente</option>
                     <option value="downloads">Mais downloads</option>
                     <option value="likes">Mais likes</option>
                   </select>
                 </div>
 
-                <div className="mt-2 flex flex-wrap gap-1.5">
-                  ${packFilterOptions.map((option) => html`
-                    <button
-                      key=${option.key}
-                      type="button"
-                      onClick=${() => setPackFilter(option.key)}
-                      className=${`h-8 rounded-full border px-2.5 text-[11px] ${
-                        packFilter === option.key
-                          ? 'border-cyan-400/35 bg-cyan-500/10 text-cyan-100'
-                          : 'border-slate-700 bg-slate-950/50 text-slate-300 hover:bg-slate-800'
-                      }`}
-                    >
-                      ${option.label}
-                    </button>
-                  `)}
-                </div>
+                <div className="mt-2 flex flex-wrap gap-1.5">${packFilterOptions.map((option) => html` <button key=${option.key} type="button" onClick=${() => setPackFilter(option.key)} className=${`h-8 rounded-full border px-2.5 text-[11px] ${packFilter === option.key ? 'border-cyan-400/35 bg-cyan-500/10 text-cyan-100' : 'border-slate-700 bg-slate-950/50 text-slate-300 hover:bg-slate-800'}`}>${option.label}</button> `)}</div>
               </div>
 
               ${myPacksLoading
-                ? html`
-                    <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
-                      ${Array.from({ length: 6 }).map((_, index) => html`<div key=${index} className="h-56 animate-pulse rounded-2xl border border-slate-800 bg-slate-900/70"></div>`)}
-                    </div>
-                  `
+                ? html` <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">${Array.from({ length: 6 }).map((_, index) => html`<div key=${index} className="h-56 animate-pulse rounded-2xl border border-slate-800 bg-slate-900/70"></div>`)}</div> `
                 : filteredSortedPacks.length
-                  ? html`
-                      <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
-                        ${filteredSortedPacks.map((pack) => html`
-                          <${CreatorPackCardPro}
-                            key=${pack.id || pack.pack_key}
-                            pack=${pack}
-                            onOpenPublic=${onOpenPublicPack}
-                            onOpenActions=${onOpenPackActions}
-                            onOpenManage=${onOpenManagePack}
-                            onQuickDelete=${onRequestDeletePack}
-                            actionBusy=${packActionBusyByKey?.[pack.pack_key] || ''}
-                          />
-                        `)}
-                      </div>
-                    `
+                  ? html` <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">${filteredSortedPacks.map((pack) => html` <${CreatorPackCardPro} key=${pack.id || pack.pack_key} pack=${pack} onOpenPublic=${onOpenPublicPack} onOpenActions=${onOpenPackActions} onOpenManage=${onOpenManagePack} onQuickDelete=${onRequestDeletePack} actionBusy=${packActionBusyByKey?.[pack.pack_key] || ''} /> `)}</div> `
                   : html`
                       <div className="rounded-2xl border border-dashed border-slate-700 bg-slate-900/60 p-5 text-center">
                         <p className="text-sm font-semibold text-slate-100">${packs.length ? 'Nenhum pack corresponde aos filtros.' : 'Nenhum pack encontrado para esta conta.'}</p>
-                        <p className="mt-1 text-xs text-slate-400">
-                          ${packs.length
-                            ? 'Tente limpar busca/filtros para ver seus packs.'
-                            : html`Crie um pack com essa conta Google em <a href="/stickers/create/" className="text-cyan-300 underline">/stickers/create</a> e volte aqui.`}
-                        </p>
+                        <p className="mt-1 text-xs text-slate-400">${packs.length ? 'Tente limpar busca/filtros para ver seus packs.' : html`Crie um pack com essa conta Google em <a href="/stickers/create/" className="text-cyan-300 underline">/stickers/create</a> e volte aqui.`}</p>
                         ${packs.length
-                          ? html`<button type="button" onClick=${() => { setPackSearch(''); setPackFilter('all'); }} className="mt-3 h-9 rounded-xl border border-slate-700 px-3 text-xs text-slate-100 hover:bg-slate-800">Limpar filtros</button>`
+                          ? html`<button
+                              type="button"
+                              onClick=${() => {
+                                setPackSearch('');
+                                setPackFilter('all');
+                              }}
+                              className="mt-3 h-9 rounded-xl border border-slate-700 px-3 text-xs text-slate-100 hover:bg-slate-800"
+                            >
+                              Limpar filtros
+                            </button>`
                           : null}
                       </div>
                     `}
@@ -1824,35 +1472,16 @@ function OrphanCard({ sticker, hasNsfwAccess = true, onRequireLogin }) {
   return html`
     <article className="group rounded-2xl border border-slate-700/80 bg-slate-800/70 shadow-soft overflow-hidden transition-all duration-200 hover:-translate-y-0.5">
       <div className="relative aspect-square bg-slate-900 overflow-hidden">
-        <img
-          src=${lockedByNsfw ? NSFW_STICKER_PLACEHOLDER_URL : sticker.url || DEFAULT_STICKER_PLACEHOLDER_URL}
-          alt="Sticker sem pack"
-          className=${`w-full h-full object-contain transition-transform duration-300 ${
-            lockedByNsfw ? 'blur-md scale-105' : 'group-hover:scale-110'
-          }`}
-          loading="lazy"
-        />
+        <img src=${lockedByNsfw ? NSFW_STICKER_PLACEHOLDER_URL : sticker.url || DEFAULT_STICKER_PLACEHOLDER_URL} alt="Sticker sem pack" className=${`w-full h-full object-contain transition-transform duration-300 ${lockedByNsfw ? 'blur-md scale-105' : 'group-hover:scale-110'}`} loading="lazy" />
         ${lockedByNsfw
           ? html`
               <div className="absolute inset-0 flex items-center justify-center bg-slate-950/35 p-2">
-                <button
-                  type="button"
-                  onClick=${() => onRequireLogin?.()}
-                  className="inline-flex h-8 items-center rounded-lg border border-amber-400/35 bg-amber-500/15 px-2.5 text-[10px] font-semibold text-amber-100"
-                >
-                  Entrar para desbloquear
-                </button>
+                <button type="button" onClick=${() => onRequireLogin?.()} className="inline-flex h-8 items-center rounded-lg border border-amber-400/35 bg-amber-500/15 px-2.5 text-[10px] font-semibold text-amber-100">Entrar para desbloquear</button>
               </div>
             `
           : null}
       </div>
-      <div className="p-2">
-        ${primaryTag(sticker)
-          ? html`<span className="inline-flex rounded-full border border-slate-600 bg-slate-900/80 px-2 py-0.5 text-[10px] text-slate-300">${primaryTag(
-              sticker,
-            )}</span>`
-          : html`<span className="inline-flex rounded-full border border-slate-600 bg-slate-900/80 px-2 py-0.5 text-[10px] text-slate-400">sticker</span>`}
-      </div>
+      <div className="p-2">${primaryTag(sticker) ? html`<span className="inline-flex rounded-full border border-slate-600 bg-slate-900/80 px-2 py-0.5 text-[10px] text-slate-300">${primaryTag(sticker)}</span>` : html`<span className="inline-flex rounded-full border border-slate-600 bg-slate-900/80 px-2 py-0.5 text-[10px] text-slate-400">sticker</span>`}</div>
     </article>
   `;
 }
@@ -1882,13 +1511,7 @@ function EmptyState({ onClear }) {
       <div className="text-5xl mb-2">🧩</div>
       <p className="text-slate-100 font-semibold">Nenhum pack encontrado</p>
       <p className="text-slate-400 text-sm mt-1">Tente outra busca ou remova os filtros ativos.</p>
-      <button
-        type="button"
-        onClick=${onClear}
-        className="mt-4 inline-flex items-center justify-center rounded-xl border border-slate-600 px-4 py-2 text-sm text-slate-200 hover:bg-slate-700 transition"
-      >
-        Limpar filtros
-      </button>
+      <button type="button" onClick=${onClear} className="mt-4 inline-flex items-center justify-center rounded-xl border border-slate-600 px-4 py-2 text-sm text-slate-200 hover:bg-slate-700 transition">Limpar filtros</button>
     </div>
   `;
 }
@@ -1907,30 +1530,13 @@ function CatalogSortPicker({ open = false, currentSort = DEFAULT_CATALOG_SORT, b
               <p className="text-[11px] uppercase tracking-wide text-slate-400">Ordenar catálogo</p>
               <p className="text-sm font-semibold text-slate-100">Escolha o tipo de ranking</p>
             </div>
-            <button
-              type="button"
-              onClick=${onClose}
-              className="h-8 rounded-lg border border-slate-700 px-2.5 text-xs text-slate-300 hover:bg-slate-800 disabled:opacity-60"
-              disabled=${busy}
-            >
-              Fechar
-            </button>
+            <button type="button" onClick=${onClose} className="h-8 rounded-lg border border-slate-700 px-2.5 text-xs text-slate-300 hover:bg-slate-800 disabled:opacity-60" disabled=${busy}>Fechar</button>
           </div>
           <div className="space-y-1.5">
             ${CATALOG_SORT_OPTIONS.map((option) => {
               const active = selectedSort === option.value;
               return html`
-                <button
-                  key=${option.value}
-                  type="button"
-                  onClick=${() => onSelect?.(option.value)}
-                  disabled=${busy}
-                  className=${`w-full rounded-xl border px-3 py-2.5 text-left transition disabled:opacity-60 ${
-                    active
-                      ? 'border-emerald-400/40 bg-emerald-500/10 text-emerald-100'
-                      : 'border-slate-700 bg-slate-900/70 text-slate-200 hover:bg-slate-800'
-                  }`}
-                >
+                <button key=${option.value} type="button" onClick=${() => onSelect?.(option.value)} disabled=${busy} className=${`w-full rounded-xl border px-3 py-2.5 text-left transition disabled:opacity-60 ${active ? 'border-emerald-400/40 bg-emerald-500/10 text-emerald-100' : 'border-slate-700 bg-slate-900/70 text-slate-200 hover:bg-slate-800'}`}>
                   <span className="flex items-center justify-between gap-2">
                     <span className="inline-flex items-center gap-2">
                       <span>${option.icon}</span>
@@ -1962,9 +1568,7 @@ function PackPageSkeleton() {
           <div className="h-20 rounded-xl bg-slate-800"></div>
         </div>
       </div>
-      <div className="grid grid-cols-3 gap-2 sm:gap-3">
-        ${Array.from({ length: 9 }).map((_, index) => html`<div key=${index} className="aspect-square rounded-xl border border-slate-700 bg-slate-800"></div>`)}
-      </div>
+      <div className="grid grid-cols-3 gap-2 sm:gap-3">${Array.from({ length: 9 }).map((_, index) => html`<div key=${index} className="aspect-square rounded-xl border border-slate-700 bg-slate-800"></div>`)}</div>
     </section>
   `;
 }
@@ -1990,36 +1594,16 @@ function CreatorRankingSkeleton({ count = 8 }) {
   `;
 }
 
-function CreatorsRankingPage({
-  creators = [],
-  loading = false,
-  error = '',
-  sort = DEFAULT_CREATORS_SORT,
-  onSortChange,
-  onBack,
-  onRetry,
-  onOpenCreator,
-  onOpenPack,
-}) {
+function CreatorsRankingPage({ creators = [], loading = false, error = '', sort = DEFAULT_CREATORS_SORT, onSortChange, onBack, onRetry, onOpenCreator, onOpenPack }) {
   const selectedSort = normalizeCreatorsSort(sort);
 
   return html`
     <section className="space-y-4">
       <div className="flex flex-wrap items-center justify-between gap-2">
-        <button
-          type="button"
-          onClick=${onBack}
-          className="inline-flex h-10 items-center gap-2 rounded-xl border border-slate-700 px-3 text-sm text-slate-200 hover:bg-slate-800"
-        >
-          ← Voltar para catálogo
-        </button>
+        <button type="button" onClick=${onBack} className="inline-flex h-10 items-center gap-2 rounded-xl border border-slate-700 px-3 text-sm text-slate-200 hover:bg-slate-800">← Voltar para catálogo</button>
         <div className="flex items-center gap-2">
           <span className="text-xs text-slate-400">Ordenar</span>
-          <select
-            value=${selectedSort}
-            onChange=${(event) => onSortChange?.(event.target.value)}
-            className="h-9 rounded-xl border border-slate-700 bg-slate-900 px-3 text-xs text-slate-200 outline-none"
-          >
+          <select value=${selectedSort} onChange=${(event) => onSortChange?.(event.target.value)} className="h-9 rounded-xl border border-slate-700 bg-slate-900 px-3 text-xs text-slate-200 outline-none">
             <option value="popular">Popular</option>
             <option value="likes">Likes</option>
             <option value="downloads">Downloads</option>
@@ -2040,19 +1624,11 @@ function CreatorsRankingPage({
             <div className="rounded-2xl border border-rose-500/30 bg-rose-500/10 p-4">
               <p className="text-sm font-semibold text-rose-100">Falha ao carregar criadores</p>
               <p className="mt-1 text-xs text-rose-200/90">${error}</p>
-              <button
-                type="button"
-                onClick=${onRetry}
-                className="mt-3 inline-flex h-9 items-center rounded-xl border border-rose-400/40 px-3 text-xs text-rose-100 hover:bg-rose-500/10"
-              >
-                Tentar novamente
-              </button>
+              <button type="button" onClick=${onRetry} className="mt-3 inline-flex h-9 items-center rounded-xl border border-rose-400/40 px-3 text-xs text-rose-100 hover:bg-rose-500/10">Tentar novamente</button>
             </div>
           `
         : null}
-
       ${loading ? html`<${CreatorRankingSkeleton} />` : null}
-
       ${!loading && !error && !creators.length
         ? html`
             <div className="rounded-2xl border border-dashed border-slate-700 bg-slate-900/50 p-8 text-center">
@@ -2061,46 +1637,31 @@ function CreatorsRankingPage({
             </div>
           `
         : null}
-
       ${!loading && creators.length
         ? html`
             <div className="space-y-2">
-              ${creators.map((creator, index) => html`
-                <article key=${creator.key || creator.publisher || index} className="fade-card rounded-2xl border border-slate-800 bg-slate-900/65 p-3">
-                  <div className="flex items-center gap-3">
-                    <img src=${creator.avatarUrl || getAvatarUrl(creator.publisher)} alt="" className="h-12 w-12 rounded-full bg-slate-800 border border-slate-700" loading="lazy" />
-                    <div className="min-w-0 flex-1">
-                      <div className="flex items-center gap-2">
-                        <p className="truncate text-sm font-semibold text-slate-100">${creator.publisher || 'Criador'}</p>
-                        ${creator.verified ? html`<span className="rounded-full border border-cyan-400/30 bg-cyan-500/10 px-2 py-0.5 text-[10px] text-cyan-200">Verificado</span>` : null}
-                      </div>
-                      <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-slate-400">
-                        <span>📦 ${shortNum(creator.packCount || 0)} packs</span>
-                        <span>⬇ ${shortNum(creator.downloads || 0)} downloads</span>
-                        <span>❤️ ${shortNum(creator.likes || 0)} likes</span>
+              ${creators.map(
+                (creator, index) => html`
+                  <article key=${creator.key || creator.publisher || index} className="fade-card rounded-2xl border border-slate-800 bg-slate-900/65 p-3">
+                    <div className="flex items-center gap-3">
+                      <img src=${creator.avatarUrl || getAvatarUrl(creator.publisher)} alt="" className="h-12 w-12 rounded-full bg-slate-800 border border-slate-700" loading="lazy" />
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-2">
+                          <p className="truncate text-sm font-semibold text-slate-100">${creator.publisher || 'Criador'}</p>
+                          ${creator.verified ? html`<span className="rounded-full border border-cyan-400/30 bg-cyan-500/10 px-2 py-0.5 text-[10px] text-cyan-200">Verificado</span>` : null}
+                        </div>
+                        <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-slate-400">
+                          <span>📦 ${shortNum(creator.packCount || 0)} packs</span>
+                          <span>⬇ ${shortNum(creator.downloads || 0)} downloads</span>
+                          <span>❤️ ${shortNum(creator.likes || 0)} likes</span>
+                        </div>
+                        ${creator.topPack?.name ? html` <button type="button" onClick=${() => onOpenPack?.(creator.topPack?.pack_key)} className="mt-1 text-[11px] text-cyan-300 hover:text-cyan-200">Top pack: ${creator.topPack.name}</button> ` : null}
                       </div>
-                      ${creator.topPack?.name
-                        ? html`
-                            <button
-                              type="button"
-                              onClick=${() => onOpenPack?.(creator.topPack?.pack_key)}
-                              className="mt-1 text-[11px] text-cyan-300 hover:text-cyan-200"
-                            >
-                              Top pack: ${creator.topPack.name}
-                            </button>
-                          `
-                        : null}
+                      <button type="button" onClick=${() => onOpenCreator?.(creator)} className="shrink-0 h-9 rounded-xl border border-emerald-500/35 bg-emerald-500/10 px-3 text-xs font-semibold text-emerald-100 hover:bg-emerald-500/20">Ver perfil</button>
                     </div>
-                    <button
-                      type="button"
-                      onClick=${() => onOpenCreator?.(creator)}
-                      className="shrink-0 h-9 rounded-xl border border-emerald-500/35 bg-emerald-500/10 px-3 text-xs font-semibold text-emerald-100 hover:bg-emerald-500/20"
-                    >
-                      Ver perfil
-                    </button>
-                  </div>
-                </article>
-              `)}
+                  </article>
+                `,
+              )}
             </div>
           `
         : null}
@@ -2124,24 +1685,14 @@ function StickerPreview({ item, onClose, onPrev, onNext, hasNsfwAccess = true, o
       <button type="button" className="absolute inset-0" aria-label="Fechar preview" onClick=${onClose}></button>
 
       <div className="relative w-full max-w-xl rounded-2xl border border-slate-700 bg-slate-900 p-3">
-        <img
-          src=${lockedByNsfw ? NSFW_STICKER_PLACEHOLDER_URL : item.asset_url || DEFAULT_STICKER_PLACEHOLDER_URL}
-          alt=${item.accessibility_label || 'Sticker'}
-          className=${`w-full max-h-[70vh] object-contain rounded-xl bg-slate-950 ${lockedByNsfw ? 'blur-md' : ''}`}
-        />
+        <img src=${lockedByNsfw ? NSFW_STICKER_PLACEHOLDER_URL : item.asset_url || DEFAULT_STICKER_PLACEHOLDER_URL} alt=${item.accessibility_label || 'Sticker'} className=${`w-full max-h-[70vh] object-contain rounded-xl bg-slate-950 ${lockedByNsfw ? 'blur-md' : ''}`} />
         ${lockedByNsfw
           ? html`
               <div className="absolute inset-x-3 top-3 bottom-[64px] flex items-center justify-center rounded-xl bg-slate-950/40 p-4">
                 <div className="max-w-sm rounded-xl border border-amber-500/35 bg-slate-950/80 px-4 py-3 text-center">
                   <p className="text-sm font-semibold text-amber-100">Conteúdo sensível</p>
                   <p className="mt-1 text-xs text-slate-300">Faça login com Google para desbloquear este sticker.</p>
-                  <button
-                    type="button"
-                    onClick=${() => onRequireLogin?.()}
-                    className="mt-3 inline-flex h-9 items-center rounded-xl border border-amber-400/40 bg-amber-500/15 px-3 text-xs font-semibold text-amber-100"
-                  >
-                    Entrar e desbloquear
-                  </button>
+                  <button type="button" onClick=${() => onRequireLogin?.()} className="mt-3 inline-flex h-9 items-center rounded-xl border border-amber-400/40 bg-amber-500/15 px-3 text-xs font-semibold text-amber-100">Entrar e desbloquear</button>
                 </div>
               </div>
             `
@@ -2150,9 +1701,7 @@ function StickerPreview({ item, onClose, onPrev, onNext, hasNsfwAccess = true, o
         <div className="mt-3 flex items-center justify-between gap-2">
           <button type="button" onClick=${onPrev} className="rounded-lg border border-slate-600 px-3 py-2 text-sm text-slate-200 hover:bg-slate-800">← Anterior</button>
           <div className="flex items-center gap-2">
-            ${lockedByNsfw
-              ? null
-              : html`<button type="button" onClick=${handleCopy} className="rounded-lg border border-slate-600 px-3 py-2 text-sm text-slate-200 hover:bg-slate-800">Copiar link</button>`}
+            ${lockedByNsfw ? null : html`<button type="button" onClick=${handleCopy} className="rounded-lg border border-slate-600 px-3 py-2 text-sm text-slate-200 hover:bg-slate-800">Copiar link</button>`}
             <button type="button" onClick=${onClose} className="rounded-lg border border-slate-600 px-3 py-2 text-sm text-slate-200 hover:bg-slate-800">Fechar</button>
           </div>
           <button type="button" onClick=${onNext} className="rounded-lg border border-slate-600 px-3 py-2 text-sm text-slate-200 hover:bg-slate-800">Próximo →</button>
@@ -2162,29 +1711,11 @@ function StickerPreview({ item, onClose, onPrev, onNext, hasNsfwAccess = true, o
   `;
 }
 
-function PackPage({
-  pack,
-  relatedPacks,
-  onBack,
-  onOpenRelated,
-  onLike,
-  onDislike,
-  onTagClick,
-  reactionLoading = '',
-  reactionNotice = null,
-  hasNsfwAccess = true,
-  onRequireLogin,
-}) {
+function PackPage({ pack, relatedPacks, onBack, onOpenRelated, onLike, onDislike, onTagClick, reactionLoading = '', reactionNotice = null, hasNsfwAccess = true, onRequireLogin }) {
   if (!pack) {
     return html`
       <section className="space-y-4">
-        <button
-          type="button"
-          onClick=${onBack}
-          className="inline-flex items-center gap-2 rounded-xl border border-slate-700 px-3 py-2 text-sm text-slate-200 hover:bg-slate-800"
-        >
-          ← Voltar para catálogo
-        </button>
+        <button type="button" onClick=${onBack} className="inline-flex items-center gap-2 rounded-xl border border-slate-700 px-3 py-2 text-sm text-slate-200 hover:bg-slate-800">← Voltar para catálogo</button>
         <div className="rounded-2xl border border-dashed border-slate-700 bg-slate-900/50 p-8 text-center">
           <p className="text-sm font-semibold text-slate-100">Pack não encontrado</p>
           <p className="mt-1 text-xs text-slate-400">Tente voltar ao catálogo e abrir novamente.</p>
@@ -2196,11 +1727,8 @@ function PackPage({
   const items = Array.isArray(pack?.items) ? pack.items : [];
   const tags = Array.isArray(pack?.tags) ? pack.tags : [];
   const packLockedByNsfw = isPackMarkedNsfw(pack) && !hasNsfwAccess;
-  const cover = packLockedByNsfw
-    ? NSFW_STICKER_PLACEHOLDER_URL
-    : pack?.cover_url || items?.[0]?.asset_url || DEFAULT_STICKER_PLACEHOLDER_URL;
+  const cover = packLockedByNsfw ? NSFW_STICKER_PLACEHOLDER_URL : pack?.cover_url || items?.[0]?.asset_url || DEFAULT_STICKER_PLACEHOLDER_URL;
   const whatsappUrl = String(pack?.whatsapp?.url || '').trim();
-  const packApiPath = `/api/sticker-packs/${encodeURIComponent(String(pack?.pack_key || '').trim())}`;
   const engagement = getPackEngagement(pack);
   const hasReactionRequest = Boolean(reactionLoading);
   const [previewIndex, setPreviewIndex] = useState(-1);
@@ -2208,35 +1736,18 @@ function PackPage({
 
   return html`
     <section className="space-y-4 pb-4">
-      <button
-        type="button"
-        onClick=${onBack}
-        className="inline-flex h-10 items-center gap-2 rounded-xl border border-slate-700 bg-slate-900/70 px-3 text-sm text-slate-200 hover:bg-slate-800"
-      >
-        ← Voltar para catálogo
-      </button>
+      <button type="button" onClick=${onBack} className="inline-flex h-10 items-center gap-2 rounded-xl border border-slate-700 bg-slate-900/70 px-3 text-sm text-slate-200 hover:bg-slate-800">← Voltar para catálogo</button>
 
       <article className="overflow-hidden rounded-2xl border border-slate-700 bg-slate-900/80 shadow-[0_18px_40px_rgba(2,6,23,0.25)]">
         <div className="relative h-52 sm:h-64 md:h-72 bg-slate-900">
-          <img
-            src=${cover}
-            alt=${`Capa ${pack?.name || 'Pack'}`}
-            className=${`h-full w-full object-cover ${packLockedByNsfw ? 'blur-md scale-105' : ''}`}
-            loading="lazy"
-          />
+          <img src=${cover} alt=${`Capa ${pack?.name || 'Pack'}`} className=${`h-full w-full object-cover ${packLockedByNsfw ? 'blur-md scale-105' : ''}`} loading="lazy" />
           <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/55 to-transparent"></div>
-          ${packLockedByNsfw
-            ? html`<div className="absolute top-3 left-3 rounded-full border border-amber-300/40 bg-amber-500/25 px-2 py-1 text-[10px] font-semibold text-amber-100">🔞 Conteúdo sensível</div>`
-            : null}
+          ${packLockedByNsfw ? html`<div className="absolute top-3 left-3 rounded-full border border-amber-300/40 bg-amber-500/25 px-2 py-1 text-[10px] font-semibold text-amber-100">🔞 Conteúdo sensível</div>` : null}
           <div className="absolute inset-x-0 bottom-0 p-4 sm:p-5">
             <div className="max-w-4xl">
               <p className="text-[11px] uppercase tracking-wide text-slate-300/90">Pack público</p>
-              <h1 className="mt-1 text-xl sm:text-2xl font-extrabold tracking-tight text-white drop-shadow-[0_2px_12px_rgba(0,0,0,0.35)]">
-                ${pack?.name || 'Pack'}
-              </h1>
-              <p className="mt-1 text-xs sm:text-sm text-slate-200/90">
-                ${pack?.publisher || '-'} · ${pack?.created_at ? new Date(pack.created_at).toLocaleDateString('pt-BR') : 'sem data'}
-              </p>
+              <h1 className="mt-1 text-xl sm:text-2xl font-extrabold tracking-tight text-white drop-shadow-[0_2px_12px_rgba(0,0,0,0.35)]">${pack?.name || 'Pack'}</h1>
+              <p className="mt-1 text-xs sm:text-sm text-slate-200/90">${pack?.publisher || '-'} · ${pack?.created_at ? new Date(pack.created_at).toLocaleDateString('pt-BR') : 'sem data'}</p>
             </div>
           </div>
         </div>
@@ -2247,13 +1758,7 @@ function PackPage({
                 <div className="rounded-xl border border-amber-500/35 bg-amber-500/10 p-3">
                   <p className="text-sm font-semibold text-amber-100">Este pack foi marcado como sensível (+18).</p>
                   <p className="mt-1 text-xs text-slate-300">Faça login com Google para visualizar os stickers.</p>
-                  <button
-                    type="button"
-                    onClick=${() => onRequireLogin?.()}
-                    className="mt-3 inline-flex h-9 items-center rounded-xl border border-amber-400/35 bg-amber-500/15 px-3 text-xs font-semibold text-amber-100"
-                  >
-                    Entrar para desbloquear
-                  </button>
+                  <button type="button" onClick=${() => onRequireLogin?.()} className="mt-3 inline-flex h-9 items-center rounded-xl border border-amber-400/35 bg-amber-500/15 px-3 text-xs font-semibold text-amber-100">Entrar para desbloquear</button>
                 </div>
               `
             : null}
@@ -2264,88 +1769,20 @@ function PackPage({
             <span className="text-slate-200">👁 <strong className="font-semibold">${shortNum(engagement.openCount)}</strong></span>
           </div>
 
-          ${whatsappUrl && !packLockedByNsfw
-            ? html`
-                <a
-                  href=${whatsappUrl}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                  className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-[#25D366] px-5 text-sm font-bold text-[#042d17] shadow-[0_8px_24px_rgba(37,211,102,0.30)] transition hover:brightness-95"
-                >
-                  🟢 Adicionar no WhatsApp
-                </a>
-              `
-            : null}
+          ${whatsappUrl && !packLockedByNsfw ? html` <a href=${whatsappUrl} target="_blank" rel="noreferrer noopener" className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-[#25D366] px-5 text-sm font-bold text-[#042d17] shadow-[0_8px_24px_rgba(37,211,102,0.30)] transition hover:brightness-95"> 🟢 Adicionar no WhatsApp </a> ` : null}
 
           <div className="flex flex-wrap items-center gap-2">
-            <button
-              type="button"
-              onClick=${() => onLike?.(pack?.pack_key)}
-              disabled=${hasReactionRequest || packLockedByNsfw}
-              className="inline-flex h-9 items-center justify-center rounded-xl border border-emerald-500/35 bg-emerald-500/10 px-3 text-xs font-semibold text-emerald-100 transition hover:bg-emerald-500/20 disabled:cursor-not-allowed disabled:opacity-60"
-            >
-              ${reactionLoading === 'like' ? 'Enviando...' : 'Curtir'}
-            </button>
-            <button
-              type="button"
-              onClick=${() => onDislike?.(pack?.pack_key)}
-              disabled=${hasReactionRequest || packLockedByNsfw}
-              className="inline-flex h-9 items-center justify-center rounded-xl border border-rose-500/35 bg-rose-500/10 px-3 text-xs font-semibold text-rose-100 transition hover:bg-rose-500/20 disabled:cursor-not-allowed disabled:opacity-60"
-            >
-              ${reactionLoading === 'dislike' ? 'Enviando...' : 'Não curtir'}
-            </button>
-            ${reactionNotice?.message
-              ? html`
-                  <span className=${`text-xs ${reactionNotice.type === 'error' ? 'text-rose-300' : 'text-emerald-300'}`}>
-                    ${reactionNotice.message}
-                  </span>
-                `
-              : null}
+            <button type="button" onClick=${() => onLike?.(pack?.pack_key)} disabled=${hasReactionRequest || packLockedByNsfw} className="inline-flex h-9 items-center justify-center rounded-xl border border-emerald-500/35 bg-emerald-500/10 px-3 text-xs font-semibold text-emerald-100 transition hover:bg-emerald-500/20 disabled:cursor-not-allowed disabled:opacity-60">${reactionLoading === 'like' ? 'Enviando...' : 'Curtir'}</button>
+            <button type="button" onClick=${() => onDislike?.(pack?.pack_key)} disabled=${hasReactionRequest || packLockedByNsfw} className="inline-flex h-9 items-center justify-center rounded-xl border border-rose-500/35 bg-rose-500/10 px-3 text-xs font-semibold text-rose-100 transition hover:bg-rose-500/20 disabled:cursor-not-allowed disabled:opacity-60">${reactionLoading === 'dislike' ? 'Enviando...' : 'Não curtir'}</button>
+            ${reactionNotice?.message ? html` <span className=${`text-xs ${reactionNotice.type === 'error' ? 'text-rose-300' : 'text-emerald-300'}`}> ${reactionNotice.message} </span> ` : null}
           </div>
 
-          ${pack?.description
-            ? html`<p className="text-sm leading-6 text-slate-300">${pack.description}</p>`
-            : null}
-
-          <section className="rounded-xl border border-cyan-500/25 bg-cyan-500/5 p-3">
-            <p className="text-[11px] uppercase tracking-wide text-cyan-200">Use este pack no seu bot</p>
-            <p className="mt-1 text-sm text-slate-200">
-              Este pack faz parte do módulo de stickers da plataforma OmniZap. Você pode consumir por API e conectar ao seu fluxo de automação WhatsApp.
-            </p>
-            <pre className="mt-2 overflow-auto rounded-lg border border-slate-800 bg-slate-950/60 p-2 text-[11px] text-slate-300">
-GET ${packApiPath}
-POST ${packApiPath}/open
-POST ${packApiPath}/like
-            </pre>
-            <div className="mt-2 flex flex-wrap gap-2">
-              <a href="/api-docs/" className="inline-flex h-8 items-center rounded-lg border border-cyan-500/35 bg-cyan-500/10 px-3 text-[11px] font-semibold text-cyan-100 hover:bg-cyan-500/20">
-                Ver API e exemplos
-              </a>
-              <a href="/" className="inline-flex h-8 items-center rounded-lg border border-slate-700 bg-slate-900/70 px-3 text-[11px] text-slate-200 hover:bg-slate-800">
-                Plataforma OmniZap
-              </a>
-              <a href="/stickers/" className="inline-flex h-8 items-center rounded-lg border border-slate-700 bg-slate-900/70 px-3 text-[11px] text-slate-200 hover:bg-slate-800">
-                Voltar ao catálogo
-              </a>
-            </div>
-          </section>
-
+          ${pack?.description ? html`<p className="text-sm leading-6 text-slate-300">${pack.description}</p>` : null}
           ${tags.length
             ? html`
                 <div className="space-y-1">
                   <p className="text-[11px] uppercase tracking-wide text-slate-500">Tags</p>
-                  <div className="chips-scroll -mx-1 flex gap-2 overflow-x-auto px-1 pb-1">
-                    ${tags.slice(0, 12).map((tag) => html`
-                      <button
-                        key=${tag}
-                        type="button"
-                        onClick=${() => onTagClick?.(tag)}
-                        className="chip-item shrink-0 rounded-full border border-slate-700 bg-slate-900/90 px-2.5 py-1 text-[11px] text-slate-200 hover:border-cyan-400/30 hover:bg-cyan-500/10"
-                      >
-                        ${tagLabel(tag)}
-                      </button>
-                    `)}
-                  </div>
+                  <div className="chips-scroll -mx-1 flex gap-2 overflow-x-auto px-1 pb-1">${tags.slice(0, 12).map((tag) => html` <button key=${tag} type="button" onClick=${() => onTagClick?.(tag)} className="chip-item shrink-0 rounded-full border border-slate-700 bg-slate-900/90 px-2.5 py-1 text-[11px] text-slate-200 hover:border-cyan-400/30 hover:bg-cyan-500/10">${tagLabel(tag)}</button> `)}</div>
                 </div>
               `
             : null}
@@ -2363,57 +1800,35 @@ POST ${packApiPath}/like
               <div className="rounded-2xl border border-dashed border-amber-500/35 bg-slate-900/55 p-8 text-center">
                 <p className="text-sm font-semibold text-amber-100">Stickers bloqueados por conteúdo sensível.</p>
                 <p className="mt-1 text-xs text-slate-300">Entre com Google para liberar a visualização deste pack.</p>
-                <button
-                  type="button"
-                  onClick=${() => onRequireLogin?.()}
-                  className="mt-3 inline-flex h-9 items-center rounded-xl border border-amber-400/35 bg-amber-500/15 px-3 text-xs font-semibold text-amber-100"
-                >
-                  Entrar e desbloquear
-                </button>
+                <button type="button" onClick=${() => onRequireLogin?.()} className="mt-3 inline-flex h-9 items-center rounded-xl border border-amber-400/35 bg-amber-500/15 px-3 text-xs font-semibold text-amber-100">Entrar e desbloquear</button>
               </div>
             `
           : items.length
-          ? html`
-              <div className="pack-stickers-grid gap-2 sm:gap-3">
-                ${items.map(
-                  (item, index) => {
+            ? html`
+                <div className="pack-stickers-grid gap-2 sm:gap-3">
+                  ${items.map((item, index) => {
                     const stickerLockedByNsfw = isStickerMarkedNsfw(item) && !hasNsfwAccess;
                     return html`
-                      <button
-                        key=${item.sticker_id || item.position || index}
-                        type="button"
-                        onClick=${() => (stickerLockedByNsfw ? onRequireLogin?.() : setPreviewIndex(index))}
-                        className="pack-sticker-card group relative overflow-hidden rounded-xl border border-slate-800 bg-slate-900/80 text-left transition hover:-translate-y-0.5 hover:border-slate-600"
-                      >
-                        <img
-                          src=${stickerLockedByNsfw ? NSFW_STICKER_PLACEHOLDER_URL : item.asset_url || DEFAULT_STICKER_PLACEHOLDER_URL}
-                          alt=${item.accessibility_label || 'Sticker'}
-                          loading="lazy"
-                          className=${`w-full aspect-square object-contain bg-slate-950 transition-transform duration-300 ${
-                            stickerLockedByNsfw ? 'blur-md scale-105' : 'group-hover:scale-105'
-                          }`}
-                        />
+                      <button key=${item.sticker_id || item.position || index} type="button" onClick=${() => (stickerLockedByNsfw ? onRequireLogin?.() : setPreviewIndex(index))} className="pack-sticker-card group relative overflow-hidden rounded-xl border border-slate-800 bg-slate-900/80 text-left transition hover:-translate-y-0.5 hover:border-slate-600">
+                        <img src=${stickerLockedByNsfw ? NSFW_STICKER_PLACEHOLDER_URL : item.asset_url || DEFAULT_STICKER_PLACEHOLDER_URL} alt=${item.accessibility_label || 'Sticker'} loading="lazy" className=${`w-full aspect-square object-contain bg-slate-950 transition-transform duration-300 ${stickerLockedByNsfw ? 'blur-md scale-105' : 'group-hover:scale-105'}`} />
                         ${stickerLockedByNsfw
                           ? html`
                               <div className="absolute inset-0 flex items-center justify-center bg-slate-950/35 p-2">
-                                <span className="rounded-lg border border-amber-400/35 bg-amber-500/15 px-2 py-1 text-[10px] font-semibold text-amber-100">
-                                  Entrar para desbloquear
-                                </span>
+                                <span className="rounded-lg border border-amber-400/35 bg-amber-500/15 px-2 py-1 text-[10px] font-semibold text-amber-100"> Entrar para desbloquear </span>
                               </div>
                             `
                           : null}
                       </button>
                     `;
-                  },
-                )}
-              </div>
-            `
-          : html`
-              <div className="rounded-2xl border border-dashed border-slate-700 bg-slate-900/40 p-8 text-center">
-                <p className="text-sm font-semibold text-slate-100">Este pack ainda não tem stickers visíveis.</p>
-                <p className="mt-1 text-xs text-slate-400">Volte mais tarde ou abra outro pack do catálogo.</p>
-              </div>
-            `}
+                  })}
+                </div>
+              `
+            : html`
+                <div className="rounded-2xl border border-dashed border-slate-700 bg-slate-900/40 p-8 text-center">
+                  <p className="text-sm font-semibold text-slate-100">Este pack ainda não tem stickers visíveis.</p>
+                  <p className="mt-1 text-xs text-slate-400">Volte mais tarde ou abra outro pack do catálogo.</p>
+                </div>
+              `}
       </section>
 
       ${relatedPacks.length
@@ -2423,27 +1838,11 @@ POST ${packApiPath}/like
                 <h2 className="text-lg font-bold">Packs relacionados</h2>
                 <span className="text-xs text-slate-500">${relatedPacks.length} sugestões</span>
               </div>
-              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2.5 sm:gap-3">
-                ${relatedPacks.map(
-                  (entry, index) => html`<div key=${entry.pack_key || entry.id} className="fade-card"><${PackCard} pack=${entry} index=${index} onOpen=${onOpenRelated} hasNsfwAccess=${hasNsfwAccess} onRequireLogin=${onRequireLogin} /></div>`,
-                )}
-              </div>
+              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2.5 sm:gap-3">${relatedPacks.map((entry, index) => html`<div key=${entry.pack_key || entry.id} className="fade-card"><${PackCard} pack=${entry} index=${index} onOpen=${onOpenRelated} hasNsfwAccess=${hasNsfwAccess} onRequireLogin=${onRequireLogin} /></div>`)}</div>
             </section>
           `
         : null}
-
-      ${previewIndex >= 0
-        ? html`
-            <${StickerPreview}
-              item=${currentPreviewItem}
-              onClose=${() => setPreviewIndex(-1)}
-              onPrev=${() => setPreviewIndex((value) => (value <= 0 ? items.length - 1 : value - 1))}
-              onNext=${() => setPreviewIndex((value) => (value >= items.length - 1 ? 0 : value + 1))}
-              hasNsfwAccess=${hasNsfwAccess}
-              onRequireLogin=${onRequireLogin}
-            />
-          `
-        : null}
+      ${previewIndex >= 0 ? html` <${StickerPreview} item=${currentPreviewItem} onClose=${() => setPreviewIndex(-1)} onPrev=${() => setPreviewIndex((value) => (value <= 0 ? items.length - 1 : value - 1))} onNext=${() => setPreviewIndex((value) => (value >= items.length - 1 ? 0 : value + 1))} hasNsfwAccess=${hasNsfwAccess} onRequireLogin=${onRequireLogin} /> ` : null}
     </section>
   `;
 }
@@ -2571,11 +1970,7 @@ function StickersApp() {
 
     if (activeCategory && !sortedTags.some((entry) => entry.value === activeCategory)) {
       const meta = CATEGORY_META.get(activeCategory) || null;
-      sortedTags.unshift(
-        meta
-          ? { value: activeCategory, label: `${meta.icon} ${meta.label}`, icon: meta.icon }
-          : { value: activeCategory, label: `🏷️ ${activeCategory.replace(/-/g, ' ')}`, icon: '🏷️' },
-      );
+      sortedTags.unshift(meta ? { value: activeCategory, label: `${meta.icon} ${meta.label}`, icon: meta.icon } : { value: activeCategory, label: `🏷️ ${activeCategory.replace(/-/g, ' ')}`, icon: '🏷️' });
     }
 
     return [{ value: '', label: '🔥 Em alta', icon: '🔥' }, ...sortedTags];
@@ -2624,9 +2019,7 @@ function StickersApp() {
         icon: '🕘',
       }));
     }
-    return tagSuggestions
-      .filter((item) => normalizeToken(item.value).includes(q) || normalizeToken(item.label).includes(q))
-      .slice(0, 8);
+    return tagSuggestions.filter((item) => normalizeToken(item.value).includes(q) || normalizeToken(item.label).includes(q)).slice(0, 8);
   }, [query, tagSuggestions, recentSearches]);
 
   const sortedPacks = useMemo(() => {
@@ -2662,10 +2055,7 @@ function StickersApp() {
     return list;
   }, [packs, sortBy]);
 
-  const categoryActiveLabel =
-    catalogFilter === 'trending'
-      ? 'Em alta agora'
-      : dynamicCategoryOptions.find((entry) => entry.value === activeCategory)?.label?.replace(/^.+?\s/, '') || 'Todas';
+  const categoryActiveLabel = catalogFilter === 'trending' ? 'Em alta agora' : dynamicCategoryOptions.find((entry) => entry.value === activeCategory)?.label?.replace(/^.+?\s/, '') || 'Todas';
   const growingNowPacks = useMemo(() => {
     return [...packs]
       .map((pack) => {
@@ -2779,13 +2169,11 @@ function StickersApp() {
   const recentPublishedPacks = useMemo(
     () =>
       [...packs]
-        .sort(
-          (a, b) => {
-            const completenessDelta = comparePacksByCompleteness(a, b);
-            if (completenessDelta !== 0) return completenessDelta;
-            return new Date(b?.created_at || b?.updated_at || 0).getTime() - new Date(a?.created_at || a?.updated_at || 0).getTime();
-          },
-        )
+        .sort((a, b) => {
+          const completenessDelta = comparePacksByCompleteness(a, b);
+          if (completenessDelta !== 0) return completenessDelta;
+          return new Date(b?.created_at || b?.updated_at || 0).getTime() - new Date(a?.created_at || a?.updated_at || 0).getTime();
+        })
         .slice(0, 10),
     [packs],
   );
@@ -2893,8 +2281,7 @@ function StickersApp() {
   const hasGoogleLogin = Boolean(googleAuth.user?.sub);
   const hasNsfwAccess = hasGoogleLogin;
   const googleLoginEnabled = Boolean(googleAuthConfig.enabled && googleAuthConfig.clientId);
-  const shouldRenderGoogleButton =
-    isProfileView && googleLoginEnabled && !hasGoogleLogin && googleSessionChecked && !googleAuthBusy;
+  const shouldRenderGoogleButton = isProfileView && googleLoginEnabled && !hasGoogleLogin && googleSessionChecked && !googleAuthBusy;
 
   const fetchJson = async (url, options = undefined) => {
     const opts = options && typeof options === 'object' ? { ...options } : {};
@@ -3034,10 +2421,12 @@ function StickersApp() {
     });
   };
 
-  const buildManagePackApiPath = (packKey, suffix = '') =>
-    `${config.apiBasePath}/${encodeURIComponent(String(packKey || ''))}/manage${suffix}`;
+  const buildManagePackApiPath = (packKey, suffix = '') => `${config.apiBasePath}/${encodeURIComponent(String(packKey || ''))}/manage${suffix}`;
 
-  const getManagedMutationStatus = (payload) => String(payload?.data?.status || payload?.status || '').trim().toLowerCase();
+  const getManagedMutationStatus = (payload) =>
+    String(payload?.data?.status || payload?.status || '')
+      .trim()
+      .toLowerCase();
 
   const applyManagedPackToMyList = (managedData) => {
     const pack = managedData?.pack || null;
@@ -3130,8 +2519,7 @@ function StickersApp() {
       applyManagedPackToMyList(managed);
     }
 
-    const targetKey =
-      String(managed?.pack?.pack_key || envelope?.data?.pack_key || managePackTargetKey || '').trim() || '';
+    const targetKey = String(managed?.pack?.pack_key || envelope?.data?.pack_key || managePackTargetKey || '').trim() || '';
     if (targetKey && managePackOpen && String(managePackTargetKey || '') === targetKey) {
       try {
         await loadManagePackData(targetKey, { openModal: true, silent: true });
@@ -3192,9 +2580,7 @@ function StickersApp() {
   const applyPackEngagement = (packKey, engagement) => {
     if (!packKey || !engagement) return;
     setPacks((prev) => prev.map((entry) => (entry?.pack_key === packKey ? mergeEngagementInPack(entry, engagement) : entry)));
-    setRelatedPacks((prev) =>
-      prev.map((entry) => (entry?.pack_key === packKey ? mergeEngagementInPack(entry, engagement) : entry)),
-    );
+    setRelatedPacks((prev) => prev.map((entry) => (entry?.pack_key === packKey ? mergeEngagementInPack(entry, engagement) : entry)));
     setCurrentPack((prev) => (prev?.pack_key === packKey ? mergeEngagementInPack(prev, engagement) : prev));
   };
 
@@ -3252,7 +2638,7 @@ function StickersApp() {
 
       setPacks((prev) => (reset ? data : prev.concat(data)));
       setPackHasMore(hasMore);
-      setPackOffset(Number.isFinite(next) ? next : (reset ? data.length : nextOffset + data.length));
+      setPackOffset(Number.isFinite(next) ? next : reset ? data.length : nextOffset + data.length);
     } catch (err) {
       setError(err?.message || 'Falha ao carregar packs');
       if (reset) setPacks([]);
@@ -3363,9 +2749,7 @@ function StickersApp() {
     else if (Array.isArray(pack?.tags) && pack.tags[0]) relatedParams.set('categories', pack.tags[0]);
 
     const relatedPayload = await fetchJson(`${config.apiBasePath}?${relatedParams.toString()}`);
-    const relatedList = (Array.isArray(relatedPayload?.data) ? relatedPayload.data : [])
-      .filter((entry) => entry.pack_key && entry.pack_key !== pack?.pack_key)
-      .slice(0, 8);
+    const relatedList = (Array.isArray(relatedPayload?.data) ? relatedPayload.data : []).filter((entry) => entry.pack_key && entry.pack_key !== pack?.pack_key).slice(0, 8);
     setRelatedPacks(relatedList);
   };
 
@@ -3414,14 +2798,14 @@ function StickersApp() {
     }
   };
 
-  const buildCatalogWebUrl = ({
-    q = appliedQuery,
-    category = activeCategory,
-    sort = sortBy,
-    filter = catalogFilter,
-  } = {}) => {
+  const buildCatalogWebUrl = ({ q = appliedQuery, category = activeCategory, sort = sortBy, filter = catalogFilter } = {}) => {
     const params = new URLSearchParams();
-    const normalizedFilter = String(filter || '').trim().toLowerCase() === 'trending' ? 'trending' : '';
+    const normalizedFilter =
+      String(filter || '')
+        .trim()
+        .toLowerCase() === 'trending'
+        ? 'trending'
+        : '';
     const normalizedSort = normalizeCatalogSort(sort || DEFAULT_CATALOG_SORT);
     if (normalizedFilter === 'trending') {
       params.set('filter', 'trending');
@@ -3441,10 +2825,19 @@ function StickersApp() {
   };
 
   const applyCatalogViewState = ({ q = '', category = '', sort = DEFAULT_CATALOG_SORT, filter = '' } = {}) => {
-    const normalizedFilter = String(filter || '').trim().toLowerCase() === 'trending' ? 'trending' : '';
+    const normalizedFilter =
+      String(filter || '')
+        .trim()
+        .toLowerCase() === 'trending'
+        ? 'trending'
+        : '';
     const normalizedSort = normalizeCatalogSort(normalizedFilter ? 'trending' : sort || DEFAULT_CATALOG_SORT);
     const nextQ = normalizedFilter ? '' : String(q || '').trim();
-    const nextCategory = normalizedFilter ? '' : String(category || '').trim().toLowerCase();
+    const nextCategory = normalizedFilter
+      ? ''
+      : String(category || '')
+          .trim()
+          .toLowerCase();
 
     setCatalogFilter(normalizedFilter);
     setSortBy(normalizedSort);
@@ -3475,7 +2868,12 @@ function StickersApp() {
       q,
       category,
       sort: normalizeCatalogSort(sort || DEFAULT_CATALOG_SORT),
-      filter: String(filter || '').trim().toLowerCase() === 'trending' ? 'trending' : '',
+      filter:
+        String(filter || '')
+          .trim()
+          .toLowerCase() === 'trending'
+          ? 'trending'
+          : '',
     };
     if (push) window.history.pushState({}, '', buildCatalogWebUrl(nextState));
     applyCatalogViewState(nextState);
@@ -3518,7 +2916,9 @@ function StickersApp() {
   };
 
   const openCatalogTagFilter = (tag) => {
-    const nextTag = String(tag || '').trim().toLowerCase();
+    const nextTag = String(tag || '')
+      .trim()
+      .toLowerCase();
     if (!nextTag) return;
     openCatalogWithState({
       q: '',
@@ -3834,7 +3234,9 @@ function StickersApp() {
   };
 
   const handleCategoryChipPress = (value) => {
-    const nextValue = String(value || '').trim().toLowerCase();
+    const nextValue = String(value || '')
+      .trim()
+      .toLowerCase();
     const previousScrollY = window.scrollY || 0;
 
     if (!nextValue) {
@@ -3871,9 +3273,7 @@ function StickersApp() {
       like_count: safeNumber(sourcePack?.engagement?.like_count),
       dislike_count: safeNumber(sourcePack?.engagement?.dislike_count),
       comment_count: safeNumber(sourcePack?.engagement?.comment_count),
-      score:
-        safeNumber(sourcePack?.engagement?.score) ||
-        safeNumber(sourcePack?.engagement?.like_count) - safeNumber(sourcePack?.engagement?.dislike_count),
+      score: safeNumber(sourcePack?.engagement?.score) || safeNumber(sourcePack?.engagement?.like_count) - safeNumber(sourcePack?.engagement?.dislike_count),
       updated_at: sourcePack?.engagement?.updated_at || null,
     };
     const optimistic = {
@@ -3973,7 +3373,12 @@ function StickersApp() {
       const raw = localStorage.getItem(SEARCH_HISTORY_KEY);
       const parsed = JSON.parse(raw || '[]');
       if (Array.isArray(parsed)) {
-        setRecentSearches(parsed.map((entry) => String(entry || '').trim()).filter(Boolean).slice(0, 8));
+        setRecentSearches(
+          parsed
+            .map((entry) => String(entry || '').trim())
+            .filter(Boolean)
+            .slice(0, 8),
+        );
       }
     } catch {}
   }, []);
@@ -4262,9 +3667,7 @@ function StickersApp() {
         }`}
       </style>
 
-      <header className=${`sticky top-0 z-30 border-b border-slate-800 bg-slate-950/95 backdrop-blur transition-shadow ${
-        isScrolled ? 'shadow-[0_8px_24px_rgba(2,6,23,0.45)]' : ''
-      }`}>
+      <header className=${`sticky top-0 z-30 border-b border-slate-800 bg-slate-950/95 backdrop-blur transition-shadow ${isScrolled ? 'shadow-[0_8px_24px_rgba(2,6,23,0.45)]' : ''}`}>
         <div className="max-w-7xl mx-auto h-14 px-3 flex items-center gap-2.5">
           <a href="/" className="shrink-0 flex items-center gap-2">
             <img src="https://iili.io/FC3FABe.jpg" alt="OmniZap" className="w-7 h-7 rounded-full border border-slate-700" />
@@ -4274,10 +3677,10 @@ function StickersApp() {
           ${currentView === 'catalog'
             ? html`
                 <form onSubmit=${onSubmit} className="flex-1 relative">
-                    <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-slate-400">🔎</span>
-                    <input
-                      type="search"
-                      value=${query}
+                  <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-slate-400">🔎</span>
+                  <input
+                    type="search"
+                    value=${query}
                     onChange=${(e) => setQuery(e.target.value)}
                     onFocus=${() => setShowAutocomplete(true)}
                     onBlur=${() => setTimeout(() => setShowAutocomplete(false), 120)}
@@ -4286,20 +3689,15 @@ function StickersApp() {
                         setShowAutocomplete(false);
                       }
                     }}
-                      placeholder="Buscar packs..."
-                      className="w-full h-9 sm:h-10 rounded-2xl border border-slate-800 bg-slate-900 pl-[34px] sm:pl-9 pr-3 text-sm text-slate-100 placeholder:text-slate-500 outline-none transition focus:border-emerald-400/50 focus:ring-2 focus:ring-emerald-400/15"
-                    />
+                    placeholder="Buscar packs..."
+                    className="w-full h-9 sm:h-10 rounded-2xl border border-slate-800 bg-slate-900 pl-[34px] sm:pl-9 pr-3 text-sm text-slate-100 placeholder:text-slate-500 outline-none transition focus:border-emerald-400/50 focus:ring-2 focus:ring-emerald-400/15"
+                  />
                   ${showAutocomplete && filteredSuggestions.length
                     ? html`
                         <div className="absolute z-40 mt-2 w-full rounded-2xl border border-slate-800 bg-slate-900 shadow-xl overflow-hidden">
                           ${filteredSuggestions.map(
                             (item) => html`
-                              <button
-                                key=${item.value}
-                                type="button"
-                                onClick=${() => applySuggestion(item)}
-                                className="w-full px-3 py-2.5 text-left text-sm text-slate-200 hover:bg-slate-800 flex items-center justify-between gap-2 border-b border-slate-800 last:border-b-0"
-                              >
+                              <button key=${item.value} type="button" onClick=${() => applySuggestion(item)} className="w-full px-3 py-2.5 text-left text-sm text-slate-200 hover:bg-slate-800 flex items-center justify-between gap-2 border-b border-slate-800 last:border-b-0">
                                 <span className="inline-flex items-center gap-2">
                                   <span>${item.icon || '🏷'}</span>
                                   <span className="truncate">${item.label}</span>
@@ -4316,489 +3714,206 @@ function StickersApp() {
             : html`<div className="flex-1"></div>`}
 
           <div className="flex items-center gap-2">
-            <button
-              type="button"
-              className=${`text-xs rounded-lg border px-3 py-2 ${
-                isProfileView
-                  ? 'border-amber-400/40 bg-amber-400/10 text-amber-200'
-                  : 'border-amber-500/30 bg-amber-500/5 text-amber-200 hover:bg-amber-500/10'
-              }`}
-              onClick=${() => openProfile(true)}
-              title="Meu perfil e packs"
-            >
+            <button type="button" className=${`text-xs rounded-lg border px-3 py-2 ${isProfileView ? 'border-amber-400/40 bg-amber-400/10 text-amber-200' : 'border-amber-500/30 bg-amber-500/5 text-amber-200 hover:bg-amber-500/10'}`} onClick=${() => openProfile(true)} title="Meu perfil e packs">
               <span className="sm:hidden">👤</span>
               <span className="hidden sm:inline">Meus Packs</span>
             </button>
-            <a
-              className="text-xs rounded-lg border border-cyan-500/40 bg-cyan-500/10 px-3 py-2 text-cyan-200 hover:bg-cyan-500/20"
-              href="/stickers/create/"
-              title="Criar pack"
-            >
+            <a className="text-xs rounded-lg border border-cyan-500/40 bg-cyan-500/10 px-3 py-2 text-cyan-200 hover:bg-cyan-500/20" href="/stickers/create/" title="Criar pack">
               <span className="sm:hidden">➕</span>
               <span className="hidden sm:inline">✨ Criar pack agora</span>
             </a>
             ${supportInfo?.url
               ? html`
-                  <a
-                    className="text-xs rounded-lg border border-emerald-500/40 bg-emerald-500/10 px-3 py-2 text-emerald-200 hover:bg-emerald-500/20"
-                    href=${supportInfo.url}
-                    target="_blank"
-                    rel="noreferrer noopener"
-                    title="Suporte no WhatsApp"
-                  >
+                  <a className="text-xs rounded-lg border border-emerald-500/40 bg-emerald-500/10 px-3 py-2 text-emerald-200 hover:bg-emerald-500/20" href=${supportInfo.url} target="_blank" rel="noreferrer noopener" title="Suporte no WhatsApp">
                     <span className="sm:hidden">💬</span>
                     <span className="hidden sm:inline">Suporte</span>
                   </a>
                 `
               : null}
             <div className="hidden sm:flex items-center gap-2">
-            <a className="text-xs rounded-lg border border-slate-700 px-3 py-2 text-slate-300 hover:bg-slate-800" href="/api-docs/">API</a>
-            <a className="text-xs rounded-lg border border-slate-700 px-3 py-2 text-slate-300 hover:bg-slate-800" href="https://github.com/Kaikygr/omnizap-system" target="_blank" rel="noreferrer noopener">GitHub</a>
+              <a className="text-xs rounded-lg border border-slate-700 px-3 py-2 text-slate-300 hover:bg-slate-800" href="/api-docs/">API</a>
+              <a className="text-xs rounded-lg border border-slate-700 px-3 py-2 text-slate-300 hover:bg-slate-800" href="https://github.com/Kaikygr/omnizap-system" target="_blank" rel="noreferrer noopener">GitHub</a>
             </div>
           </div>
         </div>
       </header>
 
       <main className="max-w-7xl mx-auto px-3 py-2.5 sm:py-3 space-y-3 pb-[calc(1rem+env(safe-area-inset-bottom))]">
-        ${error
-          ? html`<div className="rounded-2xl border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-200">${error}</div>`
-          : null}
-
+        ${error ? html`<div className="rounded-2xl border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-200">${error}</div>` : null}
         ${isProfileView
-          ? html`
-              <${CreatorProfileDashboard}
-                googleAuthConfig=${googleAuthConfig}
-                googleAuth=${googleAuth}
-                googleAuthBusy=${googleAuthBusy}
-                googleAuthError=${googleAuthError}
-                googleSessionChecked=${googleSessionChecked}
-                myPacks=${myPacks}
-                myPacksLoading=${myPacksLoading}
-                myPacksError=${myPacksError}
-                myProfileStats=${myProfileStats}
-                onBack=${goCatalog}
-                onRefresh=${() => refreshMyProfile()}
-                onLogout=${handleGoogleLogout}
-                onOpenPublicPack=${openPack}
-                onOpenPackActions=${openPackActionsSheet}
-                onOpenManagePack=${(pack) => openManagePackByKey(pack?.pack_key || '')}
-                onRequestDeletePack=${requestDeletePack}
-                packActionBusyByKey=${packActionBusyByKey}
-              />
-            `
+          ? html` <${CreatorProfileDashboard} googleAuthConfig=${googleAuthConfig} googleAuth=${googleAuth} googleAuthBusy=${googleAuthBusy} googleAuthError=${googleAuthError} googleSessionChecked=${googleSessionChecked} myPacks=${myPacks} myPacksLoading=${myPacksLoading} myPacksError=${myPacksError} myProfileStats=${myProfileStats} onBack=${goCatalog} onRefresh=${() => refreshMyProfile()} onLogout=${handleGoogleLogout} onOpenPublicPack=${openPack} onOpenPackActions=${openPackActionsSheet} onOpenManagePack=${(pack) => openManagePackByKey(pack?.pack_key || '')} onRequestDeletePack=${requestDeletePack} packActionBusyByKey=${packActionBusyByKey} /> `
           : isCreatorsView
-            ? html`
-                <${CreatorsRankingPage}
-                  creators=${sortedCreatorRanking}
-                  loading=${creatorRankingLoading}
-                  error=${creatorRankingError}
-                  sort=${creatorSort}
-                  onSortChange=${handleCreatorsSortChange}
-                  onBack=${goCatalog}
-                  onRetry=${loadCreatorRanking}
-                  onOpenCreator=${openCreatorProfileFromRanking}
-                  onOpenPack=${openPack}
-                />
-              `
-          : currentPackKey
-            ? html`
-              ${packLoading
-                ? html`<${PackPageSkeleton} />`
-                : html`<${PackPage}
-                    pack=${currentPack}
-                    relatedPacks=${relatedPacks}
-                    onBack=${goCatalog}
-                    onOpenRelated=${openPack}
-                    onLike=${handleLike}
-                    onDislike=${handleDislike}
-                    onTagClick=${openCatalogTagFilter}
-                    reactionLoading=${reactionLoading}
-                    reactionNotice=${reactionNotice}
-                    hasNsfwAccess=${hasNsfwAccess}
-                    onRequireLogin=${requestNsfwUnlock}
-                  />`}
-            `
-            : html`
-              <section className="rounded-2xl border border-slate-800 bg-slate-900/80 p-3 sm:p-4">
-                <p className="text-[11px] uppercase tracking-wide text-slate-400">Módulo de stickers da plataforma OmniZap</p>
-                <h1 className="mt-1 text-lg sm:text-xl font-extrabold tracking-tight text-slate-100">
-                  Catálogo de stickers integrável via API
-                </h1>
-                <p className="mt-1 text-sm text-slate-300">
-                  Os stickers são uma feature do OmniZap para bots e automação WhatsApp. Explore packs públicos e integre no seu sistema com endpoints documentados.
-                </p>
-                <div className="mt-2 flex flex-wrap gap-2">
-                  <a href="/api-docs/" className="inline-flex h-8 items-center rounded-lg border border-cyan-500/35 bg-cyan-500/10 px-3 text-[11px] font-semibold text-cyan-100 hover:bg-cyan-500/20">
-                    Área de Desenvolvedor
-                  </a>
-                  <a href="/" className="inline-flex h-8 items-center rounded-lg border border-slate-700 bg-slate-900/70 px-3 text-[11px] text-slate-200 hover:bg-slate-800">
-                    Página principal OmniZap
-                  </a>
-                </div>
-              </section>
-
-              <div className="lg:grid lg:grid-cols-[220px_minmax(0,1fr)] lg:gap-4">
-                <aside className="hidden lg:block">
-                  <div className="sticky top-[72px] space-y-2.5 rounded-2xl border border-slate-800 bg-slate-900/80 p-2.5">
-                    <div className="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
-                      <div className="flex items-center justify-between gap-2">
-                        <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-300">Filtros</h3>
-                        <button
-                          type="button"
-                          onClick=${clearFilters}
-                          className="h-8 rounded-lg border border-slate-700 px-2 text-[11px] text-slate-200 hover:bg-slate-800"
-                        >
-                          Limpar
-                        </button>
-                      </div>
-                      <p className="mt-1 text-[11px] text-slate-500">${packs.length}${packHasMore ? '+' : ''} packs · ${orphans.length} sem pack</p>
-                    </div>
+            ? html` <${CreatorsRankingPage} creators=${sortedCreatorRanking} loading=${creatorRankingLoading} error=${creatorRankingError} sort=${creatorSort} onSortChange=${handleCreatorsSortChange} onBack=${goCatalog} onRetry=${loadCreatorRanking} onOpenCreator=${openCreatorProfileFromRanking} onOpenPack=${openPack} /> `
+            : currentPackKey
+              ? html` ${packLoading ? html`<${PackPageSkeleton} />` : html`<${PackPage} pack=${currentPack} relatedPacks=${relatedPacks} onBack=${goCatalog} onOpenRelated=${openPack} onLike=${handleLike} onDislike=${handleDislike} onTagClick=${openCatalogTagFilter} reactionLoading=${reactionLoading} reactionNotice=${reactionNotice} hasNsfwAccess=${hasNsfwAccess} onRequireLogin=${requestNsfwUnlock} />`} `
+              : html`
+                  <div className="lg:grid lg:grid-cols-[220px_minmax(0,1fr)] lg:gap-4">
+                    <aside className="hidden lg:block">
+                      <div className="sticky top-[72px] space-y-2.5 rounded-2xl border border-slate-800 bg-slate-900/80 p-2.5">
+                        <div className="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
+                          <div className="flex items-center justify-between gap-2">
+                            <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-300">Filtros</h3>
+                            <button type="button" onClick=${clearFilters} className="h-8 rounded-lg border border-slate-700 px-2 text-[11px] text-slate-200 hover:bg-slate-800">Limpar</button>
+                          </div>
+                          <p className="mt-1 text-[11px] text-slate-500">${packs.length}${packHasMore ? '+' : ''} packs · ${orphans.length} sem pack</p>
+                        </div>
 
-                    <details open className="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
-                      <summary className="cursor-pointer list-none text-xs font-semibold text-slate-200">
-                        Ordenar catálogo
-                      </summary>
-                      <div className="mt-2 space-y-1.5">
-                        ${CATALOG_SORT_OPTIONS.map((option) => html`
-                          <button
-                            key=${option.value}
-                            type="button"
-                            onClick=${() => handleCatalogSortSelection(option.value)}
-                            disabled=${sortPickerBusy}
-                            className=${`w-full h-9 rounded-xl border text-xs disabled:opacity-60 ${
-                              normalizeCatalogSort(sortBy) === option.value
-                                ? 'border-emerald-400 bg-emerald-400/10 text-emerald-200'
-                                : 'border-slate-700 text-slate-300 hover:bg-slate-800'
-                            }`}
-                          >
-                            ${option.icon} ${option.label}
-                          </button>
-                        `)}
-                      </div>
-                    </details>
-
-                    ${supportInfo?.url
-                      ? html`
-                          <a
-                            href=${supportInfo.url}
-                            target="_blank"
-                            rel="noreferrer noopener"
-                            className="w-full h-9 inline-flex items-center justify-center rounded-xl border border-emerald-500/35 bg-emerald-500/10 text-xs text-emerald-200 hover:bg-emerald-500/20"
-                          >
-                            💬 Suporte no WhatsApp
-                          </a>
-                        `
-                      : null}
-                  </div>
-                </aside>
-
-                <div className="space-y-3 min-w-0">
-                  <section className="space-y-2 min-w-0">
-                    <div className="relative min-w-0">
-                      <div className="absolute left-0 top-0 bottom-0 w-5 bg-gradient-to-r from-slate-950 to-transparent pointer-events-none z-10"></div>
-                      <div className="absolute right-0 top-0 bottom-0 w-5 bg-gradient-to-l from-slate-950 to-transparent pointer-events-none z-10"></div>
-                      <div className="chips-scroll flex max-w-full gap-1.5 overflow-x-auto pb-1 pr-1">
-                        ${dynamicCategoryOptions.map(
-                          (item) => html`
-                            <button
-                              key=${item.value || 'all'}
-                              type="button"
-                              onClick=${() => handleCategoryChipPress(item.value)}
-                              className=${`chip-item h-8 whitespace-nowrap rounded-full px-3 text-[11px] border transition ${
-                                activeCategory === item.value
-                                  ? 'bg-emerald-400 text-slate-900 border-emerald-300 font-semibold shadow-[0_0_0_2px_rgba(16,185,129,0.18)]'
-                                  : 'bg-slate-900 text-slate-300 border-slate-800 hover:bg-slate-800'
-                              }`}
-                            >
-                              ${item.label}
-                            </button>
-                          `,
-                        )}
+                        <details open className="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
+                          <summary className="cursor-pointer list-none text-xs font-semibold text-slate-200">Ordenar catálogo</summary>
+                          <div className="mt-2 space-y-1.5">${CATALOG_SORT_OPTIONS.map((option) => html` <button key=${option.value} type="button" onClick=${() => handleCatalogSortSelection(option.value)} disabled=${sortPickerBusy} className=${`w-full h-9 rounded-xl border text-xs disabled:opacity-60 ${normalizeCatalogSort(sortBy) === option.value ? 'border-emerald-400 bg-emerald-400/10 text-emerald-200' : 'border-slate-700 text-slate-300 hover:bg-slate-800'}`}>${option.icon} ${option.label}</button> `)}</div>
+                        </details>
+
+                        ${supportInfo?.url ? html` <a href=${supportInfo.url} target="_blank" rel="noreferrer noopener" className="w-full h-9 inline-flex items-center justify-center rounded-xl border border-emerald-500/35 bg-emerald-500/10 text-xs text-emerald-200 hover:bg-emerald-500/20"> 💬 Suporte no WhatsApp </a> ` : null}
                       </div>
-                    </div>
-                  </section>
+                    </aside>
+
+                    <div className="space-y-3 min-w-0">
+                      <section className="space-y-2 min-w-0">
+                        <div className="relative min-w-0">
+                          <div className="absolute left-0 top-0 bottom-0 w-5 bg-gradient-to-r from-slate-950 to-transparent pointer-events-none z-10"></div>
+                          <div className="absolute right-0 top-0 bottom-0 w-5 bg-gradient-to-l from-slate-950 to-transparent pointer-events-none z-10"></div>
+                          <div className="chips-scroll flex max-w-full gap-1.5 overflow-x-auto pb-1 pr-1">${dynamicCategoryOptions.map((item) => html` <button key=${item.value || 'all'} type="button" onClick=${() => handleCategoryChipPress(item.value)} className=${`chip-item h-8 whitespace-nowrap rounded-full px-3 text-[11px] border transition ${activeCategory === item.value ? 'bg-emerald-400 text-slate-900 border-emerald-300 font-semibold shadow-[0_0_0_2px_rgba(16,185,129,0.18)]' : 'bg-slate-900 text-slate-300 border-slate-800 hover:bg-slate-800'}`}>${item.label}</button> `)}</div>
+                        </div>
+                      </section>
 
-                  ${packs.length
-                    ? html`
-                        <section className="space-y-2">
-                          <div className="rounded-2xl border border-slate-800 bg-slate-900/70 p-2.5">
-                            <div className="flex flex-wrap items-center justify-between gap-2">
-                              <div>
-                                <p className="text-[11px] uppercase tracking-wide text-slate-400">Descobrir</p>
-                                <h3 className="text-sm font-semibold text-slate-100">Painel oficial do marketplace</h3>
-                                <p className="text-[11px] text-slate-500">
-                                  Métricas globais reais da plataforma (cache ~${globalMarketplaceStats?.cacheSeconds || 45}s, atualização automática).
-                                </p>
-                              </div>
-                              <div className="flex items-center gap-2">
-                                ${globalMarketplaceStatsLoading && !globalMarketplaceStats
-                                  ? html`<span className="inline-flex h-8 items-center rounded-lg border border-slate-700 bg-slate-900/60 px-3 text-[11px] text-slate-300">Carregando métricas...</span>`
-                                  : null}
-                                ${globalMarketplaceStatsError
-                                  ? html`<span className="inline-flex h-8 items-center rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 text-[11px] text-amber-100">Fallback local</span>`
-                                  : null}
-                                <a href="/stickers/create/" className="inline-flex h-8 items-center rounded-lg border border-emerald-500/35 bg-emerald-500/10 px-3 text-[11px] font-semibold text-emerald-200 hover:bg-emerald-500/20">
-                                  ✨ Criar pack agora
-                                </a>
+                      ${packs.length
+                        ? html`
+                            <section className="space-y-2">
+                              <div className="rounded-2xl border border-slate-800 bg-slate-900/70 p-2.5">
+                                <div className="flex flex-wrap items-center justify-between gap-2">
+                                  <div>
+                                    <p className="text-[11px] uppercase tracking-wide text-slate-400">Descobrir</p>
+                                    <h3 className="text-sm font-semibold text-slate-100">Painel oficial do marketplace</h3>
+                                    <p className="text-[11px] text-slate-500">Métricas globais reais da plataforma (cache ~${globalMarketplaceStats?.cacheSeconds || 45}s, atualização automática).</p>
+                                  </div>
+                                  <div className="flex items-center gap-2">
+                                    ${globalMarketplaceStatsLoading && !globalMarketplaceStats ? html`<span className="inline-flex h-8 items-center rounded-lg border border-slate-700 bg-slate-900/60 px-3 text-[11px] text-slate-300">Carregando métricas...</span>` : null} ${globalMarketplaceStatsError ? html`<span className="inline-flex h-8 items-center rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 text-[11px] text-amber-100">Fallback local</span>` : null}
+                                    <a href="/stickers/create/" className="inline-flex h-8 items-center rounded-lg border border-emerald-500/35 bg-emerald-500/10 px-3 text-[11px] font-semibold text-emerald-200 hover:bg-emerald-500/20"> ✨ Criar pack agora </a>
+                                  </div>
+                                </div>
+
+                                <div className="mt-2 flex flex-wrap gap-1.5">
+                                  ${[
+                                    { key: 'growing', label: '🔥 Crescendo' },
+                                    { key: 'top', label: '🏆 Top 10' },
+                                    { key: 'creators', label: '⭐ Criadores' },
+                                  ].map((tab) => html` <button key=${tab.key} type="button" onClick=${() => setDiscoverTab(tab.key)} className=${`h-8 rounded-full border px-2.5 text-[11px] touch-manipulation ${discoverTab === tab.key ? 'border-cyan-400/35 bg-cyan-500/10 text-cyan-100' : 'border-slate-700 bg-slate-950/40 text-slate-300 hover:bg-slate-800'}`}>${tab.label}</button> `)}
+                                </div>
+
+                                <div className="mt-2 hidden lg:block">
+                                  ${discoverTab === 'growing'
+                                    ? html` <div className="grid grid-cols-1 xl:grid-cols-2 gap-2">${growingNowPacks.slice(0, 6).map((entry) => html`<${DiscoverPackRowItem} key=${`grow-${entry.pack_key}`} pack=${entry} onOpen=${openPack} hasNsfwAccess=${hasNsfwAccess} onRequireLogin=${requestNsfwUnlock} />`)}</div> `
+                                    : discoverTab === 'top'
+                                      ? html` <div className="grid grid-cols-1 xl:grid-cols-2 gap-2">${topWeekPacks.slice(0, 8).map((entry, idx) => html`<${DiscoverPackRowItem} key=${`top-${entry.pack_key}`} pack=${entry} onOpen=${openPack} rank=${idx + 1} hasNsfwAccess=${hasNsfwAccess} onRequireLogin=${requestNsfwUnlock} />`)}</div> `
+                                      : html`
+                                          <div className="grid grid-cols-1 xl:grid-cols-2 gap-2">
+                                            ${featuredCreators.map(
+                                              (creator) => html`
+                                                <button key=${creator.publisher} onClick=${() => openCatalogWithState({ q: creator.publisher, category: '', sort: DEFAULT_CATALOG_SORT, filter: '', push: true })} className="w-full flex items-center gap-2 rounded-xl border border-slate-800 bg-slate-900/50 px-2 py-1.5 text-left hover:bg-slate-800/90">
+                                                  <img src=${getAvatarUrl(creator.publisher)} alt="" className="w-9 h-9 rounded-full bg-slate-800" />
+                                                  <span className="min-w-0 flex-1">
+                                                    <span className="block truncate text-xs font-medium text-slate-100">${creator.publisher}</span>
+                                                    <span className="block truncate text-[10px] text-slate-400">${creator.packCount} packs · ❤️ ${shortNum(creator.likes)} · ⬇ ${shortNum(creator.opens)}</span>
+                                                  </span>
+                                                  <span className="text-[10px] text-slate-500">filtrar</span>
+                                                </button>
+                                              `,
+                                            )}
+                                          </div>
+                                        `}
+                                </div>
+
+                                <div className="mt-2 lg:hidden">
+                                  ${discoverTab === 'growing'
+                                    ? html`
+                                        <section className="space-y-1.5">
+                                          <div className="flex items-center justify-between">
+                                            <h4 className="text-xs font-semibold text-slate-200">🔥 Em alta agora</h4>
+                                            <button type="button" onClick=${openTrendingCatalog} className="text-[10px] text-cyan-300">ver lista</button>
+                                          </div>
+                                          <div className="flex gap-2 overflow-x-auto pb-1">${growingNowPacks.slice(0, 8).map((entry) => html`<${DiscoverPackMiniCard} key=${`mobile-grow-${entry.pack_key}`} pack=${entry} onOpen=${openPack} hasNsfwAccess=${hasNsfwAccess} onRequireLogin=${requestNsfwUnlock} />`)}</div>
+                                        </section>
+                                      `
+                                    : discoverTab === 'top'
+                                      ? html`
+                                          <section className="space-y-1.5">
+                                            <div className="flex items-center justify-between">
+                                              <h4 className="text-xs font-semibold text-slate-200">🏆 Top 10 da semana</h4>
+                                              <button type="button" onClick=${() => openCatalogWithState({ q: '', category: '', sort: 'trending', filter: '', push: true })} className="text-[10px] text-cyan-300">ver lista</button>
+                                            </div>
+                                            <div className="flex gap-2 overflow-x-auto pb-1">${topWeekPacks.slice(0, 8).map((entry) => html`<${DiscoverPackMiniCard} key=${`mobile-top-${entry.pack_key}`} pack=${entry} onOpen=${openPack} hasNsfwAccess=${hasNsfwAccess} onRequireLogin=${requestNsfwUnlock} />`)}</div>
+                                          </section>
+                                        `
+                                      : html`
+                                          <section className="space-y-1.5">
+                                            <div className="flex items-center justify-between">
+                                              <h4 className="text-xs font-semibold text-slate-200">👑 Criadores populares</h4>
+                                              <button type="button" onClick=${() => openCreatorsRanking('popular', true)} className="text-[10px] text-cyan-300">ver lista</button>
+                                            </div>
+                                            <div className="flex gap-2 overflow-x-auto pb-1">${featuredCreators.map((creator) => html` <${DiscoverCreatorMiniCard} key=${`mobile-tab-creator-${creator.publisher}`} creator=${creator} onPick=${(publisher) => openCatalogWithState({ q: publisher, category: '', sort: DEFAULT_CATALOG_SORT, filter: '', push: true })} /> `)}</div>
+                                          </section>
+                                        `}
+                                </div>
                               </div>
-                            </div>
-
-                            <div className="mt-2 flex flex-wrap gap-1.5">
-                              ${[
-                                { key: 'growing', label: '🔥 Crescendo' },
-                                { key: 'top', label: '🏆 Top 10' },
-                                { key: 'creators', label: '⭐ Criadores' },
-                              ].map((tab) => html`
-                                <button
-                                  key=${tab.key}
-                                  type="button"
-                                  onClick=${() => setDiscoverTab(tab.key)}
-                                  className=${`h-8 rounded-full border px-2.5 text-[11px] touch-manipulation ${
-                                    discoverTab === tab.key
-                                      ? 'border-cyan-400/35 bg-cyan-500/10 text-cyan-100'
-                                      : 'border-slate-700 bg-slate-950/40 text-slate-300 hover:bg-slate-800'
-                                  }`}
-                                >
-                                  ${tab.label}
-                                </button>
-                              `)}
-                            </div>
-
-                            <div className="mt-2 hidden lg:block">
-                              ${discoverTab === 'growing'
-                                ? html`
-                                    <div className="grid grid-cols-1 xl:grid-cols-2 gap-2">
-                                      ${growingNowPacks.slice(0, 6).map(
-                                        (entry) => html`<${DiscoverPackRowItem}
-                                          key=${`grow-${entry.pack_key}`}
-                                          pack=${entry}
-                                          onOpen=${openPack}
-                                          hasNsfwAccess=${hasNsfwAccess}
-                                          onRequireLogin=${requestNsfwUnlock}
-                                        />`,
-                                      )}
-                                    </div>
-                                  `
-                                : discoverTab === 'top'
-                                  ? html`
-                                      <div className="grid grid-cols-1 xl:grid-cols-2 gap-2">
-                                        ${topWeekPacks.slice(0, 8).map(
-                                          (entry, idx) => html`<${DiscoverPackRowItem}
-                                            key=${`top-${entry.pack_key}`}
-                                            pack=${entry}
-                                            onOpen=${openPack}
-                                            rank=${idx + 1}
-                                            hasNsfwAccess=${hasNsfwAccess}
-                                            onRequireLogin=${requestNsfwUnlock}
-                                          />`,
-                                        )}
-                                      </div>
-                                    `
-                                  : html`
-                                      <div className="grid grid-cols-1 xl:grid-cols-2 gap-2">
-                                        ${featuredCreators.map((creator) => html`
-                                          <button
-                                            key=${creator.publisher}
-                                            onClick=${() => openCatalogWithState({ q: creator.publisher, category: '', sort: DEFAULT_CATALOG_SORT, filter: '', push: true })}
-                                            className="w-full flex items-center gap-2 rounded-xl border border-slate-800 bg-slate-900/50 px-2 py-1.5 text-left hover:bg-slate-800/90"
-                                          >
-                                            <img src=${getAvatarUrl(creator.publisher)} alt="" className="w-9 h-9 rounded-full bg-slate-800" />
-                                            <span className="min-w-0 flex-1">
-                                              <span className="block truncate text-xs font-medium text-slate-100">${creator.publisher}</span>
-                                              <span className="block truncate text-[10px] text-slate-400">${creator.packCount} packs · ❤️ ${shortNum(creator.likes)} · ⬇ ${shortNum(creator.opens)}</span>
-                                            </span>
-                                            <span className="text-[10px] text-slate-500">filtrar</span>
-                                          </button>
-                                        `)}
-                                      </div>
-                                    `}
-                            </div>
-
-                            <div className="mt-2 lg:hidden">
-                              ${discoverTab === 'growing'
-                                ? html`
-                                    <section className="space-y-1.5">
-                                      <div className="flex items-center justify-between">
-                                        <h4 className="text-xs font-semibold text-slate-200">🔥 Em alta agora</h4>
-                                        <button type="button" onClick=${openTrendingCatalog} className="text-[10px] text-cyan-300">ver lista</button>
-                                      </div>
-                                      <div className="flex gap-2 overflow-x-auto pb-1">
-                                        ${growingNowPacks.slice(0, 8).map(
-                                          (entry) => html`<${DiscoverPackMiniCard}
-                                            key=${`mobile-grow-${entry.pack_key}`}
-                                            pack=${entry}
-                                            onOpen=${openPack}
-                                            hasNsfwAccess=${hasNsfwAccess}
-                                            onRequireLogin=${requestNsfwUnlock}
-                                          />`,
-                                        )}
-                                      </div>
-                                    </section>
-                                  `
-                                : discoverTab === 'top'
-                                  ? html`
-                                      <section className="space-y-1.5">
-                                        <div className="flex items-center justify-between">
-                                          <h4 className="text-xs font-semibold text-slate-200">🏆 Top 10 da semana</h4>
-                                          <button
-                                            type="button"
-                                            onClick=${() => openCatalogWithState({ q: '', category: '', sort: 'trending', filter: '', push: true })}
-                                            className="text-[10px] text-cyan-300"
-                                          >
-                                            ver lista
-                                          </button>
-                                        </div>
-                                        <div className="flex gap-2 overflow-x-auto pb-1">
-                                          ${topWeekPacks.slice(0, 8).map(
-                                            (entry) => html`<${DiscoverPackMiniCard}
-                                              key=${`mobile-top-${entry.pack_key}`}
-                                              pack=${entry}
-                                              onOpen=${openPack}
-                                              hasNsfwAccess=${hasNsfwAccess}
-                                              onRequireLogin=${requestNsfwUnlock}
-                                            />`,
-                                          )}
-                                        </div>
-                                      </section>
-                                    `
-                                  : html`
-                                      <section className="space-y-1.5">
-                                        <div className="flex items-center justify-between">
-                                          <h4 className="text-xs font-semibold text-slate-200">👑 Criadores populares</h4>
-                                          <button type="button" onClick=${() => openCreatorsRanking('popular', true)} className="text-[10px] text-cyan-300">ver lista</button>
-                                        </div>
-                                        <div className="flex gap-2 overflow-x-auto pb-1">
-                                          ${featuredCreators.map((creator) => html`
-                                            <${DiscoverCreatorMiniCard}
-                                              key=${`mobile-tab-creator-${creator.publisher}`}
-                                              creator=${creator}
-                                              onPick=${(publisher) => openCatalogWithState({ q: publisher, category: '', sort: DEFAULT_CATALOG_SORT, filter: '', push: true })}
-                                            />
-                                          `)}
-                                        </div>
-                                      </section>
-                                    `}
-                            </div>
-                          </div>
 
-                          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-                            ${catalogMetricCards.map(
-                              (card) => html`<${CatalogMetricCard}
-                                key=${card.key}
-                                label=${card.label}
-                                value=${card.value}
-                                valueRaw=${card.valueRaw}
-                                numberFormat=${card.numberFormat}
-                                icon=${card.icon}
-                                hint=${card.hint}
-                                bars=${card.bars}
-                                tone=${card.tone}
-                              />`,
-                            )}
-                          </div>
+                              <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">${catalogMetricCards.map((card) => html`<${CatalogMetricCard} key=${card.key} label=${card.label} value=${card.value} valueRaw=${card.valueRaw} numberFormat=${card.numberFormat} icon=${card.icon} hint=${card.hint} bars=${card.bars} tone=${card.tone} />`)}</div>
 
-                          <div className="lg:hidden space-y-2">
-                            <section className="space-y-1.5">
-                              <div className="flex items-center justify-between">
-                                <h4 className="text-xs font-semibold text-slate-200">🆕 Recém publicados</h4>
-                                <button type="button" onClick=${openSortPicker} disabled=${sortPickerBusy} className="text-[10px] text-cyan-300 disabled:opacity-50">ordenar</button>
+                              <div className="lg:hidden space-y-2">
+                                <section className="space-y-1.5">
+                                  <div className="flex items-center justify-between">
+                                    <h4 className="text-xs font-semibold text-slate-200">🆕 Recém publicados</h4>
+                                    <button type="button" onClick=${openSortPicker} disabled=${sortPickerBusy} className="text-[10px] text-cyan-300 disabled:opacity-50">ordenar</button>
+                                  </div>
+                                  <div className="flex gap-2 overflow-x-auto pb-1">${recentPublishedPacks.slice(0, 8).map((entry) => html`<${DiscoverPackMiniCard} key=${`mobile-new-${entry.pack_key}`} pack=${entry} onOpen=${openPack} hasNsfwAccess=${hasNsfwAccess} onRequireLogin=${requestNsfwUnlock} />`)}</div>
+                                </section>
                               </div>
-                              <div className="flex gap-2 overflow-x-auto pb-1">
-                                ${recentPublishedPacks.slice(0, 8).map(
-                                  (entry) => html`<${DiscoverPackMiniCard}
-                                    key=${`mobile-new-${entry.pack_key}`}
-                                    pack=${entry}
-                                    onOpen=${openPack}
-                                    hasNsfwAccess=${hasNsfwAccess}
-                                    onRequireLogin=${requestNsfwUnlock}
-                                  />`,
-                                )}
+
+                              <div className="hidden lg:block rounded-2xl border border-emerald-500/20 bg-gradient-to-r from-emerald-500/10 to-cyan-500/5 p-2.5">
+                                <div className="flex items-center justify-between gap-3">
+                                  <div>
+                                    <p className="text-xs font-semibold text-emerald-100">Quer aparecer em destaque?</p>
+                                    <p className="text-[11px] text-slate-300">Publique seu pack e melhore capa/tags para ganhar mais cliques.</p>
+                                  </div>
+                                  <a href="/stickers/create/" className="inline-flex h-8 items-center rounded-lg border border-emerald-400/35 bg-emerald-500/10 px-3 text-[11px] font-semibold text-emerald-100 hover:bg-emerald-500/20"> Publicar pack </a>
+                                </div>
                               </div>
                             </section>
-                          </div>
-
-                          <div className="hidden lg:block rounded-2xl border border-emerald-500/20 bg-gradient-to-r from-emerald-500/10 to-cyan-500/5 p-2.5">
-                            <div className="flex items-center justify-between gap-3">
-                              <div>
-                                <p className="text-xs font-semibold text-emerald-100">Quer aparecer em destaque?</p>
-                                <p className="text-[11px] text-slate-300">Publique seu pack e melhore capa/tags para ganhar mais cliques.</p>
+                          `
+                        : null}
+                      ${packs.length
+                        ? html`
+                            <section className="space-y-3 min-w-0">
+                              <div className="flex items-end justify-between gap-3">
+                                <div>
+                                  <h2 className="text-lg sm:text-xl font-bold">Packs</h2>
+                                  <p className="text-xs text-slate-400">${sortedPacks.length}${packHasMore ? '+' : ''} resultados · ${categoryActiveLabel}</p>
+                                </div>
+                                <div className="hidden md:flex items-center gap-2">
+                                  <span className="text-xs text-slate-400">Ordenar por</span>
+                                  <button type="button" onClick=${openSortPicker} disabled=${sortPickerBusy} className="inline-flex h-8 items-center gap-2 rounded-xl border border-slate-700 bg-slate-900 px-3 text-xs text-slate-200 hover:bg-slate-800 disabled:opacity-60">
+                                    <span>${catalogSortLabel(sortBy)}</span>
+                                    <span className="text-[10px] text-slate-400">▾</span>
+                                  </button>
+                                </div>
                               </div>
-                              <a href="/stickers/create/" className="inline-flex h-8 items-center rounded-lg border border-emerald-400/35 bg-emerald-500/10 px-3 text-[11px] font-semibold text-emerald-100 hover:bg-emerald-500/20">
-                                Publicar pack
-                              </a>
-                            </div>
-                          </div>
-                        </section>
-                      `
-                    : null}
-
-                  ${packs.length
-                    ? html`
-                        <section className="space-y-3 min-w-0">
-                          <div className="flex items-end justify-between gap-3">
-                            <div>
-                              <h2 className="text-lg sm:text-xl font-bold">Packs</h2>
-                              <p className="text-xs text-slate-400">${sortedPacks.length}${packHasMore ? '+' : ''} resultados · ${categoryActiveLabel}</p>
-                            </div>
-                            <div className="hidden md:flex items-center gap-2">
-                              <span className="text-xs text-slate-400">Ordenar por</span>
-                              <button
-                                type="button"
-                                onClick=${openSortPicker}
-                                disabled=${sortPickerBusy}
-                                className="inline-flex h-8 items-center gap-2 rounded-xl border border-slate-700 bg-slate-900 px-3 text-xs text-slate-200 hover:bg-slate-800 disabled:opacity-60"
-                              >
-                                <span>${catalogSortLabel(sortBy)}</span>
-                                <span className="text-[10px] text-slate-400">▾</span>
-                              </button>
-                            </div>
-                          </div>
-                          <div className="grid min-w-0 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-2.5 sm:gap-3">
-                            ${sortedPacks.map(
-                              (pack, index) => html`<div key=${pack.pack_key || pack.id} className="fade-card"><${PackCard}
-                                pack=${pack}
-                                index=${index}
-                                onOpen=${openPack}
-                                hasNsfwAccess=${hasNsfwAccess}
-                                onRequireLogin=${requestNsfwUnlock}
-                              /></div>`,
-                            )}
-                          </div>
-                          <div ref=${setSentinel} className="h-8 flex items-center justify-center text-xs text-slate-500">
-                            ${packsLoadingMore ? 'Carregando mais packs...' : packHasMore ? 'Role para carregar mais' : 'Fim da lista'}
-                          </div>
-                        </section>
-                      `
-                    : null}
+                              <div className="grid min-w-0 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-2.5 sm:gap-3">${sortedPacks.map((pack, index) => html`<div key=${pack.pack_key || pack.id} className="fade-card"><${PackCard} pack=${pack} index=${index} onOpen=${openPack} hasNsfwAccess=${hasNsfwAccess} onRequireLogin=${requestNsfwUnlock} /></div>`)}</div>
+                              <div ref=${setSentinel} className="h-8 flex items-center justify-center text-xs text-slate-500">${packsLoadingMore ? 'Carregando mais packs...' : packHasMore ? 'Role para carregar mais' : 'Fim da lista'}</div>
+                            </section>
+                          `
+                        : null}
+                      ${packsLoading ? html`<${SkeletonGrid} count=${10} />` : null} ${!packsLoading && !hasAnyResult ? html`<${EmptyState} onClear=${clearFilters} />` : null}
 
-                  ${packsLoading ? html`<${SkeletonGrid} count=${10} />` : null}
-                  ${!packsLoading && !hasAnyResult ? html`<${EmptyState} onClear=${clearFilters} />` : null}
+                      <section className="space-y-2.5">
+                        <div className="flex items-center justify-between">
+                          <h2 className="text-base sm:text-lg font-bold">Stickers sem pack</h2>
+                          <span className="text-xs text-slate-400">${orphans.length} resultados</span>
+                        </div>
 
-                  <section className="space-y-2.5">
-                    <div className="flex items-center justify-between">
-                      <h2 className="text-base sm:text-lg font-bold">Stickers sem pack</h2>
-                      <span className="text-xs text-slate-400">${orphans.length} resultados</span>
+                        ${orphansLoading ? html`<div className="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-8 gap-2.5 sm:gap-3">${Array.from({ length: 16 }).map((_, i) => html`<div key=${i} className="rounded-2xl border border-slate-700 bg-slate-800 animate-pulse aspect-square"></div>`)}</div>` : html` <div className="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-8 gap-2.5 sm:gap-3">${orphans.map((item) => html`<div key=${item.id} className="fade-card"><${OrphanCard} sticker=${item} hasNsfwAccess=${hasNsfwAccess} onRequireLogin=${requestNsfwUnlock} /></div>`)}</div> `}
+                      </section>
                     </div>
-
-                    ${orphansLoading
-                      ? html`<div className="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-8 gap-2.5 sm:gap-3">${Array.from({ length: 16 }).map(
-                          (_, i) => html`<div key=${i} className="rounded-2xl border border-slate-700 bg-slate-800 animate-pulse aspect-square"></div>`,
-                        )}</div>`
-                      : html`
-                          <div className="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-8 gap-2.5 sm:gap-3">
-                            ${orphans.map(
-                              (item) => html`<div key=${item.id} className="fade-card"><${OrphanCard}
-                                sticker=${item}
-                                hasNsfwAccess=${hasNsfwAccess}
-                                onRequireLogin=${requestNsfwUnlock}
-                              /></div>`,
-                            )}
-                          </div>
-                        `}
-                  </section>
-                </div>
-              </div>
-            `}
+                  </div>
+                `}
       </main>
       <${UploadTaskWidget}
         task=${uploadTask}
@@ -4809,55 +3924,11 @@ function StickersApp() {
           setUploadTask(null);
         }}
       />
-      <${CatalogSortPicker}
-        open=${sortPickerOpen}
-        currentSort=${sortBy}
-        busy=${sortPickerBusy}
-        onClose=${closeSortPicker}
-        onSelect=${handleCatalogSortSelection}
-      />
-      <${PackActionsSheet}
-        open=${Boolean(packActionsSheetPack)}
-        pack=${packActionsSheetPack}
-        busyAction=${packActionsSheetPack ? packActionBusyByKey?.[packActionsSheetPack.pack_key] || '' : ''}
-        onClose=${closePackActionsSheet}
-        onAction=${handlePackActionsSheetAction}
-      />
-      <${PackManagerModal}
-        open=${managePackOpen}
-        data=${managePackData}
-        loading=${managePackLoading}
-        error=${managePackError}
-        busyAction=${managePackBusyAction}
-        onClose=${closeManagePackModal}
-        onRefresh=${refreshManagePackData}
-        onSaveMetadata=${handleManageSaveMetadata}
-        onAddSticker=${handleManageAddSticker}
-        onRemoveSticker=${handleManageRemoveSticker}
-        onReplaceSticker=${handleManageReplaceSticker}
-        onSetCover=${handleManageSetCover}
-        onReorder=${handleManageReorder}
-        onOpenAnalytics=${() => openAnalyticsModalForPack(managePackData?.pack || null)}
-      />
-      <${PackAnalyticsModal}
-        open=${analyticsModalOpen}
-        pack=${analyticsModalPack}
-        data=${analyticsModalData}
-        loading=${analyticsModalLoading}
-        error=${analyticsModalError}
-        onClose=${closeAnalyticsModal}
-      />
-      <${ConfirmDialog}
-        open=${Boolean(confirmDeletePack)}
-        title="Apagar pack"
-        message=${confirmDeletePack ? `Tem certeza que deseja apagar o pack "${confirmDeletePack.name || confirmDeletePack.pack_key}"? Essa ação remove o pack do seu painel.` : ''}
-        confirmLabel="Apagar pack"
-        cancelLabel="Cancelar"
-        danger=${true}
-        busy=${confirmDeleteBusy}
-        onCancel=${() => (confirmDeleteBusy ? null : setConfirmDeletePack(null))}
-        onConfirm=${handleDeletePackConfirmed}
-      />
+      <${CatalogSortPicker} open=${sortPickerOpen} currentSort=${sortBy} busy=${sortPickerBusy} onClose=${closeSortPicker} onSelect=${handleCatalogSortSelection} />
+      <${PackActionsSheet} open=${Boolean(packActionsSheetPack)} pack=${packActionsSheetPack} busyAction=${packActionsSheetPack ? packActionBusyByKey?.[packActionsSheetPack.pack_key] || '' : ''} onClose=${closePackActionsSheet} onAction=${handlePackActionsSheetAction} />
+      <${PackManagerModal} open=${managePackOpen} data=${managePackData} loading=${managePackLoading} error=${managePackError} busyAction=${managePackBusyAction} onClose=${closeManagePackModal} onRefresh=${refreshManagePackData} onSaveMetadata=${handleManageSaveMetadata} onAddSticker=${handleManageAddSticker} onRemoveSticker=${handleManageRemoveSticker} onReplaceSticker=${handleManageReplaceSticker} onSetCover=${handleManageSetCover} onReorder=${handleManageReorder} onOpenAnalytics=${() => openAnalyticsModalForPack(managePackData?.pack || null)} />
+      <${PackAnalyticsModal} open=${analyticsModalOpen} pack=${analyticsModalPack} data=${analyticsModalData} loading=${analyticsModalLoading} error=${analyticsModalError} onClose=${closeAnalyticsModal} />
+      <${ConfirmDialog} open=${Boolean(confirmDeletePack)} title="Apagar pack" message=${confirmDeletePack ? `Tem certeza que deseja apagar o pack "${confirmDeletePack.name || confirmDeletePack.pack_key}"? Essa ação remove o pack do seu painel.` : ''} confirmLabel="Apagar pack" cancelLabel="Cancelar" danger=${true} busy=${confirmDeleteBusy} onCancel=${() => (confirmDeleteBusy ? null : setConfirmDeletePack(null))} onConfirm=${handleDeletePackConfirmed} />
       <${ToastStack} toasts=${profileToasts} onDismiss=${dismissProfileToast} />
     </div>
   `;