:root {
     --background: #050505;
     --foreground: #e5e5e5;
     --card: #0f1014;
     --card-foreground: #e5e5e5;
     --popover: #0f1014;
     --popover-foreground: #e5e5e5;
     --primary: #d4af37;
     --primary-foreground: #000000;
     --secondary: #1a1c23;
     --secondary-foreground: #ffffff;
     --muted: #27272a;
     --muted-foreground: #a1a1aa;
     --accent: #d4af37;
     --accent-foreground: #000000;
     --destructive: #7f1d1d;
     --destructive-foreground: #ffffff;
     --border: #2e2e2e;
     --input: #27272a;
     --ring: #d4af37;
     --radius-sm: 4px;
     --radius-md: 6px;
     --radius-lg: 8px;
     --radius-xl: 12px;
     --font-family-body: "Segoe UI", system-ui, sans-serif;
     --glow-color: rgba(212, 175, 55, 0.5);
     --primary-rgb: 212, 175, 55;
 }

 * {
     box-sizing: border-box;
 }

 body {
     margin: 0;
     font-family: var(--font-family-body);
     background-color: var(--background);
     color: var(--foreground);
     line-height: 1.5;
     overflow-x: hidden;
 }

 /* Typography Utility */
 .h1 {
     font-size: 48px;
     font-weight: 800;
     letter-spacing: -1px;
     line-height: 1.1;
     text-transform: uppercase;
 }

 .h2 {
     font-size: 30px;
     font-weight: 700;
     letter-spacing: -0.5px;
 }

 .h3 {
     font-size: 24px;
     font-weight: 600;
 }

 .text-lg {
     font-size: 18px;
 }

 .text-sm {
     font-size: 14px;
 }

 .text-xs {
     font-size: 12px;
 }

 .font-bold {
     font-weight: 700;
 }

 .text-muted {
     color: var(--muted-foreground);
 }

 .text-primary {
     color: var(--primary);
 }

 .text-center {
     text-align: center;
 }

 .uppercase {
     text-transform: uppercase;
 }

 /* Layout Utility */
 .container {
     max-width: 1300px;
     margin: 0 auto;
     padding: 0 24px;
 }

 .flex {
     display: flex;
 }

 .flex-col {
     display: flex;
     flex-direction: column;
 }

 .items-center {
     align-items: center;
 }

 .justify-between {
     justify-content: space-between;
 }

 .justify-center {
     justify-content: center;
 }

 .gap-2 {
     gap: 8px;
 }

 .gap-4 {
     gap: 16px;
 }

 .gap-6 {
     gap: 24px;
 }

 .gap-8 {
     gap: 32px;
 }

 .gap-12 {
     gap: 48px;
 }

 .w-full {
     width: 100%;
 }

 /* GRID SYSTEM (12 Cols) */
 .grid {
     display: grid;
 }

 .grid-cols-1 {
     grid-template-columns: repeat(1, 1fr);
 }

 .grid-cols-2 {
     grid-template-columns: repeat(2, 1fr);
 }

 .grid-cols-3 {
     grid-template-columns: repeat(3, 1fr);
 }

 .grid-cols-4 {
     grid-template-columns: repeat(4, 1fr);
 }

 .grid-cols-12 {
     grid-template-columns: repeat(12, 1fr);
 }

 .col-span-1 {
     grid-column: span 1 / span 1;
 }

 .col-span-5 {
     grid-column: span 5 / span 5;
 }

 .col-span-7 {
     grid-column: span 7 / span 7;
 }

 .col-span-12 {
     grid-column: span 12 / span 12;
 }

 /* Responsive Grid */
 @media (min-width: 768px) {
     .md\:grid-cols-2 {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (min-width: 1024px) {
     .lg\:grid-cols-2 {
         grid-template-columns: repeat(2, 1fr);
     }

     .lg\:grid-cols-3 {
         grid-template-columns: repeat(3, 1fr);
     }

     .lg\:grid-cols-4 {
         grid-template-columns: repeat(4, 1fr);
     }

     .lg\:col-span-2 {
         grid-column: span 2 / span 2;
     }

     .lg\:grid-cols-12 {
         grid-template-columns: repeat(12, 1fr);
     }

     .lg\:col-span-5 {
         grid-column: span 5 / span 5;
     }

     .lg\:col-span-7 {
         grid-column: span 7 / span 7;
     }
 }

 /* Components */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 10px 24px;
     border-radius: var(--radius-sm);
     font-weight: 600;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.2s;
     border: 1px solid transparent;
     text-decoration: none;
     white-space: nowrap;
 }

 .btn-primary {
     background-color: var(--primary);
     color: var(--primary-foreground);
     box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
 }

 .btn-outline {
     background-color: transparent;
     border: 1px solid var(--primary);
     color: var(--primary);
 }

 .btn-secondary {
     background-color: var(--secondary);
     color: var(--secondary-foreground);
     border: 1px solid var(--border);
 }

 .badge {
     padding: 4px 8px;
     border-radius: var(--radius-sm);
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .badge-new {
     background-color: var(--primary);
     color: black;
 }

 .badge-sale {
     background-color: var(--destructive);
     color: white;
 }

 /* Form Elements */
 input[type="text"],
 input[type="email"],
 input[type="password"],
 input[type="number"],
 input[type="search"],
 input[type="tel"],
 input[type="url"],
 input[type="date"],
 input[type="datetime-local"],
 textarea,
 select {
     background-color: var(--input);
     border: 1px solid var(--border);
     color: var(--foreground);
     padding: 10px 16px;
     border-radius: var(--radius-sm);
     width: 100%;
     outline: none;
     transition: border-color 0.2s, box-shadow 0.2s;
     font-family: inherit;
     font-size: 14px;
 }

 input:focus,
 textarea:focus,
 select:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
 }

 input::placeholder,
 textarea::placeholder {
     color: var(--muted-foreground);
     opacity: 0.7;
 }

 /* Navbar */
 .navbar {
     height: 80px;
     background: rgba(5, 5, 5, 0.85);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid var(--border);
     position: sticky;
     top: 0;
     z-index: 50;
 }

 /* Navigation Dropdown System */
 .nav-item-wrapper {
     position: relative;
     height: 100%;
     display: flex;
     align-items: center;
 }

 .nav-dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     min-width: 240px;
     background: #0f1014;
     /* Fallback for var(--card) if needed, but var exists */
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
     padding: 6px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 100;
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .nav-item-wrapper:hover .nav-dropdown {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .dropdown-link {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 12px;
     color: rgba(255, 255, 255, 0.6);
     text-decoration: none;
     font-size: 13px;
     font-weight: 500;
     border-radius: var(--radius-sm);
     transition: all 0.2s;
     text-transform: none;
     /* Reset uppercase if inherited */
 }

 .dropdown-link:hover {
     background: rgba(255, 255, 255, 0.08);
     color: white;
     transform: translateX(4px);
 }

 .dropdown-link iconify-icon {
     color: var(--muted-foreground);
     transition: color 0.2s;
 }

 .dropdown-link:hover iconify-icon {
     color: var(--primary);
 }

 .nav-link {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     font-size: 14px;
     font-weight: 600;
     transition: all 0.2s;
     letter-spacing: 0.5px;
 }

 .nav-link:visited {
     color: rgba(255, 255, 255, 0.7);
 }

 .nav-link:hover,
 .nav-link.active {
     color: var(--primary);
     text-shadow: 0 0 8px var(--glow-color);
 }

 /* Hero */
 .hero-section {
     position: relative;
     height: 600px;
     display: flex;
     align-items: center;
     overflow: hidden;
 }

 .hero-bg {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 0;
 }

 .hero-bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0.6;
 }

 .hero-content {
     position: relative;
     z-index: 10;
     max-width: 600px;
 }

 .hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(to right,
             #050505 0%,
             rgba(5, 5, 5, 0.8) 50%,
             rgba(5, 5, 5, 0.2) 100%);
     z-index: 1;
 }

 /* Cards */
 .product-card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     overflow: hidden;
     transition:
         transform 0.2s,
         box-shadow 0.2s,
         border-color 0.2s;
     position: relative;
     text-decoration: none;
     color: var(--foreground);
     display: block;
 }

 .product-card:hover {
     border-color: var(--primary);
     box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
     transform: translateY(-4px);
 }

 .card-img {
     height: 200px;
     width: 100%;
     overflow: hidden;
     position: relative;
 }

 .card-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .card-body {
     padding: 16px;
 }

 .old-price {
     text-decoration: line-through;
     color: var(--muted-foreground);
     font-size: 13px;
     margin-right: 8px;
 }

 /* Footer */
 .footer {
     border-top: 1px solid var(--border);
     background: #08080a;
     padding: 60px 0 20px;
     margin-top: 80px;
 }

 .footer-heading {
     color: var(--foreground);
     font-weight: 700;
     margin-bottom: 20px;
     font-size: 16px;
 }

 .footer-link {
     display: block;
     color: var(--muted-foreground);
     text-decoration: none;
     margin-bottom: 12px;
     font-size: 14px;
     transition: color 0.2s;
 }

 .footer-link:hover {
     color: var(--primary);
 }

 /* Floating Discord */
 .discord-float {
     position: fixed;
     bottom: 32px;
     left: 32px;
     width: 56px;
     height: 56px;
     background-color: #5865f2;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 20px rgba(88, 101, 242, 0.5);
     z-index: 100;
     cursor: pointer;
     transition: transform 0.2s;
 }

 .discord-float:hover {
     transform: scale(1.1);
 }

 /* Utilities */
 .bg-card {
     background-color: var(--card);
 }

 .bg-secondary {
     background-color: var(--secondary);
 }

 .border-border {
     border-color: var(--border);
 }

 .text-white {
     color: white;
 }

 .rounded-lg {
     border-radius: var(--radius-lg);
 }

 .rounded-md {
     border-radius: var(--radius-md);
 }

 .rounded-full {
     border-radius: 9999px;
 }

 .shadow-glow {
     box-shadow: 0 0 10px var(--glow-color);
 }

 /* Admin Data Tables & Headers */
 .header-actions {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
     flex-wrap: wrap;
     gap: 16px;
 }

 .header-actions .search-box form {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .header-actions .search-box .form-input {
     background-color: var(--input);
     border-color: var(--border);
     color: white;
     height: 40px;
     /* Unity in height */
 }

 .header-actions .btn {
     height: 40px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .search-box form {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .search-box .input-with-icon {
     position: relative;
     width: 300px;
     /* Search input gets the width */
 }

 .search-box .input-with-icon input {
     background-color: var(--input);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     padding: 8px 12px 8px 36px !important;
     width: 100%;
     color: var(--foreground);
     height: 40px;
 }

 .search-box .input-with-icon iconify-icon {
     position: absolute;
     left: 12px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--muted-foreground);
     pointer-events: none;
 }

 .table-container {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     overflow-x: auto;
 }

 .data-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 14px;
     text-align: left;
 }

 .data-table th,
 .data-table td {
     padding: 16px 24px;
     border-bottom: 1px solid var(--border);
 }

 .data-table th {
     background-color: rgba(255, 255, 255, 0.02);
     font-weight: 600;
     color: var(--muted-foreground);
     text-transform: uppercase;
     font-size: 12px;
     letter-spacing: 0.5px;
 }

 .data-table tr:hover {
     background-color: rgba(255, 255, 255, 0.02);
 }

 .data-table tr:last-child td {
     border-bottom: none;
 }

 .action-buttons {
     display: flex;
     gap: 8px;
 }

 .btn-icon {
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-sm);
     color: var(--muted-foreground);
     text-decoration: none;
     transition: all 0.2s;
     background: var(--secondary);
     border: 1px solid var(--border);
 }

 .btn-icon:hover {
     background: var(--primary);
     color: black;
     border-color: var(--primary);
 }

 .btn-icon.delete:hover {
     background: var(--destructive);
     color: white;
     border-color: var(--destructive);
 }

 .badge-primary {
     background: var(--primary);
     color: black;
 }

 .badge-secondary {
     background: var(--secondary);
     color: white;
     border: 1px solid var(--border);
 }

 .badge-success {
     background: rgba(16, 185, 129, 0.2);
     color: #10b981;
     border: 1px solid rgba(16, 185, 129, 0.3);
 }

 .badge-danger {
     background: rgba(239, 68, 68, 0.2);
     color: #ef4444;
     border: 1px solid rgba(239, 68, 68, 0.3);
 }

 .text-right {
     text-align: right;
 }

 .justify-end {
     justify-content: flex-end;
 }

 /* Admin Forms & Layouts */
 .form-container {
     max-width: 1000px;
     margin: 0 auto;
 }

 .form-header {
     margin-bottom: 24px;
     display: flex;
     align-items: center;
 }

 .form-title {
     font-size: 20px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .back-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: var(--input);
     color: var(--muted-foreground);
     border: 1px solid var(--border);
     transition: all 0.2s;
 }

 .back-btn:hover {
     background: var(--secondary);
     color: var(--primary);
     border-color: var(--primary);
 }

 .card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: 24px;
 }

 .panel-title {
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 16px;
     padding-bottom: 12px;
     border-bottom: 1px solid var(--border);
     color: var(--foreground);
 }

 .form-group {
     margin-bottom: 16px;
 }

 .form-group label {
     display: block;
     margin-bottom: 8px;
     font-size: 13px;
     font-weight: 500;
     color: var(--muted-foreground);
 }

 .form-input {
     background: var(--input);
     border: 1px solid var(--border);
     color: var(--foreground);
     padding: 10px 12px;
     border-radius: var(--radius-sm);
     width: 100%;
     font-size: 14px;
     transition: border-color 0.2s;
 }

 /* =========================================
    User Profile / Dashboard Styles
    ========================================= */
 .profile-header {
     background: linear-gradient(to right, var(--card), rgba(212, 175, 55, 0.05));
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: 32px;
     margin-bottom: 32px;
     display: flex;
     align-items: center;
     gap: 24px;
     position: relative;
     overflow: hidden;
 }

 .profile-header::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 4px;
     height: 100%;
     background: var(--primary);
 }

 .profile-avatar {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: var(--secondary);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 32px;
     font-weight: 700;
     color: var(--primary);
     border: 2px solid var(--border);
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 }

 .profile-layout {
     display: flex;
     flex-direction: column;
     gap: 32px;
 }

 @media (min-width: 992px) {
     .profile-layout {
         flex-direction: row;
         align-items: flex-start;
     }

     .profile-sidebar {
         width: 280px;
         flex-shrink: 0;
         position: sticky;
         top: 100px;
         /* Below navbar */
     }

     .profile-content {
         flex-grow: 1;
         width: 100%;
     }
 }

 .profile-nav {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: 12px;
     display: flex;
     flex-direction: column;
     gap: 4px;
 }

 .profile-nav-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 16px;
     color: var(--muted-foreground);
     text-decoration: none;
     border-radius: var(--radius-sm);
     transition: all 0.2s;
     font-weight: 500;
     font-size: 14px;
 }

 .profile-nav-item:hover {
     background: rgba(255, 255, 255, 0.05);
     color: white;
     transform: translateX(4px);
 }

 .profile-nav-item.active {
     background: rgba(212, 175, 55, 0.1);
     color: var(--primary);
     font-weight: 600;
 }

 .profile-nav-item.active iconify-icon {
     color: var(--primary);
 }

 .profile-nav-item.danger {
     color: #ef4444;
 }

 .profile-nav-item.danger:hover {
     background: rgba(239, 68, 68, 0.1);
 }

 /* Stat Cards */
 .stat-grid {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     gap: 20px;
     margin-bottom: 32px;
 }

 @media (min-width: 768px) {
     .stat-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 .stat-card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: 24px;
     transition: transform 0.2s, border-color 0.2s;
 }

 .stat-card:hover {
     transform: translateY(-2px);
     border-color: var(--primary);
 }

 .stat-label {
     font-size: 13px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: var(--muted-foreground);
     margin-bottom: 8px;
 }

 .stat-value {
     font-size: 28px;
     font-weight: 800;
     color: white;
     font-family: 'Outfit', sans-serif;
 }

 .stat-value.highlight {
     color: var(--primary);
     text-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
 }

 /* Empty State */
 .empty-state {
     text-align: center;
     padding: 60px 20px;
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     color: var(--muted-foreground);
 }

 .empty-icon {
     font-size: 48px;
     margin-bottom: 16px;
     opacity: 0.5;
 }

 /* Download Card */
 .download-card {
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 20px;
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     margin-bottom: 16px;
     transition: all 0.2s;
 }

 .download-card:hover {
     border-color: var(--primary);
     background: rgba(255, 255, 255, 0.02);
 }

 .download-icon {
     width: 48px;
     height: 48px;
     background: var(--secondary);
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     color: var(--primary);
 }

 /* =========================================
    Fintech Style Wallet & Forms
    ========================================= */
 .wallet-card {
     background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 16px;
     padding: 24px;
     position: relative;
     overflow: hidden;
     min-height: 200px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
 }

 .wallet-card::before {
     content: '';
     position: absolute;
     top: -50px;
     right: -50px;
     width: 200px;
     height: 200px;
     background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
     border-radius: 50%;
     z-index: 0;
 }

 .wallet-chip {
     width: 50px;
     height: 34px;
     background: linear-gradient(135deg, #e0e0e0, #a0a0a0);
     border-radius: 6px;
     margin-bottom: 24px;
     position: relative;
     z-index: 1;
 }

 .wallet-balance-label {
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: rgba(255, 255, 255, 0.6);
     margin-bottom: 4px;
     position: relative;
     z-index: 1;
 }

 .wallet-balance-value {
     font-size: 36px;
     font-weight: 700;
     color: white;
     font-family: 'Outfit', sans-serif;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
     position: relative;
     z-index: 1;
 }

 .wallet-user {
     font-size: 14px;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
     z-index: 1;
 }

 /* Amount Chips */
 .amount-options {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 10px;
     margin-top: 16px;
 }

 .amount-chip {
     background: var(--input);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     padding: 12px;
     text-align: center;
     cursor: pointer;
     transition: all 0.2s;
     font-size: 14px;
     font-weight: 600;
     color: var(--muted-foreground);
     user-select: none;
 }

 .amount-chip:hover {
     border-color: var(--primary);
     color: white;
 }

 .amount-chip.selected {
     background: var(--primary);
     border-color: var(--primary);
     color: black;
 }

 /* Segmented Control */
 .segmented-control {
     display: flex;
     background: var(--input);
     padding: 4px;
     border-radius: var(--radius-md);
     margin-bottom: 24px;
     position: relative;
 }

 .segmented-option {
     flex: 1;
     text-align: center;
     padding: 8px;
     font-size: 14px;
     font-weight: 500;
     color: var(--muted-foreground);
     cursor: pointer;
     border-radius: var(--radius-sm);
     transition: color 0.2s;
     position: relative;
     z-index: 2;
 }

 .segmented-option.active {
     color: white;
 }

 .segmented-bg {
     position: absolute;
     top: 4px;
     left: 4px;
     width: calc(50% - 4px);
     height: calc(100% - 8px);
     background: #2a2a2a;
     border-radius: var(--radius-sm);
     transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
     z-index: 1;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 .form-section {
     background: rgba(255, 255, 255, 0.02);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: 20px;
     margin-bottom: 20px;
 }

 .form-section-title {
     font-size: 14px;
     font-weight: 600;
     color: white;
     margin-bottom: 16px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .form-input:focus {
     border-color: var(--primary);
     outline: none;
 }

 .input-group {
     display: flex;
     align-items: center;
     position: relative;
 }

 .input-group .form-input {
     padding-right: 40px;
 }

 /* =========================================
    Premium Admin Dashboard Styles
    ========================================= */

 .admin-grid {
     display: grid;
     gap: 24px;
 }

 .glass-panel {
     background: rgba(30, 32, 38, 0.6);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.08);
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
     border-radius: 12px;
     padding: 20px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
 }

 .glass-panel::after {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: 16px;
     padding: 1px;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     pointer-events: none;
 }

 .glass-panel:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
     background: rgba(40, 42, 48, 0.7);
 }

 .stat-card-premium {
     min-height: 100px;
     justify-content: flex-start;
     gap: 12px;
     padding: 16px;
 }

 .stat-card-premium .stat-icon-wrapper {
     margin-bottom: 0;
     width: 36px;
     height: 36px;
     font-size: 18px;
     border-radius: 8px;
 }

 .stat-card-premium .stat-content {
     display: flex;
     flex-direction: column;
 }

 .stat-card-premium::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -50%;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
     transform: rotate(45deg);
     pointer-events: none;
 }

 .stat-icon-wrapper {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     margin-bottom: 16px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .stat-value-lg {
     font-size: 24px;
     font-weight: 700;
     color: white;
     font-family: 'Outfit', sans-serif;
     line-height: 1.1;
     margin-bottom: 4px;
     letter-spacing: -0.5px;
 }

 .stat-label-sm {
     font-size: 13px;
     color: var(--muted-foreground);
     font-weight: 500;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .trend-badge {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 4px 8px;
     border-radius: 100px;
     font-size: 11px;
     font-weight: 600;
 }

 .trend-up {
     background: rgba(16, 185, 129, 0.15);
     color: #34d399;
 }

 .trend-down {
     background: rgba(239, 68, 68, 0.15);
     color: #f87171;
 }

 /* Premium Table */
 .table-premium {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
 }

 .table-premium th {
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: var(--muted-foreground);
     font-weight: 600;
     padding: 16px 24px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     text-align: left;
 }

 .table-premium td {
     padding: 20px 24px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.03);
     vertical-align: middle;
     transition: background 0.2s;
 }

 .table-premium tr:last-child td {
     border-bottom: none;
 }

 .table-premium tr:hover td {
     background: rgba(255, 255, 255, 0.02);
 }

 .user-avatar-sm {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary), #000);
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: bold;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 /* Status Dots */
 .status-dot {
     display: inline-block;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     margin-right: 8px;
 }

 .status-dot.success {
     background: #10b981;
     box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
 }

 .status-dot.warning {
     background: #fbbf24;
     box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
 }

 .status-dot.danger {
     background: #ef4444;
     box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
 }

 /* Progress Bar */
 .progress-bar-bg {
     width: 100%;
     height: 6px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 10px;
     overflow: hidden;
 }

 .progress-bar-fill {
     height: 100%;
     background: var(--primary);
     border-radius: 10px;
 }

 .form-actions {
     display: flex;
     justify-content: flex-end;
     padding-top: 24px;
     border-top: 1px solid var(--border);
 }

 /* Premium Stat Cards */
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
     margin-bottom: 32px;
 }

 .stat-card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: 20px;
     display: flex;
     align-items: center;
     gap: 16px;
     transition: all 0.2s;
 }

 .stat-card:hover {
     border-color: var(--primary);
     transform: translateY(-2px);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 }

 .icon-box {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
 }

 /* Utility colors for icon boxes since we don't use full tailwind */
 .bg-primary\/10 {
     background-color: rgba(212, 175, 55, 0.1);
     color: var(--primary);
 }

 .bg-green-500\/10 {
     background-color: rgba(16, 185, 129, 0.1);
     color: #10b981;
 }

 .bg-blue-500\/10 {
     background-color: rgba(59, 130, 246, 0.1);
     color: #3b82f6;
 }

 .bg-purple-500\/10 {
     background-color: rgba(168, 85, 247, 0.1);
     color: #a855f7;
 }

 .text-green-500 {
     color: #10b981;
 }

 .text-blue-500 {
     color: #3b82f6;
 }

 .text-purple-500 {
     color: #a855f7;
 }

 .text-red-500 {
     color: #ef4444;
 }

 .btn-danger {
     background-color: rgba(239, 68, 68, 0.1);
     color: #ef4444;
     border: 1px solid rgba(239, 68, 68, 0.2);
 }

 .btn-danger:hover {
     background-color: #ef4444;
     color: white;
 }

 /* Enhanced Tabs */
 .tabs {
     position: relative;
 }

 .tabs::-webkit-scrollbar {
     height: 4px;
 }

 .tabs::-webkit-scrollbar-thumb {
     background: var(--border);
     border-radius: 4px;
 }

 .tab-btn {
     position: relative;
     padding: 12px 24px;
     font-weight: 500;
     color: var(--muted-foreground);
     background: transparent;
     border: none;
     border-bottom: 2px solid transparent;
     cursor: pointer;
     transition: all 0.2s;
     font-size: 14px;
     white-space: nowrap;
 }

 .tab-btn:hover {
     color: var(--foreground);
     background: rgba(255, 255, 255, 0.02);
 }

 .tab-btn.active {
     color: var(--primary);
     border-bottom-color: var(--primary);
 }

 /* Premium Buttons */
 .btn-premium {
     background: linear-gradient(135deg, #d4af37 0%, #b4932a 100%);
     color: #000;
     font-weight: 600;
     border: none;
     padding: 8px 16px;
     border-radius: 8px;
     box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
     transition: all 0.3s ease;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
     cursor: pointer;
 }

 .btn-premium:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
     filter: brightness(1.1);
 }

 .btn-premium:active {
     transform: translateY(0);
 }

 .btn-glass {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: var(--muted-foreground);
     padding: 8px 16px;
     border-radius: 8px;
     font-size: 13px;
     font-weight: 500;
     transition: all 0.2s;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 6px;
 }

 .btn-glass:hover {
     background: rgba(255, 255, 255, 0.1);
     color: white;
     border-color: rgba(255, 255, 255, 0.2);
 }

 /* Chart Controls */
 .chart-controls {
     background: rgba(0, 0, 0, 0.3);
     padding: 4px;
     border-radius: 8px;
     display: flex;
     gap: 2px;
 }

 .chart-toggle {
     background: transparent;
     border: none;
     color: var(--muted-foreground);
     padding: 6px 14px;
     border-radius: 6px;
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s;
 }

 .chart-toggle:hover {
     color: white;
 }

 .chart-toggle.active {
     background: rgba(255, 255, 255, 0.1);
     color: white;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(5px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Responsive Tweaks */
 @media (max-width: 1024px) {
     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 640px) {
     .stats-grid {
         grid-template-columns: 1fr;
     }

     .header-actions {
         flex-direction: column;
         align-items: stretch;
     }

     .search-box .input-with-icon {
         width: 100%;
     }
 }

 .hidden {
     display: none !important;
 }

 /* Cart Badge Fix */
 .cart-badge {
     position: absolute;
     top: -5px;
     right: -10px;
     background: var(--primary);
     color: black;
     font-size: 10px;
     font-weight: 800;
     min-width: 18px;
     height: 18px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 0 0 2px #0f1115;
     /* dark border using box-shadow to match bg */
     line-height: 1;
     z-index: 20;
 }

 /* Custom Patterns */
 .bg-dots-pattern {
     background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
     background-size: 20px 20px;
 }