From 5e4fc34d5d3e42175fda454e900e8d553c7989f7 Mon Sep 17 00:00:00 2001
From: sirpiglr <49359077-sirpiglr@users.noreply.replit.com>
Date: Tue, 9 Dec 2025 21:32:54 +0000
Subject: [PATCH] Update dashboard styling and font for a modern look

Replaced the 'Fira Code' and 'Source Code Pro' font imports with 'Inter' and updated CSS variables to reflect a new color scheme and card styling for the dashboard.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aed2e46d-25bb-4b73-81a1-bb9e8437c261
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: 2d7a4ca7-fe8d-440d-882b-b0359f0d60ef
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3bdfff67-975a-46ad-9845-fbb6b4a4c4b5/aed2e46d-25bb-4b73-81a1-bb9e8437c261/Xy30ojl
Replit-Helium-Checkpoint-Created: true
---
 aethex-bot/public/dashboard.html | 1891 ++++++++++++++++--------------
 1 file changed, 1014 insertions(+), 877 deletions(-)

diff --git a/aethex-bot/public/dashboard.html b/aethex-bot/public/dashboard.html
index f4d5324..d8b85e9 100644
--- a/aethex-bot/public/dashboard.html
+++ b/aethex-bot/public/dashboard.html
@@ -6,30 +6,847 @@
   <title>Dashboard - AeThex Bot</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Source+Code+Pro:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
   <style>
     :root {
-      --background: hsl(220, 50%, 4%);
-      --foreground: hsl(210, 20%, 98%);
-      --card: hsl(220, 50%, 6%);
-      --card-hover: hsl(220, 50%, 8%);
-      --primary: hsl(220, 100%, 60%);
-      --secondary: hsl(220, 30%, 15%);
-      --muted: hsl(220, 30%, 15%);
-      --muted-foreground: hsl(215, 15%, 65%);
-      --border: hsl(220, 30%, 20%);
-      --aethex-400: hsl(220, 100%, 75%);
-      --aethex-500: hsl(220, 100%, 65%);
-      --neon-blue: hsl(210, 100%, 70%);
-      --neon-cyan: hsl(190, 100%, 70%);
-      --neon-purple: hsl(270, 100%, 70%);
-      --success: hsl(142, 76%, 36%);
-      --warning: hsl(38, 92%, 50%);
-      --danger: hsl(0, 72%, 51%);
+      --background: #030712;
+      --foreground: #f8fafc;
+      --card: rgba(15, 23, 42, 0.6);
+      --card-border: rgba(99, 102, 241, 0.15);
+      --card-border-hover: rgba(99, 102, 241, 0.4);
+      --primary: #6366f1;
+      --primary-light: #818cf8;
+      --secondary: rgba(30, 41, 59, 0.5);
+      --muted: #64748b;
+      --muted-foreground: #94a3b8;
+      --border: rgba(51, 65, 85, 0.5);
+      --gradient-1: #6366f1;
+      --gradient-2: #3b82f6;
+      --gradient-3: #06b6d4;
+      --success: #10b981;
+      --warning: #f59e0b;
+      --danger: #ef4444;
     }
     
     * { margin: 0; padding: 0; box-sizing: border-box; }
     
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      background: var(--background);
+      color: var(--foreground);
+      min-height: 100vh;
+      overflow-x: hidden;
+      line-height: 1.6;
+    }
+    
+    .bg-grid {
+      position: fixed;
+      inset: 0;
+      background-image: 
+        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
+      background-size: 64px 64px;
+      pointer-events: none;
+      z-index: -2;
+    }
+    
+    .bg-glow {
+      position: fixed;
+      top: -50%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 150%;
+      height: 100%;
+      background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.12) 0%, transparent 60%);
+      pointer-events: none;
+      z-index: -1;
+    }
+    
+    .app {
+      display: flex;
+      min-height: 100vh;
+    }
+    
+    .sidebar {
+      width: 280px;
+      background: rgba(3, 7, 18, 0.95);
+      backdrop-filter: blur(20px);
+      border-right: 1px solid var(--border);
+      padding: 1.5rem;
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      height: 100vh;
+      overflow-y: auto;
+      z-index: 50;
+    }
+    
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      margin-bottom: 2rem;
+      text-decoration: none;
+      color: var(--foreground);
+    }
+    
+    .logo-icon {
+      width: 40px;
+      height: 40px;
+      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      font-size: 1.125rem;
+    }
+    
+    .logo-text {
+      font-size: 1.25rem;
+      font-weight: 700;
+      background: linear-gradient(135deg, var(--foreground), var(--muted));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    
+    .guild-selector {
+      margin-bottom: 1.5rem;
+    }
+    
+    .guild-selector-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.875rem 1rem;
+      background: var(--card);
+      border: 1px solid var(--card-border);
+      border-radius: 12px;
+      cursor: pointer;
+      transition: all 0.2s;
+      backdrop-filter: blur(10px);
+    }
+    
+    .guild-selector-header:hover {
+      border-color: var(--card-border-hover);
+    }
+    
+    .guild-selector-header.open {
+      border-radius: 12px 12px 0 0;
+      border-bottom-color: transparent;
+    }
+    
+    .selected-guild {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .selected-guild-icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
+      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 0.875rem;
+      flex-shrink: 0;
+      overflow: hidden;
+    }
+    
+    .selected-guild-icon img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    
+    .selected-guild-name {
+      font-weight: 500;
+      font-size: 0.9rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .guild-selector-arrow {
+      color: var(--muted);
+      transition: transform 0.2s;
+    }
+    
+    .guild-selector-header.open .guild-selector-arrow {
+      transform: rotate(180deg);
+    }
+    
+    .guild-dropdown {
+      display: none;
+      background: var(--card);
+      border: 1px solid var(--card-border);
+      border-top: none;
+      border-radius: 0 0 12px 12px;
+      max-height: 280px;
+      overflow-y: auto;
+      backdrop-filter: blur(10px);
+    }
+    
+    .guild-dropdown.open {
+      display: block;
+    }
+    
+    .guild-card {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.875rem 1rem;
+      cursor: pointer;
+      transition: all 0.15s;
+      border-left: 3px solid transparent;
+    }
+    
+    .guild-card:hover {
+      background: rgba(99, 102, 241, 0.08);
+    }
+    
+    .guild-card.active {
+      background: rgba(99, 102, 241, 0.12);
+      border-left-color: var(--primary);
+    }
+    
+    .guild-card:last-child {
+      border-radius: 0 0 10px 10px;
+    }
+    
+    .guild-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 0.9rem;
+      flex-shrink: 0;
+      overflow: hidden;
+    }
+    
+    .guild-icon img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    
+    .guild-info {
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .guild-name {
+      font-weight: 500;
+      font-size: 0.9rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .guild-status {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.75rem;
+      color: var(--muted);
+      margin-top: 0.125rem;
+    }
+    
+    .guild-admin-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      padding: 0.125rem 0.5rem;
+      background: rgba(99, 102, 241, 0.15);
+      border: 1px solid rgba(99, 102, 241, 0.3);
+      border-radius: 6px;
+      color: var(--primary-light);
+      font-size: 0.65rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+    }
+    
+    .guild-member-count {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+    
+    .guild-check {
+      color: var(--primary);
+      opacity: 0;
+      transition: opacity 0.15s;
+    }
+    
+    .guild-card.active .guild-check {
+      opacity: 1;
+    }
+    
+    .nav-section {
+      margin-bottom: 1.5rem;
+    }
+    
+    .nav-section-title {
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      color: var(--muted);
+      margin-bottom: 0.75rem;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      padding-left: 0.5rem;
+    }
+    
+    .nav-item {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.75rem 1rem;
+      border-radius: 10px;
+      color: var(--muted-foreground);
+      text-decoration: none;
+      transition: all 0.2s;
+      cursor: pointer;
+      margin-bottom: 0.25rem;
+      font-size: 0.9rem;
+      font-weight: 500;
+    }
+    
+    .nav-item:hover {
+      background: rgba(99, 102, 241, 0.08);
+      color: var(--foreground);
+    }
+    
+    .nav-item.active {
+      background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(59, 130, 246, 0.1));
+      border: 1px solid rgba(99, 102, 241, 0.25);
+      color: var(--foreground);
+    }
+    
+    .nav-icon { width: 20px; text-align: center; font-size: 1rem; }
+    
+    .user-card {
+      margin-top: auto;
+      padding: 1rem;
+      background: var(--card);
+      border: 1px solid var(--card-border);
+      border-radius: 14px;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      backdrop-filter: blur(10px);
+    }
+    
+    .user-avatar {
+      width: 44px;
+      height: 44px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
+      object-fit: cover;
+    }
+    
+    .user-info {
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .user-name {
+      font-weight: 600;
+      font-size: 0.9rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .user-level {
+      font-size: 0.75rem;
+      color: var(--muted);
+    }
+    
+    .main {
+      flex: 1;
+      margin-left: 280px;
+      padding: 2.5rem;
+      max-width: calc(100vw - 280px);
+    }
+    
+    .page-header {
+      margin-bottom: 2rem;
+    }
+    
+    .page-title {
+      font-size: 2rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+      letter-spacing: -0.02em;
+    }
+    
+    .page-subtitle {
+      color: var(--muted);
+      font-size: 1rem;
+    }
+    
+    .text-gradient {
+      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2), var(--gradient-3));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-size: 200% 200%;
+      animation: gradient-shift 4s ease-in-out infinite;
+    }
+    
+    @keyframes gradient-shift {
+      0%, 100% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+    }
+    
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 1rem;
+      margin-bottom: 2rem;
+    }
+    
+    .stat-card {
+      background: var(--card);
+      border: 1px solid var(--card-border);
+      border-radius: 16px;
+      padding: 1.5rem;
+      backdrop-filter: blur(10px);
+      transition: all 0.3s;
+      position: relative;
+      overflow: hidden;
+    }
+    
+    .stat-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, var(--primary), transparent);
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    
+    .stat-card:hover {
+      border-color: var(--card-border-hover);
+      transform: translateY(-2px);
+    }
+    
+    .stat-card:hover::before {
+      opacity: 1;
+    }
+    
+    .stat-label {
+      font-size: 0.8rem;
+      color: var(--muted);
+      margin-bottom: 0.5rem;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    
+    .stat-value {
+      font-size: 1.75rem;
+      font-weight: 700;
+      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin-bottom: 0.25rem;
+    }
+    
+    .stat-sub {
+      font-size: 0.75rem;
+      color: var(--muted);
+    }
+    
+    .card {
+      background: var(--card);
+      border: 1px solid var(--card-border);
+      border-radius: 16px;
+      margin-bottom: 1.5rem;
+      backdrop-filter: blur(10px);
+      overflow: hidden;
+    }
+    
+    .card-header {
+      padding: 1.25rem 1.5rem;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    .card-title {
+      font-size: 1rem;
+      font-weight: 600;
+    }
+    
+    .card-body { padding: 1.5rem; }
+    
+    .progress-bar {
+      height: 8px;
+      background: rgba(51, 65, 85, 0.5);
+      border-radius: 4px;
+      overflow: hidden;
+      margin-top: 0.5rem;
+    }
+    
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, var(--gradient-1), var(--gradient-2));
+      border-radius: 4px;
+      transition: width 0.5s ease;
+    }
+    
+    .achievement-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 1rem;
+    }
+    
+    .achievement-item {
+      display: flex;
+      gap: 1rem;
+      padding: 1.25rem;
+      background: var(--card);
+      border: 1px solid var(--card-border);
+      border-radius: 14px;
+      transition: all 0.3s;
+      backdrop-filter: blur(10px);
+    }
+    
+    .achievement-item:hover {
+      border-color: var(--card-border-hover);
+      transform: translateY(-2px);
+    }
+    
+    .achievement-item.locked {
+      opacity: 0.5;
+    }
+    
+    .achievement-icon {
+      width: 52px;
+      height: 52px;
+      background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(59, 130, 246, 0.1));
+      border: 1px solid rgba(99, 102, 241, 0.3);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.5rem;
+      flex-shrink: 0;
+    }
+    
+    .achievement-info h4 {
+      font-weight: 600;
+      margin-bottom: 0.25rem;
+      font-size: 0.95rem;
+    }
+    
+    .achievement-info p {
+      font-size: 0.85rem;
+      color: var(--muted);
+      line-height: 1.5;
+    }
+    
+    .quest-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1.25rem;
+      background: var(--card);
+      border: 1px solid var(--card-border);
+      border-radius: 14px;
+      margin-bottom: 0.75rem;
+      transition: all 0.3s;
+      backdrop-filter: blur(10px);
+    }
+    
+    .quest-item:hover {
+      border-color: var(--card-border-hover);
+    }
+    
+    .quest-info { flex: 1; }
+    
+    .quest-name {
+      font-weight: 600;
+      margin-bottom: 0.25rem;
+      font-size: 0.95rem;
+    }
+    
+    .quest-desc {
+      font-size: 0.85rem;
+      color: var(--muted);
+    }
+    
+    .quest-progress {
+      text-align: right;
+      min-width: 100px;
+    }
+    
+    .quest-progress-text {
+      font-weight: 600;
+      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    
+    .shop-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      gap: 1rem;
+    }
+    
+    .shop-item {
+      background: var(--card);
+      border: 1px solid var(--card-border);
+      border-radius: 16px;
+      padding: 1.5rem;
+      text-align: center;
+      transition: all 0.3s;
+      backdrop-filter: blur(10px);
+      position: relative;
+      overflow: hidden;
+    }
+    
+    .shop-item::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, var(--primary), transparent);
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    
+    .shop-item:hover {
+      border-color: var(--card-border-hover);
+      transform: translateY(-4px);
+    }
+    
+    .shop-item:hover::before {
+      opacity: 1;
+    }
+    
+    .shop-icon {
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+    }
+    
+    .shop-name {
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      font-size: 0.95rem;
+    }
+    
+    .shop-price {
+      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-weight: 700;
+    }
+    
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.625rem 1.25rem;
+      border-radius: 10px;
+      font-weight: 600;
+      text-decoration: none;
+      transition: all 0.2s;
+      border: none;
+      cursor: pointer;
+      font-size: 0.875rem;
+    }
+    
+    .btn-primary {
+      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
+      color: white;
+    }
+    
+    .btn-primary:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
+    }
+    
+    .btn-secondary {
+      background: var(--secondary);
+      border: 1px solid var(--border);
+      color: var(--foreground);
+    }
+    
+    .btn-secondary:hover {
+      background: rgba(51, 65, 85, 0.5);
+      border-color: var(--primary);
+    }
+    
+    .btn-icon {
+      padding: 0.5rem;
+      background: transparent;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--muted);
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    
+    .btn-icon:hover {
+      background: rgba(99, 102, 241, 0.1);
+      border-color: var(--primary);
+      color: var(--foreground);
+    }
+    
+    .btn-icon.danger:hover {
+      background: rgba(239, 68, 68, 0.1);
+      border-color: var(--danger);
+      color: var(--danger);
+    }
+    
+    .leaderboard-item {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      padding: 1rem 1.25rem;
+      border-radius: 12px;
+      margin-bottom: 0.5rem;
+      background: var(--card);
+      border: 1px solid var(--card-border);
+      transition: all 0.2s;
+    }
+    
+    .leaderboard-item:hover {
+      border-color: var(--card-border-hover);
+    }
+    
+    .leaderboard-item.top-3 {
+      background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(59, 130, 246, 0.08));
+      border: 1px solid rgba(99, 102, 241, 0.3);
+    }
+    
+    .leaderboard-rank {
+      width: 36px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      border-radius: 10px;
+      background: rgba(51, 65, 85, 0.5);
+      font-size: 0.9rem;
+    }
+    
+    .leaderboard-item.top-3 .leaderboard-rank {
+      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
+    }
+    
+    .leaderboard-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
+      object-fit: cover;
+    }
+    
+    .leaderboard-name { flex: 1; font-weight: 500; }
+    
+    .leaderboard-xp {
+      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-weight: 700;
+    }
+    
+    .tabs {
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 1.5rem;
+      padding-bottom: 1rem;
+      border-bottom: 1px solid var(--border);
+    }
+    
+    .tab {
+      padding: 0.625rem 1.25rem;
+      border-radius: 8px;
+      cursor: pointer;
+      color: var(--muted);
+      transition: all 0.2s;
+      font-weight: 500;
+      font-size: 0.9rem;
+    }
+    
+    .tab:hover { 
+      color: var(--foreground);
+      background: rgba(99, 102, 241, 0.08);
+    }
+    
+    .tab.active {
+      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
+      color: white;
+    }
+    
+    .empty-state {
+      text-align: center;
+      padding: 4rem 2rem;
+      color: var(--muted);
+    }
+    
+    .empty-state-icon {
+      font-size: 3.5rem;
+      margin-bottom: 1rem;
+      opacity: 0.5;
+    }
+    
+    .login-prompt {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      text-align: center;
+      padding: 2rem;
+    }
+    
+    .login-prompt h1 {
+      font-size: 2.5rem;
+      font-weight: 700;
+      margin-bottom: 1rem;
+      letter-spacing: -0.02em;
+    }
+    
+    .login-prompt p {
+      color: var(--muted);
+      margin-bottom: 2.5rem;
+      font-size: 1.1rem;
+    }
+    
+    .hidden { display: none !important; }
+    
+    .loading-spinner {
+      display: inline-block;
+      width: 28px;
+      height: 28px;
+      border: 3px solid rgba(51, 65, 85, 0.5);
+      border-top-color: var(--primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    
+    @keyframes spin { to { transform: rotate(360deg); } }
+    
     .admin-form { margin-bottom: 2rem; }
     
     .form-grid {
@@ -45,16 +862,16 @@
     }
     
     .form-group label {
-      font-size: 0.875rem;
+      font-size: 0.85rem;
       font-weight: 500;
       color: var(--foreground);
     }
     
     .form-input {
       padding: 0.75rem 1rem;
-      background: var(--secondary);
+      background: rgba(30, 41, 59, 0.5);
       border: 1px solid var(--border);
-      border-radius: 8px;
+      border-radius: 10px;
       color: var(--foreground);
       font-family: inherit;
       font-size: 0.875rem;
@@ -63,17 +880,17 @@
     
     .form-input:focus {
       outline: none;
-      border-color: var(--aethex-500);
-      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
     }
     
     .form-input::placeholder {
-      color: var(--muted-foreground);
+      color: var(--muted);
     }
     
     .form-hint {
       font-size: 0.75rem;
-      color: var(--muted-foreground);
+      color: var(--muted);
     }
     
     .form-toggle {
@@ -89,11 +906,11 @@
     }
     
     .toggle-slider {
-      width: 44px;
-      height: 24px;
-      background: var(--secondary);
+      width: 48px;
+      height: 26px;
+      background: rgba(51, 65, 85, 0.5);
       border: 1px solid var(--border);
-      border-radius: 12px;
+      border-radius: 13px;
       position: relative;
       transition: all 0.2s;
     }
@@ -103,20 +920,20 @@
       position: absolute;
       top: 2px;
       left: 2px;
-      width: 18px;
-      height: 18px;
-      background: var(--muted-foreground);
+      width: 20px;
+      height: 20px;
+      background: var(--muted);
       border-radius: 50%;
       transition: all 0.2s;
     }
     
     .form-toggle input:checked + .toggle-slider {
-      background: var(--aethex-500);
-      border-color: var(--aethex-500);
+      background: var(--primary);
+      border-color: var(--primary);
     }
     
     .form-toggle input:checked + .toggle-slider::before {
-      left: 22px;
+      left: 24px;
       background: white;
     }
     
@@ -133,13 +950,13 @@
     
     .save-status {
       margin-top: 1rem;
-      padding: 0.75rem 1rem;
-      border-radius: 8px;
+      padding: 0.875rem 1.25rem;
+      border-radius: 10px;
       font-size: 0.875rem;
     }
     
     .save-status.success {
-      background: rgba(34, 197, 94, 0.1);
+      background: rgba(16, 185, 129, 0.1);
       border: 1px solid var(--success);
       color: var(--success);
     }
@@ -165,14 +982,15 @@
       display: flex;
       align-items: center;
       gap: 1rem;
-      padding: 1rem;
-      background: var(--secondary);
-      border-radius: 10px;
+      padding: 1.25rem;
+      background: var(--card);
+      border: 1px solid var(--card-border);
+      border-radius: 14px;
       transition: all 0.2s;
     }
     
     .item-row:hover {
-      background: var(--card-hover);
+      border-color: var(--card-border-hover);
     }
     
     .item-info {
@@ -183,11 +1001,12 @@
     .item-name {
       font-weight: 600;
       margin-bottom: 0.25rem;
+      font-size: 0.95rem;
     }
     
     .item-desc {
-      font-size: 0.875rem;
-      color: var(--muted-foreground);
+      font-size: 0.85rem;
+      color: var(--muted);
     }
     
     .item-actions {
@@ -195,732 +1014,82 @@
       gap: 0.5rem;
     }
     
-    .btn-icon {
-      padding: 0.5rem;
-      background: transparent;
-      border: 1px solid var(--border);
+    .item-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 0.25rem 0.625rem;
       border-radius: 6px;
-      color: var(--muted-foreground);
-      cursor: pointer;
-      transition: all 0.2s;
+      font-size: 0.7rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+      margin-left: 0.5rem;
     }
     
-    .btn-icon:hover {
-      background: var(--secondary);
-      color: var(--foreground);
+    .item-badge.active {
+      background: rgba(16, 185, 129, 0.15);
+      color: var(--success);
+      border: 1px solid rgba(16, 185, 129, 0.3);
     }
     
-    .btn-icon.danger:hover {
-      background: rgba(239, 68, 68, 0.1);
-      border-color: var(--danger);
-      color: var(--danger);
+    .item-badge.inactive {
+      background: rgba(245, 158, 11, 0.15);
+      color: var(--warning);
+      border: 1px solid rgba(245, 158, 11, 0.3);
+    }
+    
+    .item-badge.hidden {
+      background: rgba(100, 116, 139, 0.15);
+      color: var(--muted);
+      border: 1px solid rgba(100, 116, 139, 0.3);
     }
     
     .modal {
       position: fixed;
       inset: 0;
-      background: rgba(0, 0, 0, 0.8);
+      background: rgba(3, 7, 18, 0.9);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 1000;
       padding: 1rem;
+      backdrop-filter: blur(8px);
     }
     
     .modal-content {
-      background: var(--card);
-      border: 1px solid var(--border);
-      border-radius: 16px;
+      background: rgba(15, 23, 42, 0.95);
+      border: 1px solid var(--card-border);
+      border-radius: 20px;
       max-width: 600px;
       width: 100%;
       max-height: 90vh;
       overflow-y: auto;
+      backdrop-filter: blur(20px);
     }
     
     .modal-header {
-      padding: 1.25rem 1.5rem;
+      padding: 1.5rem 1.75rem;
       border-bottom: 1px solid var(--border);
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
     
-    .modal-body {
-      padding: 1.5rem;
-    }
-    
-    .modal-footer {
-      padding: 1rem 1.5rem;
-      border-top: 1px solid var(--border);
-      display: flex;
-      justify-content: flex-end;
-      gap: 0.75rem;
-    }
-    
-    body {
-      font-family: 'Fira Code', 'Source Code Pro', monospace;
-      background: var(--background);
-      color: var(--foreground);
-      min-height: 100vh;
-    }
-    
-    .wallpaper {
-      position: fixed;
-      inset: 0;
-      background-image: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(96, 165, 250, 0.05) 100%);
-      pointer-events: none;
-      z-index: -1;
-    }
-    
-    .app {
-      display: flex;
-      min-height: 100vh;
-    }
-    
-    .sidebar {
-      width: 260px;
-      background: rgba(10, 10, 20, 0.95);
-      border-right: 1px solid var(--border);
-      padding: 1.5rem;
-      display: flex;
-      flex-direction: column;
-      position: fixed;
-      height: 100vh;
-      overflow-y: auto;
-    }
-    
-    .logo {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      margin-bottom: 2rem;
-      text-decoration: none;
-      color: var(--foreground);
-    }
-    
-    .logo-icon {
-      width: 36px;
-      height: 36px;
-      background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 700;
-    }
-    
-    .logo-text {
-      font-size: 1.25rem;
-      font-weight: 700;
-      background: linear-gradient(to right, var(--aethex-400), var(--neon-blue));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-    
-    .guild-selector {
-      margin-bottom: 1.5rem;
-    }
-    
-    .guild-selector-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0.75rem 1rem;
-      background: var(--secondary);
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-    
-    .guild-selector-header:hover {
-      background: var(--card-hover);
-      border-color: var(--aethex-500);
-    }
-    
-    .guild-selector-header.open {
-      border-radius: 10px 10px 0 0;
-      border-bottom-color: transparent;
-    }
-    
-    .selected-guild {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      flex: 1;
-      min-width: 0;
-    }
-    
-    .selected-guild-icon {
-      width: 32px;
-      height: 32px;
-      border-radius: 8px;
-      background: var(--muted);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 600;
-      font-size: 0.875rem;
-      flex-shrink: 0;
-      overflow: hidden;
-    }
-    
-    .selected-guild-icon img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-    
-    .selected-guild-name {
-      font-weight: 500;
-      font-size: 0.875rem;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    
-    .guild-selector-arrow {
-      color: var(--muted-foreground);
-      transition: transform 0.2s;
-    }
-    
-    .guild-selector-header.open .guild-selector-arrow {
-      transform: rotate(180deg);
-    }
-    
-    .guild-dropdown {
-      display: none;
-      background: var(--secondary);
-      border: 1px solid var(--border);
-      border-top: none;
-      border-radius: 0 0 10px 10px;
-      max-height: 280px;
-      overflow-y: auto;
-    }
-    
-    .guild-dropdown.open {
-      display: block;
-    }
-    
-    .guild-card {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      padding: 0.75rem 1rem;
-      cursor: pointer;
-      transition: all 0.15s;
-      border-left: 3px solid transparent;
-    }
-    
-    .guild-card:hover {
-      background: var(--card-hover);
-    }
-    
-    .guild-card.active {
-      background: rgba(59, 130, 246, 0.1);
-      border-left-color: var(--aethex-500);
-    }
-    
-    .guild-card:last-child {
-      border-radius: 0 0 8px 8px;
-    }
-    
-    .guild-icon {
-      width: 36px;
-      height: 36px;
-      border-radius: 8px;
-      background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 600;
-      font-size: 0.875rem;
-      flex-shrink: 0;
-      overflow: hidden;
-    }
-    
-    .guild-icon img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-    
-    .guild-info {
-      flex: 1;
-      min-width: 0;
-    }
-    
-    .guild-name {
-      font-weight: 500;
-      font-size: 0.875rem;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    
-    .guild-status {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-size: 0.7rem;
-      color: var(--muted-foreground);
-      margin-top: 0.125rem;
-    }
-    
-    .guild-admin-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.25rem;
-      padding: 0.125rem 0.375rem;
-      background: rgba(59, 130, 246, 0.15);
-      border: 1px solid rgba(59, 130, 246, 0.3);
-      border-radius: 4px;
-      color: var(--aethex-400);
-      font-size: 0.65rem;
-      font-weight: 500;
-      text-transform: uppercase;
-    }
-    
-    .guild-member-count {
-      display: flex;
-      align-items: center;
-      gap: 0.25rem;
-    }
-    
-    .guild-check {
-      color: var(--aethex-500);
-      opacity: 0;
-      transition: opacity 0.15s;
-    }
-    
-    .guild-card.active .guild-check {
-      opacity: 1;
-    }
-    
-    .nav-section {
-      margin-bottom: 1.5rem;
-    }
-    
-    .nav-section-title {
-      font-size: 0.75rem;
-      text-transform: uppercase;
-      color: var(--muted-foreground);
-      margin-bottom: 0.75rem;
-      font-weight: 600;
-      letter-spacing: 0.05em;
-    }
-    
-    .nav-item {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      padding: 0.75rem 1rem;
-      border-radius: 8px;
-      color: var(--muted-foreground);
-      text-decoration: none;
-      transition: all 0.2s;
-      cursor: pointer;
-      margin-bottom: 0.25rem;
-    }
-    
-    .nav-item:hover, .nav-item.active {
-      background: var(--secondary);
-      color: var(--foreground);
-    }
-    
-    .nav-item.active {
-      background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.1));
-      border: 1px solid rgba(139, 92, 246, 0.3);
-    }
-    
-    .nav-icon { width: 20px; text-align: center; }
-    
-    .user-card {
-      margin-top: auto;
-      padding: 1rem;
-      background: var(--secondary);
-      border-radius: 12px;
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-    }
-    
-    .user-avatar {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      background: var(--aethex-500);
-    }
-    
-    .user-info {
-      flex: 1;
-      min-width: 0;
-    }
-    
-    .user-name {
-      font-weight: 600;
-      font-size: 0.875rem;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    
-    .user-level {
-      font-size: 0.75rem;
-      color: var(--muted-foreground);
-    }
-    
-    .main {
-      flex: 1;
-      margin-left: 260px;
-      padding: 2rem;
-      max-width: calc(100vw - 260px);
-    }
-    
-    .page-header {
-      margin-bottom: 2rem;
-    }
-    
-    .page-title {
-      font-size: 1.75rem;
-      font-weight: 700;
-      margin-bottom: 0.5rem;
-    }
-    
-    .page-subtitle {
-      color: var(--muted-foreground);
-    }
-    
-    .stats-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 1rem;
-      margin-bottom: 2rem;
-    }
-    
-    .stat-card {
-      background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.05));
-      border: 1px solid rgba(139, 92, 246, 0.2);
-      border-radius: 12px;
-      padding: 1.5rem;
-      transition: all 0.3s;
-    }
-    
-    .stat-card:hover {
-      border-color: var(--aethex-500);
-      transform: translateY(-2px);
-    }
-    
-    .stat-label {
-      font-size: 0.875rem;
-      color: var(--muted-foreground);
-      margin-bottom: 0.5rem;
-    }
-    
-    .stat-value {
-      font-size: 2rem;
-      font-weight: 700;
-      color: var(--aethex-400);
-    }
-    
-    .stat-sub {
-      font-size: 0.75rem;
-      color: var(--muted-foreground);
-      margin-top: 0.25rem;
-    }
-    
-    .card {
-      background: var(--card);
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      margin-bottom: 1.5rem;
-    }
-    
-    .card-header {
-      padding: 1.25rem 1.5rem;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    
-    .card-title {
+    .modal-header h3 {
       font-size: 1.125rem;
       font-weight: 600;
     }
     
-    .card-body { padding: 1.5rem; }
-    
-    .progress-bar {
-      height: 8px;
-      background: var(--secondary);
-      border-radius: 4px;
-      overflow: hidden;
-      margin-top: 0.5rem;
+    .modal-body {
+      padding: 1.75rem;
     }
     
-    .progress-fill {
-      height: 100%;
-      background: linear-gradient(90deg, var(--aethex-500), var(--neon-blue));
-      border-radius: 4px;
-      transition: width 0.5s ease;
-    }
-    
-    .achievement-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-      gap: 1rem;
-    }
-    
-    .achievement-item {
+    .modal-footer {
+      padding: 1.25rem 1.75rem;
+      border-top: 1px solid var(--border);
       display: flex;
-      gap: 1rem;
-      padding: 1rem;
-      background: var(--secondary);
-      border-radius: 10px;
-      transition: all 0.2s;
-    }
-    
-    .achievement-item:hover {
-      background: var(--card-hover);
-    }
-    
-    .achievement-item.locked {
-      opacity: 0.5;
-    }
-    
-    .achievement-icon {
-      width: 48px;
-      height: 48px;
-      background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
-      border-radius: 10px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.5rem;
-      flex-shrink: 0;
-    }
-    
-    .achievement-info h4 {
-      font-weight: 600;
-      margin-bottom: 0.25rem;
-    }
-    
-    .achievement-info p {
-      font-size: 0.875rem;
-      color: var(--muted-foreground);
-    }
-    
-    .quest-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 1rem;
-      background: var(--secondary);
-      border-radius: 10px;
-      margin-bottom: 0.75rem;
-    }
-    
-    .quest-info { flex: 1; }
-    
-    .quest-name {
-      font-weight: 600;
-      margin-bottom: 0.25rem;
-    }
-    
-    .quest-desc {
-      font-size: 0.875rem;
-      color: var(--muted-foreground);
-    }
-    
-    .quest-progress {
-      text-align: right;
-      min-width: 100px;
-    }
-    
-    .quest-progress-text {
-      font-weight: 600;
-      color: var(--aethex-400);
-    }
-    
-    .shop-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-      gap: 1rem;
-    }
-    
-    .shop-item {
-      background: var(--secondary);
-      border-radius: 12px;
-      padding: 1.25rem;
-      text-align: center;
-      transition: all 0.3s;
-      border: 1px solid transparent;
-    }
-    
-    .shop-item:hover {
-      border-color: var(--aethex-500);
-      transform: translateY(-2px);
-    }
-    
-    .shop-icon {
-      font-size: 2.5rem;
-      margin-bottom: 0.75rem;
-    }
-    
-    .shop-name {
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-    }
-    
-    .shop-price {
-      color: var(--aethex-400);
-      font-weight: 600;
-    }
-    
-    .btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.5rem 1rem;
-      border-radius: 8px;
-      font-weight: 600;
-      text-decoration: none;
-      transition: all 0.2s;
-      border: none;
-      cursor: pointer;
-      font-size: 0.875rem;
-    }
-    
-    .btn-primary {
-      background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
-      color: white;
-    }
-    
-    .btn-primary:hover {
-      transform: translateY(-1px);
-      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
-    }
-    
-    .btn-secondary {
-      background: var(--secondary);
-      color: var(--foreground);
-      border: 1px solid var(--border);
-    }
-    
-    .leaderboard-item {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      padding: 0.75rem 1rem;
-      border-radius: 8px;
-      margin-bottom: 0.5rem;
-      background: var(--secondary);
-    }
-    
-    .leaderboard-item.top-3 {
-      background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.1));
-      border: 1px solid rgba(139, 92, 246, 0.3);
-    }
-    
-    .leaderboard-rank {
-      width: 32px;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 700;
-      border-radius: 8px;
-      background: var(--muted);
-    }
-    
-    .leaderboard-item.top-3 .leaderboard-rank {
-      background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
-    }
-    
-    .leaderboard-avatar {
-      width: 36px;
-      height: 36px;
-      border-radius: 50%;
-      background: var(--aethex-500);
-    }
-    
-    .leaderboard-name { flex: 1; font-weight: 500; }
-    .leaderboard-xp { color: var(--aethex-400); font-weight: 600; }
-    
-    .tabs {
-      display: flex;
-      gap: 0.5rem;
-      margin-bottom: 1.5rem;
-      border-bottom: 1px solid var(--border);
-      padding-bottom: 0.5rem;
-    }
-    
-    .tab {
-      padding: 0.5rem 1rem;
-      border-radius: 6px;
-      cursor: pointer;
-      color: var(--muted-foreground);
-      transition: all 0.2s;
-    }
-    
-    .tab:hover { color: var(--foreground); }
-    
-    .tab.active {
-      background: var(--aethex-500);
-      color: white;
-    }
-    
-    .empty-state {
-      text-align: center;
-      padding: 3rem;
-      color: var(--muted-foreground);
-    }
-    
-    .empty-state-icon {
-      font-size: 3rem;
-      margin-bottom: 1rem;
-      opacity: 0.5;
-    }
-    
-    .login-prompt {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      min-height: 100vh;
-      text-align: center;
-      padding: 2rem;
-    }
-    
-    .login-prompt h1 {
-      font-size: 2rem;
-      margin-bottom: 1rem;
-    }
-    
-    .login-prompt p {
-      color: var(--muted-foreground);
-      margin-bottom: 2rem;
-    }
-    
-    .hidden { display: none !important; }
-    
-    .loading-spinner {
-      display: inline-block;
-      width: 24px;
-      height: 24px;
-      border: 3px solid var(--secondary);
-      border-top-color: var(--aethex-500);
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    
-    @keyframes spin { to { transform: rotate(360deg); } }
-    
-    .text-gradient {
-      background: linear-gradient(to right, var(--aethex-400), var(--neon-blue));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
+      justify-content: flex-end;
+      gap: 0.75rem;
     }
     
     @media (max-width: 768px) {
@@ -930,12 +1099,15 @@
         transition: transform 0.3s;
       }
       .sidebar.open { transform: translateX(0); }
-      .main { margin-left: 0; max-width: 100%; }
+      .main { margin-left: 0; max-width: 100%; padding: 1.5rem; }
+      .stats-grid { grid-template-columns: repeat(2, 1fr); }
+      .page-title { font-size: 1.5rem; }
     }
   </style>
 </head>
 <body>
