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

      @keyframes pulse-red {

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

          50% {
              box-shadow: 0 0 0 8px rgba(239, 68, 68, 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;
      }

      .animate-pulse-red {
          animation: pulse-red 2s 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: 900px;
      }

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

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

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

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

      .notice-card:hover {
          transform: translateY(-4px);
          box-shadow: 0 20px 40px -12px rgba(99, 102, 241, .15);
      }

      .dark .notice-card:hover {
          box-shadow: 0 20px 40px -12px rgba(99, 102, 241, .28);
      }

      .pri-urgent {
          background: linear-gradient(135deg, #ef4444, #dc2626);
      }

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

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

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

      .pri-event {
          background: linear-gradient(135deg, #8b5cf6, #7c3aed);
      }

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

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

      .notice-line {
          position: relative;
          padding-left: 1rem;
      }

      .notice-line::before {
          content: '';
          position: absolute;
          left: 0;
          top: .5rem;
          bottom: .5rem;
          width: 3px;
          border-radius: 2px;
      }

      .notice-line.urgent::before {
          background: #ef4444;
      }

      .notice-line.important::before {
          background: #f59e0b;
      }

      .notice-line.general::before {
          background: #6366f1;
      }

      .notice-line.info::before {
          background: #0ea5e9;
      }