/* Design System CSS Variables */
        :root {
            --background: 240 10% 97%;
            --foreground: 240 10% 9%;
            --card: 0 0% 100%;
            --card-foreground: 240 10% 9%;
            --primary: 264 83% 57%;
            --primary-foreground: 0 0% 100%;
            --secondary: 240 5% 96%;
            --secondary-foreground: 240 6% 10%;
            --muted: 240 5% 96%;
            --muted-foreground: 240 4% 46%;
            --border: 240 6% 90%;
            --input: 240 6% 90%;
            --success: 142 71% 45%;
            --crypto-gradient: linear-gradient(135deg, hsl(264 83% 57%), hsl(280 70% 65%));
            --glass-bg: 0 0% 100% / 0.8;
            --crypto-glow: 264 83% 57%;
        }
        
        .dark {
            --background: 240 10% 4%;
            --foreground: 0 0% 98%;
            --card: 240 10% 6%;
            --card-foreground: 0 0% 98%;
            --primary: 264 83% 57%;
            --primary-foreground: 0 0% 100%;
            --secondary: 240 4% 16%;
            --secondary-foreground: 0 0% 98%;
            --muted: 240 4% 16%;
            --muted-foreground: 240 5% 65%;
            --border: 240 4% 16%;
            --input: 240 4% 16%;
            --glass-bg: 0 0% 100% / 0.05;
        }

        body {
            background: linear-gradient(135deg, hsl(var(--background)), hsl(240 8% 95%));
            min-height: 100vh;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: hsl(var(--foreground));
        }

        .glass-effect {
            background: hsl(var(--glass-bg));
            backdrop-filter: blur(20px);
            border: 1px solid hsl(var(--border));
        }

        .animate-fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

     

        .font-mono {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        }

 
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s;
            cursor: pointer;
            border: none;
            text-decoration: none;
        }
        
        .btn-primary {
            background: hsl(var(--primary));
            color: hsl(var(--primary-foreground));
        }
        
        .btn-primary:hover {
            background: hsl(var(--primary) / 0.9);
        }
        
        .btn-ghost {
            background: transparent;
            color: hsl(var(--muted-foreground));
        }
        
        .btn-ghost:hover {
            background: hsl(var(--muted));
        }
        
        .btn-outline {
            background: transparent;
            border: 1px solid hsl(var(--border));
            color: hsl(var(--foreground));
        }
        
        .btn-outline:hover {
            background: hsl(var(--muted));
        }
        
        .btn-sm {
            padding: 0.25rem 0.75rem;
            font-size: 0.75rem;
            height: 2rem;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.5rem;
            border-radius: 0.375rem;
            font-size: 0.75rem;
            font-weight: 500;
            background: hsl(var(--secondary));
            color: hsl(var(--secondary-foreground));
        }

        .progress-bar {
            width: 100%;
            height: 0.25rem;
            background: hsl(var(--primary) / 0.2);
            border-radius: 9999px;
            overflow: hidden;
            margin-top: 0.5rem;
        }

        .progress-fill {
            height: 100%;
            background: hsl(var(--primary));
            transition: width 1s ease-linear;
            border-radius: 9999px;
        }

        .icon {
            width: 1rem;
            height: 1rem;
            display: inline-block;
        }

        .icon-sm {
            width: 0.75rem;
            height: 0.75rem;
        }

        .text-success {
            color: hsl(var(--success));
        }
        
        .stroke-grey-200 {
        stroke: #dadfe8;
        }
        
        :root {
  --scanner-delay: 3s;
  --scanner-duration: 4s;
  --scanner-width: 250px;
  --scanner-height: 2px;
  --spinner-width: 16px;
  --icon-width: 24px;
  --qr-dimension: 128px
}

@-webkit-keyframes scanned {
  18% {
    height: 0%;
    opacity: 1
  }

  50% {
    height: 100%;
    opacity: 1
  }

  60%,
  to {
    height: 100%;
    opacity: 0
  }
}

@keyframes scanned {
  18% {
    height: 0%;
    opacity: 1
  }

  50% {
    height: 100%;
    opacity: 1
  }

  60%,
  to {
    height: 100%;
    opacity: 0
  }
}
        
        .QRCode-scanner {
  -ms-flex-item-align: start;
  -webkit-align-self: flex-start;
  align-self: flex-start;
  -webkit-animation: var(--scanner-delay) ease var(--scanner-duration) infinite scanner;
  animation: var(--scanner-delay) ease var(--scanner-duration) infinite scanner;
  background: linear-gradient(1turn, #ffd80a, #ffed8e);
  box-shadow: 0 2px 20px #ffd80a;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 2px;
  margin: -20px -10px;
  opacity: 0;
  position: absolute;
  width: 180px;
  z-index: 1
}

.QRCode-scanned {
  -webkit-animation: var(--scanner-delay) ease var(--scanner-duration) infinite scanned;
  animation: var(--scanner-delay) ease var(--scanner-duration) infinite scanned;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
  height: 0%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1
}

@-webkit-keyframes scanner {
  0% {
    opacity: 0;
    -webkit-transform: scaleX(0) translateY(0);
    transform: scaleX(0) translateY(0)
  }

  15% {
    opacity: .2;
    -webkit-transform: scaleX(1.05) translateY(0);
    transform: scaleX(1.05) translateY(0)
  }

  18% {
    -webkit-transform: scaleX(1) translateY(0);
    transform: scaleX(1) translateY(0)
  }

  50% {
    opacity: 1;
    -webkit-transform: scaleX(1) translateY(204px);
    transform: scaleX(1) translateY(204px)
  }

  60%,
  to {
    opacity: 0;
    -webkit-transform: scaleX(0) translateY(204px);
    transform: scaleX(0) translateY(204px)
  }
}

@keyframes scanner {
  0% {
    opacity: 0;
    -webkit-transform: scaleX(0) translateY(0);
    transform: scaleX(0) translateY(0)
  }

  15% {
    opacity: .2;
    -webkit-transform: scaleX(1.05) translateY(0);
    transform: scaleX(1.05) translateY(0)
  }

  18% {
    -webkit-transform: scaleX(1) translateY(0);
    transform: scaleX(1) translateY(0)
  }

  50% {
    opacity: 1;
    -webkit-transform: scaleX(1) translateY(204px);
    transform: scaleX(1) translateY(204px)
  }

  60%,
  to {
    opacity: 0;
    -webkit-transform: scaleX(0) translateY(204px);
    transform: scaleX(0) translateY(204px)
  }
}