-  <div class="wallpaper"></div>
+  <div class="bg-grid"></div>
+  <div class="bg-glow"></div>
   
   <div id="loginPrompt" class="login-prompt">
     <h1>Welcome to <span class="text-gradient">AeThex</span></h1>
@@ -1074,7 +1246,7 @@
             <div class="progress-bar">
               <div class="progress-fill" id="levelProgress" style="width:0%"></div>
             </div>
-            <p style="margin-top:0.75rem;color:var(--muted-foreground);font-size:0.875rem">
+            <p style="margin-top:0.75rem;color:var(--muted);font-size:0.875rem">
               <span id="xpCurrent">0</span> / <span id="xpRequired">100</span> XP
             </p>
           </div>
@@ -1083,7 +1255,7 @@
       
       <div id="page-leaderboard" class="page hidden">
         <div class="page-header">
-          <h1 class="page-title">Leaderboard</h1>
+          <h1 class="page-title"><span class="text-gradient">Leaderboard</span></h1>
           <p class="page-subtitle">See who's on top</p>
         </div>
         
@@ -1093,19 +1265,17 @@
           <div class="tab" data-lb-type="weekly">Weekly</div>
         </div>
         
-        <div class="card">
-          <div class="card-body" id="leaderboardList">
-            <div class="empty-state">
-              <div class="empty-state-icon">🏆</div>
-              <p>Select a server to view the leaderboard</p>
-            </div>
+        <div id="leaderboardList">
+          <div class="empty-state">
+            <div class="empty-state-icon">🏆</div>
+            <p>Select a server to view the leaderboard</p>
           </div>
         </div>
       </div>
       
       <div id="page-achievements" class="page hidden">
         <div class="page-header">
