:root {
     /* MatjarX Premium Space Theme Palette */
     --background: #050a14;
     /* Deep space black/blue */
     --surface: #0d1626;
     /* Dark navy surface */
     --surface-hover: #152238;
     /* Lighter navy for hover */

     --primary: #5aa9ff;
     /* Premium Blue */
     --primary-light: #8dbfff;
     --primary-dark: #3a86ff;

     --secondary: #e5efff;
     /* Ice Blue / Platinum */

     --text-primary: #ffffff;
     --text-secondary: rgba(229, 239, 255, 0.7);
     --text-tertiary: rgba(229, 239, 255, 0.5);

     --border: rgba(90, 169, 255, 0.15);
     /* Subtle Blue Border */
     --border-hover: rgba(90, 169, 255, 0.4);
     /* Blue Border on Hover */

     --success: #10B981;
     --warning: #F59E0B;
     --error: #EF4444;

     --sidebar-width: 260px;

     /* Border Radius Variables */
     --radius-sm: 6px;
     --radius-md: 10px;
     --radius-lg: 14px;
     --radius-xl: 18px;
     --radius-2xl: 24px;
     --radius-3xl: 30px;
     --radius-4xl: 40px;
     --radius-full: 50%;

     /* Enhanced Deep Space Shadows */
     --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
     --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
     --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
     --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.8);
     --shadow-primary: 0 0 20px rgba(90, 169, 255, 0.2);
     --shadow-blue: 0 0 25px rgba(90, 169, 255, 0.15);

     /* Gradients */
     --gradient-primary: linear-gradient(135deg, #5aa9ff 0%, #3a86ff 100%);
     /* Blue Gradient */
     --gradient-soft: linear-gradient(135deg, rgba(13, 22, 38, 0.8) 0%, rgba(21, 34, 56, 0.8) 100%);
     --gradient-surface: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
     --bg-gradient: radial-gradient(circle at 50% 0%, #1b2f4d 0%, #0d1626 40%, #050a14 100%);

     --bg-main: var(--background);
     /* Alias for backward compatibility */

     box-sizing: border-box;
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }

 /* Drag & Drop Feedback (SortableJS) */
 .sortable-ghost {
     opacity: 0.2;
     background: var(--primary) !important;
     border: 2px dashed var(--primary) !important;
 }

 .sortable-chosen {
     background: var(--surface-hover) !important;
     cursor: grabbing !important;
     box-shadow: var(--shadow-xl) !important;
     transform: scale(1.02);
     z-index: 100;
 }

 .sortable-drag {
     opacity: 0.9;
 }

 .draggable-product {
     transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.3s ease;
 }

 .drag-handle {
     cursor: grab;
     transition: color 0.2s ease, transform 0.2s ease;
 }

 .drag-handle:active {
     cursor: grabbing;
     transform: scale(1.2);
 }

 /* Caching & Transition Smoothing */
 :root {
     box-sizing: border-box;
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }

 body {
     font-family: 'Inter', 'IBM Plex Sans Arabic', sans-serif;
     background: var(--bg-gradient);
     background-attachment: fixed;
     min-height: 100vh;
     color: var(--text-primary);
     overflow-x: hidden;
 }

 /* Custom Scrollbar - Smaller Chrome style */
 ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
 }

 ::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.02);
 }

 ::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     border: 2px solid transparent;
     background-clip: content-box;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.2);
 }

 /* Firefox */
 * {
     scrollbar-width: thin;
     scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
 }


 h1,
 h2,
 h3,
 .dashboard-title,
 .premium-btn {
     font-family: 'Inter', 'IBM Plex Sans Arabic', sans-serif;
     font-weight: 700;
     letter-spacing: -0.02em;
 }

 .hero-gradient {
     background: var(--gradient-primary);
     box-shadow: 0 0 20px rgba(90, 169, 255, 0.3);
 }

 /* ============================================
   SIDEBAR - Modern & Clean Design
   ============================================ */
 .sidebar {
     position: fixed;
     right: 0;
     top: 0;
     width: var(--sidebar-width);
     height: 100vh;
     background: var(--surface);
     border-left: 1px solid var(--border);
     z-index: 50;
     display: flex;
     flex-direction: column;
     box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3);
 }

 .sidebar-content {
     display: flex;
     flex-direction: column;
     height: 100%;
 }



 .sidebar-nav {
     flex: 1;
     overflow-y: auto;
     padding: 1.25rem 0.75rem;
 }

 /* Scrollbar Styling */
 .sidebar-nav::-webkit-scrollbar {
     width: 4px;
 }

 .sidebar-nav::-webkit-scrollbar-track {
     background: transparent;
 }

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

 .sidebar-nav::-webkit-scrollbar-thumb:hover {
     background: var(--text-secondary);
 }

 .sidebar-nav-item {
     display: flex;
     align-items: center;
     gap: 0.875rem;
     padding: 0.875rem 1.25rem;
     color: var(--text-secondary);
     text-decoration: none;
     transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
     border-radius: 12px;
     margin-bottom: 0.375rem;
     font-weight: 500;
     font-size: 0.95rem;
     position: relative;
     overflow: hidden;
 }

 .sidebar-nav-item::before {
     content: '';
     position: absolute;
     right: 0;
     top: 0;
     height: 100%;
     width: 3px;
     background: var(--gradient-primary);
     border-radius: 3px;
     transform: scaleY(0);
     transition: transform 0.25s ease;
 }

 .sidebar-nav-item:hover {
     background: var(--gradient-soft);
     color: var(--primary);
     transform: translateX(-3px);
 }

 .sidebar-nav-item.active {
     background: var(--gradient-soft);
     color: var(--primary);
 }

 .sidebar-nav-item.active::before {
     transform: scaleY(1);
 }

 .sidebar-nav-item i {
     font-size: 1.125rem;
     width: 24px;
     text-align: center;
     transition: transform 0.3s ease;
 }

 .sidebar-nav-item:hover i {
     transform: scale(1.15);
 }

 #nav-delivery,
 #nav-delivery:hover,
 #nav-delivery.active {
     color: #ffffff;
 }

 #nav-delivery span,
 #nav-delivery:hover span,
 #nav-delivery.active span {
     color: #ffffff;
 }

 /* ============================================
    MAIN LAYOUT
    ============================================ */
 .main-wrapper {
     margin-right: var(--sidebar-width);
     min-height: 100vh;
     transition: margin-right 0.3s ease;
 }

 .main-header {
     background: var(--surface);
     border-bottom: 1px solid var(--border);
     padding: 1rem 2rem;
     position: sticky;
     top: 0;
     z-index: 40;
     box-shadow: var(--shadow-sm);
     backdrop-filter: blur(10px);
 }

 .main-header h1 {
     font-size: 1.5rem;
     font-weight: 700;
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .credits-header {
     display: flex;
     align-items: center;
     gap: 12px;
     flex-wrap: wrap;
     justify-content: flex-end;
 }

 .credits-meta {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
 }

 .credits-pill {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.15);
     color: #ffffff;
     padding: 5px 9px;
     border-radius: 9999px;
     font-size: 11px;
     font-weight: 600;
     white-space: nowrap;
 }

 .credits-number,
 .credits-value {
     font-weight: 800;
     color: #f5d0ff;
 }

 .credits-trigger {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 8px 16px;
     background: rgba(31, 107, 255, 0.1);
     border: 1px solid rgba(31, 107, 255, 0.3);
     color: #ffffff;
     border-radius: 14px;
     font-size: 13px;
     font-weight: 700;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(8px);
 }

 .credits-trigger:hover {
     background: rgba(31, 107, 255, 0.2);
     border-color: rgba(31, 107, 255, 0.5);
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(31, 107, 255, 0.2);
 }

 .credits-trigger:active {
     transform: translateY(0) scale(0.96);
 }

 /* Out of Credits Special Style */
 .credits-trigger.out-of-credits {
     background: rgba(239, 68, 68, 0.12) !important;
     border-color: rgba(239, 68, 68, 0.5) !important;
     animation: credits-low-pulse 2s infinite ease-in-out;
 }

 .credits-trigger.out-of-credits .credits-number {
     color: #ff5f5f !important;
     text-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
 }

 .credits-trigger.out-of-credits::before {
     content: '⚠';
     margin-left: 5px;
     color: #ff5f5f;
 }

 @keyframes credits-low-pulse {
     0% {
         box-shadow: 0 0 0px rgba(239, 68, 68, 0);
     }

     50% {
         box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
         border-color: rgba(239, 68, 68, 0.7);
     }

     100% {
         box-shadow: 0 0 0px rgba(239, 68, 68, 0);
     }
 }

 /* Full Credits Premium Style */
 .credits-trigger.full-credits {
     background: rgba(16, 185, 129, 0.1) !important;
     border-color: rgba(16, 185, 129, 0.4) !important;
     box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
 }

 .credits-trigger.full-credits .credits-number {
     color: #10B981 !important;
     text-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
 }

 [dir="rtl"] .credits-trigger.full-credits::after {
     content: '✨';
     margin-right: 6px;
     font-size: 10px;
 }

 .credits-trigger.full-credits::after {
     content: '✨';
     margin-left: 6px;
     font-size: 10px;
 }

 .credits-trigger-icon {
     font-size: 10px;
     transition: transform 0.2s ease;
 }

 .credits-trigger.open .credits-trigger-icon {
     transform: rotate(180deg);
 }

 .credits-dropdown {
     position: absolute;
     top: calc(100% + 8px);
     right: -40px;
     min-width: 200px;
     background: var(--surface);
     border: 1px solid var(--border);
     box-shadow: var(--shadow-md);
     border-radius: 12px;
     padding: 10px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     z-index: 999999;
 }

 .credits-dropdown-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 12px;
     color: var(--text-primary);
     background: rgba(255, 255, 255, 0.03);
     border-radius: 10px;
     padding: 8px 10px;
 }

 .credits-label {
     color: var(--text-secondary);
     font-weight: 500;
 }

 .credits-header {
     position: relative;
     z-index: 999999;
 }

 .credits-button {
     --h-button: 40px;
     --w-button: 96px;
     --round: 0.75rem;
     cursor: pointer;
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     transition: all 0.25s ease;
     background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(223, 113, 255, 0.8) 0%, rgba(223, 113, 255, 0) 100%),
         linear-gradient(0deg, #7a5af8, #7a5af8);
     border-radius: var(--round);
     border: none;
     outline: none;
     padding: 8px 12px;
     height: var(--h-button);
     min-width: var(--w-button);
 }

 .credits-button::before,
 .credits-button::after {
     content: "";
     position: absolute;
     inset: var(--space);
     transition: all 0.5s ease-in-out;
     border-radius: calc(var(--round) - var(--space));
     z-index: 0;
 }

 .credits-button::before {
     --space: 1px;
     background: linear-gradient(177.95deg, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0) 100%);
 }

 .credits-button::after {
     --space: 2px;
     background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(223, 113, 255, 0.8) 0%, rgba(223, 113, 255, 0) 100%),
         linear-gradient(0deg, #7a5af8, #7a5af8);
 }

 .credits-button:active {
     transform: scale(0.95);
 }

 .credits-fold {
     z-index: 1;
     position: absolute;
     top: 0;
     right: 0;
     height: 0.85rem;
     width: 0.85rem;
     display: inline-block;
     transition: all 0.5s ease-in-out;
     background: radial-gradient(100% 75% at 55%, rgba(223, 113, 255, 0.8) 0%, rgba(223, 113, 255, 0) 100%);
     box-shadow: 0 0 3px black;
     border-bottom-left-radius: 0.4rem;
     border-top-right-radius: var(--round);
 }

 .credits-fold::after {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     width: 150%;
     height: 150%;
     transform: rotate(45deg) translateX(0%) translateY(-15px);
     background-color: #e8e8e8;
     pointer-events: none;
 }

 .credits-button:hover .credits-fold {
     margin-top: -1rem;
     margin-right: -1rem;
 }

 .credits-points-wrapper {
     overflow: hidden;
     width: 100%;
     height: 100%;
     pointer-events: none;
     position: absolute;
     z-index: 1;
 }

 .credits-points-wrapper .credits-point {
     bottom: -10px;
     position: absolute;
     animation: credits-floating-points infinite ease-in-out;
     pointer-events: none;
     width: 2px;
     height: 2px;
     background-color: #fff;
     border-radius: 9999px;
 }

 @keyframes credits-floating-points {
     0% {
         transform: translateY(0);
     }

     85% {
         opacity: 0;
     }

     100% {
         transform: translateY(-55px);
         opacity: 0;
     }
 }

 .credits-points-wrapper .credits-point:nth-child(1) {
     left: 10%;
     opacity: 1;
     animation-duration: 2.35s;
     animation-delay: 0.2s;
 }

 .credits-points-wrapper .credits-point:nth-child(2) {
     left: 30%;
     opacity: 0.7;
     animation-duration: 2.5s;
     animation-delay: 0.5s;
 }

 .credits-points-wrapper .credits-point:nth-child(3) {
     left: 25%;
     opacity: 0.8;
     animation-duration: 2.2s;
     animation-delay: 0.1s;
 }

 .credits-points-wrapper .credits-point:nth-child(4) {
     left: 44%;
     opacity: 0.6;
     animation-duration: 2.05s;
 }

 .credits-points-wrapper .credits-point:nth-child(5) {
     left: 50%;
     opacity: 1;
     animation-duration: 1.9s;
 }

 .credits-points-wrapper .credits-point:nth-child(6) {
     left: 75%;
     opacity: 0.5;
     animation-duration: 1.5s;
     animation-delay: 1.5s;
 }

 .credits-points-wrapper .credits-point:nth-child(7) {
     left: 88%;
     opacity: 0.9;
     animation-duration: 2.2s;
     animation-delay: 0.2s;
 }

 .credits-points-wrapper .credits-point:nth-child(8) {
     left: 58%;
     opacity: 0.8;
     animation-duration: 2.25s;
     animation-delay: 0.2s;
 }

 .credits-points-wrapper .credits-point:nth-child(9) {
     left: 98%;
     opacity: 0.6;
     animation-duration: 2.6s;
     animation-delay: 0.1s;
 }

 .credits-points-wrapper .credits-point:nth-child(10) {
     left: 65%;
     opacity: 1;
     animation-duration: 2.5s;
     animation-delay: 0.2s;
 }

 .credits-inner {
     z-index: 2;
     gap: 6px;
     position: relative;
     width: 100%;
     color: white;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: 600;
     line-height: 1.5;
     transition: color 0.2s ease-in-out;
 }

 .credits-inner svg.credits-icon {
     width: 16px;
     height: 16px;
     transition: fill 0.1s linear;
 }

 .credits-button:focus svg.credits-icon {
     fill: white;
 }

 .credits-button:hover svg.credits-icon {
     fill: transparent;
     animation: credits-dasharray 1s linear forwards, credits-filled 0.1s linear forwards 0.95s;
 }

 @keyframes credits-dasharray {
     from {
         stroke-dasharray: 0 0 0 0;
     }

     to {
         stroke-dasharray: 68 68 0 0;
     }
 }

 @keyframes credits-filled {
     to {
         fill: white;
     }
 }

 .main-content {
     padding: 1.5rem 2rem;
     max-width: 100%;
     overflow-y: auto;
 }

 /* ============================================
    PHONE PREVIEW - Enhanced
    ============================================ */
 .phone-preview-container {
     position: relative;
     width: 310px;
     height: 620px;
     background: var(--surface);
     border-radius: 45px;
     padding: 12px;
     border: 8px solid #1a1a1a;
     box-shadow:
         0 20px 50px rgba(0, 0, 0, 0.1),
         0 0 0 2px rgba(255, 255, 255, 0.05);
     transition: all 0.3s ease;
 }

 .phone-preview-container:hover {
     transform: translateY(-5px);
     box-shadow:
         0 35px 80px rgba(0, 0, 0, 0.3),
         inset 0 2px 0 rgba(255, 255, 255, 0.1),
         0 0 0 1px rgba(255, 255, 255, 0.05);
 }

 .phone-preview-container::before {
     content: '';
     position: absolute;
     top: 18px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 24px;
     background: linear-gradient(90deg, #0d1626 0%, #1b2f4d 50%, #0d1626 100%);
     border-radius: 12px;
     z-index: 10;
     box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
 }

 .phone-screen {
     width: 100%;
     height: 100%;
     border-radius: 28px;
     overflow: hidden;
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
     position: relative;
 }

 .phone-screen::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
     pointer-events: none;
     z-index: 1;
 }

 .phone-screen iframe {
     width: 100%;
     height: 100%;
     border: none;
     transition: opacity 0.3s ease;
 }

 .phone-screen iframe.loading {
     opacity: 0;
 }

 /* Loading animation for phone preview */
 .phone-loading {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1rem;
 }

 .phone-loading .spinner {
     width: 40px;
     height: 40px;
     border: 3px solid rgba(31, 107, 255, 0.2);
     border-top: 3px solid #1F6BFF;
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }

 .phone-loading .text {
     color: #666;
     font-size: 0.875rem;
     font-weight: 500;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* Fixed Preview Side for Dashboard */
 @media (min-width: 1280px) {
     .phone-preview-fixed-side {
         position: fixed;
         top: 110px;
         /* Below the main-header which is sticky top: 0 */
         left: 2rem;
         width: 320px;
         z-index: 30;
         max-height: calc(100vh - 130px);
         overflow-y: auto;
         padding-bottom: 2rem;
         scrollbar-width: none;
         /* Hide scrollbar for content if any */
         -ms-overflow-style: none;
     }

     .phone-preview-fixed-side::-webkit-scrollbar {
         display: none;
     }

     /* Push main content to the side when preview is fixed */
     .main-tabs-container {
         margin-left: 360px;
         transition: margin-left 0.3s ease;
     }
 }

 /* Responsive adjustment for smaller screens */
 @media (max-width: 1279px) {
     .phone-preview-fixed-side {
         position: relative;
         top: 0;
         width: 100%;
         height: auto;
     }

     .main-tabs-container {
         margin-left: 0;
     }
 }

 /* ============================================
    STATISTICS CARDS - Clean & Modern
    ============================================ */
 .stat-card {
     background: var(--surface);
     border-radius: 20px;
     padding: 1.5rem;
     box-shadow: var(--shadow-sm);
     transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     border: 1px solid var(--border);
     position: relative;
     overflow: hidden;
 }

 .stat-card::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 100px;
     height: 100px;
     background: var(--gradient-soft);
     border-radius: 50%;
     transform: translate(30%, -30%);
     pointer-events: none;
 }

 .stat-card:hover {
     transform: translateY(-6px);
     box-shadow: var(--shadow-lg);
     border-color: rgba(99, 102, 241, 0.2);
 }

 .stat-card p:first-child {
     font-size: 0.875rem;
     font-weight: 500;
     letter-spacing: 0.025em;
 }

 .stat-card .text-3xl {
     font-size: 2rem !important;
     font-weight: 700 !important;
     letter-spacing: -0.025em;
 }

 .stat-card .w-16 {
     width: 56px !important;
     height: 56px !important;
     border-radius: 16px !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 .mini-stat-card {
     background: #000;
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 16px;
     padding: 1rem 1.25rem;
     color: #fff;
 }

 .mini-stat-icon {
     width: 40px;
     height: 40px;
     border-radius: 999px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
 }

 .range-tabs {
     display: flex;
     gap: 12px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .range-tab {
     color: #a78bfa;
     background: transparent;
     border: none;
     font-weight: 700;
     padding-bottom: 6px;
     cursor: pointer;
 }

 .range-tab.active {
     color: #c084fc;
     border-bottom: 2px solid #8b5cf6;
 }

 /* ============================================
    STORE CARDS - Modern Design
    ============================================ */
 .store-card {
     transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 20px;
     overflow: hidden;
 }

 .store-card:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-xl);
     border-color: rgba(99, 102, 241, 0.3);
 }

 /* ============================================
    BUTTONS - Improved Styling
    ============================================ */
 button,
 .btn {
     font-weight: 600;
     letter-spacing: 0.01em;
     transition: all 0.25s ease;
 }

 .theme-activate-btn {
     background: linear-gradient(135deg, #1f6bff 0%, #5b8cff 100%) !important;
     border: 1px solid rgba(255, 255, 255, 0.25) !important;
     box-shadow: 0 10px 24px rgba(31, 107, 255, 0.35) !important;
     transform: translateZ(0);
 }

 .theme-activate-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 14px 30px rgba(31, 107, 255, 0.45) !important;
 }

 .theme-activate-btn:active {
     transform: translateY(0);
     box-shadow: 0 8px 18px rgba(31, 107, 255, 0.35) !important;
 }

 .hero-gradient:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(99, 102, 241, 0.45);
 }

 .hero-gradient:active {
     transform: translateY(0);
 }

 /* Filter buttons */
 .filter-btn {
     border-radius: 10px !important;
     font-weight: 600 !important;
     padding: 0.625rem 1.25rem !important;
     transition: all 0.25s ease !important;
 }

 .filter-btn:hover {
     transform: translateY(-2px);
 }

 .filter-btn.active {
     box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
 }

 /* ============================================
    FORM ELEMENTS - Clean Design
    ============================================ */
 input[type="text"],
 input[type="number"],
 input[type="email"],
 input[type="password"],
 input[type="url"],
 input[type="tel"],
 input[type="search"],
 input[type="date"],
 textarea,
 select {
     transition: all 0.25s ease;
     border: 1.5px solid var(--border) !important;
     border-radius: 12px !important;
     font-size: 0.95rem;
     background-color: black !important;
     color: var(--text-primary) !important;
 }

 input:focus,
 textarea:focus,
 select:focus {
     border-color: var(--primary) !important;
     box-shadow: 0 0 0 4px rgba(90, 169, 255, 0.15) !important;
     outline: none !important;
     background-color: black !important;
 }

 ::placeholder {
     color: rgba(255, 255, 255, 0.5) !important;
 }

 /* ============================================
    MODALS - Modern & Clean
    ============================================ */
 .slide-in {
     animation: slideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }

 @keyframes slideIn {
     from {
         opacity: 0;
         transform: translateY(20px) scale(0.98);
     }

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

 #delete-modal>div,
 #product-modal>div,
 #color-modal>div,
 #size-modal>div,
 #custom-option-modal>div,
 #delivery-modal>div {
     border-radius: 24px !important;
     box-shadow: var(--shadow-xl);
 }

 .flex.justify-between.items-center.mb-6 {
     color: #ffffff;
 }

 /* ============================================
    ANIMATIONS
    ============================================ */
 .fade-in {
     animation: fadeIn 0.5s ease-out;
 }

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

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

 /* ============================================
    USER DROPDOWN
    ============================================ */
 #user-menu-button {
     border-radius: 14px !important;
     padding: 0.625rem 1rem !important;
     transition: all 0.25s ease;
     background: var(--surface);
     border: 1.5px solid var(--border) !important;
 }

 #user-menu-button:hover {
     background: var(--background);
     border-color: var(--primary) !important;
     box-shadow: var(--shadow-sm);
 }

 #user-dropdown {
     animation: dropdownFade 0.25s ease-out;
     border-radius: 16px !important;
     box-shadow: var(--shadow-lg) !important;
     border: 1px solid var(--border) !important;
     overflow: hidden;
 }

 @keyframes dropdownFade {
     from {
         opacity: 0;
         transform: translateY(-8px);
     }

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

 #user-dropdown a,
 #user-dropdown button {
     display: flex;
     align-items: center;
     width: 100%;
     text-align: right;
     padding: 0.75rem 1.25rem;
     transition: all 0.2s ease;
     font-weight: 500;
 }

 #user-dropdown a:hover,
 #user-dropdown button:hover {
     background: var(--gradient-soft);
     color: var(--primary);
 }

 /* ============================================
    TABS & CONTENT SECTIONS
    ============================================ */
 .tab-content {
     animation: tabFade 0.4s ease;
 }

 @keyframes tabFade {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .tab-content h2 {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 1.5rem;
 }

 .tab-position .tab .tab-header .favicon {
     -webkit-transform: scale(1.5) !important;
     transform: scale(1.5) !important;
 }

 /* Section Cards */
 .bg-white.rounded-xl {
     border-radius: 20px !important;
     box-shadow: var(--shadow-sm) !important;
     transition: all 0.3s ease;
 }

 .bg-white.rounded-xl:hover {
     box-shadow: var(--shadow-md) !important;
 }

 /* ============================================
   LOADING SCREEN - Premium Redesign
   ============================================ */
 #loading-screen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--background);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 99999;
     transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 }

 #loading-screen::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     background:
         radial-gradient(circle at 20% 20%, rgba(90, 169, 255, 0.05) 0%, transparent 40%),
         radial-gradient(circle at 80% 80%, rgba(58, 134, 255, 0.05) 0%, transparent 40%);
     pointer-events: none;
 }

 #loading-screen.hidden {
     opacity: 0;
     visibility: hidden;
     transform: scale(1.05);
     filter: blur(10px);
     pointer-events: none;
 }

 .loader-content {
     position: relative;
     z-index: 10;
     animation: loaderPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 @keyframes loaderPop {
     0% {
         transform: scale(0.8);
         opacity: 0;
     }

     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 .loader-logo {
     width: 100px;
     height: 100px;
     border-radius: 24px;
     animation: logoFloat 2.5s ease-in-out infinite;
     filter: drop-shadow(0 20px 40px rgba(90, 169, 255, 0.15));
 }

 @keyframes logoFloat {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
     }

     25% {
         transform: translateY(-10px) rotate(2deg);
     }

     75% {
         transform: translateY(-5px) rotate(-1deg);
     }
 }

 .loader-status {
     animation: fadeIn 1s ease-out 0.3s both;
 }

 .loader-track {
     position: relative;
 }

 .loader-track::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
     opacity: 0.6;
     transform: translateX(-100%);
     animation: loaderTrackGlow 2.2s ease-in-out infinite;
 }

 #loader-percent {
     letter-spacing: 0.08em;
 }

 .loader-dots {
     display: inline-flex;
     align-items: center;
     gap: 6px;
 }

 .loader-dots span {
     width: 6px;
     height: 6px;
     border-radius: 9999px;
     background: rgba(255, 255, 255, 0.7);
     animation: loaderDots 1.2s ease-in-out infinite;
 }

 .loader-dots span:nth-child(2) {
     animation-delay: 0.2s;
 }

 .loader-dots span:nth-child(3) {
     animation-delay: 0.4s;
 }

 #loader-progress {
     box-shadow: 0 0 20px rgba(90, 169, 255, 0.3);
     border-radius: inherit;
     background: linear-gradient(90deg, #5aa9ff, #8dbfff, #5aa9ff);
     background-size: 200% 100%;
     animation: progressShine 2s linear infinite;
 }

 @keyframes loaderTrackGlow {
     0% {
         transform: translateX(-100%);
     }

     100% {
         transform: translateX(100%);
     }
 }

 @keyframes loaderDots {

     0%,
     100% {
         transform: translateY(0);
         opacity: 0.6;
     }

     50% {
         transform: translateY(-4px);
         opacity: 1;
     }
 }

 @keyframes progressShine {
     0% {
         background-position: 100% 0%;
     }

     100% {
         background-position: -100% 0%;
     }
 }

 /* ============================================
    GALLERY STYLES
    ============================================ */
 .gallery-image-card {
     transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: 16px;
     overflow: hidden;
     position: relative;
     box-shadow: var(--shadow-sm);
 }

 .gallery-image-card:hover {
     transform: translateY(-6px) scale(1.02);
     box-shadow: var(--shadow-lg);
 }

 .gallery-image-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(90, 169, 255, 0.85) 0%, rgba(58, 134, 255, 0.85) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .gallery-image-card:hover .gallery-image-overlay {
     opacity: 1;
 }

 .upload-area {
     border: 2px dashed var(--border);
     border-radius: 20px;
     transition: all 0.3s ease;
     background: var(--surface);
     cursor: pointer;
     padding: 2rem;
 }

 .upload-area:hover {
     border-color: var(--primary);
     background: var(--gradient-soft);
     transform: scale(1.01);
 }

 .upload-area.dragover {
     border-color: var(--primary);
     background: rgba(90, 169, 255, 0.1);
     transform: scale(1.02);
     box-shadow: 0 0 0 4px rgba(90, 169, 255, 0.1);
 }

 .image-preview {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: var(--shadow-sm);
 }

 .image-preview img {
     transition: transform 0.4s ease;
 }

 .image-preview:hover img {
     transform: scale(1.08);
 }

 .delete-image-btn {
     position: absolute;
     top: 8px;
     left: 8px;
     background: var(--error);
     color: white;
     width: 32px;
     height: 32px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
 }

 .image-preview:hover .delete-image-btn {
     opacity: 1;
 }

 .delete-image-btn:hover {
     transform: scale(1.1);
 }

 /* ============================================
    PROGRESS BARS
    ============================================ */
 .progress-bar {
     height: 8px;
     background: var(--border);
     border-radius: 4px;
     overflow: hidden;
     margin-top: 8px;
 }

 .progress-fill {
     height: 100%;
     background: var(--gradient-primary);
     border-radius: 4px;
     transition: width 0.3s ease;
 }

 /* ============================================
    SECTION SHAPES & OPTIONS
    ============================================ */
 .step-transition {
     animation: fadeSlide 0.4s ease-out;
 }

 @keyframes fadeSlide {
     from {
         opacity: 0;
         transform: translateX(15px);
     }

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

 .section-shape-option,
 .product-effect-option {
     position: relative;
     transition: all 0.3s ease;
     border-radius: 16px;
 }

 .section-shape-option.selected,
 .product-effect-option.selected {
     border-color: var(--primary) !important;
     background: var(--gradient-soft);
     box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
 }

 .section-shape-option.selected::after,
 .product-effect-option.selected::after {
     content: '✓';
     position: absolute;
     top: 8px;
     left: 8px;
     background: var(--gradient-primary);
     color: white;
     width: 26px;
     height: 26px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     font-size: 14px;
     box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
 }

 .layout-option {
     transition: all 0.3s ease;
     border-radius: 16px;
 }

 .layout-option:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-md);
 }

 .layout-option.selected {
     border-color: var(--primary) !important;
     background: var(--gradient-soft);
     box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
 }

 /* ============================================
    HOVER EFFECTS
    ============================================ */
 .hover-lift {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .hover-lift:hover {
     transform: translateY(-6px);
     box-shadow: var(--shadow-lg);
 }

 /* ============================================
    SETTINGS NAVIGATION
    ============================================ */
 .settings-nav-item {
     transition: all 0.3s ease;
     cursor: pointer;
     border-radius: 12px;
     margin-bottom: 0.25rem;
 }

 .settings-nav-item:hover {
     background: var(--gradient-soft);
     color: var(--primary);
     transform: translateX(-3px);
 }

 .settings-nav-item.active {
     background: var(--gradient-soft);
     color: var(--primary);
     border-right: 3px solid var(--primary);
 }

 /* ============================================
    EMPTY STATES
    ============================================ */
 #empty-state,
 #empty-gallery-state,
 #empty-delivery-state {
     padding: 4rem 2rem;
     text-align: center;
 }

 #empty-state i,
 #empty-gallery-state i,
 #empty-delivery-state i {
     font-size: 5rem;
     color: var(--border);
     margin-bottom: 1.5rem;
     opacity: 0.6;
 }

 /* ============================================
    STORE URL SECTION
    ============================================ */
 #store-url-section .bg-white {
     background: var(--gradient-soft) !important;
     border: 1px solid rgba(99, 102, 241, 0.15) !important;
 }

 #store-url-input,
 #navbar-store-url-input {
     background: var(--surface) !important;
     font-family: 'Inter', monospace;
     font-size: 0.9rem;
 }

 /* ============================================
    RESPONSIVE DESIGN
    ============================================ */
 @media (max-width: 1280px) {
     .main-content {
         padding: 1.5rem;
     }
 }

 @media (max-width: 1024px) {
     .phone-preview-container {
         display: none;
     }

     :root {
         --sidebar-width: 240px;
     }
 }

 @media (max-width: 768px) {
     :root {
         --sidebar-width: 0px;
     }

     body {
         background-attachment: scroll;
     }

     .sidebar {
         transform: translateX(100%);
         transition: transform 0.3s ease;
     }

     .sidebar.open {
         transform: translateX(0);
     }

     .main-wrapper {
         margin-right: 0;
     }

     .main-header {
         padding: 1rem;
     }

     .main-content {
         padding: 1rem;
     }

     .stat-card {
         padding: 1.25rem;
     }

     .stat-card .text-3xl {
         font-size: 1.5rem !important;
     }
 }

 /* ============================================
    SCROLLBAR GLOBAL STYLING
    ============================================ */
 ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
 }

 ::-webkit-scrollbar-track {
     background: transparent;
 }

 ::-webkit-scrollbar-thumb {
     background: rgba(90, 169, 255, 0.2);
     border-radius: 10px;
     border: 1px solid transparent;
     background-clip: content-box;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: rgba(90, 169, 255, 0.5);
 }

 /* ============================================
    SPECIAL TOUCHES
    ============================================ */

 /* Smooth focus outlines */
 *:focus-visible {
     outline: 2px solid var(--primary);
     outline-offset: 2px;
 }

 /* Selection color */
 ::selection {
     background: rgba(99, 102, 241, 0.2);
     color: var(--primary-dark);
 }

 /* Tooltip style */
 [title] {
     cursor: help;
 }

 /* Icon containers with gradient bg */
 .w-12.hero-gradient,
 .w-16.hero-gradient {
     box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
 }

 /* Orders list items */
 #orders-list>div,
 #products-list>div,
 #delivery-options-list>div {
     border-radius: 16px !important;
     transition: all 0.3s ease;
 }

 #orders-list>div:hover,
 #products-list>div:hover,
 #delivery-options-list>div:hover {
     transform: translateX(-4px);
     box-shadow: var(--shadow-md);
 }

 /* Color option cards */
 #color-options-list>div,
 #size-options-list>div {
     border-radius: 12px !important;
     transition: all 0.3s ease;
 }

 #color-options-list>div:hover,
 #size-options-list>div:hover {
     transform: scale(1.03);
     box-shadow: var(--shadow-md);
 }

 /* ============================================
    QUICK ACTION BUTTONS
    ============================================ */
 .quick-action-btn {
     position: relative;
     overflow: hidden;
 }

 .quick-action-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .quick-action-btn:hover::before {
     opacity: 1;
 }

 .quick-action-btn:hover {
     transform: translateY(-2px);
 }

 .quick-action-btn i {
     transition: transform 0.3s ease;
 }

 .quick-action-btn:hover i {
     transform: scale(1.15);
 }

 /* Store card improvements */
 .store-card {
     position: relative;
 }

 .store-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: var(--gradient-primary);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .store-card:hover::after {
     opacity: 1;
 }

 /* ============================================
    BORDER RADIUS UTILITIES
    ============================================ */
 .rounded-sm {
     border-radius: var(--radius-sm);
 }

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

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

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

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

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

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

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

 .rounded-t-sm {
     border-top-left-radius: var(--radius-sm);
     border-top-right-radius: var(--radius-sm);
 }

 .rounded-t-md {
     border-top-left-radius: var(--radius-md);
     border-top-right-radius: var(--radius-md);
 }

 .rounded-t-lg {
     border-top-left-radius: var(--radius-lg);
     border-top-right-radius: var(--radius-lg);
 }

 .rounded-t-xl {
     border-top-left-radius: var(--radius-xl);
     border-top-right-radius: var(--radius-xl);
 }

 .rounded-t-2xl {
     border-top-left-radius: var(--radius-2xl);
     border-top-right-radius: var(--radius-2xl);
 }

 .rounded-t-3xl {
     border-top-left-radius: var(--radius-3xl);
     border-top-right-radius: var(--radius-3xl);
 }

 .rounded-t-full {
     border-top-left-radius: var(--radius-full);
     border-top-right-radius: var(--radius-full);
 }

 .rounded-b-sm {
     border-bottom-left-radius: var(--radius-sm);
     border-bottom-right-radius: var(--radius-sm);
 }

 .rounded-b-md {
     border-bottom-left-radius: var(--radius-md);
     border-bottom-right-radius: var(--radius-md);
 }

 .rounded-b-lg {
     border-bottom-left-radius: var(--radius-lg);
     border-bottom-right-radius: var(--radius-lg);
 }

 .rounded-b-xl {
     border-bottom-left-radius: var(--radius-xl);
     border-bottom-right-radius: var(--radius-xl);
 }

 .rounded-b-2xl {
     border-bottom-left-radius: var(--radius-2xl);
     border-bottom-right-radius: var(--radius-2xl);
 }

 .rounded-b-3xl {
     border-bottom-left-radius: var(--radius-3xl);
     border-bottom-right-radius: var(--radius-3xl);
 }

 .rounded-b-full {
     border-bottom-left-radius: var(--radius-full);
     border-bottom-right-radius: var(--radius-full);
 }

 .rounded-l-sm {
     border-top-left-radius: var(--radius-sm);
     border-bottom-left-radius: var(--radius-sm);
 }

 .rounded-l-md {
     border-top-left-radius: var(--radius-md);
     border-bottom-left-radius: var(--radius-md);
 }

 .rounded-l-lg {
     border-top-left-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
 }

 .rounded-l-xl {
     border-top-left-radius: var(--radius-xl);
     border-bottom-left-radius: var(--radius-xl);
 }

 .rounded-l-2xl {
     border-top-left-radius: var(--radius-2xl);
     border-bottom-left-radius: var(--radius-2xl);
 }

 .rounded-l-3xl {
     border-top-left-radius: var(--radius-3xl);
     border-bottom-left-radius: var(--radius-3xl);
 }

 .rounded-l-full {
     border-top-left-radius: var(--radius-full);
     border-bottom-left-radius: var(--radius-full);
 }

 .rounded-r-sm {
     border-top-right-radius: var(--radius-sm);
     border-bottom-right-radius: var(--radius-sm);
 }

 .rounded-r-md {
     border-top-right-radius: var(--radius-md);
     border-bottom-right-radius: var(--radius-md);
 }

 .rounded-r-lg {
     border-top-right-radius: var(--radius-lg);
     border-bottom-right-radius: var(--radius-lg);
 }

 .rounded-r-xl {
     border-top-right-radius: var(--radius-xl);
     border-bottom-right-radius: var(--radius-xl);
 }

 .rounded-r-2xl {
     border-top-right-radius: var(--radius-2xl);
     border-bottom-right-radius: var(--radius-2xl);
 }

 .rounded-r-3xl {
     border-top-right-radius: var(--radius-3xl);
     border-bottom-right-radius: var(--radius-3xl);
 }

 .rounded-r-full {
     border-top-right-radius: var(--radius-full);
     border-bottom-right-radius: var(--radius-full);
 }

 /* Enhanced rounded elements for better UI */
 .card {
     border-radius: var(--radius-xl);
 }

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

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

 .modal {
     border-radius: var(--radius-2xl);
 }

 .avatar {
     border-radius: var(--radius-full);
 }

 .badge {
     border-radius: var(--radius-full);
 }

 /* ============================================
    AI ASSISTANT STYLES
    ============================================ */

 /* AI Button in Product Modal */
 .ai-helper-btn {
     background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
     transition: all 0.3s ease;
 }

 .ai-helper-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
 }

 /* AI Chat Container */
 #sales-assistant-chat {
     animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(99, 102, 241, 0.1);
 }

 @keyframes slideUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

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

 /* AI Modal Styles */
 #ai-description-modal>div {
     animation: zoomIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 @keyframes zoomIn {
     from {
         opacity: 0;
         transform: scale(0.95);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 /* AI Sparkle Animation */
 @keyframes sparkle {

     0%,
     100% {
         opacity: 1;
         transform: scale(1);
     }

     50% {
         opacity: 0.6;
         transform: scale(1.2);
     }
 }

 .fa-sparkles {
     animation: sparkle 2s ease-in-out infinite;
 }

 /* AI Robot Animation */
 @keyframes robotBounce {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-5px);
     }
 }

 #nav-ai-assistant .fa-robot {
     animation: robotBounce 2s ease-in-out infinite;
 }

 /* AI Loading Dots */
 @keyframes bounce {

     0%,
     80%,
     100% {
         transform: scale(0);
     }

     40% {
         transform: scale(1);
     }
 }

 /* Animate fadeIn for AI modals */
 .animate-fadeIn {
     animation: fadeIn 0.3s ease-out;
 }

 /* AI Suggestion Buttons */
 #sales-suggestions button,
 #ai-description-modal button {
     transition: all 0.2s ease;
 }

 #sales-suggestions button:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
 }

 /* AI Chat Messages */
 #sales-chat-messages {
     scrollbar-width: thin;
     scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
 }

 #sales-chat-messages::-webkit-scrollbar {
     width: 4px;
 }

 #sales-chat-messages::-webkit-scrollbar-track {
     background: transparent;
 }

 #sales-chat-messages::-webkit-scrollbar-thumb {
     background: rgba(139, 92, 246, 0.3);
     border-radius: 4px;
 }

 #sales-chat-messages::-webkit-scrollbar-thumb:hover {
     background: rgba(139, 92, 246, 0.5);
 }

 /* AI Gradient Text */
 .ai-gradient-text {
     background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 50%, #3B82F6 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 /* AI Sidebar Item */
 #nav-ai-assistant {
     position: relative;
     background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
     border: 1px solid rgba(139, 92, 246, 0.2);
 }

 #nav-ai-assistant:hover {
     background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(99, 102, 241, 0.1) 100%);
     border-color: rgba(139, 92, 246, 0.4);
 }

 #nav-ai-assistant i.fa-robot {
     color: #8B5CF6;
 }

 #nav-ai-assistant span:first-of-type {
     color: #8B5CF6;
     font-weight: 600;
 }

 /* ============================================
    MOBILE BOTTOM NAVIGATION & DROP-UP
    ============================================ */
 .mobile-bottom-nav {
     display: none;
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background: #ffffff;
     box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
     z-index: 1000;
     padding-bottom: env(safe-area-inset-bottom);
     border-top: 1px solid var(--border);
     justify-content: space-around;
     align-items: center;
     height: 70px;
 }

 .mobile-nav-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     color: var(--text-secondary);
     font-size: 0.75rem;
     padding: 8px 12px;
     border-radius: 12px;
     transition: all 0.3s ease;
     flex: 1;
 }

 .mobile-nav-item i {
     font-size: 1.25rem;
     margin-bottom: 4px;
     transition: all 0.3s ease;
 }

 .mobile-nav-item.active {
     color: var(--primary);
 }

 .mobile-nav-item.active i {
     transform: translateY(-2px);
 }

 /* Drop-up Menu */
 .mobile-dropup-menu {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background: #ffffff;
     border-radius: 24px 24px 0 0;
     box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
     z-index: 1001;
     transform: translateY(110%);
     transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     padding-bottom: calc(70px + env(safe-area-inset-bottom));
     max-height: 80vh;
     overflow-y: auto;
 }

 .mobile-dropup-menu.show {
     transform: translateY(0);
 }

 .dropup-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.5);
     z-index: 1000;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
 }

 .dropup-overlay.show {
     opacity: 1;
     pointer-events: auto;
 }

 .dropup-header {
     padding: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid var(--border);
 }

 .dropup-header h3 {
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--text-primary);
 }

 .dropup-header button {
     color: var(--text-secondary);
     font-size: 1.25rem;
     padding: 8px;
     border-radius: 50%;
     transition: all 0.2s ease;
 }

 .dropup-header button:hover {
     background: var(--background);
     color: var(--error);
 }

 .dropup-content {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 15px;
     padding: 24px;
 }

 .dropup-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     text-decoration: none;
     color: var(--text-primary);
     gap: 8px;
 }

 .dropup-item .icon-box {
     width: 50px;
     height: 50px;
     border-radius: 16px;
     background: var(--background);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
     color: var(--primary);
     transition: all 0.2s ease;
 }

 .dropup-item:hover .icon-box {
     background: var(--primary);
     color: white;
     transform: rotate(5deg);
 }

 .dropup-item span {
     font-size: 0.8rem;
     font-weight: 500;
 }

 .dropup-divider {
     grid-column: 1 / -1;
     height: 1px;
     background: var(--border);
     margin: 10px 0;
 }

 .logout-item .icon-box {
     background: rgba(239, 68, 68, 0.1);
     color: var(--error);
 }

 .logout-item:hover .icon-box {
     background: var(--error);
     color: white;
 }

 @media (max-width: 768px) {
     .mobile-bottom-nav {
         display: flex;
     }

     .sidebar {
         display: none !important;
     }

     .main-wrapper {
         margin-right: 0 !important;
         padding-bottom: 90px;
     }
 }

 .bg-white.rounded-xl.shadow-lg.p-6.mb-6 {
     background-color: var(--surface) !important;
 }

 .bg-white.rounded-xl.shadow-lg.p-6 {
     background-color: var(--surface) !important;
 }

 .bg-white.rounded-2xl.shadow-sm.border.border-gray-100.p-6 {
     background-color: black !important;
     color: #ffffff !important;
     border-color: rgba(31, 107, 255, 0.25) !important;
 }

 .bg-white.rounded-2xl.shadow-sm.border.border-gray-100.p-6 .text-gray-900,
 .bg-white.rounded-2xl.shadow-sm.border.border-gray-100.p-6 .text-gray-800,
 .bg-white.rounded-2xl.shadow-sm.border.border-gray-100.p-6 .text-gray-700,
 .bg-white.rounded-2xl.shadow-sm.border.border-gray-100.p-6 .text-gray-600,
 .bg-white.rounded-2xl.shadow-sm.border.border-gray-100.p-6 .text-gray-500,
 .bg-white.rounded-2xl.shadow-sm.border.border-gray-100.p-6 .text-gray-400,
 .bg-white.rounded-2xl.shadow-sm.border.border-gray-100.p-6 .text-gray-300,
 .bg-white.rounded-2xl.shadow-sm.border.border-gray-100.p-6 .text-gray-200 {
     color: #ffffff !important;
 }

 .bg-gray-50.p-4.rounded-2xl.border.border-gray-100.transition-all {
     background-color: black !important;
     border-color: #111827 !important;
     color: #ffffff !important;
 }

 .bg-gray-50.p-4.rounded-2xl.border.border-gray-100.transition-all:hover {
     background-color: black !important;
 }

 #design-store-font {
     background-color: black !important;
     color: #ffffff !important;
     border-color: #111827 !important;
 }

 #design-store-font option {
     background-color: black;
     color: #ffffff;
 }

 #logo-upload-container label.flex-1.flex.items-center.gap-3.cursor-pointer.p-3.border-2.border-gray-200.rounded-xl.bg-white {
     background-color: black !important;
     border-color: #111827 !important;
     color: #ffffff !important;
 }

 #logo-upload-container label.flex-1.flex.items-center.gap-3.cursor-pointer.p-3.border-2.border-gray-200.rounded-xl.bg-white:hover {
     background-color: black !important;
     border-color: #111827 !important;
 }

 #logo-upload-container label.flex-1.flex.items-center.gap-3.cursor-pointer.p-3.border-2.border-gray-200.rounded-xl.bg-white .text-gray-800,
 #logo-upload-container label.flex-1.flex.items-center.gap-3.cursor-pointer.p-3.border-2.border-gray-200.rounded-xl.bg-white .text-gray-500 {
     color: #ffffff !important;
 }

 #logo-upload-container label.flex-1.flex.items-center.gap-3.cursor-pointer.p-3.border-2.border-gray-200.rounded-xl.bg-white .bg-gray-100 {
     background-color: #111827 !important;
 }

 #logo-upload-container label.flex-1.flex.items-center.gap-3.cursor-pointer.p-3.border-2.border-gray-200.rounded-xl.bg-white .text-gray-500 {
     color: #ffffff !important;
 }

 #hero-image-drop-zone {
     background-color: black !important;
     color: #ffffff !important;
     border-color: #111827 !important;
 }

 #hero-image-drop-zone:hover {
     background-color: black !important;
     color: #ffffff !important;
     border-color: #111827 !important;
 }

 .bg-gray-50.p-4.rounded-xl.border.border-gray-100,
 .flex.items-center.justify-between.p-4.bg-gray-50.rounded-xl.border.border-gray-100,
 .flex.items-center.gap-4.bg-gray-50.p-4.rounded-xl.border.border-gray-100 {
     background-color: black !important;
     border-color: #111827 !important;
     color: #ffffff !important;
 }

 .bg-gray-50.p-4.rounded-xl.border.border-gray-100:hover,
 .flex.items-center.justify-between.p-4.bg-gray-50.rounded-xl.border.border-gray-100:hover,
 .flex.items-center.gap-4.bg-gray-50.p-4.rounded-xl.border.border-gray-100:hover {
     background-color: black !important;
     border-color: #111827 !important;
 }

 #page-hero-btn-text {
     background-color: black !important;
     color: #ffffff !important;
     border-color: #111827 !important;
 }

 #page-hero-btn-text::placeholder {
     color: rgba(255, 255, 255, 0.6) !important;
 }

 #hero-video-drop-zone {
     background-color: black !important;
     color: #ffffff !important;
     border-color: #111827 !important;
 }

 #hero-video-drop-zone:hover {
     background-color: black !important;
     color: #ffffff !important;
     border-color: #111827 !important;
 }

 .w-full.px-4.py-3.border.border-gray-200.rounded-xl.focus\:ring-2.focus\:ring-primary.focus\:border-transparent.outline-none.transition {
     background-color: black !important;
     color: #ffffff !important;
     border-color: #111827 !important;
 }

 .w-full.px-4.py-3.border.border-gray-200.rounded-xl.focus\:ring-2.focus\:ring-primary.focus\:border-transparent.outline-none.transition::placeholder {
     color: rgba(255, 255, 255, 0.6) !important;
 }

 .w-full.pl-4.pr-12.py-3.border.border-gray-200.rounded-xl.focus\:ring-2.focus\:ring-primary.focus\:border-transparent.outline-none.transition {
     background-color: black !important;
     color: #ffffff !important;
     border-color: #111827 !important;
 }

 .w-full.pl-4.pr-12.py-3.border.border-gray-200.rounded-xl.focus\:ring-2.focus\:ring-primary.focus\:border-transparent.outline-none.transition::placeholder {
     color: rgba(255, 255, 255, 0.6) !important;
 }

 .flex-1.flex.items-center.gap-3.cursor-pointer.p-3.border-2.border-gray-200.rounded-xl.hover\:bg-gray-50.hover\:border-blue-200.transition.bg-white.group {
     background-color: black !important;
     border-color: #111827 !important;
     color: #ffffff !important;
 }

 .flex-1.flex.items-center.gap-3.cursor-pointer.p-3.border-2.border-gray-200.rounded-xl.hover\:bg-gray-50.hover\:border-blue-200.transition.bg-white.group:hover {
     background-color: black !important;
     border-color: #111827 !important;
 }

 .flex-1.flex.items-center.gap-3.cursor-pointer.p-3.border-2.border-gray-200.rounded-xl.hover\:bg-gray-50.hover\:border-blue-200.transition.bg-white.group .text-gray-800,
 .flex-1.flex.items-center.gap-3.cursor-pointer.p-3.border-2.border-gray-200.rounded-xl.hover\:bg-gray-50.hover\:border-blue-200.transition.bg-white.group .text-gray-500 {
     color: #ffffff !important;
 }

 .flex.flex-col.items-center.justify-center.gap-3.p-6.bg-white.border.border-gray-100.rounded-3xl.shadow-sm.hover\:shadow-md.hover\:border-purple-200.transition-all.group {
     background-color: black !important;
     border-color: #111827 !important;
 }

 .flex.flex-col.items-center.justify-center.gap-3.p-6.bg-white.border.border-gray-100.rounded-3xl.shadow-sm.hover\:shadow-md.hover\:border-green-200.transition-all.group {
     background-color: black !important;
     border-color: #111827 !important;
 }

 .bg-white.p-6.rounded-3xl.border.border-gray-100.shadow-sm {
     background-color: black !important;
     border-color: #111827 !important;
 }

 .flex.flex-col.gap-4.bg-white.p-5.rounded-2xl.border.border-gray-100.shadow-sm.hover\:shadow-md.transition-shadow.group.relative {
     background-color: black !important;
     border-color: #111827 !important;
 }

 .text-xs.text-gray-500.bg-gray-100.px-3.py-1.rounded-full {
     background-color: #111827 !important;
     color: #ffffff !important;
 }

 .text-xs.text-gray-500.bg-blue-50.p-3.rounded-lg {
     background-color: black !important;
     border: 1px solid #111827 !important;
     color: #ffffff !important;
 }

 .p-4.bg-purple-50.rounded-xl.border.border-purple-100 {
     background-color: black !important;
     border-color: #111827 !important;
     color: #ffffff !important;
 }

 .p-4.bg-yellow-50.rounded-xl.border.border-yellow-100 {
     background-color: black !important;
     border-color: #111827 !important;
     color: #ffffff !important;
 }

 .flex.items-center.gap-4.p-4.bg-gray-50.rounded-xl.border-2.border-dashed.border-transparent.hover\:border-primary.transition.cursor-pointer,
 .mt-4.p-4.bg-gray-50.rounded-xl {
     background-color: black !important;
     border-color: #111827 !important;
     color: #ffffff !important;
 }

 .flex.items-center.gap-4.p-4.bg-gray-50.rounded-xl.border-2.border-dashed.border-transparent.hover\:border-primary.transition.cursor-pointer:hover {
     background-color: black !important;
     border-color: #111827 !important;
 }

 .fas.fa-image.text-gray-500.group-has-\[\:checked\]\:text-blue-700 {
     color: #ffffff !important;
 }

 .w-full.px-4.py-3.border.border-gray-200.rounded-xl.focus\:ring-2.focus\:ring-emerald-500.focus\:border-transparent.outline-none.transition {
     background-color: black !important;
     color: #ffffff !important;
     border-color: #111827 !important;
 }

 .w-full.px-4.py-3.border.border-gray-200.rounded-xl.focus\:ring-2.focus\:ring-emerald-500.focus\:border-transparent.outline-none.transition::placeholder {
     color: rgba(255, 255, 255, 0.6) !important;
 }

 .w-full.px-4.py-3.border.border-gray-200.rounded-xl.focus\:ring-2.focus\:ring-rose-500.focus\:border-transparent.outline-none.transition {
     background-color: black !important;
     color: #ffffff !important;
     border-color: #111827 !important;
 }

 .w-full.px-4.py-3.border.border-gray-200.rounded-xl.focus\:ring-2.focus\:ring-rose-500.focus\:border-transparent.outline-none.transition::placeholder {
     color: rgba(255, 255, 255, 0.6) !important;
 }

 .grid.grid-cols-1.md\:grid-cols-2.gap-3.max-h-64.overflow-y-auto.border.border-gray-200.rounded-xl.p-3 {
     background-color: black !important;
     border-color: #111827 !important;
     color: #ffffff !important;
 }

 .text-center.py-10.bg-gray-50.rounded-2xl.border-2.border-dashed.border-gray-200.text-gray-400.text-sm.italic {
     background-color: black !important;
     border-color: #111827 !important;
     color: rgba(255, 255, 255, 0.7) !important;
 }

 .flex.items-center.gap-3.p-3.bg-gray-50.rounded-lg.hover\:bg-gray-100.cursor-pointer.transition {
     background-color: black !important;
     color: #ffffff !important;
 }

 .flex.items-center.gap-3.p-3.bg-gray-50.rounded-lg.hover\:bg-gray-100.cursor-pointer.transition:hover {
     background-color: black !important;
 }

 .w-full.px-4.py-2.border.border-gray-200.rounded-xl.text-sm {
     background-color: black !important;
     color: #ffffff !important;
     border-color: #111827 !important;
 }

 .w-full.px-4.py-2.border.border-gray-200.rounded-xl.text-sm::placeholder {
     color: rgba(255, 255, 255, 0.6) !important;
 }

 .w-full.px-4.py-2\.5.bg-gray-50.border.border-gray-200.rounded-xl.text-sm.focus\:ring-2.focus\:ring-primary.focus\:bg-white.appearance-none.outline-none.transition-all.cursor-pointer,
 .w-full.px-4.py-2\.5.bg-gray-50.border.border-gray-200.rounded-xl.text-sm.focus\:ring-2.focus\:ring-primary.focus\:bg-white.outline-none.transition-all,
 .w-full.px-4.py-2\.5.bg-gray-50.border.border-gray-200.rounded-xl.text-sm.focus\:ring-2.focus\:ring-primary.focus\:bg-white.appearance-none.outline-none.font-medium.transition-all.cursor-pointer {
     background-color: black !important;
     color: #ffffff !important;
     border-color: #111827 !important;
 }

 .w-full.px-4.py-2\.5.bg-gray-50.border.border-gray-200.rounded-xl.text-sm.focus\:ring-2.focus\:ring-primary.focus\:bg-white.appearance-none.outline-none.transition-all.cursor-pointer::placeholder,
 .w-full.px-4.py-2\.5.bg-gray-50.border.border-gray-200.rounded-xl.text-sm.focus\:ring-2.focus\:ring-primary.focus\:bg-white.outline-none.transition-all::placeholder,
 .w-full.px-4.py-2\.5.bg-gray-50.border.border-gray-200.rounded-xl.text-sm.focus\:ring-2.focus\:ring-primary.focus\:bg-white.appearance-none.outline-none.font-medium.transition-all.cursor-pointer::placeholder {
     color: rgba(255, 255, 255, 0.6) !important;
 }

 .w-full.bg-white.border.border-gray-200.rounded-lg.px-3.py-2.text-xs.font-mono.focus\:ring-2.focus\:ring-primary.outline-none.transition-all {
     background-color: black !important;
     color: #ffffff !important;
     border-color: #111827 !important;
 }

 .w-full.bg-white.border.border-gray-200.rounded-lg.px-3.py-2.text-xs.font-mono.focus\:ring-2.focus\:ring-primary.outline-none.transition-all::placeholder {
     color: rgba(255, 255, 255, 0.6) !important;
 }

 .bg-white.rounded-xl.shadow-lg.p-6.mb-6 .text-gray-700 {
     color: rgba(255, 255, 255, 0.9) !important;
 }

 .bg-white.rounded-xl.shadow-lg.p-6.mb-6 .text-gray-600 {
     color: rgba(255, 255, 255, 0.75) !important;
 }

 .bg-white.rounded-xl.shadow-lg.p-6.mb-6 .text-gray-500 {
     color: rgba(255, 255, 255, 0.65) !important;
 }

 .block.text-sm.font-bold.text-gray-700.mb-2 {
     color: #ffffff !important;
 }

 .flex.justify-between.items-center.mb-6 .text-gray-900,
 .flex.justify-between.items-center.mb-6 .text-gray-800,
 .flex.justify-between.items-center.mb-6 .text-gray-700 {
     color: rgba(255, 255, 255, 0.9) !important;
 }

 .flex.justify-between.items-center.mb-6 .text-gray-600,
 .flex.justify-between.items-center.mb-6 .text-gray-500,
 .flex.justify-between.items-center.mb-6 .text-gray-400 {
     color: rgba(255, 255, 255, 0.7) !important;
 }

 .font-bold.text-gray-900 {
     color: #ffffff !important;
 }

 .font-bold.text-dark {
     color: #ffffff !important;
 }

 #tab-content-options {
     --text-primary: #ffffff;
     --text-secondary: rgba(255, 255, 255, 0.7);
     --text-tertiary: rgba(255, 255, 255, 0.55);
     color: #ffffff;
 }

 #tab-content-options .text-dark,
 #tab-content-options .text-gray-900,
 #tab-content-options .text-gray-800,
 #tab-content-options .text-gray-700,
 #tab-content-options .text-gray-600,
 #tab-content-options .text-gray-500,
 #tab-content-options .text-gray-400 {
     color: #ffffff !important;
 }

 .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8 {
     background-color: var(--surface) !important;
 }

 .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8>.bg-white.rounded-xl.shadow-lg.p-6.border.border-gray-100 {
     background-color: var(--surface) !important;
     border-color: rgba(255, 255, 255, 0.08) !important;
 }

 .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8>.bg-white.rounded-xl.shadow-lg.p-6.border.border-gray-100 .text-gray-900,
 .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8>.bg-white.rounded-xl.shadow-lg.p-6.border.border-gray-100 .text-gray-800,
 .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8>.bg-white.rounded-xl.shadow-lg.p-6.border.border-gray-100 .text-gray-700,
 .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8>.bg-white.rounded-xl.shadow-lg.p-6.border.border-gray-100 .text-gray-600,
 .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8>.bg-white.rounded-xl.shadow-lg.p-6.border.border-gray-100 .text-gray-500,
 .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8>.bg-white.rounded-xl.shadow-lg.p-6.border.border-gray-100 .text-gray-400 {
     color: #ffffff !important;
 }

 .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8>.bg-white.rounded-xl.shadow-lg.p-6.border.border-gray-100 .bg-blue-50,
 .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8>.bg-white.rounded-xl.shadow-lg.p-6.border.border-gray-100 .bg-purple-50 {
     background-color: rgba(255, 255, 255, 0.08) !important;
 }

 .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8>.bg-white.rounded-xl.shadow-lg.p-6.border.border-gray-100 .text-blue-600,
 .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8>.bg-white.rounded-xl.shadow-lg.p-6.border.border-gray-100 .text-purple-600 {
     color: rgba(255, 255, 255, 0.85) !important;
 }

 .modal-blur {
     background-color: rgba(0, 0, 0, 0.55);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
 }

 .modal-backdrop-blur {
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
 }

.featured-product-item {
    display: block;
    position: relative;
    cursor: pointer;
}

.featured-product-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.featured-product-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.featured-product-item:hover .featured-product-card {
    border-color: rgba(99, 102, 241, 0.35);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

.featured-product-check {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.03);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.featured-product-check i {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 120ms ease, transform 120ms ease;
}

.featured-product-img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.featured-product-info {
    min-width: 0;
    flex: 1 1 auto;
}

.featured-product-name {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.featured-product-category {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

.featured-product-checkbox:focus-visible ~ .featured-product-card {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

.featured-product-checkbox:checked ~ .featured-product-card {
    border-color: rgba(16, 185, 129, 0.55);
    background: rgba(16, 185, 129, 0.10);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.featured-product-checkbox:checked ~ .featured-product-card .featured-product-check {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.featured-product-checkbox:checked ~ .featured-product-card .featured-product-check i {
    opacity: 1;
    transform: scale(1);
}