* {
      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: #fff;
      border-right: 1px solid #e2e8f0
  }

  .card-bg {
      background: #fff;
      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
  }

  .divider {
      border-color: #e2e8f0
  }

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

  .badge-bg {
      background: #f1f5f9
  }

  .progress-bg {
      background: #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 .divider {
      border-color: #1e293b
  }

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

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

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

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

  ::-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
  }

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

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

  /* Tab buttons - WORKING */
  .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;
      background: rgba(76, 110, 245, .05)
  }

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

  /* Profile sections */
  .profile-section {
      display: none
  }

  .profile-section.active {
      display: block
  }

  .toggle-sw {
      width: 40px;
      height: 22px;
      background: #cbd5e1;
      border-radius: 9999px;
      position: relative;
      cursor: pointer;
      transition: all .3s;
      border: none;
      flex-shrink: 0
  }

  .dark .toggle-sw {
      background: #475569
  }

  .toggle-sw::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      background: white;
      border-radius: 50%;
      transition: all .3s;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
  }

  .toggle-sw.on {
      background: #4c6ef5
  }

  .toggle-sw.on::after {
      transform: translateX(18px)
  }

  .ig-bg {
      background: linear-gradient(45deg, #f09433, #dc2743, #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)
  }

  .cover-banner {
      height: 200px;
      background: linear-gradient(135deg, #4c6ef5, #7c3aed, #ec4899);
      position: relative;
      overflow: hidden
  }

  .cover-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.04"%3E%3Cpath d="M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')
  }

  .achievement-badge {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      transition: transform .3s
  }

  .achievement-badge:hover {
      transform: scale(1.15)
  }