-          <h1 class="page-title">Achievements</h1>
+          <h1 class="page-title"><span class="text-gradient">Achievements</span></h1>
           <p class="page-subtitle">Collect badges and show off your accomplishments</p>
         </div>
         
@@ -1119,23 +1289,21 @@
       
       <div id="page-quests" class="page hidden">
         <div class="page-header">
-          <h1 class="page-title">Quests</h1>
+          <h1 class="page-title"><span class="text-gradient">Quests</span></h1>
           <p class="page-subtitle">Complete challenges to earn rewards</p>
         </div>
         
-        <div class="card">
-          <div class="card-body" id="questList">
-            <div class="empty-state">
-              <div class="empty-state-icon">🎯</div>
-              <p>Select a server to view quests</p>
-            </div>
+        <div id="questList">
+          <div class="empty-state">
+            <div class="empty-state-icon">🎯</div>
+            <p>Select a server to view quests</p>
           </div>
         </div>
       </div>
       
       <div id="page-shop" class="page hidden">
         <div class="page-header">
-          <h1 class="page-title">Shop</h1>
+          <h1 class="page-title"><span class="text-gradient">Shop</span></h1>
           <p class="page-subtitle">Spend your XP on rewards</p>
         </div>
         
@@ -1149,7 +1317,7 @@
       
       <div id="page-inventory" class="page hidden">
         <div class="page-header">
