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

  .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: toh .35s ease forwards
  }

  @keyframes toh {
      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
  }

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

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

  .report-card {
      transition: all .3s
  }

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

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