body {
      background: #0b1220;
      color: white;
    }

    /* MOBILE SIDEBAR */
    @media(max-width:768px) {
      #sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        height: 100%;
        z-index: 50;
        transition: 0.3s;
      }

      #sidebar.open {
        left: 0;
      }
    }

    /* FAB BUTTON */
    .fab {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #2563eb;
      padding: 14px;
      border-radius: 50%;
      z-index: 60;
    }

    /* CARD UI */
    .card {
      background: rgba(255, 255, 255, 0.04);
      border-radius: 10px;
      padding: 10px;
    }

    .glass {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(12px);
    }

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

    ::-webkit-scrollbar-thumb {
      background: #444;
      border-radius: 10px;
    }

    .switch {
      position: relative;
      width: 40px;
      height: 20px;
    }

    .switch input {
      display: none;
    }

    .slider {
      position: absolute;
      inset: 0;
      background: #333;
      border-radius: 20px;
    }

    .slider:before {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      left: 2px;
      top: 2px;
      background: white;
      border-radius: 50%;
      transition: 0.3s;
    }

    input:checked+.slider {
      background: #22c55e;
    }

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


    .txnCard {
      width: 100%;
      touch-action: pan-y;
      /* prevent scroll conflict */
    }
  
    /* ICON BUTTON */
.iconBtn {
  position: relative;
  background: #1f2937; /* gray-800 */
  padding: 8px;
  border-radius: 8px;
  font-size: 16px;
  transition: 0.2s;
}

.iconBtn:hover {
  background: #374151; /* gray-700 */
}

/* TOOLTIP */
.tooltip {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}

.iconBtn:hover .tooltip {
  opacity: 1;
}


/* MOBILE PANEL FIX */
@media(max-width:768px){

  #leftPanel, #rightPanel{
    top: 0;
    left: 0;
    height: 100%;
  }

}

/* FAB UPGRADE */
.fab {
  position: fixed;
  bottom: 70px;
  right: 20px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  padding: 16px;
  border-radius: 50%;
  font-size: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  z-index: 60;
}

/* TOUCH FRIENDLY */
.iconBtn {
  padding: 12px;
  border-radius: 10px;
}

/* PREVENT IOS ZOOM */
input, select, textarea {
  font-size: 16px;
}