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

      .gradient-pink {
          background: linear-gradient(135deg, #ec4899, #f472b6)
      }

      .gradient-cyan {
          background: linear-gradient(135deg, #06b6d4, #22d3ee)
      }

      .gradient-orange {
          background: linear-gradient(135deg, #f97316, #fb923c)
      }

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

      .meal-card {
          transition: all .3s ease
      }

      .meal-card:hover {
          transform: translateY(-4px);
          box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .18)
      }

      .dark .meal-card:hover {
          box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .5)
      }

      .ring-progress {
          transform: rotate(-90deg)
      }