/* Prevent horizontal scrolling */
	html, body {
		overflow-x: hidden;
		max-width: 100vw;
	}
	
	/* Modern font family */
	body, .table, .btn, .form-control, .nav-link, .breadcrumb, .badge {
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}
	
	/* Optimized SaaS Interactive Styles */
	.btn {
		transition: transform 0.15s ease, box-shadow 0.15s ease;
		transform: translateY(0);
	}
	
	.btn:hover {
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	}
	
	.btn:active {
		transform: translateY(0);
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}
	
	.card {
		transition: box-shadow 0.2s ease, transform 0.2s ease;
		border: 1px solid rgba(0,0,0,0.08);
		box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	}
	
	.card:hover {
		box-shadow: 0 8px 25px rgba(0,0,0,0.1);
		transform: translateY(-2px);
	}
	
	.table tbody tr {
		transition: background-color 0.15s ease;
		cursor: pointer;
	}
	
	.table tbody tr:hover {
		background-color: rgba(59, 130, 246, 0.05) !important;
	}
	
	.nav-tabs .nav-link {
		transition: background-color 0.15s ease;
		border-radius: 8px 8px 0 0;
	}
	
	.nav-tabs .nav-link:hover {
		background-color: rgba(59, 130, 246, 0.1);
	}
	
	.form-control {
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
		border: 1px solid rgba(0,0,0,0.1);
	}
	
	.form-control:focus {
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
		border-color: #3b82f6;
	}
	
	.badge {
		transition: transform 0.15s ease;
	}
	
	.badge:hover {
		transform: scale(1.05);
	}
	
	/* Loading animation */
	@keyframes pulse {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.5; }
	}
	
	.loading {
		animation: pulse 1.5s ease-in-out infinite;
	}
	
	/* Smooth scrollbar */
	::-webkit-scrollbar {
		width: 6px;
	}
	
	::-webkit-scrollbar-track {
		background: rgba(0,0,0,0.05);
		border-radius: 3px;
	}
	
	::-webkit-scrollbar-thumb {
		background: rgba(0,0,0,0.2);
		border-radius: 3px;
		transition: all 0.2s ease;
	}
	
	::-webkit-scrollbar-thumb:hover {
		background: rgba(0,0,0,0.4);
	}
	
	/* Interactive file icons */
	.fa {
		transition: all 0.2s ease;
	}
	
	tr:hover .fa {
		transform: scale(1.2);
		color: #3b82f6 !important;
	}
	
	/* Simplified Dropdown Animation */
	.dropdown-menu {
		border: none;
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		border-radius: 8px;
		transition: opacity 0.15s ease;
	}
	
	.dropdown-item {
		transition: background-color 0.15s ease;
		border-radius: 4px;
		margin: 1px 0;
	}
	
	.dropdown-item:hover {
		background-color: rgba(59, 130, 246, 0.1);
	}
	
	/* Progress indicators */
	.progress-ring {
		width: 20px;
		height: 20px;
		display: inline-block;
	}
	
	.progress-ring circle {
		transition: stroke-dashoffset 0.3s ease;
	}
	
	/* Floating action button */
	.fab {
		position: fixed;
		bottom: 20px;
		right: 20px;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: linear-gradient(135deg, #3b82f6, #1d4ed8);
		border: none;
		color: white;
		box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
		transition: all 0.3s ease;
		z-index: 1000;
	}
	
	.fab:hover {
		transform: scale(1.1) rotate(90deg);
		box-shadow: 0 6px 25px rgba(59, 130, 246, 0.6);
	}
	
	/* Toast notifications */
	.toast-container {
		position: fixed;
		top: 20px;
		right: 20px;
		z-index: 1050;
	}
	
	.toast {
		background: white;
		border: none;
		border-radius: 12px;
		box-shadow: 0 8px 25px rgba(0,0,0,0.15);
		animation: slideInRight 0.3s ease;
	}
	
	@keyframes slideInRight {
		from {
			transform: translateX(100%);
			opacity: 0;
		}
		to {
			transform: translateX(0);
			opacity: 1;
		}
	}
	/* Compact file manager styles */
	.table th, .table td {
		padding: 0.4rem 0.75rem;
		font-size: 0.85rem;
		line-height: 1.3;
	}
	
	/* Professional table row hover */
	.table-row {
		transition: background-color 0.15s ease;
	}
	
	.table-row:hover {
		background-color: #f8f9fa !important;
	}
	
	/* Ensure checkboxes are clickable */
	.table-row input[type="checkbox"] {
		cursor: pointer;
		pointer-events: auto;
	}
	
	.table thead th {
		font-size: 0.8rem;
		font-weight: 600;
		padding: 0.5rem 0.75rem;
	}
	
	.badge {
		font-size: 0.7rem;
		padding: 0.25em 0.5em;
	}
	
	.btn-sm {
		font-size: 0.8rem;
		padding: 0.25rem 0.5rem;
	}
	
	.input-group-sm .form-control {
		font-size: 0.8rem;
		padding: 0.25rem 0.5rem;
	}
	
	.breadcrumb {
		font-size: 0.8rem;
		margin-bottom: 0;
	}
	
	.card-header {
		padding: 0.75rem 1rem;
	}
	
	.card-header h6 {
		font-size: 0.95rem;
		margin-bottom: 0;
	}
	
	.nav-tabs .nav-link {
		font-size: 0.85rem;
		padding: 0.5rem 0.75rem;
	}
	
	.d-flex.justify-content-between.align-items-center {
		padding: 0.5rem 0.75rem;
	}
	
	.border-bottom.px-3.py-2 {
		padding: 0.4rem 0.75rem !important;
	}
	
	.text-muted {
		font-size: 0.8rem;
	}
	
	.cursor-pointer:hover {
		background-color: rgba(0,0,0,0.02);
	}
	
	/* Dark mode support */
	[data-bs-theme="dark"] .cursor-pointer:hover {
		background-color: rgba(255,255,255,0.05);
	}
	
	[data-bs-theme="dark"] .table-light {
		background-color: var(--bs-gray-800) !important;
		color: var(--bs-gray-100);
	}
	
	[data-bs-theme="dark"] .bg-light {
		background-color: var(--bs-gray-800) !important;
		color: var(--bs-gray-100);
	}
	
	.fa {
		font-size: 0.9rem;
	}
	
	/* Compact toolbar */
	.d-flex.gap-2 .btn {
		margin-right: 0.25rem;
	}
	
	/* Reduce card padding */
	.card-body.p-0 {
		padding: 0 !important;
	}
	
	/* Compact summary footer */
	.border-top.px-3.py-2 {
		padding: 0.4rem 0.75rem !important;
		font-size: 0.8rem;
	}
	
	/* Light table text */
	.table td {
		color: #333 !important;
		font-weight: 400 !important;
	}
	
	.table td .fa {
		color: #666 !important;
	}
	
	.table td .text-success,
	.table td .text-warning {
		color: #333 !important;
	}
	
	/* Interactive search */
	.search-container {
		position: relative;
	}
	
	.search-container::before {
		content: '🔍';
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		opacity: 0.5;
		transition: all 0.2s ease;
	}
	
	.search-container:focus-within::before {
		opacity: 0.8;
		transform: translateY(-50%) scale(1.1);
	}
	
	.search-input {
		padding-left: 40px !important;
		border-radius: 25px !important;
		border: 2px solid transparent !important;
		background: rgba(0,0,0,0.05) !important;
	}
	
	.search-input:focus {
		background: white !important;
		border-color: #3b82f6 !important;
	}
	
	/* Simplified Table Design */
	.table {
		border-collapse: collapse;
		border-spacing: 0;
		background: white;
	}
	
	.table tbody tr {
		background: white;
		border: none;
		border-bottom: 1px solid #e5e7eb;
		transition: background-color 0.15s ease;
		margin: 0;
		box-shadow: none;
		border-radius: 0;
	}

	
	/* Circular File Icons */
	.file-icon {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		font-weight: 600;
		color: white;
		margin-right: 12px;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}
	
	.file-icon::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(45deg, rgba(255,255,255,0.2), transparent);
		transform: translateX(-100%);
		transition: transform 0.6s ease;
	}
	
	tr:hover .file-icon::before {
		transform: translateX(100%);
	}
	
	.file-icon.folder {
		background: linear-gradient(135deg, #f59e0b, #d97706);
	}
	
	.file-icon.image {
		background: linear-gradient(135deg, #10b981, #059669);
	}
	
	.file-icon.document {
		background: linear-gradient(135deg, #3b82f6, #1d4ed8);
	}
	
	.file-icon.video {
		background: linear-gradient(135deg, #ef4444, #dc2626);
	}
	
	.file-icon.audio {
		background: linear-gradient(135deg, #8b5cf6, #7c3aed);
	}
	
	.file-icon.archive {
		background: linear-gradient(135deg, #6b7280, #4b5563);
	}
	
	/* File name styling */
	.file-name {
		font-weight: 500;
		color: #1f2937;
		transition: color 0.2s ease;
	}
	
	tr:hover .file-name {
		color: #3b82f6;
	}
	
	/* Replica/Status indicators */
	.status-indicator {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		display: inline-block;
		margin-right: 8px;
		animation: pulse 2s infinite;
	}
	
	.status-indicator.synced {
		background: #10b981;
	}
	
	.status-indicator.syncing {
		background: #f59e0b;
	}
	
	.status-indicator.error {
		background: #ef4444;
	}
	
	/* Modern badges */
	.modern-badge {
		padding: 4px 12px;
		border-radius: 20px;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		border: none;
		transition: all 0.2s ease;
	}
	
	.modern-badge:hover {
		transform: scale(1.05);
	}
	
	/* Progressive Loading Animations */
	@keyframes slideInUp {
		from {
			opacity: 0;
			transform: translateY(30px) scale(0.95);
			filter: blur(2px);
		}
		to {
			opacity: 1;
			transform: translateY(0) scale(1);
			filter: blur(0);
		}
	}
	
	@keyframes fadeInScale {
		from {
			opacity: 0;
			transform: scale(0.8) rotate(-2deg);
		}
		to {
			opacity: 1;
			transform: scale(1) rotate(0deg);
		}
	}
	
	@keyframes progressiveReveal {
		from {
			opacity: 0;
			transform: translateX(-20px) rotateY(15deg);
			box-shadow: none;
		}
		to {
			opacity: 1;
			transform: translateX(0) rotateY(0deg);
			box-shadow: 0 4px 12px rgba(0,0,0,0.08);
		}
	}
	
	/* Circular Loading Rotator */
	.loading-rotator {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9999;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 20px;
		padding: 30px;
		box-shadow: 0 20px 60px rgba(0,0,0,0.15);
		backdrop-filter: blur(10px);
		border: 1px solid rgba(59, 130, 246, 0.2);
		transition: all 0.3s ease;
	}
	
	.circular-loader {
		width: 60px;
		height: 60px;
		border: 4px solid rgba(59, 130, 246, 0.1);
		border-top: 4px solid #3b82f6;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		position: relative;
		margin: 0 auto 15px;
	}
	
	.circular-loader::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 30px;
		height: 30px;
		border: 2px solid rgba(139, 92, 246, 0.3);
		border-top: 2px solid #8b5cf6;
		border-radius: 50%;
		animation: spin 0.8s linear infinite reverse;
	}
	
	.circular-loader::after {
		content: '⚡';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 16px;
		animation: pulse 2s ease-in-out infinite;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	.loading-text {
		text-align: center;
		color: #1f2937;
		font-weight: 600;
		font-size: 14px;
		margin-bottom: 8px;
	}
	
	.loading-subtext {
		text-align: center;
		color: #6b7280;
		font-size: 12px;
		animation: fadeInOut 2s ease-in-out infinite;
	}
	
	@keyframes fadeInOut {
		0%, 100% { opacity: 0.5; }
		50% { opacity: 1; }
	}
	
	/* Condensed Table Styling */
	.table {
		border-collapse: collapse;
		border-spacing: 0;
		background: white;
		font-size: 13px;
	}
	
	.table tbody tr {
		background: white;
		border: none;
		border-bottom: 1px solid #e5e7eb;
		transition: background-color 0.15s ease;
		margin: 0;
		box-shadow: none;
		border-radius: 0;
	}
	
	.table tbody tr:hover {
		background-color: #f8fafc;
	}
	
	/* Advanced SaaS Features */
	.advanced-toolbar {
		background: linear-gradient(135deg, #f8fafc, #e2e8f0) !important;
		border: 1px solid rgba(59, 130, 246, 0.1);
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		animation: slideInDown 0.5s ease;
	}
	
	@keyframes slideInDown {
		from { transform: translateY(-20px); opacity: 0; }
		to { transform: translateY(0); opacity: 1; }
	}
	
	.compression-overlay {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgba(59, 130, 246, 0.9);
		color: white;
		padding: 8px 16px;
		border-radius: 20px;
		font-size: 12px;
		font-weight: 600;
		animation: bounce 0.5s ease;
		z-index: 10;
	}
	
	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% { transform: translate(-50%, -50%) translateY(0); }
		40% { transform: translate(-50%, -50%) translateY(-10px); }
		60% { transform: translate(-50%, -50%) translateY(-5px); }
	}
	
	/* Pattern Analysis Modal */
	.pattern-analysis-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	
	.pattern-analysis-modal.show {
		opacity: 1;
	}
	
	.modal-content {
		background: white;
		border-radius: 16px;
		max-width: 600px;
		width: 90%;
		max-height: 80vh;
		overflow-y: auto;
		box-shadow: 0 20px 60px rgba(0,0,0,0.3);
		transform: scale(0.9);
		transition: transform 0.3s ease;
	}
	
	.pattern-analysis-modal.show .modal-content {
		transform: scale(1);
	}
	
	.modal-header {
		padding: 20px;
		border-bottom: 1px solid #e5e7eb;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(135deg, #3b82f6, #1d4ed8);
		color: white;
		border-radius: 16px 16px 0 0;
	}
	
	.close-modal {
		background: none;
		border: none;
		color: white;
		font-size: 24px;
		cursor: pointer;
		padding: 0;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: background 0.2s ease;
	}
	
	.close-modal:hover {
		background: rgba(255,255,255,0.2);
	}
	
	.modal-body {
		padding: 20px;
	}
	
	.pattern-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 16px;
		margin-bottom: 24px;
	}
	
	.pattern-item {
		text-align: center;
		padding: 20px;
		border-radius: 12px;
		background: linear-gradient(135deg, #f8fafc, #e2e8f0);
		border: 1px solid rgba(59, 130, 246, 0.1);
		transition: all 0.3s ease;
	}
	
	.pattern-item:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
	}
	
	.pattern-icon {
		font-size: 32px;
		margin-bottom: 12px;
		animation: float 3s ease-in-out infinite;
	}
	
	@keyframes float {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-8px); }
	}
	
	.pattern-item h6 {
		color: #1f2937;
		margin-bottom: 8px;
		font-weight: 600;
	}
	
	.pattern-item p {
		color: #6b7280;
		margin: 0;
		font-size: 14px;
	}
	
	/* Symbolic Network Visualization */
	.symbolic-map {
		background: linear-gradient(135deg, #1f2937, #111827);
		border-radius: 12px;
		padding: 20px;
		color: white;
		position: relative;
		overflow: hidden;
	}
	
	.symbol-network {
		height: 200px;
		position: relative;
		background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1), transparent);
		border-radius: 8px;
	}
	
	.symbol-node {
		position: absolute;
		width: 12px;
		height: 12px;
		background: #3b82f6;
		border-radius: 50%;
		box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
		animation: pulse 2s ease-in-out infinite;
	}
	
	/* Bulk Operations Panel */
	.bulk-operations-panel {
		position: fixed;
		bottom: 20px;
		left: 20px;
		background: white;
		border-radius: 16px;
		box-shadow: 0 10px 40px rgba(0,0,0,0.2);
		padding: 0;
		max-width: 400px;
		transform: translateY(100%);
		transition: transform 0.3s ease;
		z-index: 1000;
		border: 1px solid rgba(59, 130, 246, 0.2);
	}
	
	.bulk-operations-panel.show {
		transform: translateY(0);
	}
	
	.panel-content {
		padding: 20px;
	}
	
	.panel-content h6 {
		margin-bottom: 16px;
		color: #1f2937;
		font-weight: 600;
	}
	
	.operation-buttons {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
	
	.progress-container {
		height: 6px;
		background: #e5e7eb;
		border-radius: 3px;
		overflow: hidden;
	}
	
	.progress-bar {
		height: 100%;
		width: 0%;
		background: linear-gradient(90deg, #3b82f6, #1d4ed8);
		transition: width 0.3s ease;
		border-radius: 3px;
	}
	
	/* Enhanced badges with gradients */
	.bg-gradient {
		background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
	}
	
	/* Simplified Button Effects */
	.btn {
		position: relative;
		overflow: hidden;
	}
	
	.btn:hover {
		transform: translateY(-1px);
	}
	
	/* Simplified Card Animations */
	.card:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(0,0,0,0.1);
	}
	
	/* Smooth Scroll Behavior */
	html {
		scroll-behavior: smooth;
	}
	
	/* Enhanced Loading States */
	.skeleton {
		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		animation: loading 1.5s infinite;
	}
	
	@keyframes loading {
		0% { background-position: 200% 0; }
		100% { background-position: -200% 0; }
	}
	
	/* Simplified Navigation Transitions */
	.nav-link {
		position: relative;
		transition: color 0.15s ease;
	}
	
	.nav-link::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 2px;
		background: #3b82f6;
		transition: width 0.2s ease;
	}
	
	.nav-link:hover::after,
	.nav-link.active::after {
		width: 100%;
	}
	
	/* Bucket Navigation Styles */
	.bucket-link {
		transition: all 0.2s ease;
		border-radius: 8px;
		margin: 2px 0;
		padding: 8px 12px;
		display: flex;
		align-items: center;
		text-decoration: none;
		color: inherit;
	}
	
	.bucket-link:hover {
		background-color: rgba(59, 130, 246, 0.1);
		color: #3b82f6;
		transform: translateX(4px);
	}
	
	.bucket-link.active {
		background-color: rgba(59, 130, 246, 0.15);
		color: #3b82f6;
		border-left: 3px solid #3b82f6;
		font-weight: 600;
	}
	
	.bucket-link.new-bucket {
		color: #10b981;
		border: 1px dashed rgba(16, 185, 129, 0.3);
		margin-top: 8px;
	}
	
	.bucket-link.new-bucket:hover {
		background-color: rgba(16, 185, 129, 0.1);
		color: #10b981;
		border-color: #10b981;
	}
	
	.bucket-item {
		position: relative;
	}
	
	.bucket-item::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 2px;
		height: 0;
		background: #3b82f6;
		transition: height 0.2s ease;
	}
	
	.bucket-item:hover::before {
		height: 60%;
	}
	
	.bucket-link.active + .bucket-item::before {
		height: 100%;
	}
	
	/* Bucket Overview Cards */
	.bucket-card {
		transition: all 0.3s ease;
		border: 1px solid #e5e7eb;
	}
	
	.bucket-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 25px rgba(0,0,0,0.1);
		border-color: #3b82f6;
	}
	
	.bucket-card.border-dashed:hover {
		border-color: #10b981 !important;
		background-color: rgba(16, 185, 129, 0.05);
	}
	
	/* Enhanced breadcrumb for bucket navigation */
	.breadcrumb .breadcrumb-item a {
		transition: all 0.2s ease;
	}
	
	.breadcrumb .breadcrumb-item a:hover {
		color: #1d4ed8 !important;
		transform: scale(1.05);
	}
	
	/* Responsive adjustments */
	@media (max-width: 768px) {
		.advanced-toolbar {
			flex-direction: column;
			gap: 8px;
		}
		
		.advanced-toolbar .ms-auto {
			margin-left: 0 !important;
			margin-top: 8px;
		}
		
		.bulk-operations-panel {
			left: 10px;
			right: 10px;
			max-width: none;
		}
		
		.pattern-grid {
			grid-template-columns: 1fr;
		}
		
		.loading-rotator {
			padding: 20px;
			width: 90%;
			max-width: 300px;
		}
		
		.circular-loader {
			width: 50px;
			height: 50px;
		}
		
		.launchpad-menu {
			width: 320px !important;
		}
		
		.launchpad-grid .col-4 {
			flex: 0 0 50%;
			max-width: 50%;
		}
		
		.bucket-link {
			padding: 6px 8px;
			font-size: 0.9rem;
		}
		
		.bucket-link span {
			margin-left: 8px !important;
		}
	}
	
	/* Launchpad Styles */
	.launchpad-menu {
		transform: scale(0.95) translateY(-10px);
		opacity: 0;
		transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
		border: none !important;
		box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
	}
	
	.launchpad-menu.show {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
	
	.launchpad-trigger {
		transition: all 0.2s ease;
		position: relative;
		overflow: hidden;
	}
	
	.launchpad-trigger::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
		transition: left 0.6s ease;
	}
	
	.launchpad-trigger:hover::before {
		left: 100%;
	}
	
	.launchpad-app {
		transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
		background: rgba(255, 255, 255, 0.7);
		border: 1px solid rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(10px);
		position: relative;
		overflow: hidden;
	}
	
	.launchpad-app::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
		opacity: 0;
		transition: opacity 0.3s ease;
		z-index: 1;
	}
	
	.launchpad-app:hover::before {
		opacity: 1;
	}
	
	.launchpad-app:hover {
		transform: translateY(-5px) scale(1.05);
		box-shadow: 0 10px 30px rgba(0,0,0,0.15);
		background: rgba(255, 255, 255, 0.9);
	}
	
	.launchpad-app .app-icon {
		transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
		position: relative;
		z-index: 2;
	}
	
	.launchpad-app:hover .app-icon {
		transform: scale(1.1) rotate(5deg);
		box-shadow: 0 8px 25px rgba(0,0,0,0.2);
	}
	
	.launchpad-app .app-name,
	.launchpad-app .app-status {
		position: relative;
		z-index: 2;
		transition: all 0.2s ease;
	}
	
	.launchpad-app:hover .app-name {
		color: #1f2937 !important;
		font-weight: 600;
	}
	
	.launchpad-app:hover .app-status {
		transform: scale(1.1);
	}
	
	.launchpad-header {
		animation: slideInDown 0.4s ease;
	}
	
	.launchpad-grid .col-4:nth-child(1) .launchpad-app {
		animation: slideInUp 0.4s ease 0.1s both;
	}
	
	.launchpad-grid .col-4:nth-child(2) .launchpad-app {
		animation: slideInUp 0.4s ease 0.2s both;
	}
	
	.launchpad-grid .col-4:nth-child(3) .launchpad-app {
		animation: slideInUp 0.4s ease 0.3s both;
	}
	
	.launchpad-grid .col-4:nth-child(4) .launchpad-app {
		animation: slideInUp 0.4s ease 0.4s both;
	}
	
	.launchpad-grid .col-4:nth-child(5) .launchpad-app {
		animation: slideInUp 0.4s ease 0.5s both;
	}
	
	.launchpad-grid .col-4:nth-child(6) .launchpad-app {
		animation: slideInUp 0.4s ease 0.6s both;
	}
	
	.launchpad-footer {
		animation: slideInUp 0.4s ease 0.7s both;
	}
	
	@keyframes slideInDown {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	/* Floating particles effect */
	.launchpad-menu::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: 
			radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
			radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
			radial-gradient(circle at 40% 60%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
		pointer-events: none;
		animation: float 6s ease-in-out infinite;
	}
	
	@keyframes float {
		0%, 100% { transform: translateY(0px) rotate(0deg); }
		33% { transform: translateY(-10px) rotate(1deg); }
		66% { transform: translateY(5px) rotate(-1deg); }
	}
	
	/* Center screen popups for inbox, chat app, etc. */
	.dropdown-menu.center-popup {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important;
		max-width: 90vw;
		max-height: 80vh;
		overflow-y: auto;
		z-index: 1060;
		box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
		border-radius: 16px !important;
		border: none !important;
		backdrop-filter: blur(10px);
		animation: centerPopupFadeIn 0.3s ease;
	}
	
	/* Notification dropdown center positioning */
	#NotificationsDiv.center-popup {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important;
		max-width: 500px;
		width: 90vw;
		max-height: 80vh;
		overflow-y: auto;
		z-index: 1060;
		box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
		border-radius: 16px !important;
		border: none !important;
		backdrop-filter: blur(10px);
		animation: centerPopupFadeIn 0.3s ease;
	}
	
	/* Launchpad menu center positioning */
	.launchpad-menu.center-popup {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important;
		max-width: 600px;
		width: 90vw;
		max-height: 80vh;
		overflow-y: auto;
		z-index: 1060;
		box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
		border-radius: 16px !important;
		border: none !important;
		backdrop-filter: blur(10px);
		animation: centerPopupFadeIn 0.3s ease;
	}
	
	/* Animation for center popups */
	@keyframes centerPopupFadeIn {
		from {
			opacity: 0;
			transform: translate(-50%, -50%) scale(0.9);
		}
		to {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1);
		}
	}
	
	/* Backdrop for center popups */
	.popup-backdrop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1055;
		animation: backdropFadeIn 0.3s ease;
	}
	
	@keyframes backdropFadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}
</style>