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

  body {
      font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
      transition: background .3s, color .3s
  }

  body {
      background: #f8fafc;
      color: #1e293b
  }

  .sidebar-bg {
      background: #ffffff;
      border-right: 1px solid #e2e8f0
  }

  .card-bg {
      background: #ffffff;
      border: 1px solid #e2e8f0
  }

  .header-bg {
      background: rgba(255, 255, 255, .95);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid #e2e8f0
  }

  .input-bg {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      color: #1e293b
  }

  .text-main {
      color: #1e293b
  }

  .text-sub {
      color: #64748b
  }

  .text-muted {
      color: #94a3b8
  }

  .hover-bg:hover {
      background: #f1f5f9
  }

  .dropdown-bg {
      background: #ffffff;
      border: 1px solid #e2e8f0
  }

  .divider {
      border-color: #e2e8f0
  }

  .popup-bg {
      background: #ffffff;
      border: 1px solid #e2e8f0
  }

  .badge-bg {
      background: #f1f5f9
  }

  .progress-bg {
      background: #e2e8f0
  }

  .table-border {
      border-color: #e2e8f0
  }

  .dark body {
      background: #020617;
      color: #e2e8f0
  }

  .dark .sidebar-bg {
      background: #0f172a;
      border-right: 1px solid #1e293b
  }

  .dark .card-bg {
      background: #1e293b;
      border: 1px solid #334155
  }

  .dark .header-bg {
      background: rgba(15, 23, 42, .95);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid #1e293b
  }

  .dark .input-bg {
      background: #1e293b;
      border: 1px solid #334155;
      color: #e2e8f0
  }

  .dark .text-main {
      color: #f1f5f9
  }

  .dark .text-sub {
      color: #94a3b8
  }

  .dark .text-muted {
      color: #64748b
  }

  .dark .hover-bg:hover {
      background: #334155
  }

  .dark .dropdown-bg {
      background: #1e293b;
      border: 1px solid #334155
  }

  .dark .divider {
      border-color: #1e293b
  }

  .dark .popup-bg {
      background: #1e293b;
      border: 1px solid #334155
  }

  .dark .badge-bg {
      background: #334155
  }

  .dark .progress-bg {
      background: #0f172a
  }

  .dark .table-border {
      border-color: #334155
  }

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

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

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

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

  .sidebar-container {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 260px;
      z-index: 50;
      display: flex;
      flex-direction: column;
      overflow-y: auto
  }

  .main-container {
      margin-left: 260px;
      min-height: 100vh
  }

  @media(max-width:1023px) {
      .sidebar-container {
          transform: translateX(-100%);
          transition: transform .3s
      }

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

      .main-container {
          margin-left: 0
      }
  }

  .sidebar-link {
      transition: all .3s;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 14px;
      color: #64748b
  }

  .dark .sidebar-link {
      color: #94a3b8
  }

  .sidebar-link:hover {
      background: rgba(76, 110, 245, .08);
      color: #4c6ef5;
      transform: translateX(4px)
  }

  .dark .sidebar-link:hover {
      background: rgba(76, 110, 245, .15);
      color: #748ffc
  }

  .sidebar-link.active {
      background: linear-gradient(135deg, rgba(76, 110, 245, .1), rgba(124, 58, 237, .08));
      color: #4c6ef5;
      font-weight: 600;
      border-left: 3px solid #4c6ef5
  }

  .dark .sidebar-link.active {
      background: linear-gradient(135deg, rgba(76, 110, 245, .2), rgba(124, 58, 237, .12));
      color: #748ffc
  }

  .card-hover {
      transition: all .4s
  }

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

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

  .header-sticky {
      position: sticky;
      top: 0;
      z-index: 30
  }

  @keyframes pulse-dot {
      0% {
          box-shadow: 0 0 0 0 rgba(34, 197, 94, .4)
      }

      70% {
          box-shadow: 0 0 0 8px transparent
      }

      100% {
          box-shadow: 0 0 0 0 transparent
      }
  }

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

  @keyframes spin-anim {
      from {
          transform: rotate(0)
      }

      to {
          transform: rotate(360deg)
      }
  }

  .spinning {
      animation: spin-anim 1s linear infinite
  }

  .toast-enter {
      animation: slideIn .4s
  }

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

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

  .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .5);
      backdrop-filter: blur(4px);
      z-index: 40;
      display: none
  }

  .overlay.show {
      display: block
  }

  .modal {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem
  }

  .modal.show {
      display: flex
  }

  .gradient-text {
      background: linear-gradient(135deg, #4c6ef5, #7c3aed);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent
  }

  .ig-bg {
      background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)
  }

  .x-bg {
      background: #000
  }

  .fb-bg {
      background: #1877f2
  }

  .li-bg {
      background: #0a66c2
  }

  .yt-bg {
      background: #ff0000
  }

  .tt-bg {
      background: linear-gradient(135deg, #25f4ee, #fe2c55)
  }

  .stat-g1 {
      background: linear-gradient(135deg, #667eea, #764ba2)
  }

  .stat-g2 {
      background: linear-gradient(135deg, #f093fb, #f5576c)
  }

  .stat-g3 {
      background: linear-gradient(135deg, #4facfe, #00f2fe)
  }

  .stat-g4 {
      background: linear-gradient(135deg, #43e97b, #38f9d7)
  }

  .influencer-card {
      transition: all .3s cubic-bezier(.4, 0, .2, 1);
      position: relative;
      overflow: hidden
  }

  .influencer-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .15)
  }

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

  .influencer-cover {
      height: 80px;
      background: linear-gradient(135deg, var(--c1, #4c6ef5), var(--c2, #7c3aed));
      position: relative
  }

  .influencer-cover::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')
  }

  .tier-mega {
      background: linear-gradient(135deg, #fbbf24, #f97316);
      color: white
  }

  .tier-macro {
      background: linear-gradient(135deg, #a855f7, #ec4899);
      color: white
  }

  .tier-micro {
      background: linear-gradient(135deg, #3b82f6, #0ea5e9);
      color: white
  }

  .tier-nano {
      background: linear-gradient(135deg, #10b981, #059669);
      color: white
  }

  .status-active {
      background: rgba(34, 197, 94, .15);
      color: #22c55e;
      border: 1px solid rgba(34, 197, 94, .3)
  }

  .status-pending {
      background: rgba(245, 158, 11, .15);
      color: #f59e0b;
      border: 1px solid rgba(245, 158, 11, .3)
  }

  .status-negotiating {
      background: rgba(76, 110, 245, .15);
      color: #4c6ef5;
      border: 1px solid rgba(76, 110, 245, .3)
  }

  .status-completed {
      background: rgba(148, 163, 184, .2);
      color: #64748b;
      border: 1px solid rgba(148, 163, 184, .3)
  }

  .status-rejected {
      background: rgba(239, 68, 68, .15);
      color: #ef4444;
      border: 1px solid rgba(239, 68, 68, .3)
  }

  .filter-tab {
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      transition: all .3s;
      cursor: pointer;
      color: #64748b;
      white-space: nowrap
  }

  .dark .filter-tab {
      color: #94a3b8
  }

  .filter-tab.active {
      background: #4c6ef5;
      color: white
  }

  .filter-tab:hover:not(.active) {
      background: #f1f5f9
  }

  .dark .filter-tab:hover:not(.active) {
      background: #334155
  }

  .verify-badge {
      width: 16px;
      height: 16px;
      background: #3b82f6;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
  }

  .star-rating {
      color: #fbbf24
  }

  .plat-toggle {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .3s;
      opacity: .4;
      position: relative
  }

  .plat-toggle.active {
      opacity: 1;
      transform: scale(1.05)
  }

  .plat-toggle.active::after {
      content: '';
      position: absolute;
      top: -3px;
      right: -3px;
      width: 12px;
      height: 12px;
      background: #22c55e;
      border: 2px solid #fff;
      border-radius: 50%
  }

  .dark .plat-toggle.active::after {
      border-color: #1e293b
  }