* {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     body {
         font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
         overflow-x: hidden;
     }

     ::-webkit-scrollbar {
         width: 5px;
         height: 5px;
     }

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

     ::-webkit-scrollbar-thumb {
         background: #cbd5e1;
         border-radius: 10px;
     }

     .dark ::-webkit-scrollbar-thumb {
         background: #475569;
     }

     .sidebar-link {
         transition: all .25s cubic-bezier(.4, 0, .2, 1);
         position: relative;
         overflow: hidden;
     }

     .sidebar-link::before {
         content: '';
         position: absolute;
         left: 0;
         top: 0;
         bottom: 0;
         width: 0;
         background: linear-gradient(135deg, rgba(99, 102, 241, .12), rgba(129, 140, 248, .08));
         border-radius: 12px;
         transition: width .25s ease;
         z-index: 0;
     }

     .sidebar-link:hover::before,
     .sidebar-link.active::before {
         width: 100%;
     }

     .sidebar-link::after {
         content: '';
         position: absolute;
         left: 0;
         top: 50%;
         transform: translateY(-50%);
         width: 3px;
         height: 0;
         background: linear-gradient(180deg, #6366f1, #818cf8);
         border-radius: 0 6px 6px 0;
         transition: height .25s ease;
     }

     .sidebar-link:hover::after,
     .sidebar-link.active::after {
         height: 55%;
     }

     .sidebar-link.active {
         color: #6366f1;
         font-weight: 600;
     }

     .sidebar-link:hover {
         color: #6366f1;
     }

     .dark .sidebar-link.active {
         color: #818cf8;
     }

     .dark .sidebar-link:hover {
         color: #818cf8;
     }

     .stat-card {
         transition: all .35s cubic-bezier(.4, 0, .2, 1);
         overflow: hidden;
     }

     .stat-card:hover {
         transform: translateY(-6px);
         box-shadow: 0 25px 50px -12px rgba(99, 102, 241, .12);
     }

     .dark .stat-card:hover {
         box-shadow: 0 25px 50px -12px rgba(99, 102, 241, .25);
     }

     .stat-card .stat-icon {
         transition: all .35s ease;
     }

     .stat-card:hover .stat-icon {
         transform: scale(1.1) rotate(-5deg);
     }

     .notification-panel,
     .messenger-panel {
         max-width: calc(100vw - 1rem);
     }

     @keyframes fadeInUp {
         from {
             opacity: 0;
             transform: translateY(20px);
         }

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

     @keyframes fadeIn {
         from {
             opacity: 0;
         }

         to {
             opacity: 1;
         }
     }

     @keyframes slideInRight {
         from {
             transform: translateX(100%);
             opacity: 0;
         }

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

     @keyframes scaleIn {
         from {
             transform: scale(.92);
             opacity: 0;
         }

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

     @keyframes float {

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

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

     @keyframes blob {

         0%,
         100% {
             border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
         }

         50% {
             border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
         }
     }

     @keyframes shimmer {
         0% {
             background-position: -200% 0;
         }

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

     @keyframes pulse-ring {
         0% {
             transform: scale(.95);
             opacity: 1;
         }

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

     .animate-fadeInUp {
         animation: fadeInUp .6s cubic-bezier(.4, 0, .2, 1) both;
     }

     .animate-scaleIn {
         animation: scaleIn .25s ease both;
     }

     .animate-float {
         animation: float 3s ease-in-out infinite;
     }

     .animate-blob {
         animation: blob 8s ease-in-out infinite;
     }

     .s1 {
         animation-delay: .05s;
     }

     .s2 {
         animation-delay: .1s;
     }

     .s3 {
         animation-delay: .15s;
     }

     .s4 {
         animation-delay: .2s;
     }

     .s5 {
         animation-delay: .25s;
     }

     .s6 {
         animation-delay: .3s;
     }

     .s7 {
         animation-delay: .35s;
     }

     .s8 {
         animation-delay: .4s;
     }

     .table-container {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
     }

     .table-container table {
         min-width: 960px;
     }

     .badge-dot {
         width: 8px;
         height: 8px;
         border-radius: 50%;
         display: inline-block;
     }

     .badge-dot.online {
         background: #22c55e;
         box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
     }

     .badge-dot.offline {
         background: #94a3b8;
     }

     .hover-lift {
         transition: all .3s cubic-bezier(.4, 0, .2, 1);
     }

     .hover-lift:hover {
         transform: translateY(-3px);
     }

     .hover-scale {
         transition: all .3s ease;
     }

     .hover-scale:hover {
         transform: scale(1.03);
     }

     .sidebar-overlay {
         display: none;
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, .5);
         z-index: 40;
         backdrop-filter: blur(4px);
     }

     .sidebar-overlay.active {
         display: block;
     }

     @media(max-width:1023px) {
         .sidebar-desktop {
             transform: translateX(-100%);
             position: fixed;
             z-index: 50;
         }

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

     .tooltip-trigger {
         position: relative;
     }

     .tooltip-trigger .tooltip-text {
         visibility: hidden;
         opacity: 0;
         position: absolute;
         bottom: calc(100% + 8px);
         left: 50%;
         transform: translateX(-50%);
         background: #1e293b;
         color: #fff;
         padding: 4px 12px;
         border-radius: 8px;
         font-size: 11px;
         white-space: nowrap;
         transition: all .2s;
         z-index: 100;
         pointer-events: none;
     }

     .dark .tooltip-trigger .tooltip-text {
         background: #e2e8f0;
         color: #1e293b;
     }

     .tooltip-trigger:hover .tooltip-text {
         visibility: visible;
         opacity: 1;
     }

     .toast-container {
         position: fixed;
         top: 1rem;
         right: 1rem;
         z-index: 9999;
         display: flex;
         flex-direction: column;
         gap: .5rem;
         pointer-events: none;
     }

     .toast {
         pointer-events: auto;
         animation: slideInRight .3s ease, fadeIn .3s ease;
     }

     .quick-btn {
         transition: all .25s ease;
     }

     .quick-btn:hover {
         transform: scale(1.05);
     }

     .quick-btn:active {
         transform: scale(.97);
     }

     .live-dot {
         width: 8px;
         height: 8px;
         background: #22c55e;
         border-radius: 50%;
         position: relative;
     }

     .live-dot::before {
         content: '';
         position: absolute;
         inset: -3px;
         border: 2px solid #22c55e;
         border-radius: 50%;
         animation: pulse-ring 1.5s ease-out infinite;
     }

     .progress-bar {
         position: relative;
         overflow: hidden;
     }

     .progress-bar::after {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
         animation: shimmer 2s infinite;
     }

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

     .line-clamp-1 {
         overflow: hidden;
         display: -webkit-box;
         -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;
     }

     .line-clamp-2 {
         overflow: hidden;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
     }

     .staff-card {
         transition: all .3s cubic-bezier(.4, 0, .2, 1);
     }

     .staff-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 22px 44px -14px rgba(99, 102, 241, .18);
     }

     .dark .staff-card:hover {
         box-shadow: 0 22px 44px -14px rgba(99, 102, 241, .32);
     }

     .checkbox-custom {
         appearance: none;
         width: 18px;
         height: 18px;
         border: 2px solid #cbd5e1;
         border-radius: 5px;
         cursor: pointer;
         transition: all .2s;
         position: relative;
     }

     .checkbox-custom:checked {
         background: linear-gradient(135deg, #6366f1, #4f46e5);
         border-color: #6366f1;
     }

     .checkbox-custom:checked::after {
         content: '✓';
         position: absolute;
         color: #fff;
         font-size: 11px;
         font-weight: bold;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
     }

     .dark .checkbox-custom {
         border-color: #475569;
     }

     .dept-gradient-1 {
         background: linear-gradient(135deg, #6366f1, #4f46e5);
     }

     .dept-gradient-2 {
         background: linear-gradient(135deg, #22c55e, #16a34a);
     }

     .dept-gradient-3 {
         background: linear-gradient(135deg, #f59e0b, #f97316);
     }

     .dept-gradient-4 {
         background: linear-gradient(135deg, #f43f5e, #e11d48);
     }

     .dept-gradient-5 {
         background: linear-gradient(135deg, #0ea5e9, #0284c7);
     }

     .dept-gradient-6 {
         background: linear-gradient(135deg, #14b8a6, #0d9488);
     }