-          <h1 class="page-title">Inventory</h1>
+          <h1 class="page-title"><span class="text-gradient">Inventory</span></h1>
           <p class="page-subtitle">Your purchased items and perks</p>
         </div>
         
@@ -1163,37 +1331,11 @@
       
       <div id="page-admin-xp" class="page hidden">
         <div class="page-header">
-          <h1 class="page-title">XP Settings</h1>
+          <h1 class="page-title"><span class="text-gradient">XP Settings</span></h1>
           <p class="page-subtitle">Configure XP earning for your server</p>
         </div>
         
-        <form id="xpSettingsForm" class="admin-form">
-          <div class="card">
-            <div class="card-header">
-              <h3 class="card-title">General Settings</h3>
-            </div>
-            <div class="card-body">
-              <div class="form-grid">
-                <div class="form-group">
-                  <label class="form-toggle">
-                    <input type="checkbox" id="xpEnabled" name="xp_enabled" checked>
-                    <span class="toggle-slider"></span>
-                    <span class="toggle-label">Enable XP System</span>
-                  </label>
-                </div>
-                <div class="form-group">
-                  <label for="levelCurve">Leveling Difficulty</label>
-                  <select id="levelCurve" name="level_curve" class="form-input">
-                    <option value="easy">Easy (50 XP base)</option>
-                    <option value="normal" selected>Normal (100 XP base)</option>
-                    <option value="hard">Hard (200 XP base)</option>
-                  </select>
-                  <span class="form-hint">Formula: level = sqrt(xp / base)</span>
-                </div>
-              </div>
-            </div>
-          </div>
-          
+        <form id="xpSettingsForm" class="admin-form" onsubmit="saveXpConfig(event)">
           <div class="card">
             <div class="card-header">
               <h3 class="card-title">Message XP</h3>
