* {
      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;
      text-decoration: none
  }

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

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

  .comp-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--brand-color, linear-gradient(90deg, #4c6ef5, #7c3aed))
  }

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

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

  .comp-you {
      --brand-color: linear-gradient(90deg, #4c6ef5, #7c3aed)
  }

  .comp-1 {
      --brand-color: linear-gradient(90deg, #f97316, #ef4444)
  }

  .comp-2 {
      --brand-color: linear-gradient(90deg, #22c55e, #10b981)
  }

  .comp-3 {
      --brand-color: linear-gradient(90deg, #3b82f6, #06b6d4)
  }

  .comp-4 {
      --brand-color: linear-gradient(90deg, #a855f7, #ec4899)
  }

  /* Rank badge */
  .rank-1 {
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
      color: white
  }

  .rank-2 {
      background: linear-gradient(135deg, #94a3b8, #64748b);
      color: white
  }

  .rank-3 {
      background: linear-gradient(135deg, #f97316, #ea580c);
      color: white
  }

  .rank-other {
      background: #f1f5f9;
      color: #64748b
  }

  .dark .rank-other {
      background: #334155;
      color: #94a3b8
  }

  /* SWOT */
  .swot-card {
      padding: 16px;
      border-radius: 12px;
      transition: all .3s
  }

  .swot-card:hover {
      transform: translateY(-2px)
  }

  .swot-s {
      background: rgba(34, 197, 94, .08);
      border: 1px solid rgba(34, 197, 94, .2)
  }

  .swot-w {
      background: rgba(239, 68, 68, .08);
      border: 1px solid rgba(239, 68, 68, .2)
  }

  .swot-o {
      background: rgba(76, 110, 245, .08);
      border: 1px solid rgba(76, 110, 245, .2)
  }

  .swot-t {
      background: rgba(245, 158, 11, .08);
      border: 1px solid rgba(245, 158, 11, .2)
  }

  .dark .swot-s {
      background: rgba(34, 197, 94, .15)
  }

  .dark .swot-w {
      background: rgba(239, 68, 68, .15)
  }

  .dark .swot-o {
      background: rgba(76, 110, 245, .15)
  }

  .dark .swot-t {
      background: rgba(245, 158, 11, .15)
  }

  /* Score circle */
  .score-circle {
      position: relative;
      width: 120px;
      height: 120px
  }

  .score-circle svg {
      transform: rotate(-90deg)
  }

  .score-circle circle {
      fill: none;
      stroke-width: 8
  }

  .score-bg {
      stroke: #e2e8f0
  }

  .dark .score-bg {
      stroke: #334155
  }

  .score-fill {
      stroke: url(#scoreGrad);
      stroke-linecap: round;
      transition: stroke-dashoffset 1s
  }

  .filter-chip {
      padding: 6px 12px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 500;
      transition: all .3s;
      cursor: pointer;
      background: #f1f5f9;
      color: #64748b;
      white-space: nowrap;
      border: none;
      font-family: inherit
  }

  .dark .filter-chip {
      background: #334155;
      color: #94a3b8
  }

  .filter-chip:hover {
      background: #e2e8f0;
      color: #4c6ef5
  }

  .dark .filter-chip:hover {
      background: #475569;
      color: #748ffc
  }

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

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

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

  .tab-btn:hover {
      color: #4c6ef5
  }

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

  .trend-up {
      color: #22c55e
  }

  .trend-down {
      color: #ef4444
  }

  /* Bar comparison */
  .comparison-bar {
      position: relative;
      height: 32px;
      border-radius: 8px;
      overflow: hidden;
      background: #f1f5f9
  }

  .dark .comparison-bar {
      background: #334155
  }

  .bar-fill {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 12px;
      color: white;
      font-size: 11px;
      font-weight: 600;
      transition: width 1s cubic-bezier(.4, 0, .2, 1)
  }

  .post-thumb {
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      cursor: pointer;
      transition: all .3s
  }

  .post-thumb:hover {
      transform: scale(1.02);
      box-shadow: 0 10px 30px rgba(0, 0, 0, .15)
  }

  .post-thumb::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .7) 100%);
      pointer-events: none
  }

  .post-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s
  }

  .post-thumb:hover img {
      transform: scale(1.08)
  }