:root {
     /* Modern & Clean Color Palette */
     --primary: #6366F1;
     --primary-light: #818CF8;
     --primary-dark: #4F46E5;
     --secondary: #8B5CF6;
     --background: #F1F5F9;
     --surface: #FFFFFF;
     --text-primary: #1E293B;
     --text-secondary: #64748B;
     --border: #E2E8F0;
     --success: #10B981;
     --warning: #F59E0B;
     --error: #EF4444;
     --sidebar-width: 260px;

     /* Border Radius Variables */
     --radius-sm: 4px;
     --radius-md: 8px;
     --radius-lg: 12px;
     --radius-xl: 16px;
     --radius-2xl: 20px;
     --radius-3xl: 24px;
     --radius-4xl: 32px;
     --radius-full: 50%;

     /* New - Soft shadows */
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
     --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
     --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
     --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

     /* Gradients */
     --gradient-primary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A855F7 100%);
     --gradient-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
     box-sizing: border-box;
 }

 body {
     font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
     background: var(--background);
     min-height: 100vh;
     color: var(--text-primary);
 }

 .hero-gradient {
     background: var(--gradient-primary);
     box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
 }

 /* ============================================
    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: -4px 0 20px rgba(0, 0, 0, 0.04);
 }

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

 .sidebar-header {
     padding: 1.75rem 1.5rem;
     border-bottom: 1px solid var(--border);
     background: var(--gradient-soft);
 }

 .sidebar-header img {
     transition: transform 0.3s ease;
 }

 .sidebar-header img:hover {
     transform: scale(1.05);
 }

 .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);
 }

 /* ============================================
    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);
     background: rgba(255, 255, 255, 0.95);
 }

 .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;
 }

 .main-content {
     padding: 2rem;
     max-width: 1600px;
 }

 /* ============================================
    PHONE PREVIEW - Enhanced
    ============================================ */
 .phone-preview-container {
     position: sticky;
     top: 100px;
     width: 320px;
     height: 640px;
     background: linear-gradient(145deg, #1a1a2e 0%, #16132b 100%);
     border-radius: 40px;
     padding: 12px;
     box-shadow:
         0 25px 60px rgba(0, 0, 0, 0.25),
         inset 0 2px 0 rgba(255, 255, 255, 0.1),
         0 0 0 1px rgba(255, 255, 255, 0.05);
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
 }

 .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, #000 0%, #333 50%, #000 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);
     }
 }

 /* ============================================
    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);
 }

 /* ============================================
    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;
 }

 .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"],
 textarea,
 select {
     transition: all 0.25s ease;
     border: 1.5px solid var(--border) !important;
     border-radius: 12px !important;
     font-size: 0.95rem;
 }

 input:focus,
 textarea:focus,
 select:focus {
     border-color: var(--primary) !important;
     box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important;
     outline: none !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);
 }

 /* ============================================
    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;
 }

 /* 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
    ============================================ */
 #loading-screen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 99999;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 #loading-screen.hidden {
     opacity: 0;
     visibility: hidden;
     transform: scale(1.02);
 }

 .loader-logo {
     width: 120px;
     height: 120px;
     animation: logoFloat 2s ease-in-out infinite;
     filter: drop-shadow(0 15px 35px rgba(99, 102, 241, 0.25));
 }

 @keyframes logoFloat {

     0%,
     100% {
         transform: translateY(0px) scale(1);
         filter: drop-shadow(0 15px 35px rgba(99, 102, 241, 0.25));
     }

     50% {
         transform: translateY(-15px) scale(1.03);
         filter: drop-shadow(0 25px 45px rgba(99, 102, 241, 0.35));
     }
 }

 /* ============================================
    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(99, 102, 241, 0.85) 0%, rgba(139, 92, 246, 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(99, 102, 241, 0.1);
     transform: scale(1.02);
     box-shadow: 0 0 0 4px rgba(99, 102, 241, 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;
     }

     .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: 8px;
     height: 8px;
 }

 ::-webkit-scrollbar-track {
     background: var(--background);
     border-radius: 4px;
 }

 ::-webkit-scrollbar-thumb {
     background: var(--border);
     border-radius: 4px;
     transition: background 0.3s ease;
 }

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

 /* ============================================
    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;
 }