* {
       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;
   }

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

   /* Tabs */
   .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);
       }
   }

   /* Step Progress */
   .step-circle {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-size: 13px;
       font-weight: 700;
       border: 2px solid #CBD5E1;
       background: white;
       color: #94A3B8;
       transition: all 0.3s;
   }

   .dark .step-circle {
       background: #182238;
       border-color: #374560;
       color: #758aa4;
   }

   .step.active .step-circle {
       background: linear-gradient(135deg, #4F46E5, #6366F1);
       border-color: #4F46E5;
       color: white;
       box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
   }

   .step.completed .step-circle {
       background: #10B981;
       border-color: #10B981;
       color: white;
   }

   .step-line {
       flex: 1;
       height: 2px;
       background: #E2E8F0;
       margin: 0 8px;
       margin-top: 17px;
   }

   .dark .step-line {
       background: #374560;
   }

   .step.completed+.step-line {
       background: #10B981;
   }

   .step-label {
       font-size: 12px;
       font-weight: 600;
       color: #94A3B8;
       margin-top: 8px;
   }

   .dark .step-label {
       color: #758aa4;
   }

   .step.active .step-label {
       color: #4F46E5;
   }

   .dark .step.active .step-label {
       color: #A5B4FC;
   }

   .step.completed .step-label {
       color: #10B981;
   }

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

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

   .pmt-radio:checked~.pmt-label .pmt-check {
       opacity: 1;
   }

   /* QR animated scan */
   @keyframes scan-line {

       0%,
       100% {
           top: 0;
       }

       50% {
           top: calc(100% - 4px);
       }
   }

   .qr-scan-line {
       position: absolute;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, transparent, #10B981, transparent);
       box-shadow: 0 0 20px #10B981;
       animation: scan-line 2s ease-in-out infinite;
   }

   /* Bill provider card */
   .provider-card {
       transition: all 0.2s;
   }

   .provider-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
   }

   .provider-card.selected {
       border-color: #4F46E5 !important;
       background: rgba(79, 70, 229, 0.05);
   }

   .dark .provider-card.selected {
       border-color: #818CF8 !important;
       background: rgba(129, 140, 248, 0.08);
   }

   /* 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);
   }

   /* Amount input special */
   .amount-input-lg {
       font-size: 2.5rem;
       font-weight: 800;
       text-align: center;
       letter-spacing: -1px;
   }

   /* Success animation */
   @keyframes success-pop {
       0% {
           transform: scale(0);
       }

       60% {
           transform: scale(1.15);
       }

       100% {
           transform: scale(1);
       }
   }

   .success-anim {
       animation: success-pop 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   }

   @keyframes check-draw {
       0% {
           stroke-dashoffset: 100;
       }

       100% {
           stroke-dashoffset: 0;
       }
   }

   .success-check path {
       stroke-dasharray: 100;
       animation: check-draw 0.8s ease-in-out 0.3s forwards;
   }

   @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;
       }

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

       .amount-input-lg {
           font-size: 1.75rem !important;
       }
   }