Update docs.html

docs.html

@@ -12,179 +12,175 @@
       box-sizing: border-box;
     }
 
-    /* Enhanced theme system with comprehensive CSS variables */
+    html, body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: linear-gradient(135deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 50%, var(--theme-bg-tertiary) 100%);
+      color: var(--theme-text-primary);
+      padding: 0;
+      margin: 0;
+      min-height: 100vh;
+      position: relative;
+      overflow-x: hidden;
+      max-width: 100vw;
+    }
+
+    /* Added comprehensive theme system with green theme */
     :root {
       --theme-primary: #00bcd4;
       --theme-secondary: #87ceeb;
-      --theme-accent: #4caf50;
       --theme-bg-primary: #0a0a0a;
       --theme-bg-secondary: #1a1a2e;
       --theme-bg-tertiary: #16213e;
       --theme-text-primary: #e0e6ed;
       --theme-text-secondary: #87ceeb;
-      --theme-border: #00bcd4;
-      --theme-shadow: rgba(0, 188, 212, 0.3);
-      --theme-glow: rgba(0, 188, 212, 0.8);
+      --theme-accent: #00bcd4;
     }
 
     /* Red Theme */
     .theme-red {
       --theme-primary: #ff4444;
       --theme-secondary: #ff6b6b;
-      --theme-accent: #ff8a80;
       --theme-bg-primary: #1a0a0a;
       --theme-bg-secondary: #2e1a1a;
       --theme-bg-tertiary: #3e1616;
-      --theme-text-primary: #ffe0e0;
-      --theme-text-secondary: #ff6b6b;
-      --theme-border: #ff4444;
-      --theme-shadow: rgba(255, 68, 68, 0.3);
-      --theme-glow: rgba(255, 68, 68, 0.8);
+      --theme-text-primary: #f0f0f0;
+      --theme-accent: #ff4444;
     }
 
     /* Black Theme */
     .theme-black {
       --theme-primary: #ffffff;
       --theme-secondary: #cccccc;
-      --theme-accent: #888888;
       --theme-bg-primary: #000000;
       --theme-bg-secondary: #1a1a1a;
       --theme-bg-tertiary: #2a2a2a;
       --theme-text-primary: #ffffff;
-      --theme-text-secondary: #cccccc;
-      --theme-border: #ffffff;
-      --theme-shadow: rgba(255, 255, 255, 0.3);
-      --theme-glow: rgba(255, 255, 255, 0.8);
+      --theme-accent: #ffffff;
     }
 
     /* Yellow Theme */
     .theme-yellow {
       --theme-primary: #ffd700;
       --theme-secondary: #ffeb3b;
-      --theme-accent: #fff176;
       --theme-bg-primary: #1a1a0a;
       --theme-bg-secondary: #2e2e1a;
       --theme-bg-tertiary: #3e3e16;
-      --theme-text-primary: #fffde7;
-      --theme-text-secondary: #ffeb3b;
-      --theme-border: #ffd700;
-      --theme-shadow: rgba(255, 215, 0, 0.3);
-      --theme-glow: rgba(255, 215, 0, 0.8);
+      --theme-text-primary: #f0f0f0;
+      --theme-accent: #ffd700;
     }
 
     /* Green Theme */
     .theme-green {
       --theme-primary: #4caf50;
-      --theme-secondary: #66bb6a;
-      --theme-accent: #81c784;
+      --theme-secondary: #81c784;
       --theme-bg-primary: #0a1a0a;
       --theme-bg-secondary: #1a2e1a;
       --theme-bg-tertiary: #163e16;
-      --theme-text-primary: #e8f5e8;
-      --theme-text-secondary: #66bb6a;
-      --theme-border: #4caf50;
-      --theme-shadow: rgba(76, 175, 80, 0.3);
-      --theme-glow: rgba(76, 175, 80, 0.8);
+      --theme-text-primary: #f0f0f0;
+      --theme-accent: #4caf50;
     }
 
-    html, body {
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      background: linear-gradient(135deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 50%, var(--theme-bg-tertiary) 100%);
-      color: var(--theme-text-primary);
-      padding: 0;
-      margin: 0;
-      min-height: 100vh;
-      position: relative;
-      overflow-x: hidden;
-      max-width: 100vw;
-      transition: all 0.3s ease;
+    /* Loading animations */
+    .site-loading {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: var(--theme-bg-primary);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 9999;
+      flex-direction: column;
+    }
+
+    .site-loading-spinner {
+      width: 60px;
+      height: 60px;
+      border: 4px solid rgba(255, 255, 255, 0.1);
+      border-left: 4px solid var(--theme-primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: 20px;
+    }
+
+    .site-loading-text {
+      color: var(--theme-primary);
+      font-size: 1.2rem;
+      font-weight: 600;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
     }
 
-    /* Completely restructured header with better layout */
+    /* Restructured header with better design */
     .header {
       background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
-      border-bottom: 2px solid var(--theme-border);
-      padding: 15px 20px;
-      box-shadow: 0 4px 20px var(--theme-shadow);
+      border-bottom: 2px solid var(--theme-primary);
+      padding: 20px 15px;
+      text-align: center;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
       position: relative;
       z-index: 100;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+      backdrop-filter: blur(10px);
     }
 
-    .header-left {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
+    .header::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
+      animation: shimmer 3s infinite;
+    }
+
+    @keyframes shimmer {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(100%); }
     }
 
-    .header-right {
+    .header-content {
       display: flex;
+      flex-direction: column;
       align-items: center;
-      gap: 15px;
+      gap: 8px;
+      position: relative;
+      z-index: 2;
     }
 
     .page-title {
-      font-size: 1.8rem;
+      font-size: 2rem;
       font-weight: 900;
-      background: linear-gradient(45deg, var(--theme-primary), var(--theme-secondary), var(--theme-text-primary), var(--theme-primary));
+      background: linear-gradient(45deg, var(--theme-primary), var(--theme-secondary), #ffffff, var(--theme-primary));
       background-size: 300% 300%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
-      margin-bottom: 2px;
-      text-shadow: 0 0 30px var(--theme-glow);
+      text-shadow: 0 0 30px var(--theme-primary);
       animation: gradientShift 4s ease-in-out infinite;
-      letter-spacing: 1px;
-      position: relative;
-    }
-
-    .page-title::after {
-      content: '🔍';
-      position: absolute;
-      right: -25px;
-      top: -3px;
-      font-size: 1rem;
-      animation: spark 2s infinite;
+      letter-spacing: 2px;
     }
 
     .creator {
-      font-size: 0.75rem;
+      font-size: 0.8rem;
       background: linear-gradient(45deg, var(--theme-secondary), var(--theme-primary));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       font-weight: 600;
-      letter-spacing: 0.5px;
+      letter-spacing: 1px;
     }
 
-    .header-stats {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      font-size: 0.8rem;
+    .page-subtitle {
+      font-size: 0.9rem;
       color: var(--theme-text-secondary);
-    }
-
-    .online-indicator {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      margin-bottom: 3px;
-    }
-
-    .status-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--theme-accent);
-      animation: pulse 2s infinite;
-    }
-
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.5; }
+      font-style: italic;
+      opacity: 0.8;
     }
 
     @keyframes gradientShift {
@@ -192,470 +188,704 @@
       50% { background-position: 100% 50%; }
     }
 
-    @keyframes spark {
-      0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.7; }
-      50% { transform: rotate(15deg) scale(1.2); opacity: 1; }
+    /* Improved sidebar with theme selector */
+    .sidebar-toggle {
+      position: fixed;
+      top: 20px;
+      left: 20px;
+      background: var(--theme-primary);
+      color: var(--theme-bg-primary);
+      border: none;
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      font-size: 1.2rem;
+      cursor: pointer;
+      z-index: 1001;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+      transition: all 0.3s ease;
+    }
+
+    .sidebar-toggle:hover {
+      transform: scale(1.1);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
     }
 
