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

 html,
 body {
     max-width: 100%;
     overflow-x: hidden
 }

 body {
     font-family: 'Inter', sans-serif
 }

 .font-jakarta {
     font-family: 'Plus Jakarta Sans', sans-serif
 }

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

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

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

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

 svg[class*="lucide"],
 .icon {
     pointer-events: none
 }

 .sidebar-link {
     transition: all .2s ease;
     position: relative
 }

 .sidebar-link:hover {
     background: rgba(99, 102, 241, .08)
 }

 .sidebar-link.active {
     background: linear-gradient(135deg, rgba(99, 102, 241, .12), rgba(99, 102, 241, .06));
     color: #6366f1;
     font-weight: 600
 }

 .sidebar-link.active::before {
     content: '';
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 3px;
     height: 60%;
     background: linear-gradient(180deg, #6366f1, #818cf8);
     border-radius: 0 4px 4px 0
 }

 .dark .sidebar-link:hover {
     background: rgba(99, 102, 241, .15)
 }

 .dark .sidebar-link.active {
     background: linear-gradient(135deg, rgba(99, 102, 241, .2), rgba(99, 102, 241, .1))
 }

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

 .card-hover:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 40px -8px rgba(0, 0, 0, .12)
 }

 .dark .card-hover:hover {
     box-shadow: 0 12px 40px -8px rgba(0, 0, 0, .45)
 }

 .glass {
     background: rgba(255, 255, 255, .75);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px)
 }

 .dark .glass {
     background: rgba(15, 23, 42, .75)
 }

 .gradient-primary {
     background: linear-gradient(135deg, #6366f1, #818cf8)
 }

 .gradient-accent {
     background: linear-gradient(135deg, #14b8a6, #2dd4bf)
 }

 .gradient-warning {
     background: linear-gradient(135deg, #f59e0b, #fbbf24)
 }

 .gradient-danger {
     background: linear-gradient(135deg, #ef4444, #f87171)
 }

 .gradient-success {
     background: linear-gradient(135deg, #22c55e, #4ade80)
 }

 .gradient-purple {
     background: linear-gradient(135deg, #8b5cf6, #a78bfa)
 }

 .kpi-icon {
     width: 48px;
     height: 48px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .pulse-dot {
     animation: pd 2s infinite
 }

 @keyframes pd {

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

     50% {
         opacity: .4;
         transform: scale(1.4)
     }
 }

 .slide-up {
     animation: su .5s ease forwards;
     opacity: 0;
     transform: translateY(16px)
 }

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

 .badge-pulse {
     animation: bp 2s infinite
 }

 @keyframes bp {

     0%,
     100% {
         box-shadow: 0 0 0 0 rgba(239, 68, 68, .45)
     }

     70% {
         box-shadow: 0 0 0 6px rgba(239, 68, 68, 0)
     }
 }

 .progress-bar {
     transition: width 1.4s cubic-bezier(.4, 0, .2, 1)
 }

 .toast-container {
     position: fixed;
     top: 14px;
     right: 14px;
     left: 14px;
     z-index: 10000;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 8px;
     pointer-events: none
 }

 @media(min-width:640px) {
     .toast-container {
         left: auto;
         right: 20px;
         top: 20px
     }
 }

 .toast {
     pointer-events: auto;
     animation: ti .35s ease;
     max-width: 360px;
     width: 100%
 }

 @keyframes ti {
     from {
         opacity: 0;
         transform: translateX(40px)
     }

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

 .toast.hide {
     animation: to .35s ease forwards
 }

 @keyframes to {
     to {
         opacity: 0;
         transform: translateX(40px)
     }
 }

 .dd-enter {
     animation: de .18s ease
 }

 @keyframes de {
     from {
         opacity: 0;
         transform: translateY(-8px) scale(.97)
     }

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

 .modal-content {
     animation: mc .25s ease
 }

 @keyframes mc {
     from {
         opacity: 0;
         transform: scale(.96) translateY(8px)
     }

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

 .avatar-ring {
     box-shadow: 0 0 0 2px rgba(99, 102, 241, .35)
 }

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

 .chart-container {
     position: relative;
     width: 100%
 }

 .tab-btn {
     transition: all .2s ease
 }

 .tab-btn.active {
     background: linear-gradient(135deg, #6366f1, #818cf8);
     color: #fff;
     box-shadow: 0 6px 16px -6px rgba(99, 102, 241, .55)
 }

 .tab-panel {
     animation: tp .3s ease
 }

 @keyframes tp {
     from {
         opacity: 0;
         transform: translateY(6px)
     }

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

 .act-btn {
     transition: all .15s ease
 }

 .act-btn:hover {
     transform: translateY(-1px)
 }

 .member-card {
     transition: all .25s ease
 }

 .member-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 16px 48px -12px rgba(0, 0, 0, .14)
 }

 .dark .member-card:hover {
     box-shadow: 0 16px 48px -12px rgba(0, 0, 0, .5)
 }

 .check {
     transition: all .2s ease
 }