@@ -1201,14 +1343,16 @@
             <div class="card-body">
               <div class="form-grid">
                 <div class="form-group">
-                  <label for="messageXp">XP per Message</label>
-                  <input type="number" id="messageXp" name="message_xp" min="0" max="1000" value="15" class="form-input">
-                  <span class="form-hint">XP earned per message</span>
+                  <label for="xpMsgMin">Min XP per Message</label>
+                  <input type="number" id="xpMsgMin" name="message_xp_min" min="0" max="1000" value="15" class="form-input">
                 </div>
                 <div class="form-group">
-                  <label for="messageCooldown">Message Cooldown (seconds)</label>
-                  <input type="number" id="messageCooldown" name="message_cooldown" min="0" max="3600" value="60" class="form-input">
-                  <span class="form-hint">Time between earning XP from messages</span>
+                  <label for="xpMsgMax">Max XP per Message</label>
+                  <input type="number" id="xpMsgMax" name="message_xp_max" min="0" max="1000" value="25" class="form-input">
+                </div>
+                <div class="form-group">
+                  <label for="xpMsgCooldown">Cooldown (seconds)</label>
+                  <input type="number" id="xpMsgCooldown" name="message_cooldown" min="0" max="3600" value="60" class="form-input">
                 </div>
               </div>
             </div>
