* {
      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, 0.3);
      border-radius: 50px;
  }

  .sidebar {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

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

  .sidebar-collapsed .sidebar-text {
      display: none;
  }

  .sidebar-collapsed .sidebar-logo-text {
      display: none;
  }

  .sidebar-collapsed .sidebar-badge {
      display: none;
  }

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

  .sidebar-collapsed .sidebar-header {
      display: none;
  }

  .sidebar-collapsed .sidebar-close-btn {
      display: none;
  }

  .sidebar-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(6px);
      z-index: 40;
      opacity: 0;
      visibility: hidden;
      transition: all 0.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, 0.3) 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform 0.5s, opacity 1s;
  }

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

  .card-hover {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

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

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

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

  /* ==== PREMIUM CREDIT/DEBIT CARDS ==== */
  .bank-card {
      border-radius: 20px;
      position: relative;
      overflow: hidden;
      aspect-ratio: 1.586 / 1;
      box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .bank-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.35);
  }

  .card-visa {
      background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #EC4899 100%);
  }

  .card-mastercard {
      background: linear-gradient(135deg, #1E293B 0%, #334155 50%, #475569 100%);
  }

  .card-amex {
      background: linear-gradient(135deg, #059669 0%, #0891B2 50%, #06B6D4 100%);
  }

  .card-virtual {
      background: linear-gradient(135deg, #DC2626 0%, #EA580C 50%, #F59E0B 100%);
  }

  .card-gold {
      background: linear-gradient(135deg, #B45309 0%, #F59E0B 50%, #FCD34D 100%);
  }

  .card-black {
      background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #334155 100%);
  }

  .bank-card::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -30%;
      width: 80%;
      height: 120%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
      pointer-events: none;
  }

  .bank-card::after {
      content: '';
      position: absolute;
      bottom: -40%;
      left: -20%;
      width: 60%;
      height: 80%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
      pointer-events: none;
  }

  /* Chip design */
  .card-chip {
      width: 44px;
      height: 32px;
      background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
      border-radius: 6px;
      position: relative;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  }

  .card-chip::before {
      content: '';
      position: absolute;
      inset: 4px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 3px;
      background: linear-gradient(90deg, transparent 30%, rgba(0, 0, 0, 0.05) 50%, transparent 70%);
  }

  /* Card flip animation */
  .card-flip-container {
      perspective: 1500px;
  }

  .card-flipper {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      transform-style: preserve-3d;
  }

  .card-flip-container.flipped .card-flipper {
      transform: rotateY(180deg);
  }

  .card-face {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
  }

  .card-back {
      transform: rotateY(180deg);
  }

  /* Magnetic strip */
  .magnetic-strip {
      position: absolute;
      top: 30px;
      left: 0;
      right: 0;
      height: 45px;
      background: #000;
  }

  .signature-strip {
      position: absolute;
      top: 95px;
      left: 20px;
      right: 60px;
      height: 32px;
      background: #fff;
  }

  .signature-strip::after {
      content: '';
      position: absolute;
      inset: 4px 8px;
      background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0, 0, 0, 0.03) 4px, rgba(0, 0, 0, 0.03) 8px);
  }

  .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;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
  }

  .dark .notification-badge {
      border-color: #141d33;
      box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
  }

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

  .dark .menu-active {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(34, 211, 238, 0.08));
      color: #A5B4FC;
      border-right: 3px solid #818CF8;
      box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.1);
  }

  .dropdown-menu {
      transform-origin: top right;
      transform: scale(0.95) translateY(-10px);
      opacity: 0;
      visibility: hidden;
      transition: all 0.25s cubic-bezier(0.4, 0, 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 0%, #182238 100%);
      border: 1px solid rgba(129, 140, 248, 0.12);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03);
  }

  @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 0.3s ease forwards;
  }

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

  .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 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 0.3s ease;
      padding: 16px;
  }

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

  .modal-content {
      transform: scale(0.9) translateY(20px);
      transition: all 0.3s cubic-bezier(0.4, 0, 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;
  }

  .table-responsive {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
  }

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

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

  .dark .notification-item:hover {
      background: rgba(129, 140, 248, 0.06) !important;
  }

  .dark .message-item:hover {
      background: rgba(129, 140, 248, 0.06) !important;
  }

  /* Tab styles */
  .tab-btn {
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
  }

  .tab-btn.active {
      color: #4F46E5;
  }

  .dark .tab-btn.active {
      color: #A5B4FC;
  }

  .tab-btn.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, #4F46E5, #06B6D4);
      border-radius: 2px;
  }

  .tab-content {
      display: none;
      animation: fadeIn 0.3s ease;
  }

  .tab-content.active {
      display: block;
  }

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

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

  /* Toggle switch */
  .toggle-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
  }

  .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, 0.2);
  }

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

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

  /* Card type selector */
  .card-type-radio:checked~.card-type-label {
      border-color: #4F46E5;
      background: rgba(79, 70, 229, 0.05);
  }

  .dark .card-type-radio:checked~.card-type-label {
      border-color: #818CF8;
      background: rgba(129, 140, 248, 0.08);
  }

  /* Frozen card overlay */
  .card-frozen {
      position: relative;
  }

  .card-frozen::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(148, 163, 184, 0.4);
      backdrop-filter: blur(4px);
      z-index: 5;
      border-radius: 20px;
  }

  .frozen-badge {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      background: rgba(255, 255, 255, 0.95);
      padding: 8px 20px;
      border-radius: 50px;
      font-weight: 700;
      color: #0891B2;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  @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,
      .messenger-popup-fix {
          position: fixed !important;
          left: 8px !important;
          right: 8px !important;
          top: 60px !important;
          width: auto !important;
          max-width: none !important;
      }

      .grid {
          gap: 0.75rem !important;
      }
  }

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

      h2.text-2xl {
          font-size: 1.375rem !important;
          line-height: 1.75rem !important;
      }

      h3.text-2xl,
      h3.text-3xl {
          font-size: 1.25rem !important;
          line-height: 1.5rem !important;
      }

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

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

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

      .notification-popup-fix,
      .messenger-popup-fix {
          top: 56px !important;
      }
  }