:root {
          --sidebar-w: 272px;
          --sidebar-mini: 80px;
          --header-h: 72px;
          --ease: all .3s cubic-bezier(.4, 0, .2, 1)
      }

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

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

      .app-container {
          display: flex;
          min-height: 100vh
      }

      .sidebar {
          width: var(--sidebar-w);
          min-width: var(--sidebar-w);
          height: 100vh;
          position: fixed;
          left: 0;
          top: 0;
          z-index: 50;
          transition: var(--ease);
          display: flex;
          flex-direction: column;
          overflow: hidden
      }

      .sidebar.collapsed {
          width: var(--sidebar-mini);
          min-width: var(--sidebar-mini)
      }

      .sidebar-nav {
          flex: 1;
          overflow-y: auto;
          overflow-x: hidden
      }

      .sidebar-nav::-webkit-scrollbar {
          width: 4px
      }

      .sidebar-nav::-webkit-scrollbar-thumb {
          background: rgba(148, 163, 184, .3);
          border-radius: 10px
      }

      .main-wrapper {
          flex: 1;
          margin-left: var(--sidebar-w);
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          transition: var(--ease)
      }

      body.sidebar-collapsed .main-wrapper {
          margin-left: var(--sidebar-mini)
      }

      .header {
          height: var(--header-h);
          min-height: var(--header-h);
          position: sticky;
          top: 0;
          z-index: 40
      }

      .main-content {
          flex: 1;
          overflow-x: hidden
      }

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

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

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

      .menu-item {
          position: relative
      }

      .menu-item.active>a,
      .menu-item.active>button {
          background: linear-gradient(135deg, rgba(59, 130, 246, .15), rgba(139, 92, 246, .1))
      }

      .menu-item.active::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 3px;
          height: 60%;
          background: linear-gradient(180deg, #3b82f6, #8b5cf6);
          border-radius: 0 4px 4px 0
      }

      .submenu {
          max-height: 0;
          overflow: hidden;
          transition: max-height .4s cubic-bezier(.4, 0, .2, 1)
      }

      .submenu.open {
          max-height: 500px
      }

      .menu-arrow {
          transition: transform .3s
      }

      .menu-arrow.rotated {
          transform: rotate(90deg)
      }

      .sidebar-overlay {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, .6);
          backdrop-filter: blur(4px);
          z-index: 45;
          opacity: 0;
          visibility: hidden;
          transition: var(--ease)
      }

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

      .dropdown-panel {
          position: absolute;
          top: 100%;
          right: 0;
          margin-top: 8px;
          opacity: 0;
          visibility: hidden;
          transform: translateY(-10px) scale(.95);
          transition: var(--ease);
          z-index: 9999;
          pointer-events: none
      }

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

      .gradient-animated {
          background-size: 200% 200%;
          animation: gs 6s ease infinite
      }

      @keyframes gs {
          0% {
              background-position: 0% 50%
          }

          50% {
              background-position: 100% 50%
          }

          100% {
              background-position: 0% 50%
          }
      }

      .ripple {
          position: relative;
          overflow: hidden
      }

      .ripple::after {
          content: '';
          position: absolute;
          inset: 0;
          background: radial-gradient(circle, rgba(255, 255, 255, .3) 10%, transparent 10.01%);
          transform: scale(10);
          opacity: 0;
          transition: transform .5s, opacity .8s
      }

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

      .badge-pulse {
          position: relative
      }

      .badge-pulse::after {
          content: '';
          position: absolute;
          inset: -2px;
          border-radius: 50%;
          background: inherit;
          animation: bp 1.5s infinite;
          z-index: -1
      }

      @keyframes bp {
          0% {
              transform: scale(1);
              opacity: .5
          }

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

      @keyframes pd {
          0% {
              box-shadow: 0 0 0 0 rgba(16, 185, 129, .5)
          }

          70% {
              box-shadow: 0 0 0 8px rgba(16, 185, 129, 0)
          }

          100% {
              box-shadow: 0 0 0 0 rgba(16, 185, 129, 0)
          }
      }

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

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

      .toast-container {
          position: fixed;
          top: 20px;
          right: 20px;
          z-index: 99999;
          display: flex;
          flex-direction: column;
          gap: 10px;
          max-width: calc(100vw - 40px)
      }

      .toast {
          padding: 14px 20px;
          border-radius: 12px;
          color: #fff;
          font-weight: 500;
          font-size: 14px;
          display: flex;
          align-items: center;
          gap: 10px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
          animation: ti .4s cubic-bezier(.4, 0, .2, 1);
          min-width: 280px;
          max-width: 420px
      }

      .toast.toast-out {
          animation: to .3s forwards
      }

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

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

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

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

      .toast-success {
          background: linear-gradient(135deg, #10b981, #059669)
      }

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

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

      .toast-info {
          background: linear-gradient(135deg, #3b82f6, #2563eb)
      }

      [data-tooltip] {
          position: relative
      }

      [data-tooltip]::after {
          content: attr(data-tooltip);
          position: absolute;
          bottom: calc(100% + 8px);
          left: 50%;
          transform: translateX(-50%) translateY(5px);
          padding: 6px 12px;
          background: #1e293b;
          color: #fff;
          font-size: 12px;
          font-weight: 500;
          border-radius: 8px;
          white-space: nowrap;
          opacity: 0;
          visibility: hidden;
          transition: var(--ease);
          pointer-events: none;
          z-index: 99999
      }

      .dark [data-tooltip]::after {
          background: #f1f5f9;
          color: #0f172a
      }

      [data-tooltip]:hover::after {
          opacity: 1;
          visibility: visible;
          transform: translateX(-50%) translateY(0)
      }

      .theme-transition,
      .theme-transition *,
      .theme-transition *::before,
      .theme-transition *::after {
          transition: background-color .3s, color .3s, border-color .3s !important
      }

      /* KPI Cards with gradient borders */
      .kpi-card {
          position: relative;
          overflow: hidden;
          transition: var(--ease)
      }

      .kpi-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px
      }

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

      .dark .kpi-card:hover {
          box-shadow: 0 20px 40px rgba(0, 0, 0, .4)
      }

      .kpi-card.blue::before {
          background: linear-gradient(90deg, #3b82f6, #06b6d4)
      }

      .kpi-card.green::before {
          background: linear-gradient(90deg, #10b981, #34d399)
      }

      .kpi-card.purple::before {
          background: linear-gradient(90deg, #8b5cf6, #a78bfa)
      }

      .kpi-card.orange::before {
          background: linear-gradient(90deg, #f59e0b, #fbbf24)
      }

      .kpi-card.pink::before {
          background: linear-gradient(90deg, #ec4899, #f472b6)
      }

      .kpi-card.cyan::before {
          background: linear-gradient(90deg, #06b6d4, #22d3ee)
      }

      /* World map */
      .country-flag {
          font-size: 20px;
          line-height: 1
      }

      .country-row {
          transition: var(--ease)
      }

      .country-row:hover {
          background: #f8fafc
      }

      .dark .country-row:hover {
          background: #1e293b
      }

      /* Device stats */
      .device-icon-wrap {
          width: 56px;
          height: 56px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: var(--ease)
      }

      .device-card:hover .device-icon-wrap {
          transform: scale(1.1) rotate(5deg)
      }

      /* Metric filter buttons */
      .metric-btn {
          padding: 6px 12px;
          border-radius: 10px;
          font-size: 12px;
          font-weight: 600;
          transition: var(--ease);
          cursor: pointer;
          color: #64748b;
          background: transparent
      }

      .metric-btn.active {
          background: #3b82f6;
          color: #fff;
          box-shadow: 0 4px 12px rgba(59, 130, 246, .3)
      }

      .dark .metric-btn {
          color: #94a3b8
      }

      /* Insight cards */
      .insight-card {
          background: linear-gradient(135deg, var(--from), var(--to));
          position: relative;
          overflow: hidden
      }

      .insight-card::after {
          content: '';
          position: absolute;
          top: -30px;
          right: -30px;
          width: 120px;
          height: 120px;
          background: rgba(255, 255, 255, .1);
          border-radius: 50%;
          filter: blur(20px)
      }

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

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

      .count-anim {
          animation: countUp .5s ease-out
      }

      @media(max-width:1024px) {
          .sidebar {
              transform: translateX(-100%)
          }

          .sidebar.mobile-open {
              transform: translateX(0)
          }

          .main-wrapper {
              margin-left: 0 !important
          }
      }

      @media(max-width:640px) {
          :root {
              --header-h: 60px
          }

          .toast {
              min-width: auto;
              max-width: calc(100vw - 40px);
              font-size: 13px
          }

          .dropdown-panel.mobile-full {
              position: fixed !important;
              top: var(--header-h) !important;
              left: 8px !important;
              right: 8px !important;
              width: auto !important;
              max-height: 70vh;
              overflow-y: auto;
              margin-top: 4px !important
          }
      }

      @media(max-width:375px) {
          .header-icons {
              gap: 2px
          }

          .header-icons .icon-btn {
              width: 32px;
              height: 32px
          }
      }