Update public/styles.css

public/styles.css

@@ -56,255 +56,6 @@ body {
     font-size: var(--font-size-base);
 }
 
-.plugins-search {
-    margin-bottom: 2rem;
-}
-
-.search-container {
-    position: relative;
-    max-width: 500px;
-    margin: 0 auto;
-}
-
-.search-container i.fa-search {
-    position: absolute;
-    left: 1rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #8D96FF;
-    z-index: 1;
-}
-
-.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;
-}
-
-.tag-section:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(0, 0, 0, 0.5);
-}
-
-.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);
-}
-
-.tag-header:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.tag-title {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.9);
-}
-
-.tag-title i {
-    color: rgba(133, 48, 48, 0.9);
-    font-size: 1.3rem;
-}
-
-.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;
-}
-
-.tag-expand {
-    color: rgba(255, 255, 255, 0.6);
-    font-size: 1.2rem;
-    transition: transform 0.3s ease;
-}
-
-.tag-expand.expanded {
-    transform: rotate(180deg);
-}
-
-.tag-content {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.4s ease;
-    padding: 0 1.5rem;
-}
-
-.tag-content.expanded {
-    max-height: 10000px;
-    padding: 1.5rem;
-}
-
-.tag-content .plugin-card {
-    margin-bottom: 1rem;
-}
-
-.tag-content .plugin-card:last-child {
-    margin-bottom: 0;
-}
-
-.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;
-}
-
-.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);
-}
-
-.search-container input::placeholder {
-    color: var(--text-muted);
-}
-
-.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;
-}
-
-.search-container button:hover {
-    background: #FF8E8E;
-    transform: translateY(-50%) scale(1.1);
-}
-
-.admin-card .ban-actions {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 1rem;
-}
-
-.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;
-}
-
-.admin-card .ban-actions .btn-danger {
-    background: #e74c3c;
-    color: white;
-}
-
-.admin-card .ban-actions .btn-danger:hover {
-    background: #c0392b;
-    transform: translateY(-2px);
-}
-
-.admin-card .ban-actions .btn-success {
-    background: #8D96FF;
-    color: white;
-}
-
-.admin-card .ban-actions .btn-success:hover {
-    background: #7580EE;
-    transform: translateY(-2px);
-}
-
-.ban-status {
-    padding: 1rem;
-    border-radius: 8px;
-    margin-top: 1rem;
-    font-weight: 500;
-}
-
-.ban-status.banned {
-    background: rgba(231, 76, 60, 0.1);
-    border: 1px solid #e74c3c;
-    color: #e74c3c;
-}
-
-.ban-status.active {
-    background: rgba(141, 150, 255, 0.1);
-    border: 1px solid #8D96FF;
-    color: #8D96FF;
-}
-
-.usage-timeline {
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 15px;
-    padding: 1.5rem;
-    margin-top: 1rem;
-}
-
-.timeline-item {
-    display: flex;
-    align-items: center;
-    padding: 0.75rem 0;
-    border-bottom: 1px solid rgba(255, 168, 168, 0.2);
-}
-
-.timeline-item:last-child {
-    border-bottom: none;
-}
-
-.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;
-}
-
-.timeline-content {
-    flex: 1;
-}
-
-.timeline-title {
-    font-weight: 600;
-    color: var(--text-primary);
-    margin-bottom: 0.25rem;
-}
-
-.timeline-details {
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-}
-
-.timeline-time {
-    font-size: 0.75rem;
-    color: var(--text-muted);
-    margin-left: auto;
-}
-
 body::before {
     content: '';
     position: fixed;
@@ -325,8 +76,9 @@ body::before {
     50% { opacity: 0.8; }
 }
 
+/* ===== NAVBAR ===== */
 .navbar {
-    background: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.8) !important;
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--glass-border);
     padding: var(--spacing-md) 0;
@@ -345,22 +97,43 @@ body::before {
     align-items: center;
 }
 
