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

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

  [data-lucide] {
      width: 1em;
      height: 1em;
      display: inline-block;
      vertical-align: middle
  }

  svg {
      display: inline-block;
      vertical-align: middle
  }

  html,
  body {
      overflow-x: hidden !important;
      max-width: 100vw !important
  }

  .dark body {
      background: linear-gradient(180deg, #0b1223 0%, #141d33 100%);
      background-attachment: fixed
  }

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

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

  ::-webkit-scrollbar-thumb {
      background: #CBD5E1;
      border-radius: 50px
  }

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

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

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

  .sidebar {
      transition: all .3s cubic-bezier(.4, 0, .2, 1)
  }

  .sidebar-collapsed {
      width: 80px !important
  }

  .sidebar-collapsed .sidebar-text,
  .sidebar-collapsed .sidebar-logo-text,
  .sidebar-collapsed .sidebar-badge,
  .sidebar-collapsed .sidebar-header,
  .sidebar-collapsed .sidebar-close-btn {
      display: none
  }

  .sidebar-collapsed .sidebar-item {
      justify-content: center;
      padding-left: 0;
      padding-right: 0
  }

  .sidebar-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .65);
      backdrop-filter: blur(6px);
      z-index: 40;
      opacity: 0;
      visibility: hidden;
      transition: all .3s ease
  }

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

  .ripple {
      position: relative;
      overflow: hidden
  }

  .ripple::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, rgba(255, 255, 255, .3) 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform .5s, opacity 1s
  }

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

  .gradient-text {
      background: linear-gradient(135deg, #6366F1, #22D3EE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
  }

  .notification-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      min-width: 18px;
      height: 18px;
      padding: 0 4px;
      background: #EF4444;
      color: white;
      font-size: 10px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 2px solid white
  }

  .dark .notification-badge {
      border-color: #141d33
  }

  .menu-active {
      background: linear-gradient(135deg, rgba(79, 70, 229, .1), rgba(6, 182, 212, .1));
      color: #4F46E5;
      border-right: 3px solid #4F46E5
  }

  .dark .menu-active {
      background: linear-gradient(135deg, rgba(99, 102, 241, .18), rgba(34, 211, 238, .08));
      color: #A5B4FC;
      border-right: 3px solid #818CF8
  }

  .dropdown-menu {
      transform-origin: top right;
      transform: scale(.95) translateY(-10px);
      opacity: 0;
      visibility: hidden;
      transition: all .25s cubic-bezier(.4, 0, .2, 1);
      pointer-events: none
  }

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

  .dark .premium-dropdown {
      background: linear-gradient(180deg, #1e2942, #182238);
      border: 1px solid rgba(129, 140, 248, .12);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .7)
  }

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

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

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

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

  .toast-enter {
      animation: slideInRight .3s ease forwards
  }

  .toast-exit {
      animation: slideOutRight .3s ease forwards
  }

  .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .65);
      backdrop-filter: blur(8px);
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all .3s ease;
      padding: 16px
  }

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

  .modal-content {
      transform: scale(.9) translateY(20px);
      transition: all .3s cubic-bezier(.4, 0, .2, 1)
  }

  .modal-overlay.active .modal-content {
      transform: scale(1) translateY(0)
  }

  .status-badge {
      padding: 4px 12px;
      border-radius: 50px;
      font-size: 12px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 4px
  }

  .scrollbar-hide::-webkit-scrollbar {
      display: none
  }

  .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none
  }

  /* Settings specific */
  .settings-nav-btn {
      transition: all .2s;
      cursor: pointer;
      position: relative
  }

  .settings-nav-btn.active {
      color: #4F46E5;
      background: linear-gradient(90deg, rgba(79, 70, 229, .08), transparent);
      border-left: 3px solid #4F46E5
  }

  .dark .settings-nav-btn.active {
      color: #A5B4FC;
      background: linear-gradient(90deg, rgba(129, 140, 248, .1), transparent);
      border-left-color: #818CF8
  }

  .settings-section {
      display: none;
      animation: fadeIn .3s ease
  }

  .settings-section.active {
      display: block
  }

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

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

  .toggle-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      flex-shrink: 0
  }

  .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0
  }

  .toggle-slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: #CBD5E1;
      transition: .3s;
      border-radius: 24px
  }

  .dark .toggle-slider {
      background: #374560
  }

  .toggle-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background: white;
      transition: .3s;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
  }

  input:checked+.toggle-slider {
      background: linear-gradient(135deg, #4F46E5, #06B6D4)
  }

  input:checked+.toggle-slider:before {
      transform: translateX(20px)
  }

  .setting-card {
      transition: all .2s;
      border-radius: 16px
  }

  .setting-card:hover {
      background: rgba(79, 70, 229, .02)
  }

  .dark .setting-card:hover {
      background: rgba(129, 140, 248, .04)
  }

  .theme-option {
      transition: all .3s;
      cursor: pointer;
      border: 3px solid transparent
  }

  .theme-option.selected {
      border-color: #4F46E5;
      box-shadow: 0 0 0 4px rgba(79, 70, 229, .15)
  }

  .dark .theme-option.selected {
      border-color: #818CF8;
      box-shadow: 0 0 0 4px rgba(129, 140, 248, .2)
  }

  .color-dot {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;
      transition: all .2s;
      border: 3px solid transparent
  }

  .color-dot:hover {
      transform: scale(1.15)
  }

  .color-dot.selected {
      border-color: white;
      box-shadow: 0 0 0 3px #4F46E5
  }

  .danger-zone {
      border: 2px dashed #EF4444;
      border-radius: 16px;
      padding: 20px;
      background: rgba(239, 68, 68, .03)
  }

  .dark .danger-zone {
      border-color: rgba(239, 68, 68, .4);
      background: rgba(239, 68, 68, .05)
  }

  /* Mobile tabs for settings nav */
  @media(max-width:1024px) {
      .settings-sidebar {
          display: none
      }

      .settings-mobile-nav {
          display: block
      }
  }

  @media(min-width:1025px) {
      .settings-sidebar {
          display: block
      }

      .settings-mobile-nav {
          display: none
      }
  }

  @media print {
      .no-print {
          display: none !important
      }
  }

  @media(max-width:1023px) {
      #mainContent {
          margin-left: 0 !important;
          width: 100% !important;
          max-width: 100vw !important;
          overflow-x: hidden !important
      }

      main {
          padding-left: 12px !important;
          padding-right: 12px !important;
          max-width: 100% !important
      }
  }

  @media(max-width:640px) {
      .notification-popup-fix {
          position: fixed !important;
          left: 8px !important;
          right: 8px !important;
          top: 60px !important;
          width: auto !important;
          max-width: none !important
      }

      .grid {
          gap: .75rem !important
      }
  }

  @media(max-width:380px) {
      main {
          padding-left: 10px !important;
          padding-right: 10px !important
      }

      h2.text-2xl {
          font-size: 1.375rem !important
      }

      .modal-content {
          max-width: calc(100vw - 16px) !important
      }

      header .flex.items-center.gap-1 {
          gap: 0 !important
      }

      header button.p-2 {
          padding: .375rem !important
      }
  }