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

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

  [data-lucide] {
      width: 1em;
      height: 1em;
      display: inline-block;
      vertical-align: middle;
  }

  svg {
      display: inline-block;
      vertical-align: middle;
  }

  html,
  body {
      overflow-x: hidden !important;
      max-width: 100vw !important;
  }

  .dark body {
      background: linear-gradient(180deg, #0b1223 0%, #141d33 100%);
      background-attachment: fixed;
  }

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

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

  ::-webkit-scrollbar-thumb {
      background: #CBD5E1;
      border-radius: 50px;
  }

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

  .sidebar-scroll::-webkit-scrollbar {
      width: 4px;
  }

  .sidebar-scroll::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.3);
      border-radius: 50px;
  }

  .sidebar {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sidebar-collapsed {
      width: 80px !important;
  }

  .sidebar-collapsed .sidebar-text {
      display: none;
  }

  .sidebar-collapsed .sidebar-logo-text {
      display: none;
  }

  .sidebar-collapsed .sidebar-badge {
      display: none;
  }

  .sidebar-collapsed .sidebar-item {
      justify-content: center;
      padding-left: 0;
      padding-right: 0;
  }

  .sidebar-collapsed .sidebar-header {
      display: none;
  }

  .sidebar-collapsed .sidebar-close-btn {
      display: none;
  }

  .sidebar-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(6px);
      z-index: 40;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
  }

  .sidebar-overlay.active {
      opacity: 1;
      visibility: visible;
  }

  .ripple {
      position: relative;
      overflow: hidden;
  }

  .ripple::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform 0.5s, opacity 1s;
  }

  .ripple:active::after {
      transform: scale(0, 0);
      opacity: 0.3;
      transition: 0s;
  }

  .card-hover {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

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

  .dark .card-hover:hover {
      box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
  }

  .gradient-text {
      background: linear-gradient(135deg, #6366F1, #22D3EE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .notification-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      min-width: 18px;
      height: 18px;
      padding: 0 4px;
      background: #EF4444;
      color: white;
      font-size: 10px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 2px solid white;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
  }

  .dark .notification-badge {
      border-color: #141d33;
      box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
  }

  .menu-active {
      background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(6, 182, 212, 0.1));
      color: #4F46E5;
      border-right: 3px solid #4F46E5;
  }

  .dark .menu-active {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(34, 211, 238, 0.08));
      color: #A5B4FC;
      border-right: 3px solid #818CF8;
      box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.1);
  }

  .dropdown-menu {
      transform-origin: top right;
      transform: scale(0.95) translateY(-10px);
      opacity: 0;
      visibility: hidden;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
  }

  .dropdown-menu.active {
      transform: scale(1) translateY(0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
  }

  .dark .premium-dropdown {
      background: linear-gradient(180deg, #1e2942 0%, #182238 100%);
      border: 1px solid rgba(129, 140, 248, 0.12);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03);
  }

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

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

  @keyframes slideOutRight {
      from {
          transform: translateX(0);
          opacity: 1;
      }

      to {
          transform: translateX(100%);
          opacity: 0;
      }
  }

  .toast-enter {
      animation: slideInRight 0.3s ease forwards;
  }

  .toast-exit {
      animation: slideOutRight 0.3s ease forwards;
  }

  .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(8px);
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      padding: 16px;
  }

  .modal-overlay.active {
      opacity: 1;
      visibility: visible;
  }

  .modal-content {
      transform: scale(0.9) translateY(20px);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .modal-overlay.active .modal-content {
      transform: scale(1) translateY(0);
  }

  .status-badge {
      padding: 4px 12px;
      border-radius: 50px;
      font-size: 12px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 4px;
  }

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

  .scrollbar-hide::-webkit-scrollbar {
      display: none;
  }

  .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
  }

  .dark .notification-item:hover {
      background: rgba(129, 140, 248, 0.06) !important;
  }

  .dark .message-item:hover {
      background: rgba(129, 140, 248, 0.06) !important;
  }

  /* ============ ANALYTICS HERO ============ */
  .analytics-hero {
      background: linear-gradient(135deg, #0891B2 0%, #4F46E5 50%, #7C3AED 100%);
      border-radius: 24px;
      position: relative;
      overflow: hidden;
  }

  .analytics-hero::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -15%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
      border-radius: 50%;
      pointer-events: none;
  }

  .analytics-hero::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -15%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
      border-radius: 50%;
      pointer-events: none;
  }

  /* Data grid pattern */
  .data-pattern {
      background-image:
          linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 20px 20px;
      pointer-events: none;
  }

  /* Tab styles */
  .tab-btn {
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
  }

  .tab-btn.active {
      color: #4F46E5;
  }

  .dark .tab-btn.active {
      color: #A5B4FC;
  }

  .tab-btn.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, #4F46E5, #06B6D4);
      border-radius: 2px;
  }

  .tab-content {
      display: none;
      animation: fadeIn 0.3s ease;
  }

  .tab-content.active {
      display: block;
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(10px);
      }

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

  /* KPI card */
  .kpi-card {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
  }

  .kpi-card:hover {
      transform: translateY(-4px);
  }

  .kpi-card::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background: radial-gradient(circle, var(--glow, rgba(79, 70, 229, 0.15)) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
  }

  /* Insight card */
  .insight-card {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
  }

  .insight-card:hover {
      transform: translateX(4px);
  }

  /* Live pulse */
  @keyframes pulse-live {

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

      50% {
          transform: scale(1.5);
          opacity: 0.5;
      }
  }

  .pulse-live {
      animation: pulse-live 2s ease-in-out infinite;
  }

  /* Report card */
  .report-card {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      position: relative;
      overflow: hidden;
  }

  .report-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
  }

  .dark .report-card:hover {
      box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
  }

  /* Comparison arrow */
  .arrow-up {
      color: #10B981;
  }

  .arrow-down {
      color: #EF4444;
  }

  /* Metric cell */
  .metric-cell {
      padding: 12px;
      border-radius: 12px;
      transition: all 0.2s;
  }

  .metric-cell:hover {
      background: rgba(79, 70, 229, 0.05);
  }

  .dark .metric-cell:hover {
      background: rgba(129, 140, 248, 0.08);
  }

  /* Heatmap cell */
  .heatmap-cell {
      aspect-ratio: 1;
      border-radius: 4px;
      transition: all 0.2s;
      cursor: pointer;
  }

  .heatmap-cell:hover {
      transform: scale(1.2);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      z-index: 10;
      position: relative;
  }

  .heat-0 {
      background: #F1F5F9;
  }

  .dark .heat-0 {
      background: #1e2942;
  }

  .heat-1 {
      background: #C7D2FE;
  }

  .dark .heat-1 {
      background: rgba(199, 210, 254, 0.2);
  }

  .heat-2 {
      background: #818CF8;
  }

  .dark .heat-2 {
      background: rgba(129, 140, 248, 0.5);
  }

  .heat-3 {
      background: #4F46E5;
  }

  .heat-4 {
      background: #4338CA;
  }

  /* Trend badge */
  .trend-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 50px;
      font-size: 11px;
      font-weight: 700;
  }

  /* Progress ring container */
  .ring-container {
      position: relative;
      display: inline-block;
  }

  .ring-container svg {
      transform: rotate(-90deg);
  }

  .ring-container circle {
      transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Toggle switch */
  .toggle-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
  }

  .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
  }

  .toggle-slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: #CBD5E1;
      transition: .3s;
      border-radius: 24px;
  }

  .dark .toggle-slider {
      background: #374560;
  }

  .toggle-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background: white;
      transition: .3s;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  input:checked+.toggle-slider {
      background: linear-gradient(135deg, #4F46E5, #06B6D4);
  }

  input:checked+.toggle-slider:before {
      transform: translateX(20px);
  }

  @media print {
      .no-print {
          display: none !important;
      }
  }

  @media (max-width: 1023px) {
      #mainContent {
          margin-left: 0 !important;
          width: 100% !important;
          max-width: 100vw !important;
          overflow-x: hidden !important;
      }

      main {
          padding-left: 12px !important;
          padding-right: 12px !important;
          max-width: 100% !important;
      }
  }

  @media(max-width:640px) {

      .notification-popup-fix,
      .messenger-popup-fix {
          position: fixed !important;
          left: 8px !important;
          right: 8px !important;
          top: 60px !important;
          width: auto !important;
          max-width: none !important;
      }

      .grid {
          gap: 0.75rem !important;
      }
  }

  @media (max-width: 380px) {
      main {
          padding-left: 10px !important;
          padding-right: 10px !important;
      }

      h2.text-2xl {
          font-size: 1.375rem !important;
          line-height: 1.75rem !important;
      }

      .modal-content {
          max-width: calc(100vw - 16px) !important;
      }

      header .flex.items-center.gap-1 {
          gap: 0 !important;
      }

      header button.p-2 {
          padding: 0.375rem !important;
      }

      .notification-popup-fix,
      .messenger-popup-fix {
          top: 56px !important;
      }
  }