-.nav-brand h2 {
+.navbar-brand {
+    font-size: var(--font-size-2xl);
+    font-weight: 800;
     background: var(--primary-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    font-size: var(--font-size-2xl);
-    font-weight: 800;
+    background-clip: text;
+    text-decoration: none;
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     letter-spacing: -0.02em;
 }
 
-.nav-brand a {
+.navbar-brand a {
     text-decoration: none;
 }
 
+.navbar-brand i {
+    background: var(--primary-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.nav-brand h2 {
+    background: var(--primary-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: var(--font-size-2xl);
+    font-weight: 800;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    letter-spacing: -0.02em;
+}
+
 .nav-menu {
     display: flex;
     gap: var(--spacing-xl);
@@ -368,35 +141,52 @@ body::before {
 }
 
 .nav-link {
-    color: var(--text-secondary);
+    color: var(--text-secondary) !important;
     text-decoration: none;
-    padding: var(--spacing-sm) var(--spacing-lg);
+    padding: var(--spacing-sm) var(--spacing-lg) !important;
     border-radius: var(--border-radius);
     transition: var(--transition-base);
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     font-weight: 500;
-    background: var(--glass-bg);
+    background: transparent;
     border: 1px solid transparent;
-    backdrop-filter: blur(10px);
     font-size: var(--font-size-sm);
+    margin: 0 var(--spacing-xs);
 }
 
 .nav-link:hover {
-    background: var(--glass-hover);
-    color: var(--text-primary);
+    background: var(--glass-bg) !important;
+    color: var(--text-primary) !important;
     transform: translateY(-2px);
     box-shadow: var(--shadow-sm);
     border-color: var(--glass-border);
 }
 
+.nav-link.btn-primary {
+    background: var(--primary-gradient) !important;
+    color: white !important;
+    box-shadow: 0 4px 20px rgba(255, 168, 168, 0.4);
+}
+
+.nav-link.btn-primary:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 8px 30px rgba(255, 168, 168, 0.5) !important;
+}
+
+/* ===== HERO SECTION ===== */
 .hero {
     text-align: center;
     padding: 8rem var(--spacing-xl) 6rem;
     position: relative;
 }
 
+.hero-content {
+    max-width: 900px;
+    margin: 0 auto;
+}
+
 .hero-title {
     font-size: clamp(2.5rem, 5vw, 4.5rem);
     font-weight: 800;
@@ -405,6 +195,7 @@ body::before {
     background-size: 300% 300%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+    background-clip: text;
     animation: gradientShift 6s ease-in-out infinite;
     letter-spacing: -0.03em;
     line-height: 1.1;
@@ -420,10 +211,10 @@ body::before {
     margin-bottom: var(--spacing-2xl);
     color: var(--text-secondary);
     font-weight: 400;
-    max-width: 600px;
+    max-width: 700px;
     margin-left: auto;
     margin-right: auto;
-    line-height: 1.5;
+    line-height: 1.6;
 }
 
 .hero-buttons {
@@ -433,6 +224,7 @@ body::before {
     flex-wrap: wrap;
 }
 
+/* ===== BUTTONS ===== */
 .btn {
     padding: var(--spacing-md) var(--spacing-xl);
     border: none;
@@ -478,6 +270,7 @@ body::before {
 .btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 30px rgba(255, 168, 168, 0.5);
+    color: white;
 }
 
 .btn-secondary {
@@ -490,6 +283,7 @@ body::before {
     background: var(--glass-hover);
     transform: translateY(-3px);
     box-shadow: var(--shadow);
+    color: var(--text-primary);
 }
 
 .btn-warning {
@@ -501,6 +295,7 @@ body::before {
 .btn-warning:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 30px rgba(255, 168, 168, 0.5);
+    color: white;
 }
 
 .btn-danger {
@@ -512,6 +307,7 @@ body::before {
 .btn-danger:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 30px rgba(250, 112, 154, 0.5);
+    color: white;
 }
 
 .btn-info {
@@ -523,6 +319,7 @@ body::before {
 .btn-info:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 30px rgba(141, 150, 255, 0.5);
+    color: white;
 }
 
 .btn-sm {
@@ -538,12 +335,14 @@ body::before {
     box-shadow: none !important;
 }
 
+/* ===== CONTAINER ===== */
 .container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 var(--spacing-xl);
 }
 
+/* ===== FEATURES SECTION ===== */
 .features {
     padding: 8rem 0;
     background: rgba(255, 255, 255, 0.5);
@@ -561,6 +360,7 @@ body::before {
     background: var(--primary-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+    background-clip: text;
     letter-spacing: -0.02em;
 }
 
@@ -623,6 +423,7 @@ body::before {
     background: var(--primary-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+    background-clip: text;
     transition: transform var(--transition-base);
 }
 
@@ -643,73 +444,167 @@ body::before {
     font-size: var(--font-size-base);
 }
 
+/* ===== STATS SECTION ===== */
 .stats {
     padding: 8rem 0;
     position: relative;
 }
 
-.stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 2.5rem;
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2.5rem;
+}
+
+.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;
+}
+
+.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);
+}
+
+.stat-card:hover::before {
+    opacity: 1;
+}
+
+.stat-card:hover {
+    transform: translateY(-10px);
+    border-color: rgba(255, 168, 168, 0.6);
+    box-shadow: var(--shadow);
+}
+
+.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;
+}
+
+.stat-label {
+    font-size: var(--font-size-lg);
+    color: var(--text-secondary);
+    font-weight: 500;
+    position: relative;
+    z-index: 1;
+}
+
+.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);
+}
+
+.stat-info {
+    flex: 1;
+}
+
+.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;
+}
+
+.stat-info .stat-label {
+    font-size: var(--font-size-base);
+    color: var(--text-secondary);
+    font-weight: 500;
 }
 
-.stat-card {
+.stat-item {
+    text-align: center;
+    padding: var(--spacing-lg);
     background: var(--glass-bg);
-    backdrop-filter: blur(20px);
+    border-radius: var(--border-radius);
     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;
-}
-
-.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);
-}
-
-.stat-card:hover::before {
-    opacity: 1;
+    min-height: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
-.stat-card:hover {
-    transform: translateY(-10px);
-    border-color: rgba(255, 168, 168, 0.6);
+.stat-item:hover {
+    transform: translateY(-3px);
     box-shadow: var(--shadow);
 }
 
-.stat-number {
-    font-size: 3.5rem;
+.stat-value {
+    display: block;
+    font-size: 2.2rem;
     font-weight: 800;
-    margin-bottom: var(--spacing-md);
     background: var(--primary-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    display: block;
-    position: relative;
-    z-index: 1;
+    margin-bottom: var(--spacing-sm);
     line-height: 1.1;
 }
 
-.stat-label {
-    font-size: var(--font-size-lg);
-    color: var(--text-secondary);
-    font-weight: 500;
-    position: relative;
-    z-index: 1;
-}
-
+/* ===== AUTH CONTAINER ===== */
 .auth-container {
     min-height: 100vh;
     display: flex;
@@ -830,6 +725,7 @@ body::before {
     background: rgba(255, 255, 255, 0.8);
 }
 
+/* ===== DASHBOARD ===== */
 .dashboard-container {
     display: flex;
     min-height: calc(100vh - 80px);
@@ -847,157 +743,388 @@ body::before {
     overflow-y: auto;
 }
 
-.sidebar-menu {
+.sidebar-menu {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    padding: 0 var(--spacing-lg);
+}
+
+.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;
+}
+
+.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);
+}
+
+.menu-item:hover,
+.menu-item.active {
+    background: var(--glass-bg);
+    color: var(--text-primary);
+    transform: translateX(8px);
+    border-color: var(--glass-border);
+}
+
+.menu-item:hover::before,
+.menu-item.active::before {
+    height: 30px;
+}
+
+.main-content {
+    flex: 1;
+    padding: 2.5rem;
+    overflow-y: auto;
+    max-width: calc(100vw - 280px);
+}
+
+.section {
+    display: none;
+    animation: fadeInUp var(--transition-slow);
+}
+
+.section.active {
+    display: block;
+}
+
+@keyframes fadeInUp {
+    from { 
+        opacity: 0; 
+        transform: translateY(20px); 
+    }
+    to { 
+        opacity: 1; 
+        transform: translateY(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-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-card:hover {
+    border-color: rgba(255, 168, 168, 0.6);
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+}
+
+.plugin-card.expanded {
+    border-color: rgba(255, 168, 168, 0.8);
+    box-shadow: var(--shadow-lg);
+}
+
+.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-header:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.plugin-left {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    flex: 1;
+}
+
+.plugin-name {
+    font-size: var(--font-size-xl);
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: var(--spacing-sm);
+}
+
+.plugin-description {
+    color: var(--text-secondary);
+    font-size: var(--font-size-base);
+    line-height: 1.5;
+}
+
+.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-expand {
+    font-size: var(--font-size-2xl);
+    color: var(--text-muted);
+    transition: var(--transition-base);
+    margin-left: var(--spacing-md);
+}
+
+.plugin-expand.expanded {
+    transform: rotate(180deg);
+    color: #FFA8A8;
+}
+
+.plugin-content {
+    display: none;
+    border-top: 1px solid var(--glass-border);
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.plugin-content.expanded {
+    display: block;
+    animation: slideDown var(--transition-base);
+}
+
+@keyframes slideDown {
+    from { opacity: 0; max-height: 0; }
+    to { opacity: 1; max-height: 1000px; }
+}
+
+.plugin-details {
+    padding: var(--spacing-xl);
+}
+
+.plugin-tags {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
     gap: var(--spacing-sm);
-    padding: 0 var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
 }
 
-.menu-item {
+.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;
-    gap: var(--spacing-md);
-    padding: 1.2rem var(--spacing-lg);
-    color: var(--text-muted);
-    text-decoration: none;
+}
+
+.tag:hover {
+    background: rgba(255, 168, 168, 0.35);
+    transform: translateY(-2px);
+}
+
+.plugin-routes {
+    background: rgba(255, 255, 255, 0.4);
+    padding: var(--spacing-lg);
     border-radius: var(--border-radius);
-    transition: var(--transition-base);
-    font-weight: 500;
+    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);
+}
+
+.plugins-search {
+    margin-bottom: 2rem;
+}
+
+.search-container {
     position: relative;
-    background: transparent;
-    border: 1px solid transparent;
-    min-height: 52px;
+    max-width: 500px;
+    margin: 0 auto;
 }
 
-.menu-item::before {
-    content: '';
+.search-container i.fa-search {
     position: absolute;
-    left: 0;
+    left: 1rem;
     top: 50%;
     transform: translateY(-50%);
-    width: 4px;
-    height: 0;
-    background: var(--primary-gradient);
-    border-radius: 2px;
-    transition: height var(--transition-base);
+    color: #8D96FF;
+    z-index: 1;
 }
 
-.menu-item:hover,
-.menu-item.active {
-    background: var(--glass-bg);
+.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);
-    transform: translateX(8px);
-    border-color: var(--glass-border);
+    font-size: 1rem;
+    transition: all 0.3s ease;
 }
 
-.menu-item:hover::before,
-.menu-item.active::before {
-    height: 30px;
+.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);
 }
 
-.main-content {
-    flex: 1;
-    padding: 2.5rem;
-    overflow-y: auto;
-    max-width: calc(100vw - 280px);
+.search-container input::placeholder {
+    color: var(--text-muted);
 }
 
-.section {
-    display: none;
-    animation: fadeInUp var(--transition-slow);
+.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;
 }
 
-.section.active {
-    display: block;
+.search-container button:hover {
+    background: #FF8E8E;
+    transform: translateY(-50%) scale(1.1);
 }
 
-@keyframes fadeInUp {
-    from { 
-        opacity: 0; 
-        transform: translateY(20px); 
-    }
-    to { 
-        opacity: 1; 
-        transform: translateY(0); 
-    }
+.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;
 }
 
-.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;
+.tag-section:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.tag-header {
+    padding: 1.5rem;
+    cursor: pointer;
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    gap: var(--spacing-sm);
-    letter-spacing: -0.02em;
+    transition: all 0.3s ease;
+    background: rgba(255, 255, 255, 0.02);
 }
 
-.stats-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: var(--spacing-xl);
-    margin-bottom: var(--spacing-2xl);
+.tag-header:hover {
+    background: rgba(255, 255, 255, 0.05);
 }
 
-.stats-cards .stat-card {
+.tag-title {
     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);
+    gap: 1rem;
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.9);
 }
 
-.stats-cards .stat-card:hover {
-    transform: translateY(-5px);
-    box-shadow: var(--shadow-lg);
+.tag-title i {
+    color: rgba(133, 48, 48, 0.9);
+    font-size: 1.3rem;
 }
 
-.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;
+.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;
 }
 
-.stat-info {
-    flex: 1;
+.tag-expand {
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 1.2rem;
+    transition: transform 0.3s ease;
 }
 
-.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-expand.expanded {
+    transform: rotate(180deg);
 }
 
-.stat-info .stat-label {
-    font-size: var(--font-size-base);
-    color: var(--text-secondary);
-    font-weight: 500;
+.tag-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s ease;
+    padding: 0 1.5rem;
+}
+
+.tag-content.expanded {
+    max-height: 10000px;
+    padding: 1.5rem;
+}
+
+.tag-content .plugin-card {
+    margin-bottom: 1rem;
+}
+
+.tag-content .plugin-card:last-child {
+    margin-bottom: 0;
 }
 
+/* ===== FORMS ===== */
 .plugin-form {
     background: rgba(255, 255, 255, 0.4);
     border-radius: var(--border-radius);
@@ -1082,36 +1209,69 @@ body::before {
 
 .input-group {
     display: flex;
-    gap: var(--spacing-md);
-    align-items: end;
-    flex-wrap: wrap;
+    gap: var(--spacing-md);
+    align-items: end;
+    flex-wrap: wrap;
+}
+
+.input-group input {
+    flex: 1;
+    min-width: 200px;
+}
+
+.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;
 }
 
-.input-group input {
-    flex: 1;
-    min-width: 200px;
+.btn-execute:hover:not(:disabled) {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 30px rgba(255, 168, 168, 0.4);
 }
 
-.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;
+.btn-execute:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none !important;
+    box-shadow: none !important;
 }
 
-@keyframes spin {
-    to { transform: rotate(360deg); }
+.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;
 }
 
-.loading {
-    text-align: center;
-    padding: var(--spacing-2xl);
-    color: var(--text-muted);
-    font-size: var(--font-size-lg);
+.btn-reset:hover {
+    background: var(--glass-hover);
+    color: var(--text-primary);
+    transform: translateY(-2px);
 }
 
+/* ===== RESPONSE ===== */
 .response-container {
     margin-top: var(--spacing-xl);
     display: none;
@@ -1188,224 +1348,41 @@ body::before {
     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);
-}
-
-.plugins-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--spacing-xl);
-}
-
-.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-card:hover {
-    border-color: rgba(255, 168, 168, 0.6);
-    transform: translateY(-5px);
-    box-shadow: var(--shadow-lg);
-}
-
-.plugin-card.expanded {
-    border-color: rgba(255, 168, 168, 0.8);
-    box-shadow: var(--shadow-lg);
-}
-
-.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-header:hover {
-    background: rgba(255, 255, 255, 0.3);
-}
-
-.plugin-left {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-md);
-    flex: 1;
-}
-
-.plugin-name {
-    font-size: var(--font-size-xl);
-    font-weight: 700;
-    color: var(--text-primary);
-    margin-bottom: var(--spacing-sm);
-}
-
-.plugin-description {
-    color: var(--text-secondary);
-    font-size: var(--font-size-base);
-    line-height: 1.5;
-}
-
-.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-expand {
-    font-size: var(--font-size-2xl);
-    color: var(--text-muted);
-    transition: var(--transition-base);
-    margin-left: var(--spacing-md);
-}
-
-.plugin-expand.expanded {
-    transform: rotate(180deg);
-    color: #FFA8A8;
-}
-
-.plugin-content {
-    display: none;
-    border-top: 1px solid var(--glass-border);
-    background: rgba(255, 255, 255, 0.3);
-}
-
-.plugin-content.expanded {
-    display: block;
-    animation: slideDown var(--transition-base);
-}
-
-@keyframes slideDown {
-    from { opacity: 0; max-height: 0; }
-    to { opacity: 1; max-height: 1000px; }
-}
-
-.plugin-details {
-    padding: var(--spacing-xl);
-}
-
-.plugin-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacing-sm);
-    margin-bottom: var(--spacing-lg);
-}
-
-.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;
-}
-
-.tag:hover {
-    background: rgba(255, 168, 168, 0.35);
-    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 {
-    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;
-}
-
-.btn-execute:hover:not(:disabled) {
-    transform: translateY(-3px);
-    box-shadow: 0 8px 30px rgba(255, 168, 168, 0.4);
-}
-
-.btn-execute:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    transform: none !important;
-    box-shadow: none !important;
-}
-
-.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;
+    font-size: var(--font-size-xs);
     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;
+    gap: var(--spacing-xs);
+    min-height: 32px;
 }
 
-.btn-reset:hover {
-    background: var(--glass-hover);
-    color: var(--text-primary);
+.copy-btn:hover {
+    background: rgba(255, 168, 168, 0.35);
     transform: translateY(-2px);
 }
 
-.events-container {
-    max-width: 600px;
+.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;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.loading {
+    text-align: center;
+    padding: var(--spacing-2xl);
+    color: var(--text-muted);
+    font-size: var(--font-size-lg);
 }
 
+/* ===== PROFILE ===== */
 .profile-container {
     max-width: 1000px;
     margin: var(--spacing-xl) auto;
@@ -1484,7 +1461,6 @@ body::before {
     text-transform: uppercase;
     letter-spacing: 0.5px;
     backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     transition: all 0.3s ease;
     border: 1px solid;
@@ -1697,6 +1673,7 @@ body::before {
     font-size: var(--font-size-sm);
 }
 
+/* ===== REDEEM & SETTINGS ===== */
 .redeem-section,
 .setting-card,
 .admin-card {
@@ -1774,6 +1751,62 @@ body::before {
     line-height: 1.5;
 }
 
+.admin-card .ban-actions {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.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;
+}
+
+.admin-card .ban-actions .btn-danger {
+    background: #e74c3c;
+    color: white;
+}
+
+.admin-card .ban-actions .btn-danger:hover {
+    background: #c0392b;
+    transform: translateY(-2px);
+}
+
+.admin-card .ban-actions .btn-success {
+    background: #8D96FF;
+    color: white;
+}
+
+.admin-card .ban-actions .btn-success:hover {
+    background: #7580EE;
+    transform: translateY(-2px);
+}
+
+.ban-status {
+    padding: 1rem;
+    border-radius: 8px;
+    margin-top: 1rem;
+    font-weight: 500;
+}
+
+.ban-status.banned {
+    background: rgba(231, 76, 60, 0.1);
+    border: 1px solid #e74c3c;
+    color: #e74c3c;
+}
+
+.ban-status.active {
+    background: rgba(141, 150, 255, 0.1);
+    border: 1px solid #8D96FF;
+    color: #8D96FF;
+}
+
+/* ===== USAGE & ACTIVITY ===== */
 .usage-progress {
     margin-bottom: var(--spacing-lg);
 }
@@ -1848,33 +1881,55 @@ body::before {
     min-width: 20px;
 }
 
-.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;
+.usage-timeline {
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 15px;
+    padding: 1.5rem;
+    margin-top: 1rem;
+}
+
+.timeline-item {
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid rgba(255, 168, 168, 0.2);
+}
+
+.timeline-item:last-child {
+    border-bottom: none;
+}
+
+.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;
 }
 
-.stat-item:hover {
-    transform: translateY(-3px);
-    box-shadow: var(--shadow);
+.timeline-content {
+    flex: 1;
 }
 
-.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;
+.timeline-title {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.25rem;
+}
+
+.timeline-details {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+.timeline-time {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-left: auto;
 }
 
 .usage-chart {
@@ -1918,14 +1973,23 @@ body::before {
     margin-top: var(--spacing-sm);
 }
 
+.events-container {
+    max-width: 600px;
+}
+
+/* ===== FOOTER ===== */
 .footer {
     background: rgba(255, 255, 255, 0.6);
     border-top: 1px solid var(--glass-border);
-    padding: 4rem 0;
-    text-align: center;
+    padding: 4rem 0 2rem;
     color: var(--text-secondary);
 }
 
+.footer a:hover {
+    color: #FFA8A8 !important;
+}
+
+/* ===== SCROLLBAR ===== */
 ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -1945,6 +2009,7 @@ body::before {
     background: linear-gradient(135deg, #FF8E8E 0%, #7580EE 100%);
 }
 
+/* ===== SWEETALERT2 ===== */
 .swal2-popup {
     background: rgba(255, 255, 255, 0.9) !important;
     backdrop-filter: blur(20px) !important;
@@ -1987,6 +2052,7 @@ body::before {
     padding: var(--spacing-md) !important;
 }
 
+/* ===== RESPONSIVE DESIGN ===== */
 @media (max-width: 1200px) {
     .nav-menu {
         gap: var(--spacing-md);
@@ -2053,51 +2119,8 @@ body::before {
         font-size: 2rem;
     }
 
-    .section-title {
-        font-size: 2rem;
-    }
-
-    .auth-card {
-        margin: var(--spacing-sm);
-        padding: var(--spacing-lg);
-    }
-
-    .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);
-    }
-
-    .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;
-    }
-}
-        font-size: 2.5rem;
+    .hero-subtitle {
+        font-size: var(--font-size-base);
     }
 
     .hero-buttons {
@@ -2106,6 +2129,10 @@ body::before {
         gap: var(--spacing-md);
     }
 
+    .section-title {
+        font-size: 2rem;
+    }
+
     .features-grid,
     .stats-grid {
         grid-template-columns: 1fr;
@@ -2220,6 +2247,20 @@ body::before {
     .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) {
@@ -2231,98 +2272,50 @@ body::before {
         padding: 3rem var(--spacing-md) 2rem;
     }
 
-        .hero-title {
-            font-size: 2rem;
-        }
-
-        .section-title {
-            font-size: 2rem;
-        }
-
-        .auth-card {
-            margin: var(--spacing-sm);
-            padding: var(--spacing-lg);
-        }
-
-        .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);
-        }
-
-        .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;
-        }
-        }
-            font-size: 2rem;
-        }
-
-        .section-title {
-            font-size: 2rem;
-        }
-
-        .auth-card {
-            margin: var(--spacing-sm);
-            padding: var(--spacing-lg);
-        }
-
-        .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);
-        }
-
-        .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;
-        }
-        
+    .hero-title {
+        font-size: 1.75rem;
+    }
+
+    .feature-card,
+    .stat-card {
+        padding: var(--spacing-lg);
+    }
+
+    .feature-icon {
+        font-size: 3rem;
+    }
+
+    .stat-number {
+        font-size: 2.5rem;
+    }
+
+    .navbar-brand {
+        font-size: var(--font-size-xl);
+    }
+
+    .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);
+    }
+}