diff --git "a/public/styles.css" "b/public/styles.css"
--- "a/public/styles.css"
+++ "b/public/styles.css"
@@ -1,2954 +1,2394 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");
-
 * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
 :root {
-  --primary-gradient: linear-gradient(135deg, #ffa8a8 0%, #8d96ff 100%);
-  --secondary-gradient: linear-gradient(135deg, #ffa8a8 0%, #ffcece 100%);
-  --success-gradient: linear-gradient(135deg, #8d96ff 0%, #b8bfff 100%);
-  --danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-  --warning-gradient: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
-  --glass-bg: rgba(255, 250, 240, 0.15);
-  --glass-border: rgba(255, 168, 168, 0.3);
-  --glass-hover: rgba(255, 250, 240, 0.25);
-  --text-primary: #1a1a1a;
-  --text-secondary: #333333;
-  --text-muted: #666666;
-  --text-disabled: #999999;
-  --shadow-sm: 0 2px 10px rgba(255, 168, 168, 0.2);
-  --shadow: 0 8px 32px rgba(255, 168, 168, 0.3);
-  --shadow-lg: 0 15px 50px rgba(255, 168, 168, 0.4);
-  --border-radius-sm: 8px;
-  --border-radius: 16px;
-  --border-radius-lg: 20px;
-  --border-radius-xl: 24px;
-  --border-radius-2xl: 32px;
-  --spacing-xs: 0.25rem;
-  --spacing-sm: 0.5rem;
-  --spacing-md: 1rem;
-  --spacing-lg: 1.5rem;
-  --spacing-xl: 2rem;
-  --spacing-2xl: 3rem;
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 2rem;
-  --font-size-4xl: 2.5rem;
-  --transition-fast: 0.15s ease;
-  --transition-base: 0.3s ease;
-  --transition-slow: 0.5s ease;
+    --bg-primary: #0a0e27;
+    --bg-secondary: #151a35;
+    --bg-card: #1e2442;
+    --text-primary: #e8eaed;
+    --text-secondary: #a0a3b1;
+    --text-muted: #6c7293;
+    --accent: #667eea;
+    --accent-light: #764ba2;
+    --border-color: #2d3348;
+    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
+    --shadow: 0 2px 8px rgba(0,0,0,0.4);
+    --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
+    --transition: all 0.3s ease;
+    --gradient-purple: linear-gradient(135deg, #667eea, #764ba2);
+    --gradient-blue: linear-gradient(135deg, #4facfe, #00f2fe);
+    --gradient-green: linear-gradient(135deg, #43e97b, #38f9d7);
+    --gradient-orange: linear-gradient(135deg, #fa709a, #fee140);
+    --gradient-red: linear-gradient(135deg, #ff6b6b, #ee5a6f);
+    --gradient-teal: linear-gradient(135deg, #00c9ff, #92fe9d);
+    --gradient-gold: linear-gradient(135deg, #ffd700, #ffed4e);
 }
 
 body {
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  background: linear-gradient(135deg, #fffaf0 0%, #ffe8e8 50%, #e8ecff 100%);
-  color: var(--text-primary);
-  min-height: 100vh;
-  line-height: 1.6;
-  overflow-x: hidden;
-  font-size: var(--font-size-base);
-}
-
-body::before {
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: radial-gradient(circle at 20% 80%, rgba(255, 168, 168, 0.3), transparent 50%),
-    radial-gradient(circle at 80% 20%, rgba(141, 150, 255, 0.3), transparent 50%),
-    radial-gradient(circle at 40% 40%, rgba(255, 250, 240, 0.3), transparent 50%);
-  z-index: -1;
-  animation: backgroundShift 20s ease-in-out infinite;
-}
-
-@keyframes backgroundShift {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.8;
-  }
-}
-
-@keyframes shimmer {
-  0%,
-  100% {
-    background-position: 200% center;
-  }
-  50% {
-    background-position: -200% center;
-  }
-}
-
-@keyframes float {
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-20px);
-  }
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.6;
+    min-height: 100vh;
+    overflow-x: hidden;
 }
 
-@keyframes slideInDown {
-  from {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes scaleIn {
-  from {
-    transform: scale(0.95);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-/* ===== NAVBAR ===== */
 .navbar {
-  background: rgba(44, 62, 80, 0.95) !important;
-  backdrop-filter: blur(20px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  padding: var(--spacing-md) 0;
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
-  animation: slideInDown 0.5s ease;
-}
-
-.nav-container {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0 var(--spacing-xl);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
+    background: var(--bg-secondary);
+    padding: 1rem 2rem;
+    box-shadow: var(--shadow);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: none;
+    border-bottom: 1px solid var(--border-color);
 }
 
-.nav-brand a {
-  text-decoration: none;
+.navbar-brand {
+    font-size: 1.5rem;
+    font-weight: 700;
+    background: var(--gradient-purple);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
-.nav-brand h2 {
-  color: #fff;
-  font-size: 1.5rem;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  letter-spacing: -0.02em;
-  margin: 0;
-  transition: var(--transition-base);
+.navbar-menu {
+    display: flex;
+    gap: 1rem;
 }
 
-.nav-brand h2:hover {
-  transform: scale(1.05);
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    color: var(--text-secondary);
+    text-decoration: none;
+    border-radius: 8px;
+    transition: var(--transition);
+    font-weight: 500;
 }
 
-.nav-brand i {
-  color: #e74c3c;
-  font-size: 1.8rem;
+.nav-item:hover,
+.nav-item.active {
+    background: rgba(102, 126, 234, 0.1);
+    color: var(--accent);
 }
 
-.nav-toggle {
-  display: none;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 30px;
-  height: 24px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  z-index: 1002;
-  position: relative;
+.navbar-user {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
 }
 
-.nav-toggle span {
-  width: 100%;
-  height: 3px;
-  background: #ecf0f1;
-  border-radius: 3px;
-  transition: all 0.3s ease;
-  display: block;
+.user-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--gradient-purple);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    cursor: pointer;
+    transition: var(--transition);
 }
 
-.nav-toggle.active span:nth-child(1) {
-  transform: rotate(45deg) translate(8px, 8px);
+.user-avatar:hover {
+    transform: scale(1.1);
 }
 
-.nav-toggle.active span:nth-child(2) {
-  opacity: 0;
+.btn-logout {
+    padding: 0.75rem 1.25rem;
+    background: rgba(255, 107, 107, 0.1);
+    color: #ff6b6b;
+    border: 1px solid rgba(255, 107, 107, 0.2);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 500;
 }
 
-.nav-toggle.active span:nth-child(3) {
-  transform: rotate(-45deg) translate(7px, -7px);
+.btn-logout:hover {
+    background: rgba(255, 107, 107, 0.2);
+    transform: translateY(-2px);
 }
 
-.nav-menu {
-  display: flex;
-  gap: var(--spacing-md);
-  align-items: center;
+.mobile-header {
+    background: var(--bg-secondary);
+    padding: 1rem 1.25rem;
+    box-shadow: var(--shadow);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: block;
+    border-bottom: 1px solid var(--border-color);
 }
 
-.nav-link {
-  color: #ecf0f1 !important;
-  text-decoration: none;
-  padding: var(--spacing-sm) var(--spacing-lg) !important;
-  border-radius: 6px;
-  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  font-weight: 500;
-  background: transparent;
-  border: 1px solid transparent;
-  font-size: var(--font-size-sm);
-  position: relative;
+.mobile-header-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
-.nav-link::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 0;
-  height: 2px;
-  background: var(--primary-gradient);
-  transition: width 0.3s ease;
+.mobile-header-left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
 }
 
-.nav-link:hover {
-  background: rgba(255, 255, 255, 0.1) !important;
-  color: #fff !important;
-  transform: translateY(-1px);
+.hamburger-btn {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: var(--text-primary);
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 8px;
+    transition: var(--transition);
 }
 
-.nav-link:hover::after {
-  width: 100%;
+.hamburger-btn:hover {
+    background: rgba(102, 126, 234, 0.1);
 }
 
-.nav-link.nav-cta {
-  background: var(--primary-gradient) !important;
-  color: white !important;
-  box-shadow: 0 4px 15px rgba(255, 168, 168, 0.3);
-  border-radius: 25px;
-  padding: var(--spacing-sm) 1.5rem !important;
+.hamburger-btn:active {
+    transform: scale(0.95);
 }
 
-.nav-link.nav-cta:hover {
-  transform: translateY(-2px) !important;
-  box-shadow: 0 6px 20px rgba(255, 168, 168, 0.4) !important;
+.mobile-logo {
+    font-size: 1.25rem;
+    font-weight: 700;
+    background: var(--gradient-purple);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-.nav-link.nav-cta::after {
-  display: none;
+.mobile-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--gradient-purple);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.1rem;
+    cursor: pointer;
+    transition: var(--transition);
 }
 
-.nav-overlay {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 999;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  pointer-events: none;
-  user-select: none;
-  -webkit-user-drag: none;
+.mobile-avatar:active {
+    transform: scale(0.95);
 }
 
-.nav-overlay.active {
-  display: block;
-  opacity: 1;
-  pointer-events: auto;
+.drawer-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.7);
+    z-index: 998;
+    display: none;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    backdrop-filter: blur(4px);
 }
 
-body.menu-open {
-  overflow: hidden;
-  position: fixed;
-  width: 100%;
+.drawer-overlay.active {
+    display: block;
+    opacity: 1;
 }
 
-/* Mobile Navigation */
-@media (max-width: 768px) {
-  .nav-toggle {
-    display: flex;
-  }
-
-  .nav-menu {
+.sidebar {
     position: fixed;
+    left: 0;
     top: 0;
-    right: 0;
     width: 280px;
     height: 100vh;
-    background: rgba(44, 62, 80, 0.98);
-    backdrop-filter: blur(20px);
-    flex-direction: column;
-    padding: 5rem 2rem 2rem;
-    gap: 0.5rem;
-    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
+    background: var(--bg-secondary);
+    border-right: 1px solid var(--border-color);
     overflow-y: auto;
-    border-left: 1px solid rgba(255, 255, 255, 0.1);
-    align-items: stretch;
-    z-index: 1001;
-    transform: translateX(100%);
-    transition: transform 0.3s ease;
-  }
-
-  .nav-menu.active {
-    right: 0;
-    transform: translateX(0);
-  }
-
-  .nav-link {
-    width: 100%;
-    padding: 1rem !important;
-    justify-content: flex-start;
-    border-radius: 8px;
-  }
-
-  .nav-link.nav-cta {
-    margin-top: 1rem;
-    justify-content: center;
-  }
-
-  .nav-container {
-    padding: 0 var(--spacing-md);
-  }
-}
-
-/* ===== HERO SECTION ===== */
-.hero {
-  text-align: center;
-  padding: 6rem var(--spacing-xl) 5rem;
-  position: relative;
-}
-
-.hero-content {
-  max-width: 900px;
-  margin: 0 auto;
-  animation: scaleIn 0.6s ease;
-}
-
-.hero-badge {
-  display: inline-block;
-  background: linear-gradient(135deg, rgba(255, 168, 168, 0.2), rgba(141, 150, 255, 0.2));
-  padding: 0.5rem 1.5rem;
-  border-radius: 25px;
-  margin-bottom: 1.5rem;
-  border: 1px solid rgba(255, 168, 168, 0.3);
-  font-weight: 600;
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-  animation: slideInDown 0.5s ease;
-  transition: all 0.3s ease;
-}
-
-.hero-badge:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 4px 12px rgba(255, 168, 168, 0.2);
+    z-index: 99;
+    display: none;
 }
 
-.hero-badge i {
-  color: #ffa8a8;
-  margin-right: 0.5rem;
-  animation: float 3s ease-in-out infinite;
-}
-
-.hero-title {
-  font-size: clamp(2rem, 5vw, 4.5rem);
-  font-weight: 800;
-  margin-bottom: var(--spacing-lg);
-  background: linear-gradient(135deg, #ffa8a8, #8d96ff, #ffa8a8);
-  background-size: 300% 300%;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  animation: gradientShift 6s ease-in-out infinite, slideInDown 0.7s ease;
-  letter-spacing: -0.03em;
-  line-height: 1.1;
+.sidebar-header {
+    padding: 2rem 1.5rem;
+    border-bottom: 1px solid var(--border-color);
 }
 
-@keyframes gradientShift {
-  0%,
-  100% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
+.sidebar-logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    background: var(--gradient-purple);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
-.hero-subtitle {
-  font-size: clamp(1rem, 2vw, 1.25rem);
-  margin-bottom: var(--spacing-2xl);
-  color: var(--text-secondary);
-  font-weight: 400;
-  max-width: 700px;
-  margin-left: auto;
-  margin-right: auto;
-  line-height: 1.6;
-  animation: slideInDown 0.8s ease;
+.sidebar-nav {
+    padding: 1rem 0;
 }
 
-.hero-buttons {
-  display: flex;
-  gap: var(--spacing-lg);
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-bottom: 3rem;
-  animation: slideInDown 0.9s ease;
+.nav-section {
+    margin-bottom: 1.5rem;
 }
 
-.hero-features {
-  display: flex;
-  gap: 2rem;
-  justify-content: center;
-  flex-wrap: wrap;
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-  animation: slideInDown 1s ease;
+.nav-section-title {
+    padding: 0 1.5rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 
-.hero-feature-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  transition: all 0.3s ease;
+.menu-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.875rem 1.5rem;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: var(--transition);
+    font-weight: 500;
+    position: relative;
 }
 
-.hero-feature-item:hover {
-  transform: translateX(5px);
+.menu-item::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: var(--gradient-purple);
+    transform: scaleY(0);
+    transition: transform 0.2s ease;
 }
 
-.hero-feature-item i {
-  color: #8d96ff;
-  font-size: 1.1rem;
+.menu-item:hover,
+.menu-item.active {
+    background: rgba(102, 126, 234, 0.1);
+    color: var(--accent);
 }
 
-.section-subtitle {
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: clamp(1rem, 2vw, 1.1rem);
-  max-width: 700px;
-  margin: -2rem auto 4rem;
-  line-height: 1.6;
+.menu-item.active::before {
+    transform: scaleY(1);
 }
 
-/* ===== SCALE SECTION ===== */
-.scale-section {
-  padding: 6rem 0;
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  border-top: 1px solid var(--glass-border);
-  border-bottom: 1px solid var(--glass-border);
-  transition: all 0.3s ease;
+.menu-item i {
+    width: 24px;
+    text-align: center;
+    font-size: 1.1rem;
 }
 
-.scale-section:hover {
-  background: var(--glass-hover);
+.logout-item {
+    color: #ff6b6b !important;
 }
 
-.scale-content {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 3rem;
-  align-items: center;
+.logout-item:hover {
+    background: rgba(255, 107, 107, 0.1) !important;
 }
 
-.scale-text h2 {
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
-  font-weight: 800;
-  margin-bottom: 1.5rem;
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+.sidebar-footer {
+    padding: 1rem 0;
+    border-top: 1px solid var(--border-color);
+    margin-top: auto;
 }
 
-.scale-text p {
-  color: var(--text-secondary);
-  font-size: clamp(1rem, 2vw, 1.1rem);
-  line-height: 1.8;
-  margin-bottom: 1.5rem;
+.sidebar-drawer {
+    position: fixed;
+    top: 0;
+    left: -100%;
+    width: 280px;
+    height: 100vh;
+    background: var(--bg-secondary);
+    box-shadow: 2px 0 20px rgba(0,0,0,0.5);
+    z-index: 999;
+    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow-y: auto;
+    display: block;
 }
 
-.scale-list {
-  list-style: none;
-  padding: 0;
+.sidebar-drawer.active {
+    left: 0;
 }
 
-.scale-list li {
-  padding: 0.75rem 0;
-  color: var(--text-primary);
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  transition: all 0.3s ease;
+.drawer-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--bg-primary);
 }
 
-.scale-list li:hover {
-  transform: translateX(10px);
+.drawer-header h3 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--text-primary);
 }
 
-.scale-list i {
-  color: #8d96ff;
-  font-size: 1.2rem;
-  min-width: 20px;
+.drawer-close {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 8px;
+    transition: var(--transition);
 }
 
-.scale-icon {
-  text-align: center;
-  animation: float 4s ease-in-out infinite;
+.drawer-close:hover {
+    background: rgba(255, 107, 107, 0.1);
+    color: #ff6b6b;
 }
 
-.scale-icon i {
-  font-size: clamp(8rem, 15vw, 15rem);
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  opacity: 0.3;
+.drawer-close:active {
+    transform: scale(0.95);
 }
 
-/* ===== CTA SECTION ===== */
-.cta-section {
-  padding: 6rem 0;
-  background: rgba(255, 255, 255, 0.5);
-  backdrop-filter: blur(20px);
-  border-top: 1px solid var(--glass-border);
-  transition: all 0.3s ease;
+.drawer-menu {
+    padding: 0.5rem 0;
 }
 
-.cta-content {
-  text-align: center;
+.drawer-section-title {
+    padding: 1rem 1.5rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 
-.cta-content h2 {
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
-  font-weight: 800;
-  margin-bottom: 1.5rem;
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+.drawer-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.875rem 1.5rem;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: var(--transition);
+    font-weight: 500;
+    position: relative;
 }
 
-.cta-content p {
-  color: var(--text-secondary);
-  font-size: clamp(1rem, 2vw, 1.2rem);
-  max-width: 600px;
-  margin: 0 auto 2.5rem;
-  line-height: 1.6;
+.drawer-menu-item::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: var(--gradient-purple);
+    transform: scaleY(0);
+    transition: transform 0.2s ease;
 }
 
-.cta-buttons {
-  display: flex;
-  gap: 1.5rem;
-  justify-content: center;
-  flex-wrap: wrap;
+.drawer-menu-item:hover,
+.drawer-menu-item.active {
+    background: rgba(102, 126, 234, 0.1);
+    color: var(--accent);
 }
 
-.btn-lg {
-  font-size: clamp(1rem, 2vw, 1.1rem);
-  padding: 1rem 2.5rem;
+.drawer-menu-item.active::before {
+    transform: scaleY(1);
 }
 
-/* ===== FOOTER ===== */
-.footer-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 2rem;
-  margin-bottom: 2rem;
-  text-align: left;
+.drawer-menu-item i {
+    width: 24px;
+    text-align: center;
+    font-size: 1.1rem;
 }
 
-.footer-col h4 {
-  font-weight: 700;
-  margin-bottom: 1rem;
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+.drawer-footer {
+    padding: 1rem 0;
+    border-top: 1px solid var(--border-color);
+    margin-top: 1rem;
 }
 
-.footer-col h5 {
-  font-weight: 600;
-  margin-bottom: 1rem;
-  color: var(--text-primary);
-  font-size: var(--font-size-base);
+.dashboard-container {
+    display: flex;
+    min-height: 100vh;
 }
 
-.footer-col p {
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-  line-height: 1.6;
+.main-content {
+    flex: 1;
+    padding: 2rem;
+    max-width: 100%;
+    margin: 0 auto;
 }
 
-.footer-col ul {
-  list-style: none;
-  padding: 0;
+.section {
+    display: none;
+    animation: fadeIn 0.3s ease;
 }
 
-.footer-col ul li {
-  margin-bottom: 0.5rem;
+.section.active {
+    display: block;
 }
 
-.footer-col ul li a {
-  color: var(--text-secondary);
-  text-decoration: none;
-  transition: all 0.3s ease;
-  font-size: 0.9rem;
-  position: relative;
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-.footer-col ul li a::before {
-  content: "";
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  width: 0;
-  height: 2px;
-  background: var(--primary-gradient);
-  transition: width 0.3s ease;
+.section h2 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 2rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
-.footer-col ul li a:hover {
-  color: #ffa8a8;
+.section h2 i {
+    font-size: 2rem;
+    background: var(--gradient-purple);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-.footer-col ul li a:hover::before {
-  width: 100%;
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
 }
 
-.footer-social {
-  display: flex;
-  gap: 1rem;
+.stat-card {
+    background: var(--bg-card);
+    border-radius: 16px;
+    padding: 1.5rem;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    position: relative;
+    overflow: hidden;
 }
 
-.footer-social a {
-  color: var(--text-secondary);
-  font-size: 1.5rem;
-  transition: all 0.3s ease;
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-radius);
-  background: var(--glass-bg);
-  border: 1px solid var(--glass-border);
+.stat-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--gradient-purple);
+    opacity: 0;
+    transition: opacity 0.3s ease;
 }
 
-.footer-social a:hover {
-  color: #ffa8a8;
-  transform: translateY(-3px);
-  background: var(--glass-hover);
-  box-shadow: 0 4px 12px rgba(255, 168, 168, 0.2);
+.stat-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
 }
 
-.footer-bottom {
-  border-top: 1px solid var(--glass-border);
-  padding-top: 2rem;
-  text-align: center;
+.stat-card:hover::before {
+    opacity: 1;
 }
 
-.footer-bottom p {
-  color: var(--text-secondary);
-  font-size: 0.9rem;
+.stat-card.gradient-purple .stat-icon {
+    background: var(--gradient-purple);
 }
 
-.footer-bottom i.fa-heart {
-  color: #ffa8a8;
-  animation: pulse 1.5s ease-in-out infinite;
+.stat-card.gradient-blue .stat-icon {
+    background: var(--gradient-blue);
 }
 
-/* ===== BUTTONS ===== */
-.btn {
-  padding: var(--spacing-md) var(--spacing-xl);
-  border: none;
-  border-radius: var(--border-radius);
-  text-decoration: none;
-  font-weight: 600;
-  font-size: var(--font-size-base);
-  cursor: pointer;
-  transition: var(--transition-base);
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  position: relative;
-  overflow: hidden;
-  backdrop-filter: blur(10px);
-  border: 1px solid transparent;
-  font-family: inherit;
-  white-space: nowrap;
-  min-height: 48px;
-}
-
-.btn::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-  transition: left 0.6s ease;
-}
-
-.btn:hover::before {
-  left: 100%;
-}
-
-.btn::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: var(--border-radius);
-  opacity: 0;
-  transition: opacity 0.3s ease;
+.stat-card.gradient-green .stat-icon {
+    background: var(--gradient-green);
 }
 
-.btn-primary {
-  background: var(--primary-gradient);
-  color: white;
-  box-shadow: 0 4px 20px rgba(255, 168, 168, 0.4);
+.stat-card.gradient-orange .stat-icon {
+    background: var(--gradient-orange);
 }
 
-.btn-primary:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 30px rgba(255, 168, 168, 0.5);
-  color: white;
+.stat-card.gradient-red .stat-icon {
+    background: var(--gradient-red);
 }
 
-.btn-secondary {
-  background: var(--glass-bg);
-  color: var(--text-primary);
-  border-color: var(--glass-border);
+.stat-card.gradient-teal .stat-icon {
+    background: var(--gradient-teal);
 }
 
-.btn-secondary:hover {
-  background: var(--glass-hover);
-  transform: translateY(-3px);
-  box-shadow: var(--shadow);
-  color: var(--text-primary);
+.stat-card.gradient-gold .stat-icon {
+    background: var(--gradient-gold);
 }
 
-.btn-warning {
-  background: var(--secondary-gradient);
-  color: white;
-  box-shadow: 0 4px 20px rgba(255, 168, 168, 0.4);
+.stat-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.75rem;
+    flex-shrink: 0;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
 }
 
-.btn-warning:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 30px rgba(255, 168, 168, 0.5);
-  color: white;
+.stat-info {
+    flex: 1;
+    min-width: 0;
 }
 
-.btn-danger {
-  background: var(--danger-gradient);
-  color: white;
-  box-shadow: 0 4px 20px rgba(250, 112, 154, 0.4);
+.stat-label {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+    margin-bottom: 0.5rem;
 }
 
-.btn-danger:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 30px rgba(250, 112, 154, 0.5);
-  color: white;
+.stat-value {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    word-break: break-all;
+    line-height: 1.2;
+}
+
+.glassmorphism {
+    background: rgba(30, 36, 66, 0.6);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    margin-bottom: 2rem;
+}
+
+.glassmorphism h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
-.btn-info {
-  background: var(--success-gradient);
-  color: white;
-  box-shadow: 0 4px 20px rgba(141, 150, 255, 0.4);
-}
-
-.btn-info:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 30px rgba(141, 150, 255, 0.5);
-  color: white;
+.glassmorphism h3 i {
+    background: var(--gradient-purple);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-.btn-sm {
-  padding: var(--spacing-sm) var(--spacing-lg);
-  font-size: var(--font-size-sm);
-  min-height: 36px;
+.search-container {
+    position: relative;
+    margin-bottom: 2rem;
 }
 
-.btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none !important;
-  box-shadow: none !important;
+.search-icon {
+    position: absolute;
+    left: 1.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-muted);
+    font-size: 1.1rem;
+    z-index: 1;
 }
 
-.btn-group {
-  display: flex;
-  gap: var(--spacing-sm);
+.search-input {
+    width: 100%;
+    padding: 1rem 1.25rem 1rem 3.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    background: var(--bg-card);
+    font-size: 1rem;
+    color: var(--text-primary);
+    transition: var(--transition);
 }
 
-.btn-group .btn {
-  flex: 1;
+.search-input:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
 }
 
-/* ===== CONTAINER ===== */
-.container {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0 var(--spacing-xl);
+.search-input::placeholder {
+    color: var(--text-muted);
 }
 
-/* ===== FEATURES SECTION ===== */
-.features {
-  padding: 8rem 0;
-  background: rgba(255, 255, 255, 0.5);
-  backdrop-filter: blur(20px);
-  border-top: 1px solid var(--glass-border);
-  border-bottom: 1px solid var(--glass-border);
+.form-control {
+    width: 100%;
+    padding: 1rem 1.25rem;
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    background: var(--bg-card);
+    font-size: 1rem;
+    color: var(--text-primary);
+    transition: var(--transition);
+    font-family: inherit;
 }
 
-.section-title {
-  text-align: center;
-  font-size: var(--font-size-4xl);
-  margin-bottom: 4rem;
-  font-weight: 800;
-  position: relative;
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  letter-spacing: -0.02em;
+.form-control:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
 }
 
-.section-title::after {
-  content: "";
-  position: absolute;
-  bottom: -15px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100px;
-  height: 4px;
-  background: var(--primary-gradient);
-  border-radius: 2px;
-  animation: slideInLeft 0.5s ease;
+.form-control::placeholder {
+    color: var(--text-muted);
 }
 
-.features-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: 2.5rem;
+.form-group {
+    margin-bottom: 1.5rem;
 }
 
-.feature-card {
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--border-radius-lg);
-  padding: var(--spacing-2xl);
-  text-align: center;
-  transition: var(--transition-slow);
-  position: relative;
-  overflow: hidden;
-  animation: scaleIn 0.5s ease;
+.form-group label {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
 }
 
-.feature-card::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: var(--primary-gradient);
-  opacity: 0;
-  transition: opacity var(--transition-base);
+.form-group label .required {
+    color: #ff6b6b;
+    margin-left: 0.25rem;
 }
 
-.feature-card:hover::before {
-  opacity: 1;
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 1.5rem;
 }
 
-.feature-card:hover {
-  transform: translateY(-15px);
-  border-color: rgba(255, 168, 168, 0.6);
-  box-shadow: var(--shadow-lg);
-  background: var(--glass-hover);
+.btn {
+    padding: 1rem 2rem;
+    border: none;
+    border-radius: 12px;
+    font-weight: 600;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: var(--transition);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    text-decoration: none;
+    font-family: inherit;
 }
 
-.feature-icon {
-  font-size: 4rem;
-  margin-bottom: var(--spacing-xl);
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  transition: transform var(--transition-base);
-  display: inline-block;
+.btn:active {
+    transform: scale(0.98);
 }
 
-.feature-card:hover .feature-icon {
-  transform: scale(1.1) rotate(5deg);
+.btn-primary {
+    background: var(--gradient-purple);
+    color: white;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
 }
 
-.feature-card h3 {
-  font-size: var(--font-size-2xl);
-  margin-bottom: var(--spacing-lg);
-  font-weight: 700;
-  color: var(--text-primary);
-}
-
-.feature-card p {
-  color: var(--text-secondary);
-  line-height: 1.8;
-  font-size: var(--font-size-base);
+.btn-primary:hover {
+    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
+    transform: translateY(-2px);
 }
 
-/* ===== STATS SECTION ===== */
-.stats {
-  padding: 8rem 0;
-  position: relative;
+.btn-secondary {
+    background: var(--bg-card);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
 }
 
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 2.5rem;
+.btn-secondary:hover {
+    background: var(--bg-secondary);
+    transform: translateY(-2px);
 }
 
-.stat-card {
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--border-radius-lg);
-  padding: var(--spacing-2xl);
-  text-align: center;
-  transition: var(--transition-base);
-  position: relative;
-  overflow: hidden;
-  animation: scaleIn 0.5s ease;
+.btn-danger {
+    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
+    color: white;
+    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
 }
 
-.stat-card::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle, rgba(255, 168, 168, 0.15) 0%, transparent 70%);
-  opacity: 0;
-  transition: opacity var(--transition-base);
+.btn-danger:hover {
+    box-shadow: 0 6px 16px rgba(255, 107, 107, 0.5);
+    transform: translateY(-2px);
 }
 
-.stat-card:hover::before {
-  opacity: 1;
+.loading {
+    text-align: center;
+    padding: 3rem;
+    color: var(--text-muted);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
 }
 
-.stat-card:hover {
-  transform: translateY(-10px);
-  border-color: rgba(255, 168, 168, 0.6);
-  box-shadow: var(--shadow);
+.loading i {
+    font-size: 2rem;
+    animation: spin 1s linear infinite;
 }
 
-.stat-number {
-  font-size: 3.5rem;
-  font-weight: 800;
-  margin-bottom: var(--spacing-md);
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  display: block;
-  position: relative;
-  z-index: 1;
-  line-height: 1.1;
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
-.stat-label {
-  font-size: var(--font-size-lg);
-  color: var(--text-secondary);
-  font-weight: 500;
-  position: relative;
-  z-index: 1;
+.plugins-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
 }
 
-.stat-icon {
-  font-size: var(--font-size-4xl);
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background: var(--glass-bg);
-  padding: var(--spacing-lg);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--glass-border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 80px;
-  height: 80px;
-}
-
-.stats-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: var(--spacing-xl);
-  margin-bottom: var(--spacing-2xl);
-}
-
-.stats-cards .stat-card {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xl);
-  padding: 2.5rem;
-  text-align: left;
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow);
-  transition: var(--transition-base);
-}
-
-.stats-cards .stat-card:hover {
-  transform: translateY(-5px);
-  box-shadow: var(--shadow-lg);
+.tag-section {
+    margin-bottom: 2rem;
 }
 
-.stat-info {
-  flex: 1;
+.tag-header {
+    background: var(--bg-card);
+    padding: 1.25rem 1.5rem;
+    border-radius: 12px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid var(--border-color);
+    transition: var(--transition);
 }
 
-.stat-info .stat-number {
-  font-size: 2.5rem;
-  margin-bottom: var(--spacing-sm);
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font-weight: 800;
-  line-height: 1.1;
+.tag-header:hover {
+    background: rgba(102, 126, 234, 0.05);
+    border-color: var(--accent);
 }
 
-.stat-info .stat-label {
-  font-size: var(--font-size-base);
-  color: var(--text-secondary);
-  font-weight: 500;
+.tag-header:active {
+    transform: scale(0.99);
 }
 
-.stat-item {
-  text-align: center;
-  padding: var(--spacing-lg);
-  background: var(--glass-bg);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--glass-border);
-  transition: var(--transition-base);
-  min-height: 100px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+.tag-title {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    font-weight: 600;
+    font-size: 1.1rem;
+    color: var(--text-primary);
 }
 
-.stat-item:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--shadow);
+.tag-title i {
+    background: var(--gradient-purple);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-.stat-value {
-  display: block;
-  font-size: 2.2rem;
-  font-weight: 800;
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  margin-bottom: var(--spacing-sm);
-  line-height: 1.1;
+.plugin-count {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    background: var(--bg-primary);
+    padding: 0.35rem 0.875rem;
+    border-radius: 20px;
+    font-weight: 500;
 }
 
-/* ===== SMOOTH TRANSITIONS ===== */
-.transition-all {
-  transition: all var(--transition-base);
+.tag-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s ease;
+    margin-top: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
 }
 
-.hover-lift:hover {
-  transform: translateY(-5px);
-}
-
-.hover-scale:hover {
-  transform: scale(1.05);
-}
+.tag-content.expanded {
+    max-height: 10000px;
+}
 
-.hover-glow:hover {
-  box-shadow: var(--shadow-lg);
-}
-
-/* ===== LOADING & SKELETONS ===== */
-.skeleton {
-  background: linear-gradient(90deg, var(--glass-bg), var(--glass-hover), var(--glass-bg));
-  background-size: 200% 100%;
-  animation: shimmer 2s infinite;
-  border-radius: var(--border-radius);
-}
-
-.skeleton-text {
-  height: 1rem;
-  margin-bottom: var(--spacing-md);
-}
-
-.skeleton-card {
-  height: 300px;
-  margin-bottom: var(--spacing-xl);
-}
-
-/* ===== ACCESSIBILITY ===== */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.focus-visible:focus {
-  outline: 2px solid #ffa8a8;
-  outline-offset: 2px;
-}
-
-/* ===== AUTH CONTAINER ===== */
-.auth-container {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-xl);
-}
-
-.auth-card {
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(20px);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--border-radius-xl);
-  padding: var(--spacing-2xl);
-  width: 100%;
-  max-width: 480px;
-  box-shadow: var(--shadow);
-  position: relative;
-  overflow: hidden;
-  animation: scaleIn 0.5s ease;
-}
-
-.auth-card::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: var(--primary-gradient);
-}
-
-.auth-tabs {
-  display: flex;
-  margin-bottom: 2.5rem;
-  background: rgba(255, 168, 168, 0.1);
-  border-radius: var(--border-radius);
-  padding: 0.4rem;
-  border: 1px solid var(--glass-border);
-}
+.tag-expand {
+    font-size: 1.25rem;
+    color: var(--text-muted);
+    transition: transform 0.3s ease;
+}
 
-.tab-btn {
-  flex: 1;
-  padding: var(--spacing-md) var(--spacing-sm);
-  border: none;
-  background: transparent;
-  color: var(--text-muted);
-  border-radius: 12px;
-  cursor: pointer;
-  transition: var(--transition-base);
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-sm);
-  font-size: var(--font-size-sm);
-  min-height: 44px;
-}
-
-.tab-btn.active {
-  background: var(--primary-gradient);
-  color: white;
-  box-shadow: 0 4px 15px rgba(255, 168, 168, 0.3);
-}
-
-.auth-form h2 {
-  text-align: center;
-  margin-bottom: 2.5rem;
-  font-size: var(--font-size-3xl);
-  font-weight: 700;
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-sm);
+.tag-expand.expanded {
+    transform: rotate(180deg);
 }
 
-.form-group {
-  margin-bottom: 1.8rem;
+.plugin-card {
+    background: var(--bg-card);
+    border-radius: 16px;
+    box-shadow: var(--shadow);
+    overflow: hidden;
+    transition: var(--transition);
+    border: 1px solid var(--border-color);
 }
 
-.form-group label {
-  display: block;
-  margin-bottom: var(--spacing-sm);
-  font-weight: 600;
-  color: var(--text-primary);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  font-size: var(--font-size-sm);
-}
-
-.form-group input,
-.form-group select {
-  width: 100%;
-  padding: 1.2rem 1.5rem;
-  border: 1px solid var(--glass-border);
-  border-radius: var(--border-radius);
-  background: rgba(255, 255, 255, 0.6);
-  color: var(--text-primary);
-  font-size: var(--font-size-base);
-  transition: var(--transition-base);
-  backdrop-filter: blur(10px);
-  font-weight: 500;
-  min-height: 52px;
-}
-
-.form-group input::placeholder {
-  color: var(--text-muted);
-}
-
-.form-group input:focus,
-.form-group select:focus {
-  outline: none;
-  border-color: #ffa8a8;
-  box-shadow: 0 0 0 3px rgba(255, 168, 168, 0.2);
-  background: rgba(255, 255, 255, 0.8);
-  transform: translateY(-2px);
-}
-
-/* ===== DASHBOARD ===== */
-.dashboard-container {
-  display: flex;
-  min-height: calc(100vh - 80px);
+.plugin-card:hover {
+    box-shadow: var(--shadow-lg);
+    border-color: var(--accent);
 }
 
-.sidebar {
-  width: 280px;
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(20px);
-  border-right: 1px solid var(--glass-border);
-  padding: var(--spacing-xl) 0;
-  position: sticky;
-  top: 80px;
-  height: calc(100vh - 80px);
-  overflow-y: auto;
-  animation: slideInLeft 0.5s ease;
+.plugin-card.expanded {
+    box-shadow: var(--shadow-lg);
 }
 
-.sidebar-menu {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  padding: 0 var(--spacing-lg);
+.plugin-header {
+    padding: 1.5rem;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 1.5rem;
+    transition: var(--transition);
 }
 
-.menu-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  padding: 1.2rem var(--spacing-lg);
-  color: var(--text-muted);
-  text-decoration: none;
-  border-radius: var(--border-radius);
-  transition: var(--transition-base);
-  font-weight: 500;
-  position: relative;
-  background: transparent;
-  border: 1px solid transparent;
-  min-height: 52px;
+.plugin-header:hover {
+    background: rgba(102, 126, 234, 0.05);
 }
 
-.menu-item::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 4px;
-  height: 0;
-  background: var(--primary-gradient);
-  border-radius: 2px;
-  transition: height var(--transition-base);
+.plugin-header:active {
+    transform: scale(0.99);
 }
 
-.menu-item:hover,
-.menu-item.active {
-  background: var(--glass-bg);
-  color: var(--text-primary);
-  transform: translateX(8px);
-  border-color: var(--glass-border);
+.plugin-left {
+    flex: 1;
+    min-width: 0;
 }
 
-.menu-item:hover::before,
-.menu-item.active::before {
-  height: 30px;
+.plugin-name {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
 }
 
-.main-content {
-  flex: 1;
-  padding: 2.5rem;
-  overflow-y: auto;
-  max-width: calc(100vw - 280px);
-  animation: slideInRight 0.5s ease;
+.plugin-description {
+    font-size: 0.95rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
 }
 
-.section {
-  display: none;
-  animation: fadeInUp var(--transition-slow);
+.plugin-info {
+    display: flex;
+    gap: 1rem;
+    margin-top: 0.75rem;
+    flex-wrap: wrap;
 }
 
-.section.active {
-  display: block;
+.limit-info {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    background: rgba(102, 126, 234, 0.1);
+    padding: 0.25rem 0.75rem;
+    border-radius: 12px;
 }
 
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.plugin-type {
+    background: var(--gradient-purple);
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+    flex-shrink: 0;
 }
 
-.section h2 {
-  font-size: 2.8rem;
-  margin-bottom: 2.5rem;
-  font-weight: 800;
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  letter-spacing: -0.02em;
-}
-
-/* ===== PLUGINS ===== */
-.plugins-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-xl);
+.plugin-expand {
+    font-size: 1.5rem;
+    color: var(--text-muted);
+    transition: transform 0.3s ease;
+    flex-shrink: 0;
 }
 
-.plugin-card {
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--border-radius-lg);
-  overflow: hidden;
-  transition: var(--transition-slow);
-  box-shadow: var(--shadow);
+.plugin-expand.expanded {
+    transform: rotate(180deg);
 }
 
-.plugin-card:hover {
-  border-color: rgba(255, 168, 168, 0.6);
-  transform: translateY(-5px);
-  box-shadow: var(--shadow-lg);
+.plugin-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s ease;
 }
 
-.plugin-card.expanded {
-  border-color: rgba(255, 168, 168, 0.8);
-  box-shadow: var(--shadow-lg);
+.plugin-content.expanded {
+    max-height: 5000px;
 }
 
-.plugin-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--spacing-xl);
-  cursor: pointer;
-  user-select: none;
-  transition: background var(--transition-base);
-  min-height: 80px;
+.plugin-details {
+    padding: 2rem 1.5rem;
+    border-top: 1px solid var(--border-color);
+    background: rgba(10, 14, 39, 0.5);
 }
 
-.plugin-header:hover {
-  background: rgba(255, 255, 255, 0.3);
+.plugin-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
 }
 
-.plugin-left {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  flex: 1;
+.tag {
+    background: rgba(102, 126, 234, 0.1);
+    color: var(--accent);
+    padding: 0.35rem 0.875rem;
+    border-radius: 12px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    border: 1px solid rgba(102, 126, 234, 0.2);
 }
 
-.plugin-name {
-  font-size: var(--font-size-xl);
-  font-weight: 700;
-  color: var(--text-primary);
-  margin-bottom: var(--spacing-sm);
+.plugin-routes {
+    background: var(--bg-primary);
+    padding: 1rem 1.25rem;
+    border-radius: 12px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.95rem;
+    color: var(--accent);
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--border-color);
+    word-break: break-all;
+    position: relative;
 }
 
-.plugin-description {
-  color: var(--text-secondary);
-  font-size: var(--font-size-base);
-  line-height: 1.5;
+.plugin-routes:hover {
+    background: rgba(102, 126, 234, 0.05);
+    border-color: var(--accent);
 }
 
-.plugin-type {
-  background: var(--primary-gradient);
-  color: white;
-  padding: var(--spacing-sm) var(--spacing-md);
-  border-radius: 20px;
-  font-size: var(--font-size-xs);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  box-shadow: 0 2px 10px rgba(255, 168, 168, 0.3);
-  white-space: nowrap;
-  min-height: 32px;
-  display: flex;
-  align-items: center;
+.plugin-form {
+    margin-top: 2rem;
 }
 
-.plugin-expand {
-  font-size: var(--font-size-2xl);
-  color: var(--text-muted);
-  transition: var(--transition-base);
-  margin-left: var(--spacing-md);
+.form-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
-.plugin-expand.expanded {
-  transform: rotate(180deg);
-  color: #ffa8a8;
+.form-title i {
+    background: var(--gradient-purple);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-.plugin-content {
-  display: none;
-  border-top: 1px solid var(--glass-border);
-  background: rgba(255, 255, 255, 0.3);
+.form-field {
+    margin-bottom: 1.25rem;
 }
 
-.plugin-content.expanded {
-  display: block;
-  animation: slideDown var(--transition-base);
+.form-field label {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
 }
 
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    max-height: 0;
-  }
-  to {
-    opacity: 1;
-    max-height: 1000px;
-  }
+.form-field input,
+.form-field select {
+    width: 100%;
+    padding: 0.875rem 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    background: var(--bg-card);
+    font-size: 1rem;
+    color: var(--text-primary);
+    transition: var(--transition);
+    font-family: inherit;
 }
 
-.plugin-details {
-  padding: var(--spacing-xl);
+.form-field input:focus,
+.form-field select:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
 }
 
-.plugin-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-lg);
+.form-actions {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1.5rem;
 }
 
-.tag {
-  background: rgba(255, 168, 168, 0.2);
-  color: #ffa8a8;
-  padding: var(--spacing-xs) var(--spacing-md);
-  border-radius: 15px;
-  font-size: var(--font-size-xs);
-  font-weight: 500;
-  border: 1px solid rgba(255, 168, 168, 0.3);
-  transition: var(--transition-base);
-  min-height: 28px;
-  display: flex;
-  align-items: center;
+.btn-execute {
+    flex: 1;
+    padding: 1rem;
+    background: var(--gradient-green);
+    color: white;
+    border: none;
+    border-radius: 12px;
+    font-weight: 600;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    box-shadow: 0 4px 12px rgba(67, 233, 123, 0.4);
 }
 
-.tag:hover {
-  background: rgba(255, 168, 168, 0.35);
-  transform: translateY(-2px);
+.btn-execute:hover:not(:disabled) {
+    box-shadow: 0 6px 16px rgba(67, 233, 123, 0.5);
+    transform: translateY(-2px);
 }
 
-.plugin-routes {
-  background: rgba(255, 255, 255, 0.4);
-  padding: var(--spacing-lg);
-  border-radius: var(--border-radius);
-  font-family: "JetBrains Mono", monospace;
-  font-size: var(--font-size-sm);
-  color: #1a1a1a;
-  border: 1px solid var(--glass-border);
-  overflow-x: auto;
-  margin-bottom: var(--spacing-lg);
+.btn-execute:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
 }
 
-.plugins-search {
-  margin-bottom: 2rem;
+.btn-reset {
+    padding: 1rem;
+    background: var(--bg-card);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    font-weight: 600;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
 }
 
-.search-container {
-  position: relative;
-  max-width: 500px;
-  margin: 0 auto;
+.btn-reset:hover {
+    background: var(--bg-secondary);
+    transform: translateY(-2px);
 }
 
-.search-container i.fa-search {
-  position: absolute;
-  left: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #8d96ff;
-  z-index: 1;
+.response-container {
+    margin-top: 2rem;
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+    transition: all 0.4s ease;
 }
 
-.search-container input {
-  width: 100%;
-  padding: 1rem 1rem 1rem 3rem;
-  border: 2px solid rgba(255, 168, 168, 0.3);
-  border-radius: 25px;
-  background: rgba(255, 255, 255, 0.5);
-  color: var(--text-primary);
-  font-size: 1rem;
-  transition: all 0.3s ease;
+.response-container.show {
+    opacity: 1;
+    max-height: 1000px;
 }
 
-.search-container input:focus {
-  outline: none;
-  border-color: #ffa8a8;
-  background: rgba(255, 255, 255, 0.7);
-  box-shadow: 0 0 20px rgba(255, 168, 168, 0.3);
+.response-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+    gap: 1rem;
 }
 
-.search-container input::placeholder {
-  color: var(--text-muted);
+.response-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
-.search-container button {
-  position: absolute;
-  right: 0.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-  background: #ffa8a8;
-  border: none;
-  border-radius: 50%;
-  width: 2.5rem;
-  height: 2.5rem;
-  color: white;
-  cursor: pointer;
-  transition: all 0.3s ease;
+.response-title i {
+    background: var(--gradient-purple);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-.search-container button:hover {
-  background: #ff8e8e;
-  transform: translateY(-50%) scale(1.1);
+.response-status {
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-transform: uppercase;
 }
 
-.tag-section {
-  margin-bottom: 2rem;
-  background: rgba(255, 255, 255, 0.03);
-  backdrop-filter: blur(5px);
-  border-radius: 16px;
-  border: 1px solid rgba(0, 0, 0, 0.4);
-  overflow: hidden;
-  transition: all 0.3s ease;
+.response-status.success {
+    background: rgba(67, 233, 123, 0.1);
+    color: #43e97b;
+    border: 1px solid rgba(67, 233, 123, 0.3);
 }
 
-.tag-section:hover {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(0, 0, 0, 0.5);
+.response-status.error {
+    background: rgba(255, 107, 107, 0.1);
+    color: #ff6b6b;
+    border: 1px solid rgba(255, 107, 107, 0.3);
+}
+
+.copy-btn,
+.btn-copy,
+.btn-copy-small {
+    padding: 0.5rem 1rem;
+    background: rgba(102, 126, 234, 0.1);
+    color: var(--accent);
+    border: 1px solid rgba(102, 126, 234, 0.2);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    font-weight: 500;
 }
 
-.tag-header {
-  padding: 1.5rem;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  transition: all 0.3s ease;
-  background: rgba(255, 255, 255, 0.02);
+.btn-copy-small {
+    padding: 0.35rem 0.75rem;
+    font-size: 0.85rem;
 }
 
-.tag-header:hover {
-  background: rgba(255, 255, 255, 0.05);
+.copy-btn:hover,
+.btn-copy:hover,
+.btn-copy-small:hover {
+    background: rgba(102, 126, 234, 0.2);
+    transform: translateY(-2px);
 }
 
-.tag-title {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  font-size: 1.2rem;
-  font-weight: 600;
-  color: rgba(255, 255, 255, 0.9);
+.response-body {
+    background: var(--bg-primary);
+    padding: 1.5rem;
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+    color: var(--text-primary);
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+    max-height: 500px;
+    overflow-y: auto;
 }
 
-.tag-title i {
-  color: rgba(133, 48, 48, 0.9);
-  font-size: 1.3rem;
+.usage-section {
+    background: var(--bg-card);
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--border-color);
 }
 
-.plugin-count {
-  background: rgba(133, 48, 48, 0.2);
-  color: rgba(255, 168, 168, 0.9);
-  padding: 0.3rem 0.8rem;
-  border-radius: 12px;
-  font-size: 0.85rem;
-  font-weight: 500;
+.usage-section h4 {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
-.tag-expand {
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 1.2rem;
-  transition: transform 0.3s ease;
+.usage-section h4 i {
+    background: var(--gradient-purple);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-.tag-expand.expanded {
-  transform: rotate(180deg);
+.endpoint-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
 
-.tag-content {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.4s ease;
-  padding: 0 1.5rem;
+.endpoint-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: rgba(102, 126, 234, 0.05);
+    border-radius: 8px;
+    border: 1px solid rgba(102, 126, 234, 0.1);
+    transition: var(--transition);
 }
 
-.tag-content.expanded {
-  max-height: 10000px;
-  padding: 1.5rem;
+.endpoint-item:hover {
+    background: rgba(102, 126, 234, 0.1);
+    transform: translateX(4px);
 }
 
-.tag-content .plugin-card {
-  margin-bottom: 1rem;
+.endpoint-name {
+    font-weight: 600;
+    color: var(--text-primary);
+    font-family: 'Courier New', monospace;
+    font-size: 0.95rem;
 }
 
-.tag-content .plugin-card:last-child {
-  margin-bottom: 0;
+.endpoint-count {
+    color: var(--accent);
+    font-weight: 600;
+    font-size: 0.9rem;
 }
 
-/* ===== FORMS ===== */
-.plugin-form {
-  background: rgba(255, 255, 255, 0.4);
-  border-radius: var(--border-radius);
-  padding: var(--spacing-xl);
-  border: 1px solid var(--glass-border);
+.daily-usage {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
 
-.form-title {
-  color: var(--text-primary);
-  font-size: var(--font-size-xl);
-  font-weight: 700;
-  margin-bottom: var(--spacing-xl);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
+.usage-day {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
 }
 
-.form-grid {
-  display: grid;
-  gap: var(--spacing-lg);
-  margin-bottom: var(--spacing-xl);
+.usage-date {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+    min-width: 70px;
 }
 
-.form-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
+.usage-bar-container {
+    flex: 1;
+    height: 8px;
+    background: rgba(102, 126, 234, 0.1);
+    border-radius: 4px;
+    overflow: hidden;
 }
 
-.form-field label {
-  color: var(--text-primary);
-  font-weight: 600;
-  font-size: var(--font-size-sm);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
+.usage-bar {
+    height: 100%;
+    background: var(--gradient-purple);
+    border-radius: 4px;
+    transition: width 0.6s ease;
 }
 
-.form-field label .required {
-  color: #ff6b6b;
-  font-size: var(--font-size-lg);
+.usage-count {
+    font-weight: 600;
+    color: var(--text-primary);
+    min-width: 40px;
+    text-align: right;
 }
 
-.form-field input,
-.form-field select {
-  background: rgba(255, 255, 255, 0.6);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--border-radius);
-  padding: var(--spacing-md) var(--spacing-lg);
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-  transition: var(--transition-base);
-  backdrop-filter: blur(10px);
-  min-height: 48px;
+.ip-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
 
-.form-field input::placeholder {
-  color: var(--text-muted);
+.ip-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: rgba(102, 126, 234, 0.05);
+    border-radius: 8px;
+    border: 1px solid rgba(102, 126, 234, 0.1);
 }
 
-.form-field input:focus,
-.form-field select:focus {
-  outline: none;
-  border-color: #ffa8a8;
-  box-shadow: 0 0 0 3px rgba(255, 168, 168, 0.2);
-  background: rgba(255, 255, 255, 0.8);
-  transform: translateY(-2px);
+.ip-address {
+    font-family: 'Courier New', monospace;
+    color: var(--text-primary);
+    font-weight: 600;
 }
 
-.form-actions {
-  display: flex;
-  gap: var(--spacing-lg);
-  align-items: center;
-  flex-wrap: wrap;
+.ip-time {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin-top: 0.25rem;
 }
 
-.form-row {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--spacing-lg);
-  margin-bottom: var(--spacing-xl);
+.ip-count {
+    color: var(--accent);
+    font-weight: 600;
+    font-size: 0.9rem;
 }
 
-.input-group {
-  display: flex;
-  gap: var(--spacing-md);
-  align-items: end;
-  flex-wrap: wrap;
+.no-data {
+    text-align: center;
+    padding: 2rem;
+    color: var(--text-muted);
+    font-style: italic;
 }
 
-.input-group input {
-  flex: 1;
-  min-width: 200px;
+.no-data-state,
+.empty-state {
+    text-align: center;
+    padding: 3rem 2rem;
+    color: var(--text-muted);
 }
 
-.btn-execute {
-  background: var(--primary-gradient);
-  color: white;
-  border: none;
-  padding: var(--spacing-md) var(--spacing-xl);
-  border-radius: var(--border-radius);
-  font-weight: 600;
-  cursor: pointer;
-  transition: var(--transition-base);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  font-size: var(--font-size-base);
-  box-shadow: 0 4px 20px rgba(255, 168, 168, 0.3);
-  min-height: 48px;
+.no-data-state i,
+.empty-state i {
+    font-size: 3rem;
+    opacity: 0.3;
+    margin-bottom: 1rem;
+    display: block;
 }
 
-.btn-execute:hover:not(:disabled) {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 30px rgba(255, 168, 168, 0.4);
+.error-state {
+    text-align: center;
+    padding: 3rem 2rem;
+    color: var(--text-muted);
 }
 
-.btn-execute:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none !important;
-  box-shadow: none !important;
+.error-state i {
+    font-size: 3rem;
+    color: #ff6b6b;
+    margin-bottom: 1rem;
+    display: block;
 }
 
-.btn-reset {
-  background: var(--glass-bg);
-  color: var(--text-secondary);
-  border: 1px solid var(--glass-border);
-  padding: var(--spacing-md) var(--spacing-xl);
-  border-radius: var(--border-radius);
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-base);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  font-size: var(--font-size-base);
-  backdrop-filter: blur(10px);
-  min-height: 48px;
+.charts-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 2rem;
 }
 
-.btn-reset:hover {
-  background: var(--glass-hover);
-  color: var(--text-primary);
-  transform: translateY(-2px);
+.chart-card {
+    background: var(--bg-card);
+    border-radius: 16px;
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
 }
 
-/* ===== RESPONSE ===== */
-.response-container {
-  margin-top: var(--spacing-xl);
-  display: none;
-  border-radius: var(--border-radius);
-  overflow: hidden;
+.chart-card.full-width {
+    grid-column: 1 / -1;
 }
 
-.response-container.show {
-  display: block;
-  animation: fadeIn var(--transition-base);
+.chart-card h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.chart-card h3 i {
+    background: var(--gradient-purple);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-.response-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--spacing-md);
-  flex-wrap: wrap;
-  gap: var(--spacing-md);
+.chart-container {
+    position: relative;
+    height: 300px;
 }
 
-.response-title {
-  color: var(--text-primary);
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  font-size: var(--font-size-lg);
+.endpoints-list {
+    margin-bottom: 1.5rem;
+    max-height: 300px;
+    overflow-y: auto;
 }
 
-.response-status {
-  padding: var(--spacing-xs) var(--spacing-md);
-  border-radius: 15px;
-  font-size: var(--font-size-xs);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+.role-distribution {
+    background: var(--bg-card);
+    border-radius: 16px;
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
 }
 
-.response-status.success {
-  background: rgba(141, 150, 255, 0.2);
-  color: #8d96ff;
-  border: 1px solid rgba(141, 150, 255, 0.4);
+.role-stats {
+    margin-bottom: 2rem;
 }
 
-.response-status.error {
-  background: rgba(250, 112, 154, 0.2);
-  color: #fa709a;
-  border: 1px solid rgba(250, 112, 154, 0.4);
+.role-stat {
+    margin-bottom: 1.5rem;
 }
 
-.response-body {
-  background: rgba(255, 255, 255, 0.5);
-  border-radius: var(--border-radius);
-  padding: var(--spacing-lg);
-  font-family: "JetBrains Mono", monospace;
-  font-size: var(--font-size-sm);
-  white-space: pre-wrap;
-  color: #1a1a1a;
-  border: 1px solid var(--glass-border);
-  max-height: 400px;
-  overflow-y: auto;
-  line-height: 1.5;
-}
-
-.copy-btn {
-  background: rgba(255, 168, 168, 0.2);
-  border: 1px solid rgba(255, 168, 168, 0.4);
-  color: #ffa8a8;
-  padding: var(--spacing-sm) var(--spacing-md);
-  border-radius: var(--border-radius);
-  font-size: var(--font-size-xs);
-  cursor: pointer;
-  transition: var(--transition-base);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  min-height: 32px;
-}
-
-.copy-btn:hover {
-  background: rgba(255, 168, 168, 0.35);
-  transform: translateY(-2px);
+.role-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
 }
 
-.loading-spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid rgba(255, 168, 168, 0.3);
-  border-radius: 50%;
-  border-top-color: #ffa8a8;
-  animation: spin 1s linear infinite;
+.role-name {
+    font-weight: 600;
+    color: var(--text-primary);
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+.role-count {
+    font-weight: 700;
+    font-size: 1.1rem;
+    color: var(--accent);
 }
 
-.loading {
-  text-align: center;
-  padding: var(--spacing-2xl);
-  color: var(--text-muted);
-  font-size: var(--font-size-lg);
+.role-bar {
+    height: 8px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative;
 }
 
-/* ===== PROFILE ===== */
-.profile-container {
-  max-width: 1000px;
-  margin: var(--spacing-xl) auto;
-  padding: 0 var(--spacing-xl);
+.role-bar::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: var(--progress);
+    background: var(--color);
+    border-radius: 4px;
+    transition: width 0.6s ease;
 }
 
-.profile-header {
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--border-radius-xl);
-  padding: var(--spacing-2xl);
-  text-align: center;
-  margin-bottom: var(--spacing-xl);
-  position: relative;
-  overflow: hidden;
-  box-shadow: var(--shadow);
-}
-
-.profile-header::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: var(--primary-gradient);
-}
-
-.profile-avatar {
-  font-size: 6rem;
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  margin-bottom: var(--spacing-xl);
-  background: var(--glass-bg);
-  width: 140px;
-  height: 140px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto var(--spacing-xl);
-  border: 3px solid var(--glass-border);
-  backdrop-filter: blur(10px);
-  overflow: hidden;
-}
-
-.profile-avatar img {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.profile-info h2 {
-  font-size: 2.5rem;
-  margin-bottom: var(--spacing-md);
-  font-weight: 800;
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  line-height: 1.1;
-}
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-sm) var(--spacing-lg);
-  border-radius: 20px;
-  font-size: var(--font-size-xs);
-  font-weight: 600;
-  margin: var(--spacing-xs);
-  min-height: 32px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  backdrop-filter: blur(10px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  transition: all 0.3s ease;
-  border: 1px solid;
+.admin-stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
 }
 
-.badge:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+.admin-card {
+    background: var(--bg-card);
+    border-radius: 16px;
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
 }
 
-.badge.user {
-  background: rgba(255, 168, 168, 0.2);
-  color: #ffa8a8;
-  border-color: rgba(255, 168, 168, 0.3);
+.admin-card h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
-.badge.cheap {
-  background: linear-gradient(135deg, rgba(184, 127, 13, 0.95), rgba(184, 127, 13, 0.75));
-  color: white;
-  border-color: rgba(184, 127, 13, 0.4);
-  box-shadow: 0 2px 8px rgba(184, 127, 13, 0.3);
+.admin-card h3 i {
+    background: var(--gradient-purple);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-.badge.cheap:hover {
-  background: linear-gradient(135deg, rgba(184, 127, 13, 1), rgba(184, 127, 13, 0.85));
-  box-shadow: 0 4px 12px rgba(184, 127, 13, 0.45);
+.user-item {
+    background: rgba(102, 126, 234, 0.05);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    transition: var(--transition);
 }
 
-.badge.premium {
-  background: var(--secondary-gradient);
-  color: white;
-  border-color: rgba(255, 168, 168, 0.3);
-  box-shadow: 0 2px 8px rgba(255, 168, 168, 0.3);
+.user-item:hover {
+    background: rgba(102, 126, 234, 0.1);
+    border-color: var(--accent);
 }
 
-.badge.premium:hover {
-  background: linear-gradient(135deg, #ffa8a8, #ff8b8b);
-  box-shadow: 0 4px 12px rgba(255, 168, 168, 0.45);
+.user-item.temp-banned {
+    border-color: #ffa500;
+    background: rgba(255, 165, 0, 0.1);
 }
 
-.badge.vip {
-  background: linear-gradient(135deg, rgba(255, 191, 0, 0.95), rgba(255, 191, 0, 0.75));
-  color: #1a1a1a;
-  border-color: rgba(255, 191, 0, 0.4);
-  box-shadow: 0 2px 8px rgba(255, 191, 0, 0.3);
-  font-weight: 700;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+.user-item.banned {
+    border-color: #ff6b6b;
+    background: rgba(255, 107, 107, 0.1);
 }
 
-.badge.vip:hover {
-  background: linear-gradient(135deg, rgba(255, 191, 0, 1), rgba(255, 191, 0, 0.85));
-  box-shadow: 0 4px 12px rgba(255, 191, 0, 0.45);
+.user-info {
+    margin-bottom: 1rem;
 }
 
-.badge.supreme {
-  background: linear-gradient(135deg, rgba(238, 62, 75, 0.95), rgba(238, 62, 75, 0.75));
-  color: white;
-  border-color: rgba(238, 62, 75, 0.4);
-  box-shadow: 0 2px 8px rgba(238, 62, 75, 0.3);
-  font-weight: 700;
+.user-name {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
 }
 
-.badge.supreme:hover {
-  background: linear-gradient(135deg, rgba(238, 62, 75, 1), rgba(238, 62, 75, 0.85));
-  box-shadow: 0 4px 12px rgba(238, 62, 75, 0.45);
+.user-details {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    margin-bottom: 0.75rem;
 }
 
-.badge.admin {
-  background: linear-gradient(135deg, #853030 0%, #292727 100%);
-  color: white;
-  border-color: rgba(133, 48, 48, 0.4);
-  box-shadow: 0 2px 8px rgba(133, 48, 48, 0.3);
-  font-weight: 700;
+.user-email {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
 }
 
-.badge.admin:hover {
-  background: linear-gradient(135deg, #9a3838 0%, #353535 100%);
-  box-shadow: 0 4px 12px rgba(133, 48, 48, 0.45);
+.user-role {
+    background: rgba(102, 126, 234, 0.2);
+    color: var(--accent);
+    padding: 0.25rem 0.75rem;
+    border-radius: 12px;
+    font-size: 0.85rem;
+    font-weight: 600;
 }
 
-.badge i {
-  margin-right: 0.35rem;
-  font-size: 0.85em;
+.premium-badge {
+    background: linear-gradient(135deg, #ffd700, #ffed4e);
+    color: #000;
+    padding: 0.25rem 0.75rem;
+    border-radius: 12px;
+    font-size: 0.85rem;
+    font-weight: 600;
 }
 
-.badge.glow-cheap {
-  animation: glowCheap 2s ease-in-out infinite;
+.user-stats {
+    display: flex;
+    gap: 1.5rem;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    flex-wrap: wrap;
 }
 
-.badge.glow-premium {
-  animation: glowPremium 2s ease-in-out infinite;
+.user-stats span {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-.badge.glow-vip {
-  animation: glowVip 2s ease-in-out infinite;
+.ban-info {
+    margin-top: 1rem;
+    padding: 1rem;
+    background: rgba(255, 165, 0, 0.1);
+    border-left: 3px solid #ffa500;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
 }
 
-.badge.glow-supreme {
-  animation: glowSupreme 2s ease-in-out infinite;
+.user-actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
 }
 
-@keyframes glowCheap {
-  0%,
-  100% {
-    box-shadow: 0 2px 8px rgba(184, 127, 13, 0.3);
-  }
-  50% {
-    box-shadow: 0 4px 20px rgba(184, 127, 13, 0.6);
-  }
+.btn-warning {
+    background: linear-gradient(135deg, #ffa500, #ff8c00);
+    color: white;
+    padding: 0.75rem 1.25rem;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-@keyframes glowPremium {
-  0%,
-  100% {
-    box-shadow: 0 2px 8px rgba(255, 168, 168, 0.3);
-  }
-  50% {
-    box-shadow: 0 4px 20px rgba(255, 168, 168, 0.6);
-  }
+.btn-warning:hover {
+    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.4);
+    transform: translateY(-2px);
 }
 
-@keyframes glowVip {
-  0%,
-  100% {
-    box-shadow: 0 2px 8px rgba(255, 191, 0, 0.3);
-  }
-  50% {
-    box-shadow: 0 4px 20px rgba(255, 191, 0, 0.6);
-  }
+.btn-success {
+    background: linear-gradient(135deg, #43e97b, #38f9d7);
+    color: white;
+    padding: 0.75rem 1.25rem;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-@keyframes glowSupreme {
-  0%,
-  100% {
-    box-shadow: 0 2px 8px rgba(238, 62, 75, 0.3);
-  }
-  50% {
-    box-shadow: 0 4px 20px rgba(238, 62, 75, 0.6);
-  }
+.btn-success:hover {
+    box-shadow: 0 4px 12px rgba(67, 233, 123, 0.4);
+    transform: translateY(-2px);
 }
 
-.profile-content {
-  display: grid;
-  gap: var(--spacing-xl);
+.pagination-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 2rem;
+    padding: 1rem;
+    background: var(--bg-card);
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
 }
 
-.profile-section {
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--border-radius-lg);
-  padding: 2.5rem;
-  box-shadow: var(--shadow);
-  transition: var(--transition-base);
-  animation: scaleIn 0.5s ease;
+.page-info {
+    color: var(--text-secondary);
+    font-weight: 500;
 }
 
-.profile-section:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--shadow-lg);
+.users-pagination-info {
+    text-align: center;
+    padding: 1rem;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
 }
 
-.profile-section h3 {
-  margin-bottom: var(--spacing-xl);
-  color: var(--text-primary);
-  font-size: var(--font-size-xl);
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
+.search-results {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    margin-top: 0.5rem;
+    max-height: 300px;
+    overflow-y: auto;
+    z-index: 10;
+    box-shadow: var(--shadow-lg);
+    display: none;
 }
 
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: var(--spacing-xl);
+.setting-card {
+    background: var(--bg-card);
+    border-radius: 16px;
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
+    margin-bottom: 2rem;
 }
 
-.info-item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
+.setting-card h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
-.info-item label {
-  font-weight: 600;
-  color: var(--text-secondary);
-  font-size: var(--font-size-sm);
+.setting-card h3 i {
+    background: var(--gradient-purple);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-.info-value {
-  font-size: var(--font-size-xl);
-  font-weight: 700;
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+.setting-description {
+    color: var(--text-secondary);
+    margin-bottom: 1.5rem;
+    font-size: 0.95rem;
 }
 
 .api-key-display {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  background: rgba(255, 255, 255, 0.4);
-  padding: var(--spacing-md) var(--spacing-lg);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--glass-border);
-  min-height: 52px;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    background: var(--bg-primary);
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+}
+
+.key-label {
+    font-weight: 600;
+    color: var(--text-secondary);
 }
 
 .api-key-display code {
-  flex: 1;
-  color: #ffa8a8;
-  font-family: "JetBrains Mono", monospace;
-  font-weight: 500;
-  font-size: var(--font-size-sm);
+    flex: 1;
+    font-family: 'Courier New', monospace;
+    color: var(--accent);
+    font-size: 1rem;
+    font-weight: 600;
 }
 
-/* ===== REDEEM & SETTINGS ===== */
-.redeem-section,
-.setting-card,
-.admin-card {
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--border-radius-lg);
-  padding: 2.5rem;
-  box-shadow: var(--shadow);
-  margin-bottom: var(--spacing-xl);
-  transition: var(--transition-base);
-  animation: scaleIn 0.5s ease;
-}
-
-.redeem-section:hover,
-.setting-card:hover,
-.admin-card:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--shadow-lg);
-}
-
-.redeem-section h3,
-.setting-card h3,
-.admin-card h3 {
-  margin-bottom: var(--spacing-xl);
-  color: var(--text-primary);
-  font-size: var(--font-size-xl);
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
+.danger-zone {
+    border-color: rgba(255, 107, 107, 0.3);
+    background: rgba(255, 107, 107, 0.05);
 }
 
-.redeem-section p {
-  color: var(--text-secondary);
-  margin-bottom: var(--spacing-lg);
-  line-height: 1.6;
+.danger-zone h3 {
+    color: #ff6b6b;
 }
 
-.settings-container,
-.admin-container {
-  display: grid;
-  gap: var(--spacing-xl);
+.premium-badge-large {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--gradient-gold);
+    border-radius: 12px;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #000;
+    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
 }
 
-.settings-grid {
-  display: grid;
-  gap: var(--spacing-xl);
+.profile-container {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 2rem;
 }
 
-.setting-item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-lg);
+.profile-card {
+    background: var(--bg-card);
+    border-radius: 16px;
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
 }
 
-.premium-actions {
-  display: flex;
-  gap: var(--spacing-lg);
-  flex-wrap: wrap;
+.profile-header {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 2rem;
 }
 
-.danger-zone {
-  border: 1px solid rgba(250, 112, 154, 0.4) !important;
-  background: rgba(250, 112, 154, 0.05) !important;
+.profile-avatar-large {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: var(--gradient-purple);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 3rem;
+    flex-shrink: 0;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
 }
 
-.danger-actions {
-  text-align: center;
+.profile-info h3 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
 }
 
-.warning-text {
-  margin-top: var(--spacing-lg);
-  color: var(--text-muted);
-  font-size: var(--font-size-sm);
-  line-height: 1.5;
+.profile-info p {
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
 }
 
-.admin-card .ban-actions {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1rem;
+.profile-role {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: rgba(102, 126, 234, 0.2);
+    color: var(--accent);
+    border-radius: 20px;
+    font-weight: 600;
+    font-size: 0.9rem;
 }
 
-.admin-card .ban-actions .btn {
-  flex: 1;
-  padding: 0.75rem 1rem;
-  border: none;
-  border-radius: 8px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.3s ease;
+.profile-details {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
 }
 
-.admin-card .ban-actions .btn-danger {
-  background: #e74c3c;
-  color: white;
+.detail-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: rgba(102, 126, 234, 0.05);
+    border-radius: 12px;
+    border: 1px solid rgba(102, 126, 234, 0.1);
 }
 
-.admin-card .ban-actions .btn-danger:hover {
-  background: #c0392b;
-  transform: translateY(-2px);
+.detail-label {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: var(--text-secondary);
+    font-weight: 500;
 }
 
-.admin-card .ban-actions .btn-success {
-  background: #8d96ff;
-  color: white;
+.detail-label i {
+    color: var(--accent);
 }
 
-.admin-card .ban-actions .btn-success:hover {
-  background: #7580ee;
-  transform: translateY(-2px);
+.detail-value {
+    font-weight: 600;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
-.ban-status {
-  padding: 1rem;
-  border-radius: 8px;
-  margin-top: 1rem;
-  font-weight: 500;
+.detail-value code {
+    font-family: 'Courier New', monospace;
+    color: var(--accent);
+    background: var(--bg-primary);
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
 }
 
-.ban-status.banned {
-  background: rgba(231, 76, 60, 0.1);
-  border: 1px solid #e74c3c;
-  color: #e74c3c;
+.profile-actions {
+    background: var(--bg-card);
+    border-radius: 16px;
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
 }
 
-.ban-status.active {
-  background: rgba(141, 150, 255, 0.1);
-  border: 1px solid #8d96ff;
-  color: #8d96ff;
+.profile-actions h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
-/* ===== USAGE & ACTIVITY ===== */
-.usage-progress {
-  margin-bottom: var(--spacing-lg);
+.action-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
 
-.progress-item {
-  margin-bottom: var(--spacing-lg);
+.action-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    background: rgba(102, 126, 234, 0.05);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: var(--transition);
+    text-align: left;
+    width: 100%;
 }
 
-.progress-item label {
-  display: block;
-  margin-bottom: var(--spacing-sm);
-  font-weight: 600;
-  color: var(--text-primary);
+.action-item:hover {
+    background: rgba(102, 126, 234, 0.1);
+    border-color: var(--accent);
+    transform: translateX(4px);
 }
 
-.progress-bar {
-  width: 100%;
-  height: 12px;
-  background: rgba(255, 168, 168, 0.2);
-  border-radius: 6px;
-  overflow: hidden;
-  border: 1px solid var(--glass-border);
+.action-item i {
+    font-size: 1.5rem;
+    color: var(--accent);
+    flex-shrink: 0;
 }
 
-.progress-fill {
-  height: 100%;
-  background: var(--primary-gradient);
-  border-radius: 6px;
-  transition: width var(--transition-base);
+.action-item strong {
+    display: block;
+    color: var(--text-primary);
+    font-size: 1rem;
+    margin-bottom: 0.25rem;
 }
 
-.progress-text {
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  margin-top: var(--spacing-sm);
-  display: block;
-  font-weight: 500;
+.action-item small {
+    display: block;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
 }
 
-.activity-list {
-  max-height: 350px;
-  overflow-y: auto;
-  padding-right: var(--spacing-xs);
+.action-item.danger i {
+    color: #ff6b6b;
 }
 
-.activity-item {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-lg);
-  padding: var(--spacing-lg);
-  border-bottom: 1px solid var(--glass-border);
-  transition: background var(--transition-base);
-  border-radius: var(--border-radius);
-  margin-bottom: var(--spacing-sm);
-  min-height: 60px;
-  color: var(--text-primary);
+.action-item.danger:hover {
+    background: rgba(255, 107, 107, 0.1);
+    border-color: #ff6b6b;
 }
 
-.activity-item:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
+.quick-actions {
+    background: var(--bg-card);
+    border-radius: 16px;
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
 }
 
-.activity-item:hover {
-  background: var(--glass-bg);
+.action-buttons {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
 }
 
-.activity-item i {
-  margin-top: var(--spacing-xs);
-  font-size: var(--font-size-lg);
-  color: #ffa8a8;
-  min-width: 20px;
+.action-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1.5rem;
+    background: rgba(102, 126, 234, 0.05);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: var(--transition);
+    text-align: center;
 }
 
-.usage-timeline {
-  background: rgba(255, 255, 255, 0.5);
-  border-radius: 15px;
-  padding: 1.5rem;
-  margin-top: 1rem;
+.action-btn:hover {
+    background: rgba(102, 126, 234, 0.1);
+    border-color: var(--accent);
+    transform: translateY(-4px);
 }
 
-.timeline-item {
-  display: flex;
-  align-items: center;
-  padding: 0.75rem 0;
-  border-bottom: 1px solid rgba(255, 168, 168, 0.2);
+.action-btn i {
+    font-size: 2rem;
+    color: var(--accent);
 }
 
-.timeline-item:last-child {
-  border-bottom: none;
+.action-btn span {
+    font-weight: 600;
+    color: var(--text-primary);
 }
 
-.timeline-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #ffa8a8, #8d96ff);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  margin-right: 1rem;
+.reset-countdown {
+    font-family: 'Courier New', monospace;
+    letter-spacing: 1px;
 }
 
-.timeline-content {
-  flex: 1;
+.reset-progress-bar {
+    width: 100%;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+    overflow: hidden;
+    margin-top: 0.75rem;
 }
 
-.timeline-title {
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 0.25rem;
+.reset-progress {
+    height: 100%;
+    background: var(--gradient-teal);
+    width: 0%;
+    transition: width 1s linear;
 }
 
-.timeline-details {
-  font-size: 0.875rem;
-  color: var(--text-secondary);
+.toast-container {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    pointer-events: none;
 }
 
-.timeline-time {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  margin-left: auto;
+.toast {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 1rem 1.5rem;
+    box-shadow: var(--shadow-lg);
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    min-width: 300px;
+    pointer-events: all;
+    animation: slideIn 0.3s ease;
 }
 
-.usage-chart {
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--border-radius-lg);
-  padding: 2.5rem;
-  margin-bottom: var(--spacing-2xl);
-  box-shadow: var(--shadow);
-  animation: scaleIn 0.5s ease;
+@keyframes slideIn {
+    from {
+        transform: translateX(400px);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
 }
 
-.usage-chart h3 {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-xl);
-  color: var(--text-primary);
-  font-size: var(--font-size-2xl);
-  font-weight: 700;
+.toast.success {
+    border-left: 4px solid #43e97b;
 }
 
-.chart-placeholder {
-  text-align: center;
-  padding: 4rem;
-  color: var(--text-muted);
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--glass-border);
+.toast.error {
+    border-left: 4px solid #ff6b6b;
 }
 
-.chart-placeholder i {
-  font-size: var(--font-size-4xl);
-  margin-bottom: var(--spacing-md);
-  opacity: 0.3;
+.toast.warning {
+    border-left: 4px solid #ffa500;
 }
 
-.text-muted {
-  color: var(--text-muted);
-  font-size: var(--font-size-sm);
-  margin-top: var(--spacing-sm);
+.toast.info {
+    border-left: 4px solid #4facfe;
 }
 
-.events-container {
-  max-width: 600px;
+.loading-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
 }
 
-/* ===== FOOTER ===== */
-.footer {
-  background: rgba(255, 255, 255, 0.6);
-  border-top: 1px solid var(--glass-border);
-  padding: 4rem 0 2rem;
-  color: var(--text-secondary);
+@media (max-width: 1200px) {
+    .profile-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .charts-container {
+        grid-template-columns: 1fr;
+    }
 }
 
-.footer a:hover {
-  color: #ffa8a8 !important;
+@media (max-width: 768px) {
+    .navbar,
+    .sidebar {
+        display: none !important;
+    }
+    
+    .mobile-header,
+    .sidebar-drawer {
+        display: block;
+    }
+    
+    .dashboard-container {
+        display: block;
+        min-height: calc(100vh - 73px);
+    }
+    
+    .main-content {
+        padding: 1.25rem;
+    }
+    
+    .stats-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+    
+    .section h2 {
+        font-size: 1.5rem;
+    }
+    
+    .stat-value {
+        font-size: 1.5rem;
+    }
+    
+    .form-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .form-actions {
+        flex-direction: column;
+    }
+    
+    .action-buttons {
+        grid-template-columns: 1fr;
+    }
+    
+    .profile-header {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .detail-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.75rem;
+    }
+    
+    .api-key-display {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .toast-container {
+        left: 1rem;
+        right: 1rem;
+    }
+    
+    .toast {
+        min-width: auto;
+    }
+}
+
+@media (min-width: 769px) {
+    .mobile-header,
+    .sidebar-drawer,
+    .drawer-overlay {
+        display: none !important;
+    }
+    
+    .sidebar {
+        display: block;
+    }
+    
+    .main-content {
+        margin-left: 280px;
+    }
+}
+
+@media (min-width: 1400px) {
+    .main-content {
+        max-width: 1400px;
+    }
 }
 
-/* ===== SCROLLBAR ===== */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+    width: 8px;
+    height: 8px;
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(255, 168, 168, 0.1);
-  border-radius: 4px;
+    background: var(--bg-primary);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--primary-gradient);
-  border-radius: 4px;
-  transition: background 0.3s ease;
+    background: var(--border-color);
+    border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(135deg, #ff8e8e 0%, #7580ee 100%);
-}
-
-/* ===== SWEETALERT2 ===== */
-.swal2-popup {
-  background: rgba(255, 255, 255, 0.9) !important;
-  backdrop-filter: blur(20px) !important;
-  border: 1px solid var(--glass-border) !important;
-  border-radius: var(--border-radius-lg) !important;
-  box-shadow: var(--shadow) !important;
-}
-
-.swal2-title {
-  color: var(--text-primary) !important;
-  font-weight: 700 !important;
+    background: var(--text-muted);
 }
 
-.swal2-content {
-  color: var(--text-secondary) !important;
+::selection {
+    background: rgba(102, 126, 234, 0.3);
+    color: var(--text-primary);
 }
 
-.swal2-confirm {
-  background: var(--primary-gradient) !important;
-  border: none !important;
-  border-radius: var(--border-radius) !important;
-  font-weight: 600 !important;
-  min-height: 44px !important;
+.fade-in {
+    animation: fadeIn 0.5s ease;
 }
 
-.swal2-cancel {
-  background: var(--danger-gradient) !important;
-  border: none !important;
-  border-radius: var(--border-radius) !important;
-  font-weight: 600 !important;
-  min-height: 44px !important;
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-.swal2-input {
-  background: rgba(255, 255, 255, 0.6) !important;
-  border: 1px solid var(--glass-border) !important;
-  border-radius: var(--border-radius) !important;
-  color: var(--text-primary) !important;
-  min-height: 48px !important;
-  padding: var(--spacing-md) !important;
+.pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-/* ===== ADVANCED ANIMATIONS ===== */
-.fade-enter {
-  animation: fadeIn 0.3s ease;
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
 }
 
-.fade-exit {
-  animation: fadeOut 0.3s ease;
+.required {
+    color: #ff6b6b;
 }
 
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+.text-center {
+    text-align: center;
 }
 
-.bounce {
-  animation: bounce 0.6s ease;
+.text-muted {
+    color: var(--text-muted);
 }
 
-@keyframes bounce {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-}
+.mt-1 { margin-top: 0.5rem; }
+.mt-2 { margin-top: 1rem; }
+.mt-3 { margin-top: 1.5rem; }
+.mt-4 { margin-top: 2rem; }
 
-/* ===== RESPONSIVE DESIGN ===== */
-@media (max-width: 1200px) {
-  .nav-menu {
-    gap: var(--spacing-md);
-  }
+.mb-1 { margin-bottom: 0.5rem; }
+.mb-2 { margin-bottom: 1rem; }
+.mb-3 { margin-bottom: 1.5rem; }
+.mb-4 { margin-bottom: 2rem; }
 
-  .stats-cards {
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  }
+.p-1 { padding: 0.5rem; }
+.p-2 { padding: 1rem; }
+.p-3 { padding: 1.5rem; }
+.p-4 { padding: 2rem; }
 
-  .info-grid {
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  }
+.flex {
+    display: flex;
 }
 
-@media (max-width: 768px) {
-  :root {
-    --spacing-xl: 1.5rem;
-    --spacing-2xl: 2rem;
-    --font-size-4xl: 2rem;
-    --font-size-3xl: 1.75rem;
-    --font-size-2xl: 1.25rem;
-  }
-
-  .dashboard-container {
+.flex-col {
     flex-direction: column;
-  }
-
-  .sidebar {
-    width: 100%;
-    height: auto;
-    position: relative;
-    top: 0;
-    order: 2;
-    border-right: none;
-    border-top: 1px solid var(--glass-border);
-    padding: var(--spacing-md) 0;
-  }
-
-  .sidebar-menu {
-    flex-direction: row;
-    overflow-x: auto;
-    padding: 0 var(--spacing-md);
-    gap: var(--spacing-md);
-  }
-
-  .menu-item {
-    white-space: nowrap;
-    min-width: 140px;
-    justify-content: center;
-    padding: var(--spacing-md);
-  }
-
-  .main-content {
-    order: 1;
-    max-width: 100vw;
-    padding: var(--spacing-lg);
-  }
-
-  .hero {
-    padding: 4rem var(--spacing-md) 3rem;
-  }
+}
 
-  .hero-title {
-    font-size: 2rem;
-  }
+.items-center {
+    align-items: center;
+}
 
-  .hero-subtitle {
-    font-size: var(--font-size-base);
-  }
+.justify-between {
+    justify-content: space-between;
+}
 
-  .hero-buttons {
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-md);
-  }
+.gap-1 { gap: 0.5rem; }
+.gap-2 { gap: 1rem; }
+.gap-3 { gap: 1.5rem; }
+.gap-4 { gap: 2rem; }
 
-  .section-title {
-    font-size: 2rem;
-  }
+.w-full {
+    width: 100%;
+}
 
-  .features-grid,
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
+.h-full {
+    height: 100%;
+}
 
-  .features {
-    padding: 4rem 0;
-  }
+.rounded {
+    border-radius: 8px;
+}
 
-  .stats {
-    padding: 4rem 0;
-  }
+.rounded-lg {
+    border-radius: 12px;
+}
 
-  .auth-card {
-    padding: var(--spacing-xl);
-    margin: var(--spacing-md);
-    max-width: none;
-  }
+.rounded-xl {
+    border-radius: 16px;
+}
 
-  .nav-menu {
-    flex-direction: column;
-    gap: var(--spacing-md);
-  }
+.shadow {
+    box-shadow: var(--shadow);
+}
 
-  .tab-btn {
-    font-size: var(--font-size-sm);
-    padding: var(--spacing-sm);
-  }
+.shadow-lg {
+    box-shadow: var(--shadow-lg);
+}
 
-  .stats-cards {
-    grid-template-columns: 1fr;
-  }
+.transition {
+    transition: var(--transition);
+}
 
-  .stats-cards .stat-card {
-    flex-direction: column;
-    text-align: center;
-    gap: var(--spacing-lg);
-  }
+.cursor-pointer {
+    cursor: pointer;
+}
 
-  .section h2 {
-    font-size: 2.2rem;
-  }
+.font-bold {
+    font-weight: 700;
+}
 
-  .form-actions {
-    flex-direction: column;
-    align-items: stretch;
-  }
+.font-semibold {
+    font-weight: 600;
+}
 
-  .btn-execute,
-  .btn-reset {
-    width: 100%;
-    justify-content: center;
-  }
+.text-sm {
+    font-size: 0.875rem;
+}
 
-  .input-group {
-    flex-direction: column;
-  }
+.text-lg {
+    font-size: 1.125rem;
+}
 
-  .form-row {
-    grid-template-columns: 1fr;
-  }
+.text-xl {
+    font-size: 1.25rem;
+}
 
-  .premium-actions {
-    flex-direction: column;
-  }
+.opacity-50 {
+    opacity: 0.5;
+}
 
-  .info-grid {
-    grid-template-columns: 1fr;
-  }
+.opacity-75 {
+    opacity: 0.75;
+}
 
-  .response-header {
-    flex-direction: column;
-    align-items: stretch;
-    gap: var(--spacing-sm);
-  }
+.hidden {
+    display: none;
+}
 
-  .activity-item {
-    flex-direction: column;
-    text-align: center;
-    gap: var(--spacing-md);
-  }
+.block {
+    display: block;
+}
 
-  .plugin-header {
-    flex-direction: column;
-    gap: var(--spacing-md);
-    text-align: center;
-    min-height: auto;
-    padding: var(--spacing-lg);
-  }
-
-  .plugin-left {
-    order: 2;
-  }
-
-  .plugin-type {
-    order: 1;
-  }
-
-  .plugin-expand {
-    order: 3;
-    margin-left: 0;
-  }
-
-  .profile-container {
-    padding: 0 var(--spacing-md);
-  }
-
-  .profile-header {
-    padding: var(--spacing-xl);
-  }
-
-  .profile-section {
-    padding: var(--spacing-lg);
-  }
-
-  .form-field input,
-  .form-field select,
-  .form-group input,
-  .form-group select,
-  .btn,
-  .menu-item,
-  .api-key-display {
-    min-height: 44px;
-  }
-
-  .btn-sm {
-    min-height: 32px;
-  }
-}
-
-@media (max-width: 480px) {
-  .container {
-    padding: 0 var(--spacing-md);
-  }
-
-  .hero {
-    padding: 3rem var(--spacing-md) 2rem;
-  }
-
-  .hero-title {
-    font-size: 1.75rem;
-  }
+.inline-block {
+    display: inline-block;
+}
 
-  .feature-card,
-  .stat-card {
-    padding: var(--spacing-lg);
-  }
+.relative {
+    position: relative;
+}
 
-  .feature-icon {
-    font-size: 3rem;
-  }
+.absolute {
+    position: absolute;
+}
 
-  .stat-number {
-    font-size: 2.5rem;
-  }
+.fixed {
+    position: fixed;
+}
 
-  .navbar-brand {
-    font-size: var(--font-size-xl);
-  }
+.overflow-hidden {
+    overflow: hidden;
+}
 
-  .nav-link {
-    justify-content: center;
-    margin: var(--spacing-xs) 0;
-  }
-
-  .sidebar-menu {
-    padding: 0 var(--spacing-sm);
-  }
-
-  .main-content {
-    padding: var(--spacing-md);
-  }
-
-  .stats-cards .stat-card,
-  .plugin-details,
-  .redeem-section,
-  .setting-card,
-  .admin-card,
-  .profile-section {
-    padding: var(--spacing-lg);
-  }
-
-  .plugin-header {
-    padding: var(--spacing-md);
-  }
-
-  .cta-buttons {
-    flex-direction: column;
-  }
+.overflow-auto {
+    overflow: auto;
+}
 
-  .btn-lg {
-    width: 100%;
-  }
+.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
+
+.select-none {
+    user-select: none;
+}
+
+.pointer-events-none {
+    pointer-events: none;
+}
+
+.z-10 { z-index: 10; }
+.z-20 { z-index: 20; }
+.z-50 { z-index: 50; }
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+@media print {
+    .navbar,
+    .mobile-header,
+    .sidebar,
+    .sidebar-drawer,
+    .drawer-overlay,
+    .btn,
+    .action-btn,
+    .action-item {
+        display: none !important;
+    }
+    
+    .main-content {
+        margin: 0;
+        padding: 0;
+    }
+    
+    .section {
+        page-break-inside: avoid;
+    }
+}
\ No newline at end of file