@@ -1216,31 +1360,44 @@
           
           <div class="card">
             <div class="card-header">
-              <h3 class="card-title">Reaction XP</h3>
+              <h3 class="card-title">Other XP Sources</h3>
             </div>
             <div class="card-body">
               <div class="form-grid">
                 <div class="form-group">
-                  <label class="form-toggle">
-                    <input type="checkbox" id="reactionXpEnabled" name="reaction_xp_enabled" checked>
-                    <span class="toggle-slider"></span>
-                    <span class="toggle-label">Enable Reaction XP</span>
-                  </label>
+                  <label for="xpReaction">Reaction XP</label>
+                  <input type="number" id="xpReaction" name="reaction_xp" min="0" max="100" value="5" class="form-input">
                 </div>
                 <div class="form-group">
-                  <label for="reactionXpGiven">XP for Giving Reactions</label>
-                  <input type="number" id="reactionXpGiven" name="reaction_xp_given" min="0" max="100" value="2" class="form-input">
-                  <span class="form-hint">XP earned when you react to a message</span>
+                  <label for="xpVoice">Voice XP per Minute</label>
+                  <input type="number" id="xpVoice" name="voice_xp_per_minute" min="0" max="100" value="2" class="form-input">
                 </div>
                 <div class="form-group">
-                  <label for="reactionXpReceived">XP for Receiving Reactions</label>
-                  <input type="number" id="reactionXpReceived" name="reaction_xp_received" min="0" max="100" value="5" class="form-input">
-                  <span class="form-hint">XP earned when someone reacts to your message</span>
+                  <label for="xpDaily">Daily Claim XP</label>
+                  <input type="number" id="xpDaily" name="daily_xp" min="0" max="10000" value="100" class="form-input">
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="card">
+            <div class="card-header">
+              <h3 class="card-title">Leveling Settings</h3>
+            </div>
+            <div class="card-body">
+              <div class="form-grid">
+                <div class="form-group">
+                  <label for="xpBase">XP Base (difficulty)</label>
+                  <input type="number" id="xpBase" name="xp_base" min="10" max="1000" value="100" class="form-input">
+                  <span class="form-hint">Lower = easier leveling</span>
                 </div>
                 <div class="form-group">
-                  <label for="reactionCooldown">Reaction Cooldown (seconds)</label>
-                  <input type="number" id="reactionCooldown" name="reaction_cooldown" min="0" max="3600" value="30" class="form-input">
-                  <span class="form-hint">Time between earning reaction XP</span>
+                  <label for="xpMultiplier">Global XP Multiplier</label>
+                  <input type="number" id="xpMultiplier" name="xp_multiplier" min="0.1" max="10" step="0.1" value="1.0" class="form-input">
+                </div>
+                <div class="form-group">
+                  <label for="weekendMultiplier">Weekend Multiplier</label>
+                  <input type="number" id="weekendMultiplier" name="weekend_multiplier" min="1" max="5" step="0.1" value="1.5" class="form-input">
                 </div>
               </div>
             </div>
@@ -1253,33 +1410,23 @@
             <div class="card-body">
               <div class="form-grid">
                 <div class="form-group">
-                  <label for="levelupChannelId">Announcement Channel ID</label>
-                  <input type="text" id="levelupChannelId" name="levelup_channel_id" placeholder="Leave blank for current channel" class="form-input">
-                  <span class="form-hint">Channel ID for level-up messages</span>
-                </div>
-                <div class="form-group">
-                  <label for="levelupMessage">Custom Level-Up Message</label>
-                  <input type="text" id="levelupMessage" name="levelup_message" placeholder="{user} reached level {level}!" class="form-input">
-                  <span class="form-hint">Use {user}, {level}, {xp} placeholders</span>
+                  <label for="levelUpChannel">Announcement Channel ID</label>
+                  <input type="text" id="levelUpChannel" name="levelup_channel_id" placeholder="Leave blank for current channel" class="form-input">
                 </div>
                 <div class="form-group">
                   <label class="form-toggle">
