@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

			:root {
				--primary: #6366f1;
				--primary-dark: #4338ca;
				--secondary: #0f172a;
				--accent: #06b6d4;
				--glass-bg: rgba(255, 255, 255, 0.03);
				--glass-border: rgba(255, 255, 255, 0.08);
				--text-primary: #f8fafc;
				--text-secondary: #cbd5e1;
			}

			* {
				box-sizing: border-box;
			}

			body {
				font-family: 'Inter', sans-serif;
				background: #020617;
				color: var(--text-primary);
				overflow-x: hidden;
				line-height: 1.6;
			}

			/* Light mode adjustments */
			html[data-theme="light"] body {
				background: #f8fafc;
				color: #0f172a;
			}

			html[data-theme="light"] .mesh-bg {
				background:
					radial-gradient(at 20% 20%, rgba(99, 102, 241, 0.1) 0px, transparent 50%),
					radial-gradient(at 80% 80%, rgba(6, 182, 212, 0.08) 0px, transparent 50%),
					radial-gradient(at 50% 50%, rgba(168, 85, 247, 0.05) 0px, transparent 50%),
					#f8fafc;
			}

			html[data-theme="light"] .glass-card {
				background: rgba(255, 255, 255, 0.7);
				border: 1px solid rgba(0, 0, 0, 0.05);
				box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
			}

			html[data-theme="light"] .glass-card:hover {
				background: rgba(255, 255, 255, 0.9);
				border-color: rgba(0, 0, 0, 0.1);
				box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
			}

			html[data-theme="light"] .glass-nav {
				background: rgba(255, 255, 255, 0.85);
				border-bottom: 1px solid rgba(0, 0, 0, 0.05);
			}

			html[data-theme="light"] .glass-nav span.text-white,
			html[data-theme="light"] .glass-nav button.text-white,
			html[data-theme="light"] .glass-nav a.text-white {
				color: #0f172a !important;
			}

			html[data-theme="light"] .glass-nav a.nav-link {
				color: #475569;
			}

			html[data-theme="light"] .glass-nav a.nav-link:hover,
			html[data-theme="light"] .glass-nav a.nav-link.active {
				color: #0f172a;
			}

			html[data-theme="light"] .glass-nav button:hover {
				background-color: rgba(0, 0, 0, 0.05) !important;
			}

			html[data-theme="light"] .sidebar {
				background: rgba(248, 250, 252, 0.8);
				border-right: 1px solid rgba(0, 0, 0, 0.05);
			}

			html[data-theme="light"] .sidebar-link {
				color: #475569;
			}

			html[data-theme="light"] .sidebar-link:hover,
			html[data-theme="light"] .sidebar-link.active {
				background: rgba(99, 102, 241, 0.1);
				color: #0f172a;
			}

			html[data-theme="light"] .stat-card .text-slate-400 {
				color: #64748b;
			}

			html[data-theme="light"] .custom-table th {
				color: #475569;
				border-bottom: 1px solid rgba(0, 0, 0, 0.05);
			}

			html[data-theme="light"] .custom-table td {
				color: #0f172a;
				border-bottom: 1px solid rgba(0, 0, 0, 0.02);
			}

			html[data-theme="light"] tr.border-b.border-slate-700\\/50 {
				border-color: rgba(0, 0, 0, 0.05);
			}

			html[data-theme="light"] tr.hover\\:bg-slate-800\\/30:hover {
				background-color: rgba(0, 0, 0, 0.02);
			}

			html[data-theme="light"] .text-slate-300 {
				color: #475569;
			}

			html[data-theme="light"] .inline-edit-input {
				background: #ffffff;
				border: 1px solid #cbd5e1;
				color: #0f172a;
			}

			html[data-theme="light"] .btn-ghost.text-slate-300 {
				color: #475569;
			}

			html[data-theme="light"] .btn-ghost.text-slate-300:hover {
				color: #0f172a;
				background-color: rgba(0, 0, 0, 0.05);
			}

			h1, h2, h3, h4, h5, h6 {
				font-family: 'Space Grotesk', sans-serif;
			}

			/* Custom Focus Indicators - WCAG 2.1 AA */
			*:focus-visible {
				outline: 3px solid var(--accent) !important;
				outline-offset: 2px !important;
				border-radius: 4px;
			}

			button:focus-visible,
			a:focus-visible,
			input:focus-visible,
			select:focus-visible,
			textarea:focus-visible {
				outline: 3px solid #06b6d4 !important;
				outline-offset: 2px !important;
				box-shadow: 0 0 0 6px rgba(6, 182, 212, 0.25);
			}

			/* Animated Mesh Gradient Background */
			.mesh-bg {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -2;
				background:
					radial-gradient(at 20% 20%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
					radial-gradient(at 80% 80%, rgba(6, 182, 212, 0.12) 0px, transparent 50%),
					radial-gradient(at 50% 50%, rgba(168, 85, 247, 0.08) 0px, transparent 50%),
					radial-gradient(at 90% 20%, rgba(99, 102, 241, 0.1) 0px, transparent 40%),
					radial-gradient(at 10% 90%, rgba(6, 182, 212, 0.1) 0px, transparent 40%),
					#020617;
			}

			/* Animated Blobs */
			.blob {
				position: fixed;
				border-radius: 50%;
				filter: blur(80px);
				opacity: 0.4;
				z-index: -1;
				animation: blobFloat 20s ease-in-out infinite;
			}

			.blob-1 {
				width: 600px;
				height: 600px;
				background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
				top: -200px;
				left: -100px;
				animation-delay: 0s;
			}

			.blob-2 {
				width: 500px;
				height: 500px;
				background: radial-gradient(circle, rgba(6, 182, 212, 0.35) 0%, transparent 70%);
				bottom: -150px;
				right: -100px;
				animation-delay: -5s;
			}

			.blob-3 {
				width: 400px;
				height: 400px;
				background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				animation-delay: -10s;
			}

			@keyframes blobFloat {
				0%, 100% { transform: translate(0, 0) scale(1); }
				25% { transform: translate(30px, -40px) scale(1.05); }
				50% { transform: translate(-20px, 30px) scale(0.95); }
				75% { transform: translate(40px, 20px) scale(1.02); }
			}

			/* Noise Texture Overlay */
			.noise-overlay {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
				opacity: 0.03;
				pointer-events: none;
				background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
				background-repeat: repeat;
			}

			/* Glassmorphism Cards */
			.glass-card {
				background: var(--glass-bg);
				backdrop-filter: blur(12px);
				-webkit-backdrop-filter: blur(12px);
				border: 1px solid var(--glass-border);
				border-radius: 16px;
				transition: all 0.3s ease;
			}

			.glass-card:hover {
				background: rgba(255, 255, 255, 0.05);
				border-color: rgba(255, 255, 255, 0.12);
				transform: translateY(-4px);
				box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
			}

			/* Glass Navigation */
			.glass-nav {
				background: rgba(2, 6, 23, 0.85);
				backdrop-filter: blur(20px);
				-webkit-backdrop-filter: blur(20px);
				border-bottom: 1px solid var(--glass-border);
			}

			/* Stats Cards */
			.stat-card {
				padding: 24px;
			}

			.stat-card .stat-value {
				font-family: 'Space Grotesk', sans-serif;
				font-size: 2.5rem;
				font-weight: 700;
				background: linear-gradient(135deg, var(--primary), var(--accent));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
			}

			/* Gradient Buttons */
			.btn-gradient {
				background: linear-gradient(135deg, var(--primary), var(--accent));
				border: none;
				color: white;
				transition: all 0.3s ease;
			}

			.btn-gradient:hover {
				transform: translateY(-2px);
				box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
			}

			/* Table Styling */
			.custom-table {
				background: transparent;
			}

			.custom-table th {
				color: var(--text-secondary);
				font-weight: 500;
				text-transform: uppercase;
				font-size: 0.75rem;
				letter-spacing: 0.05em;
				border-bottom: 1px solid var(--glass-border);
			}

			.custom-table td {
				color: var(--text-primary);
				border-bottom: 1px solid rgba(255, 255, 255, 0.04);
			}

			/* Inline Edit */
			.inline-edit-input {
				background: rgba(255, 255, 255, 0.05);
				border: 1px solid rgba(255, 255, 255, 0.15);
				border-radius: 6px;
				padding: 8px 12px;
				color: var(--text-primary);
				width: 100%;
			}

			.inline-edit-input:focus {
				border-color: var(--primary);
				outline: none;
				box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
			}

			/* Dashboard sidebar */
			.sidebar {
				min-height: calc(100vh - 72px);
				border-right: 1px solid var(--glass-border);
			}

			.sidebar-link {
				padding: 12px 16px;
				border-radius: 8px;
				display: flex;
				align-items: center;
				gap: 12px;
				color: var(--text-secondary);
				transition: all 0.3s ease;
			}

			.sidebar-link:hover, .sidebar-link.active {
				background: rgba(99, 102, 241, 0.15);
				color: var(--text-primary);
			}

			.sidebar-link.active {
				border-left: 3px solid var(--primary);
			}
/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast-item {
    padding: 16px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideIn 0.4s ease, fadeOut 0.4s ease 3.6s forwards;
    min-width: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.toast-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.toast-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.toast-info {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}