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

  body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      overflow-x: hidden
  }

  /* === DARK/LIGHT BASE === */
  .dark body {
      background: #060912;
      color: #e2e8f0
  }

  html:not(.dark) body {
      background: #f1f5f9;
      color: #1e293b
  }

  /* Scrollbar */
  ::-webkit-scrollbar {
      width: 6px;
      height: 6px
  }

  .dark ::-webkit-scrollbar-track {
      background: #0a0e1a
  }

  .dark ::-webkit-scrollbar-thumb {
      background: #1e293b;
      border-radius: 3px
  }

  html:not(.dark) ::-webkit-scrollbar-track {
      background: #e2e8f0
  }

  html:not(.dark) ::-webkit-scrollbar-thumb {
      background: #94a3b8;
      border-radius: 3px
  }

  /* Glass */
  .dark .glass {
      background: rgba(17, 24, 39, 0.7);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.05)
  }

  html:not(.dark) .glass {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(0, 0, 0, 0.08)
  }

  /* Sidebar */
  .dark .sidebar-bg {
      background: rgba(6, 9, 18, 0.98);
      border-right: 1px solid rgba(255, 255, 255, 0.05)
  }

  html:not(.dark) .sidebar-bg {
      background: rgba(255, 255, 255, 0.98);
      border-right: 1px solid rgba(0, 0, 0, 0.08)
  }

  /* Text */
  .dark .t-h {
      color: #fff
  }

  html:not(.dark) .t-h {
      color: #0f172a
  }

  .dark .t-s {
      color: #9ca3af
  }

  html:not(.dark) .t-s {
      color: #64748b
  }

  .dark .t-m {
      color: #6b7280
  }

  html:not(.dark) .t-m {
      color: #94a3b8
  }

  .dark .t-b {
      color: #d1d5db
  }

  html:not(.dark) .t-b {
      color: #334155
  }

  /* Borders */
  .dark .b-t {
      border-color: rgba(255, 255, 255, 0.05)
  }

  html:not(.dark) .b-t {
      border-color: rgba(0, 0, 0, 0.08)
  }

  /* Inputs */
  .dark .inp {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
      color: #e2e8f0
  }

  html:not(.dark) .inp {
      background: rgba(0, 0, 0, 0.03);
      border-color: rgba(0, 0, 0, 0.1);
      color: #1e293b
  }

  /* Hover */
  .dark .hv:hover {
      background: rgba(255, 255, 255, 0.05)
  }

  html:not(.dark) .hv:hover {
      background: rgba(0, 0, 0, 0.04)
  }

  /* Badge */
  .dark .bg-b {
      background: rgba(255, 255, 255, 0.05)
  }

  html:not(.dark) .bg-b {
      background: rgba(0, 0, 0, 0.04)
  }

  /* Progress */
  .dark .pg {
      background: rgba(255, 255, 255, 0.05)
  }

  html:not(.dark) .pg {
      background: rgba(0, 0, 0, 0.08)
  }

  /* Gradient Border */
  .gb {
      position: relative
  }

  .gb::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(76, 110, 245, 0.3), rgba(32, 201, 151, 0.3));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none
  }

  html:not(.dark) .gb::before {
      background: linear-gradient(135deg, rgba(76, 110, 245, 0.15), rgba(32, 201, 151, 0.15))
  }

  /* Glow */
  .dark .glow {
      box-shadow: 0 0 15px rgba(76, 110, 245, 0.15)
  }

  html:not(.dark) .glow {
      box-shadow: 0 4px 20px rgba(76, 110, 245, 0.08)
  }

  /* Sidebar Links */
  .sl {
      transition: all 0.3s;
      position: relative
  }

  .sl::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 0;
      background: linear-gradient(180deg, #4c6ef5, #20c997);
      border-radius: 0 4px 4px 0;
      transition: height 0.3s
  }

  .sl:hover::before,
  .sl.act::before {
      height: 70%
  }

  .dark .sl.act {
      background: rgba(76, 110, 245, 0.1);
      color: #748ffc
  }

  html:not(.dark) .sl.act {
      background: rgba(76, 110, 245, 0.08);
      color: #4263eb
  }

  .dark .sl {
      color: #9ca3af
  }

  .dark .sl:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.05)
  }

  html:not(.dark) .sl {
      color: #64748b
  }

  html:not(.dark) .sl:hover {
      color: #0f172a;
      background: rgba(0, 0, 0, 0.04)
  }

  /* Loader */
  .pl {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.5s, visibility 0.5s
  }

  .dark .pl {
      background: #060912
  }

  html:not(.dark) .pl {
      background: #f1f5f9
  }

  .pl.hd {
      opacity: 0;
      visibility: hidden;
      pointer-events: none
  }

  .lr {
      width: 50px;
      height: 50px;
      border: 3px solid rgba(76, 110, 245, 0.1);
      border-top-color: #4c6ef5;
      border-radius: 50%;
      animation: sp 1s linear infinite
  }

  @keyframes sp {
      to {
          transform: rotate(360deg)
      }
  }

  /* Toast */
  .tc {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      gap: 10px
  }

  .tt {
      padding: 14px 20px;
      border-radius: 12px;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      animation: sd 0.3s ease-out;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 280px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3)
  }

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

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

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

  .tt-i {
      background: linear-gradient(135deg, #4263eb, #5c7cfa)
  }

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

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

  /* Badge */
  .nb {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 18px;
      height: 18px;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 700;
      color: #fff
  }

  .dark .nb {
      border: 2px solid #060912
  }

  html:not(.dark) .nb {
      border: 2px solid #f1f5f9
  }

  /* Overlay */
  .ov {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      z-index: 40;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s
  }

  .ov.ac {
      opacity: 1;
      visibility: visible
  }

  /* Ticker */
  .mq {
      overflow: hidden;
      white-space: nowrap
  }

  .mc {
      display: inline-flex;
      animation: mq 40s linear infinite
  }

  @keyframes mq {
      0% {
          transform: translateX(0)
      }

      100% {
          transform: translateX(-50%)
      }
  }

  .dark .tb {
      background: rgba(6, 9, 18, 0.5)
  }

  html:not(.dark) .tb {
      background: rgba(255, 255, 255, 0.5)
  }

  /* Stat Card */
  .sc {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
  }

  .sc:hover {
      transform: translateY(-4px)
  }

  /* Table Row */
  .dark .tr:hover {
      background: rgba(255, 255, 255, 0.02)
  }

  html:not(.dark) .tr:hover {
      background: rgba(0, 0, 0, 0.02)
  }

  /* Tab Button */
  .tb-b {
      transition: all 0.3s
  }

  .tb-b.ac {
      background: rgba(76, 110, 245, 0.15) !important;
      color: #748ffc !important
  }

  .dark .tb-b {
      color: #6b7280
  }

  html:not(.dark) .tb-b {
      color: #94a3b8
  }

  .dark .tb-b:hover:not(.ac) {
      background: rgba(255, 255, 255, 0.05);
      color: #d1d5db
  }

  html:not(.dark) .tb-b:hover:not(.ac) {
      background: rgba(0, 0, 0, 0.04);
      color: #334155
  }

  /* Scale In */
  .si {
      animation: si 0.3s ease-out
  }

  @keyframes si {
      from {
          opacity: 0;
          transform: scale(0.9)
      }

      to {
          opacity: 1;
          transform: scale(1)
      }
  }