-                    <input type="checkbox" id="levelupDm" name="levelup_dm">
+                    <input type="checkbox" id="levelUpEnabled" name="levelup_enabled" checked>
+                    <span class="toggle-slider"></span>
+                    <span class="toggle-label">Enable Level-Up Messages</span>
+                  </label>
+                </div>
+                <div class="form-group">
+                  <label class="form-toggle">
+                    <input type="checkbox" id="levelUpDm" name="levelup_dm">
                     <span class="toggle-slider"></span>
                     <span class="toggle-label">Send Level-Up via DM</span>
                   </label>
                 </div>
-                <div class="form-group">
-                  <label class="form-toggle">
-                    <input type="checkbox" id="levelupEmbed" name="levelup_embed" checked>
-                    <span class="toggle-slider"></span>
-                    <span class="toggle-label">Use Rich Embed</span>
-                  </label>
-                </div>
-                <div class="form-group">
-                  <label for="levelupEmbedColor">Embed Color</label>
-                  <input type="color" id="levelupEmbedColor" name="levelup_embed_color" value="#7c3aed" class="form-input" style="height:40px;padding:4px">
-                </div>
               </div>
             </div>
           </div>
@@ -1296,20 +1443,16 @@
       <div id="page-admin-quests" class="page hidden">
         <div class="page-header" style="display:flex;justify-content:space-between;align-items:flex-start">
           <div>
-            <h1 class="page-title">Manage Quests</h1>
+            <h1 class="page-title"><span class="text-gradient">Manage Quests</span></h1>
             <p class="page-subtitle">Create and edit server quests</p>
           </div>
           <button class="btn btn-primary" onclick="openQuestModal()">+ Create Quest</button>
         </div>
         
-        <div class="card">
-          <div class="card-body">
-            <div id="adminQuestList" class="item-list">
-              <div class="empty-state">
-                <div class="empty-state-icon">🎯</div>
-                <p>No quests configured yet</p>
-              </div>
-            </div>
+        <div id="adminQuestList" class="item-list">
+          <div class="empty-state">
+            <div class="empty-state-icon">🎯</div>
+            <p>No quests configured yet</p>
           </div>
         </div>
         <div id="questSaveStatus" class="save-status hidden"></div>
@@ -1399,20 +1542,16 @@
       <div id="page-admin-achievements" class="page hidden">
         <div class="page-header" style="display:flex;justify-content:space-between;align-items:flex-start">
           <div>
-            <h1 class="page-title">Manage Achievements</h1>
+            <h1 class="page-title"><span class="text-gradient">Manage Achievements</span></h1>
             <p class="page-subtitle">Create custom server achievements</p>
           </div>
           <button class="btn btn-primary" onclick="openAchievementModal()">+ Create Achievement</button>
         </div>
         
-        <div class="card">
-          <div class="card-body">
-            <div id="adminAchievementList" class="item-list">
-              <div class="empty-state">
-                <div class="empty-state-icon">🏅</div>
-                <p>No achievements configured yet</p>
-              </div>
-            </div>
+        <div id="adminAchievementList" class="item-list">
+          <div class="empty-state">
+            <div class="empty-state-icon">🏅</div>
+            <p>No achievements configured yet</p>
           </div>
         </div>
         <div id="achievementSaveStatus" class="save-status hidden"></div>
@@ -1466,12 +1605,10 @@
                   <div class="form-group">
                     <label for="achievementXpReward">XP Reward</label>
                     <input type="number" id="achievementXpReward" class="form-input" min="0" value="100">
-                    <span class="form-hint">XP granted when earned</span>
                   </div>
                   <div class="form-group">
                     <label for="achievementRoleReward">Role Reward ID</label>
                     <input type="text" id="achievementRoleReward" class="form-input" placeholder="Leave empty for none">
-                    <span class="form-hint">Role ID to grant (optional)</span>
                   </div>
                 </div>
                 <div class="form-group">
@@ -1496,20 +1633,16 @@
       <div id="page-admin-shop" class="page hidden">
         <div class="page-header" style="display:flex;justify-content:space-between;align-items:flex-start">
           <div>
-            <h1 class="page-title">Manage Shop</h1>
+            <h1 class="page-title"><span class="text-gradient">Manage Shop</span></h1>
             <p class="page-subtitle">Configure shop items and prices</p>
           </div>
           <button class="btn btn-primary" onclick="openShopModal()">+ Add Item</button>
         </div>
         
-        <div class="card">
-          <div class="card-body">
-            <div id="adminShopList" class="item-list">
-              <div class="empty-state">
-                <div class="empty-state-icon">🏪</div>
-                <p>No shop items configured yet</p>
-              </div>
-            </div>
+        <div id="adminShopList" class="item-list">
+          <div class="empty-state">
+            <div class="empty-state-icon">🏪</div>
+            <p>No shop items configured yet</p>
           </div>
         </div>
         <div id="shopSaveStatus" class="save-status hidden"></div>
@@ -1638,7 +1771,6 @@
         
         await loadProfile();
         
-        // Handle URL query params for direct page navigation
         const urlParams = new URLSearchParams(window.location.search);
         const pageParam = urlParams.get('page');
         if (pageParam) {
@@ -1662,7 +1794,7 @@
       dropdown.innerHTML = '';
       
       if (guilds.length === 0) {
-        dropdown.innerHTML = '<div style="padding: 1rem; text-align: center; color: var(--muted-foreground);">No servers found</div>';
+        dropdown.innerHTML = '<div style="padding: 1rem; text-align: center; color: var(--muted);">No servers found</div>';
         return;
       }
       
@@ -1715,7 +1847,6 @@
       }
       
       document.getElementById('selectedGuildName').textContent = guild.name;
-      
       document.getElementById('adminSection').style.display = guild.isAdmin ? 'block' : 'none';
       
       closeGuildDropdown();
@@ -1815,7 +1946,7 @@
       if (!currentGuild) return;
       
       const container = document.getElementById('leaderboardList');