-    /* Enhanced loading animations */
-    .loading-overlay {
+    .sidebar {
       position: fixed;
       top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(135deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 100%);
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      z-index: 9999;
-      transition: opacity 0.5s ease;
-    }
-
-    .loading-overlay.hidden {
-      opacity: 0;
-      pointer-events: none;
+      left: -350px;
+      width: 350px;
+      height: 100vh;
+      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
+      border-right: 2px solid var(--theme-primary);
+      padding: 80px 20px 20px;
+      transition: left 0.3s ease;
+      z-index: 1000;
+      overflow-y: auto;
+      backdrop-filter: blur(10px);
     }
 
-    .main-loading {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 20px;
+    .sidebar.open {
+      left: 0;
     }
 
-    .loading-spinner-large {
-      width: 60px;
-      height: 60px;
-      border: 4px solid rgba(255, 255, 255, 0.1);
-      border-left: 4px solid var(--theme-primary);
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
+    .theme-selector {
+      margin-bottom: 30px;
+      padding: 20px;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 12px;
+      border: 1px solid var(--theme-primary);
     }
 
-    .loading-text-large {
-      font-size: 1.2rem;
+    .theme-selector h3 {
       color: var(--theme-primary);
-      font-weight: bold;
-      text-align: center;
+      margin-bottom: 15px;
+      font-size: 1.1rem;
     }
 
-    .loading-subtext-large {
-      font-size: 0.9rem;
-      color: var(--theme-text-secondary);
-      text-align: center;
-      margin-top: 5px;
+    .theme-buttons {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
     }
 
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
+    .theme-btn {
+      padding: 10px 15px;
+      border: 2px solid transparent;
+      border-radius: 8px;
+      background: var(--theme-bg-tertiary);
+      color: var(--theme-text-primary);
+      cursor: pointer;
+      transition: all 0.3s ease;
+      font-weight: 600;
     }
 
-    .loading-enhanced {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 40px 20px;
-      gap: 15px;
+    .theme-btn:hover {
+      border-color: var(--theme-primary);
+      transform: translateY(-2px);
     }
 
-    .loading-pulse {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
+    .theme-btn.current {
+      border-color: var(--theme-primary);
       background: var(--theme-primary);
-      animation: loadingPulse 1.5s ease-in-out infinite;
+      color: var(--theme-bg-primary);
     }
 
-    .loading-text {
-      font-size: 1rem;
-      color: var(--theme-primary);
-      font-weight: bold;
-    }
+    .theme-btn.red { background: linear-gradient(45deg, #ff4444, #ff6b6b); }
+    .theme-btn.black { background: linear-gradient(45deg, #000000, #333333); }
+    .theme-btn.yellow { background: linear-gradient(45deg, #ffd700, #ffeb3b); }
+    .theme-btn.green { background: linear-gradient(45deg, #4caf50, #81c784); }
 
-    .loading-subtext {
-      font-size: 0.8rem;
-      color: var(--theme-text-secondary);
-      text-align: center;
+    .search-section {
+      padding: 20px;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 12px;
+      border: 1px solid var(--theme-primary);
     }
 
-    @keyframes loadingPulse {
-      0%, 100% { transform: scale(1); opacity: 1; }
-      50% { transform: scale(1.2); opacity: 0.7; }
+    .search-section h3 {
+      color: var(--theme-primary);
+      margin-bottom: 15px;
+      font-size: 1.1rem;
     }
 
-    .main-layout {
-      display: flex;
-      min-height: calc(100vh - 90px);
+    .search-input {
+      width: 100%;
+      padding: 12px;
+      border: 2px solid var(--theme-primary);
+      border-radius: 8px;
+      background: var(--theme-bg-tertiary);
+      color: var(--theme-text-primary);
+      font-size: 1rem;
+      margin-bottom: 15px;
     }
 
-    .sidebar {
-      width: 280px;
-      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
-      border-right: 2px solid var(--theme-border);
-      padding: 15px;
-      position: fixed;
-      left: 0;
-      top: 90px;
-      height: calc(100vh - 90px);
-      overflow-y: auto;
-      z-index: 50;
-      box-shadow: 4px 0 20px var(--theme-shadow);
-      transition: all 0.3s ease;
+    .search-input:focus {
+      outline: none;
+      box-shadow: 0 0 10px var(--theme-primary);
     }
 
-    .sidebar-toggle {
-      display: none;
-      position: fixed;
-      top: 100px;
-      left: 10px;
-      z-index: 60;
-      background: linear-gradient(45deg, var(--theme-primary), var(--theme-secondary));
-      border: none;
-      border-radius: 50%;
-      width: 40px;
-      height: 40px;
+    .search-btn {
+      width: 100%;
+      padding: 12px;
+      background: var(--theme-primary);
       color: var(--theme-bg-primary);
-      font-size: 1.2rem;
+      border: none;
+      border-radius: 8px;
+      font-size: 1rem;
+      font-weight: 600;
       cursor: pointer;
-      box-shadow: 0 4px 15px var(--theme-shadow);
       transition: all 0.3s ease;
-    }
-
-    .search-section {
-      background: linear-gradient(135deg, var(--theme-bg-tertiary) 0%, var(--theme-bg-secondary) 100%);
-      border: 1px solid var(--theme-border);
-      border-radius: 10px;
-      padding: 15px;
-      margin-bottom: 15px;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
       position: relative;
       overflow: hidden;
     }
 
-    .search-section::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 2px;
-      background: linear-gradient(90deg, transparent, var(--theme-border), transparent);
+    .search-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     }
 
-    .search-section h3 {
-      font-size: 1rem;
-      color: var(--theme-primary);
-      margin-bottom: 12px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
+    .search-btn:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
     }
 
-    .search-section h3::before {
-      content: '';
-      width: 3px;
-      height: 15px;
-      background: linear-gradient(45deg, var(--theme-primary), var(--theme-secondary));
-      border-radius: 2px;
+    .loading-dots {
+      display: flex;
+      justify-content: center;
+      gap: 4px;
     }
 
-    .search-input {
-      padding: 10px 12px;
-      font-size: 0.9rem;
-      width: 100%;
-      border: 2px solid var(--theme-border);
-      border-radius: 6px;
-      margin-bottom: 10px;
-      background: rgba(26, 26, 46, 0.8);
-      color: var(--theme-text-primary);
-      transition: all 0.3s ease;
+    .loading-dot {
+      width: 8px;
+      height: 8px;
+      background: currentColor;
+      border-radius: 50%;
+      animation: loadingDot 1.4s infinite ease-in-out both;
     }
 
-    .search-input:focus {
-      outline: none;
-      border-color: var(--theme-secondary);
-      box-shadow: 0 0 10px var(--theme-shadow);
+    .loading-dot:nth-child(1) { animation-delay: -0.32s; }
+    .loading-dot:nth-child(2) { animation-delay: -0.16s; }
+
+    @keyframes loadingDot {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1); }
     }
 
-    .search-input::placeholder {
-      color: var(--theme-text-secondary);
+    .search-result {
+      margin-top: 15px;
+      padding: 15px;
+      background: var(--theme-bg-tertiary);
+      border-radius: 8px;
+      border: 1px solid var(--theme-primary);
     }
 
-    .search-btn {
-      padding: 10px 16px;
-      font-size: 0.9rem;
-      background: linear-gradient(45deg, var(--theme-primary), var(--theme-secondary));
+    .view-profile-btn {
+      margin-top: 10px;
+      padding: 8px 16px;
+      background: var(--theme-primary);
       color: var(--theme-bg-primary);
       border: none;
       border-radius: 6px;
       cursor: pointer;
-      font-weight: bold;
-      transition: all 0.3s ease;
-      width: 100%;
+      font-weight: 600;
     }
 
-    .search-btn:hover {
-      transform: translateY(-1px);
-      box-shadow: 0 4px 15px var(--theme-shadow);
+    .main-layout {
+      display: flex;
+      min-height: calc(100vh - 120px);
     }
 
-    .search-btn:disabled {
-      background: #555;
-      cursor: not-allowed;
-      transform: none;
-      box-shadow: none;
+    .content {
+      flex: 1;
+      padding: 20px;
+      max-width: 100%;
     }
 
-    .search-result {
-      margin-top: 10px;
-      padding: 12px;
-      background: rgba(0, 188, 212, 0.1);
-      border: 1px solid var(--theme-border);
-      border-radius: 6px;
-      font-size: 0.85rem;
+    /* Improved user info section with rank display */
+    .top-section {
+      margin-bottom: 30px;
     }
 
-    .view-profile-btn {
-      padding: 6px 12px;
-      background: linear-gradient(45deg, var(--theme-accent), var(--theme-secondary));
-      color: var(--theme-text-primary);
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      margin-top: 8px;
-      font-weight: bold;
-      font-size: 0.8rem;
-      transition: all 0.3s ease;
+    .banner-profile-container {
+      position: relative;
       width: 100%;
+      height: 200px;
+      border-radius: 15px;
+      overflow: hidden;
+      margin-bottom: 20px;
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
     }
 
-    .view-profile-btn:hover {
-      transform: translateY(-1px);
-      box-shadow: 0 3px 10px var(--theme-shadow);
+    .banner-profile-container img#banner {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
     }
 
-    /* Enhanced theme selector with green theme */
-    .theme-selector {
-      background: linear-gradient(135deg, var(--theme-bg-tertiary) 0%, var(--theme-bg-secondary) 100%);
-      border: 1px solid var(--theme-border);
-      border-radius: 10px;
-      padding: 15px;
-      margin-bottom: 15px;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    .banner-overlay {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 50%;
+      background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
     }
 
-    .theme-selector h3 {
-      font-size: 1rem;
+    .profile-glow {
+      position: absolute;
+      bottom: -40px;
+      left: 20px;
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      background: radial-gradient(circle, var(--theme-primary), transparent);
+      filter: blur(20px);
+    }
+
+    .banner-profile-container img#pfp {
+      position: absolute;
+      bottom: -40px;
+      left: 20px;
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      border: 4px solid var(--theme-primary);
+      object-fit: cover;
+      background: var(--theme-bg-secondary);
+    }
+
+    .user-info-card {
+      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
+      border: 2px solid var(--theme-primary);
+      border-radius: 15px;
+      padding: 25px;
+      margin-top: 50px;
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+      position: relative;
+    }
+
+    .welcome-title {
+      font-size: 1.8rem;
+      font-weight: 700;
       color: var(--theme-primary);
-      margin-bottom: 12px;
+      margin-bottom: 15px;
+      text-align: center;
+    }
+
+    .chat-id {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid var(--theme-primary);
+      border-radius: 8px;
+      padding: 12px;
+      text-align: center;
+      font-weight: 600;
+      color: var(--theme-text-primary);
+      margin-bottom: 10px;
+    }
+
+    .user-rank {
+      background: linear-gradient(45deg, var(--theme-primary), var(--theme-secondary));
+      color: var(--theme-bg-primary);
+      padding: 8px 16px;
+      border-radius: 20px;
+      font-weight: 600;
+      text-align: center;
+      margin-top: 10px;
+      font-size: 0.9rem;
+    }
+
+    .loading {
       display: flex;
       align-items: center;
-      gap: 6px;
+      justify-content: center;
+      gap: 10px;
     }
 
-    .theme-buttons {
+    .loading-spinner {
+      width: 20px;
+      height: 20px;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      border-left: 2px solid var(--theme-primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    /* Improved stats grid with better theming */
+    .stats-grid {
       display: grid;
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 20px;
+      margin-bottom: 30px;
+    }
+
+    .stats-section {
+      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
+      border: 2px solid var(--theme-primary);
+      border-radius: 12px;
+      padding: 20px;
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+    }
+
+    .stats-section h3 {
+      font-size: 1.2rem;
+      color: var(--theme-primary);
+      margin-bottom: 15px;
+      display: flex;
+      align-items: center;
       gap: 8px;
     }
 
-    .theme-btn {
-      padding: 8px 12px;
-      border: 2px solid transparent;
-      border-radius: 6px;
-      cursor: pointer;
-      font-weight: bold;
-      font-size: 0.8rem;
-      transition: all 0.3s ease;
-      text-align: center;
-      position: relative;
-      overflow: hidden;
+    .basic-stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+      gap: 15px;
     }
 
-    .theme-btn.current {
-      border-color: var(--theme-primary);
-      box-shadow: 0 0 10px var(--theme-shadow);
+    .stat-item {
+      text-align: center;
+      padding: 15px;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 8px;
+      border: 1px solid var(--theme-primary);
     }
 
-    .theme-btn:hover {
-      transform: translateY(-1px);
+    .stat-item strong {
+      display: block;
+      color: var(--theme-secondary);
+      font-size: 0.9rem;
+      margin-bottom: 5px;
     }
 
-    .theme-btn.default {
-      background: linear-gradient(45deg, #00bcd4, #87ceeb);
-      color: #0a0a0a;
+    .stat-value {
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: var(--theme-primary);
     }
 
-    .theme-btn.red {
-      background: linear-gradient(45deg, #ff4444, #ff6b6b);
-      color: #ffe0e0;
+    /* Restructured and smaller NFT cards with loading animations */
+    .nfts-section {
+      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
+      border: 2px solid var(--theme-primary);
+      border-radius: 12px;
+      padding: 20px;
+      margin-bottom: 20px;
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+      position: relative;
     }
 
-    .theme-btn.black {
-      background: linear-gradient(45deg, #ffffff, #cccccc);
-      color: #000000;
+    .nfts-section h3 {
+      font-size: 1.2rem;
+      color: var(--theme-primary);
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
     }
 
-    .theme-btn.yellow {
-      background: linear-gradient(45deg, #ffd700, #ffeb3b);
-      color: #1a1a0a;
+    .nft-loading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 40px;
+      flex-direction: column;
+      gap: 15px;
     }
 
-    .theme-btn.green {
-      background: linear-gradient(45deg, #4caf50, #66bb6a);
-      color: #e8f5e8;
+    .nft-loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 3px solid rgba(255, 255, 255, 0.1);
+      border-left: 3px solid var(--theme-primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
     }
 
-    .content {
-      flex: 1;
-      margin-left: 280px;
-      padding: 15px;
-      overflow-x: auto;
+    .nft-loading-text {
+      color: var(--theme-primary);
+      font-weight: 600;
     }
 
-    .top-section {
+    .nfts-grid {
       display: grid;
-      grid-template-columns: 1fr 300px;
-      gap: 15px;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+      gap: 12px;
       margin-bottom: 15px;
-      min-height: 200px;
     }
 
-    .banner-profile-container {
-      position: relative;
-      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
-      border: 1px solid var(--theme-border);
+    .nft-card {
       border-radius: 10px;
+      padding: 10px;
+      transition: all 0.3s ease;
+      position: relative;
       overflow: hidden;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+      cursor: pointer;
+      min-height: 200px;
     }
 
-    .banner-profile-container::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 2px;
-      background: linear-gradient(90deg, transparent, var(--theme-border), transparent);
-      z-index: 2;
+    .nft-card:hover {
+      transform: translateY(-3px);
+    }
+
+    /* NFT Quality Classes with theme colors */
+    .nft-card.basic {
+      background: linear-gradient(135deg, var(--theme-bg-tertiary) 0%, var(--theme-bg-secondary) 100%);
+      border: 1px solid #666;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     }
 
-    #banner {
+    .nft-card.better {
+      background: linear-gradient(135deg, var(--theme-bg-tertiary) 0%, var(--theme-bg-secondary) 100%);
+      border: 1px solid #4caf50;
+      box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
+    }
+
+    .nft-card.even-better {
+      background: linear-gradient(135deg, var(--theme-bg-tertiary) 0%, var(--theme-bg-secondary) 100%);
+      border: 1px solid #2196f3;
+      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
+    }
+
+    .nft-card.way-better {
+      background: linear-gradient(135deg, var(--theme-bg-tertiary) 0%, var(--theme-bg-secondary) 100%);
+      border: 1px solid #9c27b0;
+      box-shadow: 0 5px 15px rgba(156, 39, 176, 0.4);
+    }
+
+    .nft-card.legendary {
+      background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
+      border: 2px solid #ffd700;
+      box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
+      color: #000;
+    }
+
+    .nft-image {
       width: 100%;
-      height: 140px;
+      height: 100px;
       object-fit: cover;
-      border-radius: 0;
+      border-radius: 6px;
+      margin-bottom: 8px;
     }
 
-    .banner-overlay {
-      position: absolute;
-      top: 2px;
-      left: 0;
-      right: 0;
-      height: 138px;
-      background: linear-gradient(
-        to bottom,
-        rgba(0, 0, 0, 0.1) 0%,
-        rgba(0, 0, 0, 0.3) 50%,
-        var(--theme-bg-secondary) 100%
-      );
-      z-index: 2;
+    .nft-info {
+      font-size: 0.8rem;
     }
 
-    #pfp {
-      position: absolute;
-      bottom: 10px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 105px;
-      height: 105px;
-      object-fit: cover;
-      border-radius: 5%;
-      border: 3px solid var(--theme-border);
-      box-shadow: 
-        0 0 20px var(--theme-glow), 
-        0 0 40px var(--theme-shadow);
-      background: var(--theme-bg-secondary);
-      z-index: 4;
+    .nft-name {
+      font-weight: 600;
+      margin-bottom: 4px;
+      font-size: 0.9rem;
+    }
+
+    .nft-details {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 4px;
+      font-size: 0.75rem;
+    }
+
+    .quality-badge {
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .quality-basic { background: #666; color: white; }
+    .quality-better { background: #4caf50; color: white; }
+    .quality-even-better { background: #2196f3; color: white; }
+    .quality-way-better { background: #9c27b0; color: white; }
+    .quality-legendary { background: #ffd700; color: black; }
+
+    /* Smaller collapsed floating widget */
+    .floating-user-widget {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      width: 280px;
+      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
+      border: 2px solid var(--theme-primary);
+      border-radius: 12px;
+      padding: 15px;
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
+      z-index: 1000;
+      transition: all 0.3s ease;
+      backdrop-filter: blur(10px);
+    }
+
+    .floating-user-widget.collapsed {
+      height: 50px;
+      overflow: hidden;
+      padding: 10px 15px;
+    }
+
+    .widget-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+      cursor: pointer;
+    }
+
+    .widget-title {
+      font-weight: bold;
+      color: var(--theme-primary);
+      font-size: 0.9rem;
+    }
+
+    .collapse-btn {
+      background: none;
+      border: none;
+      color: var(--theme-primary);
+      font-size: 1rem;
+      cursor: pointer;
+      transition: transform 0.3s ease;
+    }
+
+    .collapse-btn.collapsed {
+      transform: rotate(180deg);
+    }
+
+    .widget-content {
+      transition: opacity 0.3s ease;
+    }
+
+    .widget-user-info {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 10px;
+    }
+
+    .widget-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: 2px solid var(--theme-primary);
+    }
+
+    .widget-user-details h4 {
+      color: var(--theme-text-primary);
+      font-size: 0.9rem;
+      margin-bottom: 2px;
+    }
+
+    .widget-user-details p {
+      color: var(--theme-text-secondary);
+      font-size: 0.8rem;
+    }
+
+    .widget-rank {
+      text-align: center;
+      padding: 8px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 6px;
+      border: 1px solid var(--theme-primary);
+    }
+
+    .rank-title {
+      font-size: 0.8rem;
+      color: var(--theme-text-secondary);
+      margin-bottom: 4px;
+    }
+
+    .rank-value {
+      font-weight: 600;
+      color: var(--theme-primary);
+      font-size: 0.9rem;
+    }
+
+    /* Groups loading animation */
+    .groups-loading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 30px;
+      flex-direction: column;
+      gap: 15px;
+    }
+
+    .groups-loading-spinner {
+      width: 35px;
+      height: 35px;
+      border: 3px solid rgba(255, 255, 255, 0.1);
+      border-left: 3px solid var(--theme-primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    .groups-loading-text {
+      color: var(--theme-primary);
+      font-weight: 600;
     }
 
-    .profile-glow {
-      position: absolute;
-      bottom: -30px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 100px;
-      height: 100px;
-      border-radius: 50%;
-      background: radial-gradient(circle, var(--theme-shadow) 0%, var(--theme-shadow) 50%, transparent 70%);
-      z-index: 3;
-      animation: profileGlow 3s ease-in-out infinite alternate;
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      .sidebar {
+        width: 100%;
+        left: -100%;
+      }
+      
+      .floating-user-widget {
+        width: calc(100% - 40px);
+        right: 20px;
+        left: 20px;
+      }
+      
+      .nfts-grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 10px;
+      }
+      
+      .stats-grid {
+        grid-template-columns: 1fr;
+      }
+      
+      .page-title {
+        font-size: 1.5rem;
+      }
     }
 
-    @keyframes profileGlow {
-      0% { transform: translateX(-50%) scale(1); opacity: 0.6; }
-      100% { transform: translateX(-50%) scale(1.1); opacity: 0.9; }
+    /* Added theme variables and floating widget styles */
+    :root {
+      --theme-primary: #00bcd4;
+      --theme-secondary: #87ceeb;
+      --theme-bg-primary: #0a0a0a;
+      --theme-bg-secondary: #1a1a2e;
+      --theme-bg-tertiary: #16213e;
+      --theme-text-primary: #e0e6ed;
+      --theme-text-secondary: #87ceeb;
     }
 
-    .user-info-card {
-      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
-      border: 1px solid var(--theme-border);
-      border-radius: 10px;
-      padding: 15px;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-      position: relative;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
+    /* Red Theme */
+    .theme-red {
+      --theme-primary: #ff4444;
+      --theme-secondary: #ff6b6b;
+      --theme-bg-primary: #1a0a0a;
+      --theme-bg-secondary: #2e1a1a;
+      --theme-bg-tertiary: #3e1616;
     }
 
-    .user-info-card::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 2px;
-      background: linear-gradient(90deg, transparent, var(--theme-border), transparent);
+    /* Black Theme */
+    .theme-black {
+      --theme-primary: #ffffff;
+      --theme-secondary: #cccccc;
+      --theme-bg-primary: #000000;
+      --theme-bg-secondary: #1a1a1a;
+      --theme-bg-tertiary: #2a2a2a;
     }
 
-    .welcome-title {
-      font-size: 1.2rem;
-      font-weight: bold;
+    /* Yellow Theme */
+    .theme-yellow {
+      --theme-primary: #ffd700;
+      --theme-secondary: #ffeb3b;
+      --theme-bg-primary: #1a1a0a;
+      --theme-bg-secondary: #2e2e1a;
+      --theme-bg-tertiary: #3e3e16;
+      --theme-text-primary: #f0f0f0;
+    }
+
+    /* Update existing styles to use CSS variables */
+    html, body {
+      background: linear-gradient(135deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 50%, var(--theme-bg-tertiary) 100%);
       color: var(--theme-text-primary);
-      margin-bottom: 8px;
-      background: linear-gradient(45deg, var(--theme-text-primary), var(--theme-secondary));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      text-align: center;
     }
 
-    .chat-id {
-      font-size: 1rem;
-      font-weight: bold;
-      color: var(--theme-primary);
-      background: rgba(0, 188, 212, 0.1);
-      border: 1px solid var(--theme-border);
-      border-radius: 6px;
-      padding: 8px;
-      text-align: center;
-      margin-bottom: 10px;
+    .header {
+      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
+      border-bottom: 2px solid var(--theme-primary);
+      box-shadow: 0 4px 20px rgba(0, 188, 212, 0.3);
     }
 
-    /* Enhanced floating widget with smaller collapsed state */
+    /* Added floating user widget styles */
     .floating-user-widget {
       position: fixed;
       bottom: 20px;
       right: 20px;
-      width: 280px;
+      width: 300px;
       background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
-      border: 2px solid var(--theme-border);
+      border: 2px solid var(--theme-primary);
       border-radius: 12px;
       padding: 15px;
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
@@ -665,9 +895,7 @@
     }
 
     .floating-user-widget.collapsed {
-      height: 50px;
-      width: 200px;
-      padding: 10px 15px;
+      height: 60px;
       overflow: hidden;
     }
 
@@ -679,10 +907,6 @@
       cursor: pointer;
     }
 
-    .floating-user-widget.collapsed .widget-header {
-      margin-bottom: 0;
-    }
-
     .widget-title {
       font-weight: bold;
       color: var(--theme-primary);
@@ -708,8 +932,6 @@
 
     .floating-user-widget.collapsed .widget-content {
       opacity: 0;
-      height: 0;
-      overflow: hidden;
     }
 
     .widget-user-info {
@@ -723,7 +945,7 @@
       width: 40px;
       height: 40px;
       border-radius: 50%;
-      border: 2px solid var(--theme-border);
+      border: 2px solid var(--theme-primary);
     }
 
     .widget-user-details h4 {
@@ -740,7 +962,7 @@
 
     .widget-rank {
       background: rgba(0, 188, 212, 0.1);
-      border: 1px solid var(--theme-border);
+      border: 1px solid var(--theme-primary);
       border-radius: 6px;
       padding: 8px;
       text-align: center;
@@ -759,316 +981,181 @@
       color: var(--theme-primary);
     }
 
-    /* Restructured and enhanced NFT section */
-    .nfts-section {
-      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
-      border: 1px solid var(--theme-border);
-      border-radius: 15px;
-      padding: 20px;
-      margin-bottom: 20px;
-      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-      position: relative;
-      overflow: hidden;
-    }
-
-    .nfts-section::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 3px;
-      background: linear-gradient(90deg, transparent, var(--theme-primary), var(--theme-secondary), var(--theme-primary), transparent);
+    /* Added theme selector styles to sidebar */
+    .theme-selector {
+      background: linear-gradient(135deg, var(--theme-bg-tertiary) 0%, var(--theme-bg-secondary) 100%);
+      border: 1px solid var(--theme-primary);
+      border-radius: 10px;
+      padding: 15px;
+      margin-bottom: 15px;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     }
 
-    .nfts-section h3 {
-      font-size: 1.3rem;
+    .theme-selector h3 {
+      font-size: 1rem;
       color: var(--theme-primary);
-      margin-bottom: 15px;
+      margin-bottom: 12px;
       display: flex;
       align-items: center;
-      gap: 8px;
-      font-weight: bold;
+      gap: 6px;
     }
 
-    .nft-stats {
+    .theme-buttons {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 15px;
-      margin-bottom: 20px;
-      padding: 15px;
-      background: rgba(0, 0, 0, 0.2);
-      border-radius: 10px;
-      border: 1px solid var(--theme-border);
-    }
-
-    .nft-stat {
-      text-align: center;
-      padding: 10px;
-      background: linear-gradient(135deg, var(--theme-bg-tertiary), var(--theme-bg-secondary));
-      border-radius: 8px;
-      border: 1px solid var(--theme-border);
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
     }
 
-    .nft-stat-value {
-      display: block;
-      font-size: 1.5rem;
+    .theme-btn {
+      padding: 8px 12px;
+      border: 2px solid transparent;
+      border-radius: 6px;
+      cursor: pointer;
       font-weight: bold;
-      color: var(--theme-primary);
-      margin-bottom: 5px;
-    }
-
-    .nft-stat-label {
       font-size: 0.8rem;
-      color: var(--theme-text-secondary);
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    #nftsContainer {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-      gap: 20px;
-      margin-bottom: 20px;
-    }
-
-    .nft-card {
-      background: linear-gradient(135deg, var(--theme-bg-tertiary) 0%, var(--theme-bg-secondary) 100%);
-      border: 2px solid var(--theme-border);
-      border-radius: 12px;
-      padding: 15px;
       transition: all 0.3s ease;
-      position: relative;
-      overflow: hidden;
-      animation: nftFadeIn 0.6s ease-out;
-    }
-
-    .nft-card:hover {
-      transform: translateY(-5px) scale(1.02);
-      box-shadow: 0 10px 30px var(--theme-shadow);
-      border-color: var(--theme-secondary);
-    }
-
-    .nft-card::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 2px;
-      background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary), var(--theme-primary));
+      text-align: center;
     }
 
-    @keyframes nftFadeIn {
-      0% { opacity: 0; transform: translateY(20px); }
-      100% { opacity: 1; transform: translateY(0); }
+    .theme-btn.current {
+      border-color: var(--theme-primary);
+      box-shadow: 0 0 10px rgba(0, 188, 212, 0.4);
     }
 
-    .show-all-btn {
-      width: 100%;
-      padding: 12px 20px;
-      background: linear-gradient(45deg, var(--theme-primary), var(--theme-secondary));
-      color: var(--theme-bg-primary);
-      border: none;
-      border-radius: 8px;
-      font-size: 1rem;
-      font-weight: bold;
-      cursor: pointer;
-      transition: all 0.3s ease;
+    .theme-btn:hover {
+      transform: translateY(-1px);
     }
 
-    .show-all-btn:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 6px 20px var(--theme-shadow);
+    .theme-btn.default {
+      background: linear-gradient(45deg, #00bcd4, #87ceeb);
+      color: #0a0a0a;
     }
 
-    /* Enhanced stats sections with theme colors */
-    .stats-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      gap: 20px;
-      margin-bottom: 20px;
+    .theme-btn.red {
+      background: linear-gradient(45deg, #ff4444, #ff6b6b);
+      color: white;
     }
 
-    .stats-section {
-      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
-      border: 1px solid var(--theme-border);
-      border-radius: 12px;
-      padding: 20px;
-      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
-      position: relative;
-      overflow: hidden;
+    .theme-btn.black {
+      background: linear-gradient(45deg, #333, #666);
+      color: white;
     }
 
-    .stats-section::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 2px;
-      background: linear-gradient(90deg, transparent, var(--theme-border), transparent);
+    .theme-btn.yellow {
+      background: linear-gradient(45deg, #ffd700, #ffeb3b);
+      color: #000;
     }
 
-    .stats-section h3 {
-      font-size: 1.1rem;
-      color: var(--theme-primary);
-      margin-bottom: 15px;
+    /* Enhanced loading animations */
+    .loading-enhanced {
       display: flex;
+      flex-direction: column;
       align-items: center;
-      gap: 8px;
-      font-weight: bold;
+      justify-content: center;
+      gap: 15px;
+      padding: 40px 20px;
+      color: var(--theme-text-secondary);
     }
 
-    .basic-stats-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-      gap: 12px;
+    .loading-pulse {
+      width: 60px;
+      height: 60px;
+      border: 3px solid var(--theme-primary);
+      border-radius: 50%;
+      position: relative;
+      animation: pulse 2s infinite;
     }
 
-    .stat-item {
-      background: rgba(0, 0, 0, 0.2);
-      border: 1px solid var(--theme-border);
-      border-radius: 8px;
-      padding: 12px;
-      text-align: center;
-      transition: all 0.3s ease;
+    .loading-pulse::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 30px;
+      height: 30px;
+      background: var(--theme-primary);
+      border-radius: 50%;
+      animation: innerPulse 2s infinite;
     }
 
-    .stat-item:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 15px var(--theme-shadow);
+    @keyframes pulse {
+      0%, 100% { transform: scale(1); opacity: 1; }
+      50% { transform: scale(1.1); opacity: 0.7; }
     }
 
-    .stat-item strong {
-      display: block;
-      font-size: 0.8rem;
-      color: var(--theme-text-secondary);
-      margin-bottom: 5px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
+    @keyframes innerPulse {
+      0%, 100% { transform: translate(-50%, -50%) scale(1); }
+      50% { transform: translate(-50%, -50%) scale(0.8); }
     }
-
-    .stat-value {
-      font-size: 1.2rem;
+
+    .loading-text {
+      font-size: 1.1rem;
       font-weight: bold;
-      color: var(--theme-primary);
+      text-align: center;
     }
 
-    /* Enhanced groups section */
-    .groups-container {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-      gap: 15px;
+    .loading-subtext {
+      font-size: 0.9rem;
+      opacity: 0.8;
+      text-align: center;
     }
 
-    .group-card {
-      background: linear-gradient(135deg, var(--theme-bg-tertiary) 0%, var(--theme-bg-secondary) 100%);
-      border: 1px solid var(--theme-border);
-      border-radius: 10px;
-      padding: 15px;
-      transition: all 0.3s ease;
+    /* Enhanced NFT card styles */
+    .nft-card {
       position: relative;
       overflow: hidden;
     }
 
-    .group-card:hover {
-      transform: translateY(-3px);
-      box-shadow: 0 6px 20px var(--theme-shadow);
-      border-color: var(--theme-secondary);
-    }
-
-    .group-card::before {
+    .nft-card::before {
       content: '';
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 2px;
-      background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary));
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      background: linear-gradient(45deg, transparent, var(--theme-primary), transparent);
+      border-radius: 12px;
+      z-index: -1;
+      opacity: 0;
+      transition: opacity 0.3s ease;
     }
 
-    /* Mobile responsive */
-    @media (max-width: 768px) {
-      .header {
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-        padding: 10px;
-      }
-
-      .header-right {
-        margin-top: 10px;
-      }
-
-      .sidebar {
-        transform: translateX(-100%);
-        transition: transform 0.3s ease;
-      }
-
-      .sidebar.open {
-        transform: translateX(0);
-      }
-
-      .sidebar-toggle {
-        display: block;
-      }
-
-      .content {
-        margin-left: 0;
-        padding: 10px;
-      }
+    .nft-card:hover::before {
+      opacity: 0.3;
+    }
 
-      .top-section {
-        grid-template-columns: 1fr;
-        gap: 10px;
-      }
+    .nft-card.legendary::before {
+      background: linear-gradient(45deg, #ffd700, #ffeb3b, #ff6f00, #ffd700);
+      background-size: 400% 400%;
+      animation: legendaryGlow 2s ease-in-out infinite;
+      opacity: 0.6;
+    }
 
+    /* Mobile responsive updates for floating widget */
+    @media (max-width: 768px) {
       .floating-user-widget {
         width: calc(100vw - 40px);
         right: 20px;
         left: 20px;
         bottom: 10px;
       }
-
-      .floating-user-widget.collapsed {
-        width: calc(100vw - 40px);
-      }
-
-      .stats-grid {
-        grid-template-columns: 1fr;
-      }
-
-      #nftsContainer {
-        grid-template-columns: 1fr;
-      }
     }
   </style>
 </head>
 <body>
-  <!-- Added main loading overlay -->
-  <div class="loading-overlay" id="mainLoadingOverlay">
-    <div class="main-loading">
-      <div class="loading-spinner-large"></div>
-      <div class="loading-text-large">Loading Finral Search</div>
-      <div class="loading-subtext-large">Initializing user interface...</div>
-    </div>
+  <!-- Added site loading animation -->
+  <div class="site-loading" id="siteLoading">
+    <div class="site-loading-spinner"></div>
+    <div class="site-loading-text">Loading Finral...</div>
   </div>
 
-  <!-- Restructured header with better layout -->
+  <!-- Restructured header -->
   <div class="header">
-    <div class="header-left">
+    <div class="header-content">
       <div class="page-title">Finral Search</div>
       <div class="creator">✨ Crafted with Excellence by Saul ✨</div>
-    </div>
-    <div class="header-right">
-      <div class="header-stats">
-        <div class="online-indicator">
-          <div class="status-dot"></div>
-          <span>System Online</span>
-        </div>
-        <div>Advanced Search Engine</div>
-      </div>
+      <div class="page-subtitle">"Find Any Telegram User"</div>
     </div>
   </div>
 
@@ -1076,7 +1163,7 @@
 
   <div class="main-layout">
     <div class="sidebar" id="sidebar">
-      <!-- Enhanced theme selector with green theme -->
+      <!-- Added green theme to selector -->
       <div class="theme-selector">
         <h3>🎨 Theme</h3>
         <div class="theme-buttons">
@@ -1114,17 +1201,16 @@
 
         <div class="user-info-card">
           <div class="welcome-title" id="welcomeTitle">Welcome to Finral</div>
-          <div id="userName" class="chat-id" style="display:none; margin-bottom: 8px; background: rgba(135, 206, 235, 0.1); border-color: rgba(135, 206, 235, 0.3);"></div>
+          <div id="userName" class="chat-id" style="display:none; margin-bottom: 8px;"></div>
           <div id="chatId" class="chat-id">
             <div class="loading">
               <div class="loading-spinner"></div>
               Loading...
             </div>
           </div>
-          <!-- Added rank display in user info section -->
-          <div id="userRank" class="chat-id" style="display:none; background: rgba(76, 175, 80, 0.1); border-color: rgba(76, 175, 80, 0.3); font-size: 0.9rem;">
-            <div class="rank-title">Global Rank</div>
-            <div class="rank-value">🥉 Bronze</div>
+          <!-- Added rank display in user info -->
+          <div id="userRank" class="user-rank" style="display:none;">
+            🥉 Loading Rank...
           </div>
         </div>
       </div>
@@ -1175,54 +1261,54 @@
         </div>
       </div>
 
-      <!-- Enhanced NFT section with better structure -->
+      <!-- Added loading animations for groups -->
+      <div class="stats-section" id="groupsSection" style="display:none;">
+        <h3>👥 Groups</h3>
+        <div class="groups-loading" id="groupsLoading">
+          <div class="groups-loading-spinner"></div>
+          <div class="groups-loading-text">Loading groups...</div>
+        </div>
+        <div id="groupsContainer"></div>
+      </div>
+
+      <!-- Improved NFT section with loading -->
       <div class="nfts-section" id="nftsSection" style="display:none;">
         <h3>🎨 NFT Collection</h3>
-        <div class="nft-stats" id="nftStats" style="display:none;">
-          <div class="nft-stat">
-            <span class="nft-stat-value" id="totalNfts">0</span>
-            <span class="nft-stat-label">Total NFTs</span>
-          </div>
-          <div class="nft-stat">
-            <span class="nft-stat-value" id="avgQuality">0</span>
-            <span class="nft-stat-label">Avg Quality</span>
-          </div>
-          <div class="nft-stat">
-            <span class="nft-stat-value" id="rarestHolders">0</span>
-            <span class="nft-stat-label">Rarest (Holders)</span>
-          </div>
-          <div class="nft-stat">
-            <span class="nft-stat-value" id="highestQuality">0</span>
-            <span class="nft-stat-label">Highest Quality</span>
-          </div>
+        <div class="nft-loading" id="nftLoading">
+          <div class="nft-loading-spinner"></div>
+          <div class="nft-loading-text">Loading NFTs...</div>
         </div>
-        <div id="nftsContainer">
-          <div class="loading-enhanced">
-            <div class="loading-pulse"></div>
-            <div class="loading-text">Loading NFT Collection</div>
-            <div class="loading-subtext">Fetching your digital treasures...</div>
+        <div id="nftStats" class="stats-section" style="display:none;">
+          <div>
+            <div class="nft-stat">
+              <span class="nft-stat-value" id="totalNfts">0</span>
+              <span class="nft-stat-label">Total NFTs</span>
+            </div>
+            <div class="nft-stat">
+              <span class="nft-stat-value" id="avgQuality">0</span>
+              <span class="nft-stat-label">Avg Quality</span>
+            </div>
+          </div>
+          <div>
+            <div class="nft-stat">
+              <span class="nft-stat-value" id="rarestHolders">0</span>
+              <span class="nft-stat-label">Rarest (Holders)</span>
+            </div>
+            <div class="nft-stat">
+              <span class="nft-stat-value" id="highestQuality">0</span>
+              <span class="nft-stat-label">Highest Quality</span>
+            </div>
           </div>
         </div>
+        <div id="nftsContainer" class="nfts-grid"></div>
         <button id="showAllNftsBtn" class="show-all-btn" style="display:none;">
           Show All NFTs (<span id="remainingCount">0</span> more)
         </button>
       </div>
-
-      <!-- Enhanced groups section -->
-      <div class="stats-section" id="groupsSection" style="display:none;">
-        <h3>👥 Group Memberships</h3>
-        <div class="groups-container" id="groupsContainer">
-          <div class="loading-enhanced">
-            <div class="loading-pulse"></div>
-            <div class="loading-text">Loading Group Data</div>
-            <div class="loading-subtext">Gathering your community connections...</div>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 
-  <!-- Enhanced floating user widget with smaller collapsed state -->
+  <!-- Smaller collapsed floating widget -->
   <div class="floating-user-widget" id="floatingWidget" style="display:none;">
     <div class="widget-header" onclick="toggleWidget()">
       <div class="widget-title">User Info</div>
@@ -1245,140 +1331,378 @@
 
   <script src="utils/xp-calculations.js"></script>
   <script>
-    let currentTheme = 'default';
-    let currentUserId = null;
-
-    // Initialize app
-    document.addEventListener('DOMContentLoaded', function() {
-      initializeApp();
-    });
-
-    async function initializeApp() {
-      // Show main loading
-      const loadingOverlay = document.getElementById('mainLoadingOverlay');
-      
-      // Get user ID from Telegram WebApp
-      if (window.Telegram && window.Telegram.WebApp) {
-        const user = window.Telegram.WebApp.initDataUnsafe?.user;
-        if (user) {
-          currentUserId = user.id.toString();
-          await fetchUserTheme(currentUserId);
-          updateUserInfo(user);
-        }
-      }
-
-      // Hide loading after 2 seconds
-      setTimeout(() => {
-        loadingOverlay.classList.add('hidden');
-      }, 2000);
-    }
-
-    async function fetchUserTheme(userId) {
+    async function fetchUserTheme(chatId) {
       try {
-        const response = await fetch(`https://reaperxxxx-testldb.hf.space/user/${userId}/theme`);
+        const response = await fetch(`https://reaperxxxx-testldb.hf.space/user/${chatId}/theme`);
         const data = await response.json();
         
         if (data.status && data.theme) {
-          changeTheme(data.theme);
+          return data.theme;
+        } else {
+          return 'default';
         }
       } catch (error) {
-        console.log('Failed to fetch user theme, using default');
+        console.log('Theme fetch error, using default:', error);
+        return 'default';
       }
     }
 
     function changeTheme(theme) {
-      // Remove all theme classes
-      document.body.classList.remove('theme-default', 'theme-red', 'theme-black', 'theme-yellow', 'theme-green');
+      const body = document.body;
+      body.className = body.className.replace(/theme-\w+/g, '');
       
-      // Add new theme class
       if (theme !== 'default') {
-        document.body.classList.add(`theme-${theme}`);
+        body.classList.add(`theme-${theme}`);
       }
       
-      currentTheme = theme;
-      
-      // Update theme buttons
+      // Update active theme button
       document.querySelectorAll('.theme-btn').forEach(btn => {
         btn.classList.remove('current');
       });
-      document.querySelector(`.theme-btn.${theme}`).classList.add('current');
+      const themeBtn = document.querySelector(`.theme-btn.${theme}`);
+      if (themeBtn) {
+        themeBtn.classList.add('current');
+      }
       
       // Save theme preference
-      localStorage.setItem('finral-theme', theme);
-      
-      // Update theme on server if user is logged in
-      if (currentUserId) {
-        updateUserTheme(currentUserId, theme);
-      }
+      localStorage.setItem('selectedTheme', theme);
     }
 
-    async function updateUserTheme(userId, theme) {
-      try {
-        await fetch(`https://reaperxxxx-testldb.hf.space/user/${userId}/theme`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({ theme: theme })
-        });
-      } catch (error) {
-        console.log('Failed to update user theme on server');
+    const sidebarToggle = document.getElementById('sidebarToggle');
+    const sidebar = document.getElementById('sidebar');
+
+    sidebarToggle.addEventListener('click', () => {
+      sidebar.classList.toggle('open');
+      sidebarToggle.textContent = sidebar.classList.contains('open') ? '✕' : '🔍';
+    });
+
+    document.addEventListener('click', (e) => {
+      if (window.innerWidth <= 768 && 
+          !sidebar.contains(e.target) && 
+          !sidebarToggle.contains(e.target) && 
+          sidebar.classList.contains('open')) {
+        sidebar.classList.remove('open');
+        sidebarToggle.textContent = '🔍';
       }
-    }
+    });
 
-    function updateUserInfo(user) {
-      const chatIdElement = document.getElementById('chatId');
-      const userNameElement = document.getElementById('userName');
-      const welcomeTitle = document.getElementById('welcomeTitle');
-      const userRankElement = document.getElementById('userRank');
+    async function searchUser(chatId) {
+      const searchBtn = document.getElementById('searchBtn');
+      const searchResult = document.getElementById('searchResult');
+      const btnText = searchBtn.querySelector('.btn-text');
+      const loadingDots = searchBtn.querySelector('.loading-dots');
       
-      // Update chat ID
-      chatIdElement.innerHTML = `Chat ID: ${user.id}`;
+      searchBtn.disabled = true;
+      btnText.style.display = 'none';
+      loadingDots.style.display = 'flex';
+      searchResult.style.display = 'none';
       
-      // Update user name
-      const fullName = `${user.first_name || ''} ${user.last_name || ''}`.trim();
-      if (fullName) {
-        userNameElement.innerHTML = `👤 ${fullName}`;
-        userNameElement.style.display = 'block';
-        welcomeTitle.innerHTML = `Welcome, ${user.first_name || 'User'}!`;
+      try {
+        const response = await fetch(`https://reaperxxxx-testldb.hf.space/user/${chatId}/info`);
+        const data = await response.json();
+        
+        if (data.status && data.groups && data.groups.length > 0) {
+          const userInfo = data.groups[0];
+          searchResult.innerHTML = `
+            <p><strong>✅ Found User:</strong></p>
+            <p><strong>Name:</strong> ${userInfo.fullName || 'N/A'}</p>
+            <p><strong>Username:</strong> ${userInfo.username || 'N/A'}</p>
+            <p><strong>ID:</strong> ${chatId}</p>
+            <button class="view-profile-btn" onclick="window.open('https://t.me/finralxbot/info?startapp=${chatId}', '_blank')">
+              View Full Profile
+            </button>
+          `;
+          searchResult.style.display = 'block';
+        } else {
+          searchResult.innerHTML = '<p class="error">❌ User not found or no data available.</p>';
+          searchResult.style.display = 'block';
+        }
+      } catch (error) {
+        searchResult.innerHTML = '<p class="error">⚠️ Error searching for user. Please try again.</p>';
+        searchResult.style.display = 'block';
       }
       
-      // Calculate and display rank
-      const rank = calculateGlobalRank(user.id);
-      userRankElement.innerHTML = `
-        <div class="rank-title">Global Rank</div>
-        <div class="rank-value">${rank}</div>
-      `;
-      userRankElement.style.display = 'block';
+      searchBtn.disabled = false;
+      btnText.style.display = 'block';
+      loadingDots.style.display = 'none';
+    }
+
+    function toggleWidget() {
+      const widget = document.getElementById('floatingWidget');
+      const btn = document.getElementById('collapseBtn');
       
-      // Update floating widget
-      updateFloatingWidget(user, rank);
-      document.getElementById('floatingWidget').style.display = 'block';
+      widget.classList.toggle('collapsed');
+      btn.classList.toggle('collapsed');
+      btn.textContent = widget.classList.contains('collapsed') ? '▲' : '▼';
     }
 
-    function updateFloatingWidget(user, rank) {
-      const widgetName = document.getElementById('widgetName');
-      const widgetId = document.getElementById('widgetId');
+    function updateGlobalRank(totalLevel) {
+      const rank = getGlobalRank(totalLevel);
       const widgetRank = document.getElementById('widgetRank');
-      const widgetAvatar = document.getElementById('widgetAvatar');
+      const userRank = document.getElementById('userRank');
+      
+      if (widgetRank) {
+        widgetRank.textContent = `${rank.emoji} ${rank.rank}`;
+      }
+      if (userRank) {
+        userRank.textContent = `${rank.emoji} ${rank.rank}`;
+        userRank.style.display = 'block';
+      }
+    }
+
+    window.addEventListener('DOMContentLoaded', async () => {
+      // Show site loading
+      const siteLoading = document.getElementById('siteLoading');
+      
+      // Get user ID from Telegram WebApp
+      const userId = window.Telegram?.WebApp?.initDataUnsafe?.user?.id || '7365381557';
       
-      const fullName = `${user.first_name || ''} ${user.last_name || ''}`.trim();
-      widgetName.textContent = fullName || 'User';
-      widgetId.textContent = `ID: ${user.id}`;
-      widgetRank.textContent = rank;
+      try {
+        // Fetch and apply user theme
+        const userTheme = await fetchUserTheme(userId);
+        changeTheme(userTheme);
+        
+        // Hide site loading after theme is applied
+        setTimeout(() => {
+          siteLoading.style.display = 'none';
+        }, 1000);
+        
+      } catch (error) {
+        // Fallback to saved theme or default
+        const savedTheme = localStorage.getItem('selectedTheme') || 'default';
+        changeTheme(savedTheme);
+        siteLoading.style.display = 'none';
+      }
+
+      // Set up search functionality
+      const searchBtn = document.getElementById('searchBtn');
+      const searchInput = document.getElementById('searchInput');
       
-      // Set avatar if available
-      if (user.photo_url) {
-        widgetAvatar.src = user.photo_url;
+      searchBtn.addEventListener('click', () => {
+        const chatId = searchInput.value.trim();
+        if (chatId) {
+          searchUser(chatId);
+        }
+      });
+
+      searchInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+          const chatId = searchInput.value.trim();
+          if (chatId) {
+            searchUser(chatId);
+          }
+        }
+      });
+
+      // Load user data with enhanced loading states
+      await loadUserData(userId);
+    });
+
+    async function loadUserData(userId) {
+      document.getElementById('chatId').innerHTML = `
+        <div class="loading">
+          <div class="loading-spinner"></div>
+          Loading user data...
+        </div>
+      `;
+
+      try {
+        // Fetch user banner with fallback
+        try {
+          const bannerRes = await fetch(`https://reaperxxxx-testldb.hf.space/user/${userId}/banner`);
+          const bannerData = await bannerRes.json();
+          
+          const bannerEl = document.getElementById('banner');
+          if (bannerData.status && bannerData.catboxUrl) {
+            bannerEl.src = bannerData.catboxUrl;
+          } else {
+            bannerEl.src = 'https://files.catbox.moe/pdt55w.jpg';
+          }
+          document.getElementById('bannerContainer').style.display = 'block';
+        } catch (err) {
+          const bannerEl = document.getElementById('banner');
+          bannerEl.src = 'https://files.catbox.moe/pdt55w.jpg';
+          document.getElementById('bannerContainer').style.display = 'block';
+        }
+
+        // Fetch user PFP
+        const pfpRes = await fetch(`https://reaperxxxx-testldb.hf.space/user/${userId}/pfp`);
+        const pfpData = await pfpRes.json();
+        const imgEl = document.getElementById('pfp');
+        
+        if (pfpData.status && pfpData.catboxUrl) {
+          imgEl.src = pfpData.catboxUrl;
+        } else {
+          imgEl.src = 'https://files.catbox.moe/hmicys.jpeg';
+        }
+
+        document.getElementById('groupsSection').style.display = 'block';
+        document.getElementById('groupsLoading').style.display = 'flex';
+
+        document.getElementById('nftsSection').style.display = 'block';
+        document.getElementById('nftLoading').style.display = 'flex';
+
+        // Fetch user info
+        const infoRes = await fetch(`https://reaperxxxx-testldb.hf.space/user/${userId}/info`);
+        const infoData = await infoRes.json();
+        
+        if (infoData.status) {
+          const userInfo = infoData.groups[0] || {};
+          
+          const fullName = userInfo.fullName || 'N/A';
+          const username = userInfo.username || 'N/A';
+          
+          // Update UI elements
+          document.getElementById('chatId').textContent = `Chat ID: ${userId}`;
+          
+          if (fullName !== 'N/A') {
+            document.getElementById('userName').textContent = fullName;
+            document.getElementById('userName').style.display = 'block';
+          }
+          
+          // Update floating widget
+          document.getElementById('widgetName').textContent = fullName;
+          document.getElementById('widgetId').textContent = `ID: ${userId}`;
+          document.getElementById('widgetAvatar').src = document.getElementById('pfp').src;
+          updateGlobalRank(infoData.totalLevel);
+          document.getElementById('floatingWidget').style.display = 'block';
+
+          // Display stats
+          document.getElementById('fullName').textContent = fullName;
+          document.getElementById('username').textContent = username;
+          document.getElementById('totalXP').textContent = infoData.totalXP.toLocaleString();
+          document.getElementById('totalLevel').textContent = infoData.totalLevel;
+          document.getElementById('totalRoyalties').textContent = infoData.totalRoyalties.toLocaleString();
+          document.getElementById('totalDailyMessages').textContent = infoData.totalDailyMessages;
+          document.getElementById('groupCount').textContent = infoData.groups.length;
+
+          document.getElementById('statsGrid').style.display = 'grid';
+
+          setTimeout(() => {
+            document.getElementById('groupsLoading').style.display = 'none';
+            loadGroups(infoData.groups);
+          }, 800);
+
+          setTimeout(async () => {
+            await loadNFTs(userId);
+            document.getElementById('nftLoading').style.display = 'none';
+          }, 1200);
+        }
+      } catch (error) {
+        console.error('Error loading user data:', error);
+        document.getElementById('chatId').textContent = 'Error loading user data';
+        document.getElementById('groupsLoading').style.display = 'none';
+        document.getElementById('nftLoading').style.display = 'none';
       }
     }
 
-    function toggleWidget() {
-      const widget = document.getElementById('floatingWidget');
-      const collapseBtn = document.getElementById('collapseBtn');
+    async function loadGroups(groups) {
+      // Process and display groups (existing logic)
+      const groupsContainer = document.getElementById('groupsContainer');
+      groupsContainer.innerHTML = '';
+
+      for (const group of groups) {
+        const div = document.createElement('div');
+        div.className = 'group-box';
+        div.innerHTML = `
+          <div class="group-header">
+            <img class="group-pic" src="${group.groupPic || '/placeholder.svg'}" alt="Group Picture">
+            <div class="group-info">
+              <div class="group-name">${group.fullName || 'Unknown Group'}</div>
+              <div class="group-id">ID: ${group.groupId || group.id}</div>
+            </div>
+          </div>
+          <div class="group-stats">
+            <div class="group-stat-item">
+              <span class="group-stat-value">${group.level}</span>
+              <span class="group-stat-label">Level</span>
+            </div>
+            <div class="group-stat-item">
+              <span class="group-stat-value">${group.xp}</span>
+              <span class="group-stat-label">XP</span>
+            </div>
+            <div class="group-stat-item">
+              <span class="group-stat-value">${group.royalties}</span>
+              <span class="group-stat-label">Royalties</span>
+            </div>
+            <div class="group-stat-item">
+              <span class="group-stat-value">${group.dailyMessages}</span>
+              <span class="group-stat-label">Daily</span>
+            </div>
+          </div>
+        `;
+        groupsContainer.appendChild(div);
+      }
+    }
+
+    async function loadNFTs(userId) {
+      try {
+        const nftsRes = await fetch(`https://reaperxxxx-testldb.hf.space/user/${userId}/nfts`);
+        const nftsData = await nftsRes.json();
+        
+        const nftsContainer = document.getElementById('nftsContainer');
+        
+        if (nftsData.status && nftsData.nfts && nftsData.nfts.length > 0) {
+          const sortedNfts = nftsData.nfts.sort((a, b) => a.holders - b.holders);
+          
+          // Display NFTs with smaller cards
+          nftsContainer.innerHTML = '';
+          sortedNfts.slice(0, 12).forEach(nft => {
+            const nftCard = createNftCard(nft);
+            nftsContainer.appendChild(nftCard);
+          });
+          
+          // Show remaining count if more than 12
+          if (sortedNfts.length > 12) {
+            document.getElementById('remainingCount').textContent = sortedNfts.length - 12;
+            document.getElementById('showAllNftsBtn').style.display = 'block';
+          }
+        } else {
+          nftsContainer.innerHTML = '<p>No NFTs found</p>';
+        }
+      } catch (error) {
+        console.error('Error loading NFTs:', error);
+        document.getElementById('nftsContainer').innerHTML = '<p>Error loading NFTs</p>';
+      }
+    }
+
+    function createNftCard(nft) {
+      const qualityClass = getQualityClass(nft.nftquality);
+      const qualityBadgeClass = getQualityBadgeClass(nft.nftquality);
       
-      widget.classList.toggle('collapsed');
-      collapseBtn.classList.toggle('collapsed');
+      const card = document.createElement('div');
+      card.className = `nft-card ${qualityClass}`;
+      
+      card.innerHTML = `
+        <img src="${nft.imageUrl || '/placeholder.svg?height=100&width=180'}" 
+             alt="${nft.name}" class="nft-image" loading="lazy">
+        <div class="nft-info">
+          <div class="nft-name">${nft.name}</div>
+          <div class="nft-details">
+            <span class="quality-badge ${qualityBadgeClass}">${nft.nftquality}%</span>
+            <span>${nft.holders} holders</span>
+          </div>
+        </div>
+      `;
+      
+      return card;
+    }
+
+    // Helper functions
+    function getQualityClass(quality) {
+      if (quality >= 81) return 'legendary';
+      if (quality >= 61) return 'way-better';
+      if (quality >= 41) return 'even-better';
+      if (quality >= 21) return 'better';
+      return 'basic';
+    }
+
+    function getQualityBadgeClass(quality) {
+      if (quality >= 81) return 'quality-legendary';
+      if (quality >= 61) return 'quality-way-better';
+      if (quality >= 41) return 'quality-even-better';
+      if (quality >= 21) return 'quality-better';
+      return 'quality-basic';
     }
 
     // Sidebar toggle functionality
@@ -1387,93 +1711,531 @@
 
     sidebarToggle.addEventListener('click', () => {
       sidebar.classList.toggle('open');
+      sidebarToggle.textContent = sidebar.classList.contains('open') ? '✕' : '🔍';
     });
 
-    // Search functionality with enhanced loading
-    const searchBtn = document.getElementById('searchBtn');
-    const searchInput = document.getElementById('searchInput');
-    const searchResult = document.getElementById('searchResult');
-
-    searchBtn.addEventListener('click', async () => {
-      const userId = searchInput.value.trim();
-      if (!userId) return;
+    // Close sidebar when clicking outside on mobile
+    document.addEventListener('click', (e) => {
+      if (window.innerWidth <= 768 && 
+          !sidebar.contains(e.target) && 
+          !sidebarToggle.contains(e.target) && 
+          sidebar.classList.contains('open')) {
+        sidebar.classList.remove('open');
+        sidebarToggle.textContent = '🔍';
+      }
+    });
 
-      // Show loading state
+    // Function to search user by chat ID
+    async function searchUser(chatId) {
+      const searchBtn = document.getElementById('searchBtn');
+      const searchResult = document.getElementById('searchResult');
+      const btnText = searchBtn.querySelector('.btn-text');
+      const loadingDots = searchBtn.querySelector('.loading-dots');
+      
       searchBtn.disabled = true;
-      searchBtn.innerHTML = `
-        <div class="loading-enhanced" style="padding: 0; gap: 10px;">
-          <div class="loading-pulse" style="width: 20px; height: 20px;"></div>
-          <span>Searching...</span>
-        </div>
-      `;
-
+      btnText.style.display = 'none';
+      loadingDots.style.display = 'flex';
+      searchResult.style.display = 'none';
+      
       try {
-        // Simulate API call
-        await new Promise(resolve => setTimeout(resolve, 2000));
+        const response = await fetch(`https://reaperxxxx-testldb.hf.space/user/${chatId}/info`);
+        const data = await response.json();
         
-        // Show result
-        searchResult.innerHTML = `
-          <div>User found: ${userId}</div>
-          <button class="view-profile-btn" onclick="viewProfile('${userId}')">View Profile</button>
-        `;
-        searchResult.style.display = 'block';
+        if (data.status && data.groups && data.groups.length > 0) {
+          const userInfo = data.groups[0];
+          searchResult.innerHTML = `
+            <p><strong>✅ Found User:</strong></p>
+            <p><strong>Name:</strong> ${userInfo.fullName || 'N/A'}</p>
+            <p><strong>Username:</strong> ${userInfo.username || 'N/A'}</p>
+            <p><strong>ID:</strong> ${chatId}</p>
+            <button class="view-profile-btn" onclick="window.open('https://t.me/finralxbot/info?startapp=${chatId}', '_blank')">
+              View Full Profile
+            </button>
+          `;
+          searchResult.style.display = 'block';
+        } else {
+          searchResult.innerHTML = '<p class="error">❌ User not found or no data available.</p>';
+          searchResult.style.display = 'block';
+        }
       } catch (error) {
-        searchResult.innerHTML = `<div style="color: var(--theme-primary);">Error searching for user</div>`;
+        searchResult.innerHTML = '<p class="error">⚠️ Error searching for user. Please try again.</p>';
         searchResult.style.display = 'block';
-      } finally {
-        searchBtn.disabled = false;
-        searchBtn.innerHTML = 'Search User';
       }
-    });
-
-    function viewProfile(userId) {
-      // Enhanced profile viewing with loading states
-      showProfileLoadingStates();
       
-      // Simulate loading profile data
-      setTimeout(() => {
-        loadProfileData(userId);
-      }, 1500);
+      searchBtn.disabled = false;
+      btnText.style.display = 'block';
+      loadingDots.style.display = 'none';
     }
 
-    function showProfileLoadingStates() {
-      // Show sections with loading states
-      document.getElementById('bannerContainer').style.display = 'block';
-      document.getElementById('statsGrid').style.display = 'block';
-      document.getElementById('nftsSection').style.display = 'block';
-      document.getElementById('groupsSection').style.display = 'block';
+    function changeTheme(theme) {
+      const body = document.body;
+      body.className = body.className.replace(/theme-\w+/g, '');
+      
+      if (theme !== 'default') {
+        body.classList.add(`theme-${theme}`);
+      }
+      
+      // Update active theme button
+      document.querySelectorAll('.theme-btn').forEach(btn => {
+        btn.classList.remove('current');
+      });
+      document.querySelector(`.theme-btn.${theme}`).classList.add('current');
+      
+      // Save theme preference
+      localStorage.setItem('selectedTheme', theme);
     }
 
-    function loadProfileData(userId) {
-      // Simulate loading complete - replace loading states with actual data
-      // This would be replaced with actual API calls
+    function toggleWidget() {
+      const widget = document.getElementById('floatingWidget');
+      const btn = document.getElementById('collapseBtn');
       
-      // Remove loading states and show content
-      setTimeout(() => {
-        const nftsContainer = document.getElementById('nftsContainer');
-        nftsContainer.innerHTML = `
-          <div class="nft-card">
-            <h4 style="color: var(--theme-primary); margin-bottom: 10px;">Sample NFT #1</h4>
-            <p style="color: var(--theme-text-secondary);">Quality: Legendary</p>
-            <p style="color: var(--theme-text-secondary);">Holders: 5</p>
-          </div>
-        `;
-        
-        const groupsContainer = document.getElementById('groupsContainer');
-        groupsContainer.innerHTML = `
-          <div class="group-card">
-            <h4 style="color: var(--theme-primary); margin-bottom: 8px;">Sample Group</h4>
-            <p style="color: var(--theme-text-secondary); font-size: 0.8rem;">Member since: 2024</p>
-          </div>
-        `;
-      }, 1000);
+      widget.classList.toggle('collapsed');
+      btn.classList.toggle('collapsed');
+      btn.textContent = widget.classList.contains('collapsed') ? '▲' : '▼';
+    }
+
+    function updateGlobalRank(totalLevel) {
+      const rank = getGlobalRank(totalLevel);
+      const widgetRank = document.getElementById('widgetRank');
+      if (widgetRank) {
+        widgetRank.textContent = `${rank.emoji} ${rank.rank}`;
+      }
     }
 
-    // Load saved theme on page load
-    const savedTheme = localStorage.getItem('finral-theme');
-    if (savedTheme) {
+    window.addEventListener('DOMContentLoaded', async () => {
+      const savedTheme = localStorage.getItem('selectedTheme') || 'default';
       changeTheme(savedTheme);
+
+      // Set up search functionality
+      const searchBtn = document.getElementById('searchBtn');
+      const searchInput = document.getElementById('searchInput');
+      
+      searchBtn.addEventListener('click', () => {
+        const chatId = searchInput.value.trim();
+        if (chatId) {
+          searchUser(chatId);
+        }
+      });
+      
+      searchInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+          const chatId = searchInput.value.trim();
+          if (chatId) {
+            searchUser(chatId);
+          }
+        }
+      });
+
+      // Get userId from Telegram WebApp start parameter or current user
+      let userId;
+      let isViewingOther = false;
+      
+      const initData = Telegram.WebApp.initDataUnsafe;
+      const startParam = initData.start_param;
+      
+      if (startParam) {
+        userId = startParam;
+        isViewingOther = true;
+        document.getElementById('welcomeTitle').textContent = `Viewing Profile`;
+      } else {
+        const user = initData.user;
+        if (user && user.id) {
+          userId = user.id;
+          document.getElementById('welcomeTitle').textContent = `Welcome to Finral`;
+        } else {
+          document.getElementById('chatId').innerHTML = '<div class="error">❌ Unable to fetch chat ID</div>';
+          return;
+        }
+      }
+
+      document.getElementById('chatId').textContent = userId;
+
+      try {
+        // Fetch user banner with fallback
+        try {
+          const bannerRes = await fetch(`https://reaperxxxx-testldb.hf.space/user/${userId}/banner`);
+          const bannerData = await bannerRes.json();
+          
+          const bannerEl = document.getElementById('banner');
+          if (bannerData.status && bannerData.catboxUrl) {
+            bannerEl.src = bannerData.catboxUrl;
+          } else {
+            bannerEl.src = 'https://files.catbox.moe/pdt55w.jpg';
+          }
+          document.getElementById('bannerContainer').style.display = 'block';
+        } catch (err) {
+          const bannerEl = document.getElementById('banner');
+          bannerEl.src = 'https://files.catbox.moe/pdt55w.jpg';
+          document.getElementById('bannerContainer').style.display = 'block';
+        }
+
+        // Fetch user PFP
+        const pfpRes = await fetch(`https://reaperxxxx-testldb.hf.space/user/${userId}/pfp`);
+        const pfpData = await pfpRes.json();
+        const imgEl = document.getElementById('pfp');
+        
+        if (pfpData.status && pfpData.catboxUrl) {
+          imgEl.src = pfpData.catboxUrl;
+        } else {
+          imgEl.src = 'https://files.catbox.moe/hmicys.jpeg';
+        }
+
+        // Fetch user info
+        const infoRes = await fetch(`https://reaperxxxx-testldb.hf.space/user/${userId}/info`);
+        const infoData = await infoRes.json();
+        
+        if (infoData.status) {
+          const userInfo = infoData.groups[0] || {};
+          
+          const fullName = userInfo.fullName || 'N/A';
+          const username = userInfo.username || 'N/A';
+          
+          if (fullName !== 'N/A') {
+            document.getElementById('userName').textContent = fullName;
+            document.getElementById('userName').style.display = 'block';
+          }
+          
+          // Update floating widget
+          document.getElementById('widgetName').textContent = fullName;
+          document.getElementById('widgetId').textContent = `ID: ${userId}`;
+          document.getElementById('widgetAvatar').src = document.getElementById('pfp').src;
+          updateGlobalRank(infoData.totalLevel);
+          document.getElementById('floatingWidget').style.display = 'block';
+
+          // Display basic stats
+          document.getElementById('fullName').textContent = fullName;
+          document.getElementById('username').textContent = username;
+          document.getElementById('totalXP').textContent = infoData.totalXP.toLocaleString();
+          document.getElementById('totalLevel').textContent = infoData.totalLevel;
+          document.getElementById('totalRoyalties').textContent = infoData.totalRoyalties.toLocaleString();
+          document.getElementById('totalDailyMessages').textContent = infoData.totalDailyMessages;
+          document.getElementById('groupCount').textContent = infoData.groups.length;
+
+          // Show stats grid
+          document.getElementById('statsGrid').style.display = 'grid';
+
+          // Group unique groups by groupId
+          const uniqueGroups = {};
+          
+          for (const group of infoData.groups) {
+            const groupId = group.groupId || group.id;
+            
+            if (!uniqueGroups[groupId]) {
+              uniqueGroups[groupId] = {
+                groupId: groupId,
+                fullName: group.fullName,
+                username: group.username,
+                totalLevel: 0,
+                totalXP: 0,
+                totalRoyalties: 0,
+                totalDailyMessages: 0,
+                entries: []
+              };
+            }
+            
+            uniqueGroups[groupId].totalLevel += group.level || 0;
+            uniqueGroups[groupId].totalXP += group.xp || 0;
+            uniqueGroups[groupId].totalRoyalties += group.royalties || 0;
+            uniqueGroups[groupId].totalDailyMessages += group.dailyMessages || 0;
+            uniqueGroups[groupId].entries.push({
+              level: group.level,
+              xp: group.xp,
+              royalties: group.royalties,
+              dailyMessages: group.dailyMessages
+            });
+          }
+
+          
+          document.getElementById('groupsContainer').innerHTML = '';
+
+          // Display group stats
+          const groupsContainer = document.getElementById('groupsContainer');
+
+          for (const groupId in uniqueGroups) {
+            const group = uniqueGroups[groupId];
+            
+            let groupMeta = null;
+            let metaError = null;
+            
+            try {
+              const groupMetaRes = await fetch(`https://reaperxxxx-testldb.hf.space/group/${groupId}/meta`);
+              
+              if (groupMetaRes.ok) {
+                groupMeta = await groupMetaRes.json();
+              } else {
+                const errorText = await groupMetaRes.text();
+                metaError = `API Error: ${groupMetaRes.status}`;
+              }
+            } catch (err) {
+              metaError = `Fetch Error: ${err.message}`;
+            }
+
+            const div = document.createElement('div');
+            div.className = 'group-box';
+
+            const displayName = (groupMeta && groupMeta.status && groupMeta.groupName)
+               ? groupMeta.groupName
+               : group.fullName || 'Unknown Group';
+            
+            const groupPic = (groupMeta && groupMeta.status && groupMeta.groupPic)
+               ? groupMeta.groupPic
+               : null;
+            
+            const admins = (groupMeta && groupMeta.status && groupMeta.admins)
+               ? groupMeta.admins
+               : null;
+
+            div.innerHTML = `
+              <div class="group-header">
+                ${groupPic ? `<img class="group-pic" src="${groupPic}" alt="Group Picture">` : '<div class="group-pic" style="background: linear-gradient(45deg, #00bcd4, #87ceeb); display: flex; align-items: center; justify-content: center; color: #0a0a0a; font-weight: bold;">👥</div>'}
+                <div class="group-info">
+                  <div class="group-name">${displayName}</div>
+                  <div class="group-id">ID: ${groupId}</div>
+                </div>
+              </div>
+              
+              <div class="group-stats">
+                <div class="group-stat-item">
+                  <span class="group-stat-value">${group.totalLevel}</span>
+                  <span class="group-stat-label">Level</span>
+                </div>
+                <div class="group-stat-item">
+                  <span class="group-stat-value">${group.totalXP.toLocaleString()}</span>
+                  <span class="group-stat-label">XP</span>
+                </div>
+                <div class="group-stat-item">
+                  <span class="group-stat-value">${group.totalRoyalties.toLocaleString()}</span>
+                  <span class="group-stat-label">Royalties</span>
+                </div>
+                <div class="group-stat-item">
+                  <span class="group-stat-value">${group.totalDailyMessages}</span>
+                  <span class="group-stat-label">Daily</span>
+                </div>
+              </div>
+
+              ${metaError ? `<div class="error">⚠️ ${metaError}</div>` : ''}
+              
+              ${admins && admins.length > 0 ? `
+                <div class="group-admins">
+                  <details>
+                    <summary>👑 Admins (${admins.length})</summary>
+                    <div class="admin-list">
+                      ${admins.slice(0, 5).map(a => `<span class="admin-tag" onclick="window.open('https://t.me/finralxbot/info?startapp=${a.id}', '_blank')">${a.name || 'Unknown'}</span>`).join('')}
+                      ${admins.length > 5 ? `<span class="admin-tag">+${admins.length - 5} more</span>` : ''}
+                    </div>
+                  </details>
+                </div>` : ''}
+            `;
+
+            groupsContainer.appendChild(div);
+          }
+
+          document.getElementById('groupsSection').style.display = 'block';
+        }
+
+        try {
+          const nftsRes = await fetch(`https://reaperxxxx-testldb.hf.space/user/${userId}/nfts`);
+          const nftsData = await nftsRes.json();
+          
+          const nftsContainer = document.getElementById('nftsContainer');
+          const showAllBtn = document.getElementById('showAllNftsBtn');
+          const remainingCount = document.getElementById('remainingCount');
+          const nftStats = document.getElementById('nftStats');
+          
+          if (nftsData.status && nftsData.nfts && nftsData.nfts.length > 0) {
+            // Sort NFTs by holders (ascending) to show rarest first
+            const sortedNfts = nftsData.nfts.sort((a, b) => a.holders - b.holders);
+            
+            // Calculate NFT statistics
+            const totalNfts = sortedNfts.length;
+            const avgQuality = Math.round(sortedNfts.reduce((sum, nft) => sum + nft.nftquality, 0) / totalNfts);
+            const rarestHolders = Math.min(...sortedNfts.map(nft => nft.holders));
+            const highestQuality = Math.max(...sortedNfts.map(nft => nft.nftquality));
+            
+            // Update NFT stats
+            document.getElementById('totalNfts').textContent = totalNfts;
+            document.getElementById('avgQuality').textContent = avgQuality;
+            document.getElementById('rarestHolders').textContent = rarestHolders;
+            document.getElementById('highestQuality').textContent = highestQuality;
+            nftStats.style.display = 'block';
+            
+            function getQualityClass(quality) {
+              if (quality >= 81) return 'legendary';
+              if (quality >= 61) return 'way-better';
+              if (quality >= 41) return 'even-better';
+              if (quality >= 21) return 'better';
+              return 'basic';
+            }
+            
+            function getQualityBadgeClass(quality) {
+              if (quality >= 81) return 'quality-legendary';
+              if (quality >= 61) return 'quality-way-better';
+              if (quality >= 41) return 'quality-even-better';
+              if (quality >= 21) return 'quality-better';
+              return 'quality-basic';
+            }
+            
+            function getRarityClass(rarity) {
+              const rarityLower = rarity.toLowerCase();
+              if (rarityLower.includes('mythic')) return 'rarity-mythic';
+              if (rarityLower.includes('legendary')) return 'rarity-legendary';
+              if (rarityLower.includes('epic')) return 'rarity-epic';
+              if (rarityLower.includes('rare')) return 'rarity-rare';
+              if (rarityLower.includes('uncommon')) return 'rarity-uncommon';
+              return 'rarity-common';
+            }
+            
+            function formatDate(dateString) {
+              const date = new Date(dateString);
+              return date.toLocaleDateString('en-US', { 
+                month: 'short', 
+                day: 'numeric',
+                year: 'numeric'
+              });
+            }
+            
+            function formatDateTime(dateString) {
+              const date = new Date(dateString);
+              return date.toLocaleString('en-US', { 
+                month: 'short', 
+                day: 'numeric',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+              });
+            }
+            
+            function createNftCard(nft) {
+              const qualityClass = getQualityClass(nft.nftquality);
+              const qualityBadgeClass = getQualityBadgeClass(nft.nftquality);
+              const rarityClass = getRarityClass(nft.rarity);
+              const uniqueId = `details-${nft.nftid}`;
+
+              return `
+                <div class="nft-card ${qualityClass}" style="animation: fadeInUp 0.6s ease forwards; opacity: 0;">
+                  <div class="quality-badge ${qualityBadgeClass}">${nft.nftquality}</div>
+                  <img src="${nft.nftimage}" alt="${nft.name}" class="nft-image" loading="lazy">
+                  <div class="nft-info">
+                    <div class="nft-header">
+                      <div class="nft-name" title="${nft.name}">${nft.name}</div>
+                      <div class="nft-id">#${nft.nftid}</div>
+                    </div>
+                    <div class="nft-rarity ${rarityClass}">${nft.rarity}</div>
+                    <button class="toggle-details" onclick="toggleDetails('${uniqueId}', this)">▼ Show Details</button>
+                    <div class="nft-details-wrapper" id="${uniqueId}" style="display: none;">
+                      <div class="nft-details">
+                        <div class="nft-detail">
+                          <span class="nft-detail-label">Quality</span>
+                          <span class="nft-detail-value">${nft.nftquality}/100</span>
+                        </div>
+                        <div class="nft-detail">
+                          <span class="nft-detail-label">Holders</span>
+                          <span class="nft-detail-value">${nft.holders}</span>
+                        </div>
+                      </div>
+                      <div class="nft-obtained">
+                        <span class="nft-obtained-label">Obtained On</span>
+                        <span class="nft-obtained-value">${formatDateTime(nft.gotten_on)}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              `;
+            }
+            
+            // Show first 5 NFTs initially
+            const initialNfts = sortedNfts.slice(0, 5);
+            const remainingNfts = sortedNfts.slice(5);
+            
+            nftsContainer.innerHTML = `
+              <div class="nfts-grid">
+                ${initialNfts.map(nft => createNftCard(nft)).join('')}
+              </div>
+            `;
+            
+            // Show "Show All" button if there are more NFTs
+            if (remainingNfts.length > 0) {
+              remainingCount.textContent = remainingNfts.length;
+              showAllBtn.style.display = 'block';
+              
+              let allShown = false;
+              showAllBtn.addEventListener('click', () => {
+                if (!allShown) {
+                  const nftsGrid = nftsContainer.querySelector('.nfts-grid');
+                  nftsGrid.innerHTML += remainingNfts.map(nft => createNftCard(nft)).join('');
+                  showAllBtn.textContent = 'Show Less';
+                  allShown = true;
+                } else {
+                  const nftsGrid = nftsContainer.querySelector('.nfts-grid');
+                  nftsGrid.innerHTML = initialNfts.map(nft => createNftCard(nft)).join('');
+                  showAllBtn.innerHTML = `Show All NFTs (<span id="remainingCount">${remainingNfts.length}</span> more)`;
+                  allShown = false;
+                }
+              });
+            }
+            
+            setTimeout(() => {
+              const nftCards = document.querySelectorAll('.nft-card');
+              nftCards.forEach((card, index) => {
+                setTimeout(() => {
+                  card.style.opacity = '1';
+                }, index * 100);
+              });
+            }, 100);
+            
+            document.getElementById('nftsSection').style.display = 'block';
+          } else {
+            // No NFTs found
+            nftsContainer.innerHTML = `
+              <div class="no-nfts">
+                <div class="no-nfts-icon">🎨</div>
+                <h4>No NFTs Found</h4>
+                <p>This user hasn't collected any NFTs yet.</p>
+                <p>Start your digital art journey today!</p>
+              </div>
+            `;
+            document.getElementById('nftsSection').style.display = 'block';
+          }
+        } catch (err) {
+          console.error('Error fetching NFTs:', err);
+          const nftsContainer = document.getElementById('nftsContainer');
+          nftsContainer.innerHTML = `
+            <div class="no-nfts">
+              <div class="no-nfts-icon">⚠️</div>
+              <h4>Failed to Load NFTs</h4>
+              <p>Unable to fetch NFT collection data.</p>
+              <p>Please try again later.</p>
+            </div>
+          `;
+          document.getElementById('nftsSection').style.display = 'block';
+        }
+      } catch (err) {
+        console.error('Error fetching user data:', err);
+        document.getElementById('chatId').innerHTML = '<div class="error">❌ Failed to load user info</div>';
+      }
+    });
+
+    function toggleDetails(id, button) {
+      const details = document.getElementById(id);
+      const isVisible = details.style.display === 'block';
+
+      details.style.display = isVisible ? 'none' : 'block';
+      button.textContent = isVisible ? '▼ Show Details' : '▲ Hide Details';
     }
   </script>
+
+  <!-- Added fadeInUp animation -->
+  <style>
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(30px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  </style>
 </body>
 </html>