-      container.innerHTML = '<div class="loading-spinner"></div>';
+      container.innerHTML = '<div style="display:flex;justify-content:center;padding:3rem"><div class="loading-spinner"></div></div>';
       
       try {
         const res = await fetch('/api/leaderboard/' + currentGuild + '?type=' + type + '&limit=25');
@@ -1844,7 +1975,7 @@
       if (!currentGuild) return;
       
       const container = document.getElementById('achievementGrid');
-      container.innerHTML = '<div class="loading-spinner"></div>';
+      container.innerHTML = '<div style="display:flex;justify-content:center;padding:3rem;grid-column:1/-1"><div class="loading-spinner"></div></div>';
       
       try {
         const res = await fetch('/api/achievements/' + currentGuild);
@@ -1877,7 +2008,7 @@
       if (!currentGuild) return;
       
       const container = document.getElementById('questList');
-      container.innerHTML = '<div class="loading-spinner"></div>';
+      container.innerHTML = '<div style="display:flex;justify-content:center;padding:3rem"><div class="loading-spinner"></div></div>';
       
       try {
         const res = await fetch('/api/quests/' + currentGuild);
@@ -1907,7 +2038,7 @@
               </div>
               <div class="quest-progress">
                 <div class="quest-progress-text">${progress}/${q.target_value}</div>
-                <div style="font-size:0.75rem;color:var(--muted-foreground)">${q.xp_reward} XP</div>
+                <div style="font-size:0.75rem;color:var(--muted)">${q.xp_reward} XP</div>
               </div>
             </div>
           `;
@@ -1922,7 +2053,7 @@
       if (!currentGuild) return;
       
       const container = document.getElementById('shopGrid');
-      container.innerHTML = '<div class="loading-spinner"></div>';
+      container.innerHTML = '<div style="display:flex;justify-content:center;padding:3rem;grid-column:1/-1"><div class="loading-spinner"></div></div>';
       
       try {
         const res = await fetch('/api/shop/' + currentGuild);
@@ -1933,7 +2064,7 @@
           return;
         }
         
-        const icons = { title: '📛', badge: '🏅', color: '🎨', role: '👑', xp_boost: '⚡', custom: '✨' };
+        const icons = { title: '📛', badge: '🏅', color: '🎨', role: '👑', xp_boost: '⚡', booster: '⚡', background: '🎨', special: '✨', custom: '✨' };
         
         container.innerHTML = data.items.map(item => `
           <div class="shop-item">
@@ -1952,7 +2083,7 @@
       if (!currentGuild) return;
       
       const container = document.getElementById('inventoryGrid');
-      container.innerHTML = '<div class="loading-spinner"></div>';
+      container.innerHTML = '<div style="display:flex;justify-content:center;padding:3rem;grid-column:1/-1"><div class="loading-spinner"></div></div>';
       
       try {
         const res = await fetch('/api/inventory/' + currentGuild);
@@ -1963,13 +2094,13 @@
           return;
         }
         
-        const icons = { title: '📛', badge: '🏅', color: '🎨', role: '👑', xp_boost: '⚡', custom: '✨' };
+        const icons = { title: '📛', badge: '🏅', color: '🎨', role: '👑', xp_boost: '⚡', booster: '⚡', background: '🎨', special: '✨', custom: '✨' };
         
         container.innerHTML = data.inventory.map(item => `
           <div class="shop-item ${item.equipped ? 'equipped' : ''}">
             <div class="shop-icon">${icons[item.shop_items?.item_type] || '🎁'}</div>
             <div class="shop-name">${item.shop_items?.name || 'Unknown Item'}</div>
-            <div style="font-size:0.75rem;color:var(--muted-foreground)">${item.equipped ? 'Equipped' : ''}</div>
+            <div style="font-size:0.75rem;color:var(--muted)">${item.equipped ? 'Equipped' : ''}</div>
           </div>
         `).join('');
         
@@ -2068,7 +2199,7 @@
       if (!currentGuild) return;
       
       const container = document.getElementById('adminQuestList');
-      container.innerHTML = '<div class="loading-spinner"></div>';
+      container.innerHTML = '<div style="display:flex;justify-content:center;padding:3rem"><div class="loading-spinner"></div></div>';
       
       try {
         const res = await fetch('/api/guild/' + currentGuild + '/quests');
@@ -2088,7 +2219,10 @@
           <div class="item-row">
             <div style="font-size:1.5rem">${QUEST_TYPES[q.quest_type]?.emoji || '🎯'}</div>
             <div class="item-info">
-              <div class="item-name">${q.name} ${!q.active ? '<span style="color:var(--warning);font-size:0.75rem">(Inactive)</span>' : ''}</div>
+              <div class="item-name">
+                ${q.name}
+                <span class="item-badge ${q.active ? 'active' : 'inactive'}">${q.active ? 'Active' : 'Inactive'}</span>
+              </div>
               <div class="item-desc">${OBJECTIVES[q.objective] || ''} Target: ${q.target_value} | Reward: ${q.xp_reward} XP</div>
             </div>
             <div class="item-actions">
@@ -2215,7 +2349,7 @@
       if (!currentGuild) return;
       
       const container = document.getElementById('adminAchievementList');
-      container.innerHTML = '<div class="loading-spinner"></div>';
+      container.innerHTML = '<div style="display:flex;justify-content:center;padding:3rem"><div class="loading-spinner"></div></div>';
       
       try {
         const res = await fetch('/api/guild/' + currentGuild + '/achievements');
@@ -2235,7 +2369,10 @@
           <div class="item-row">
             <div style="font-size:1.5rem">${a.icon || '🏆'}</div>
             <div class="item-info">
-              <div class="item-name">${a.name} ${a.hidden ? '<span style="color:var(--muted-foreground);font-size:0.75rem">(Hidden)</span>' : ''}</div>
+              <div class="item-name">
+                ${a.name}
+                ${a.hidden ? '<span class="item-badge hidden">Hidden</span>' : ''}
+              </div>
               <div class="item-desc">${TRIGGER_TYPES[a.trigger_type]?.name || a.trigger_type}: ${a.trigger_value} | Reward: ${a.reward_xp || 0} XP${a.reward_role_id ? ' + Role' : ''}</div>
             </div>
             <div class="item-actions">
@@ -2339,10 +2476,10 @@
       if (!currentGuild) return;
       
       const container = document.getElementById('adminShopList');
-      container.innerHTML = '<div class="loading-spinner"></div>';
+      container.innerHTML = '<div style="display:flex;justify-content:center;padding:3rem"><div class="loading-spinner"></div></div>';
       
       try {
-        const res = await fetch('/api/guild/' + currentGuild + '/shop/admin');
+        const res = await fetch('/api/guild/' + currentGuild + '/shop');
         if (!res.ok) {
           container.innerHTML = '<div class="empty-state"><p>Failed to load shop items</p></div>';
           return;
@@ -2359,8 +2496,11 @@
           <div class="item-row">
             <div style="font-size:1.5rem">${ITEM_TYPES[item.item_type]?.emoji || '🎁'}</div>
             <div class="item-info">
-              <div class="item-name">${item.name} ${!item.enabled ? '<span style="color:var(--warning);font-size:0.75rem">(Disabled)</span>' : ''}</div>
-              <div class="item-desc">${item.price.toLocaleString()} XP | Stock: ${item.stock ?? 'Unlimited'}${item.level_required > 0 ? ' | Level ' + item.level_required : ''}</div>
+              <div class="item-name">
+                ${item.name}
+                <span class="item-badge ${item.enabled ? 'active' : 'inactive'}">${item.enabled ? 'Active' : 'Disabled'}</span>
+              </div>
+              <div class="item-desc">${item.price.toLocaleString()} XP | ${ITEM_TYPES[item.item_type]?.name || item.item_type}</div>
             </div>
             <div class="item-actions">
               <button class="btn-icon" onclick="editShopItem(${item.id})" title="Edit">✏️</button>
@@ -2383,7 +2523,7 @@
       document.getElementById('shopItemType').value = item?.item_type || 'badge';
       document.getElementById('shopItemDescription').value = item?.description || '';
       document.getElementById('shopItemPrice').value = item?.price || 100;
-      document.getElementById('shopItemStock').value = item?.stock ?? '';
+      document.getElementById('shopItemStock').value = item?.stock ?? -1;
       document.getElementById('shopItemLevelReq').value = item?.level_required || 0;
       document.getElementById('shopItemPrestigeReq').value = item?.prestige_required || 0;
       document.getElementById('shopItemEnabled').checked = item?.enabled !== false;
@@ -2405,13 +2545,12 @@
       if (!currentGuild) return;
       
       const itemId = document.getElementById('shopEditId').value;
-      const stockVal = document.getElementById('shopItemStock').value;
       const data = {
         name: document.getElementById('shopItemName').value,
         item_type: document.getElementById('shopItemType').value,
         description: document.getElementById('shopItemDescription').value,
         price: parseInt(document.getElementById('shopItemPrice').value),
-        stock: stockVal === '' || stockVal === '-1' ? null : parseInt(stockVal),
+        stock: parseInt(document.getElementById('shopItemStock').value) || -1,
         level_required: parseInt(document.getElementById('shopItemLevelReq').value) || 0,
         prestige_required: parseInt(document.getElementById('shopItemPrestigeReq').value) || 0,
         enabled: document.getElementById('shopItemEnabled').checked
@@ -2430,7 +2569,7 @@
         
         if (res.ok) {
           closeShopModal();
-          showSaveStatus('shopSaveStatus', itemId ? 'Item updated!' : 'Item added!', 'success');
+          showSaveStatus('shopSaveStatus', itemId ? 'Item updated!' : 'Item created!', 'success');
           await loadAdminShop();
         } else {
           const err = await res.json();
@@ -2442,7 +2581,7 @@
     }
     
     async function deleteShopItem(itemId) {
-      if (!confirm('Are you sure you want to delete this shop item?')) return;
+      if (!confirm('Are you sure you want to delete this item?')) return;
       
       try {
         const res = await fetch('/api/guild/' + currentGuild + '/shop/' + itemId, {
@@ -2460,8 +2599,6 @@
       }
     }
     
-    document.getElementById('xpSettingsForm')?.addEventListener('submit', saveXpConfig);
-    
     init();
   </script>
 </body>