* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
} 
body { 
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); 
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: #fff; 
} 
.container { 
    background: rgba(0, 0, 0, 0.7); 
    border-radius: 15px; 
    padding: 30px; 
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); 
    width: 90%; 
    max-width: 500px; 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(0, 255, 255, 0.2); 
} 
h1 { 
    text-align: center; 
    margin-bottom: 25px; 
    color: #00ffff; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); 
} 
.input-group { 
    margin-bottom: 20px; 
    position: relative; 
} 
input { 
    width: 100%; 
    padding: 12px 15px; 
    border-radius: 5px; 
    border: none; 
    background: rgba(255, 255, 255, 0.1); 
    color: #fff; 
    font-size: 16px; 
    outline: none; 
    border: 1px solid rgba(0, 255, 255, 0.3); 
    transition: all 0.3s ease; 
} 
input:focus { 
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); 
    border-color: #00ffff; 
} 
label { 
    position: absolute; 
    top: -10px; 
    left: 10px; 
    background: rgba(0, 0, 0, 0.8); 
    padding: 0 5px; 
    font-size: 14px; 
    color: #00ffff; 
} 
button { 
    width: 100%; 
    padding: 12px; 
    border: none; 
    border-radius: 5px; 
    background: linear-gradient(45deg, #00ffff, #00bfff); 
    color: #000; 
    font-weight: bold; 
    font-size: 16px; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 20px; 
} 
button:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4); 
} 
#qrCodeContainer { 
    display: none; 
    margin-top: 20px; 
    background: rgba(0, 0, 0, 0.8); 
    padding: 15px; 
    border-radius: 10px; 
    position: relative; 
    border: 1px solid rgba(0, 255, 255, 0.3); 
} 
#qrWrapper { 
    position: relative; 
    width: 280px; 
    height: 400px; 
    margin: 0 auto; 
    background: linear-gradient(135deg, #000428, #004e92); 
    padding: 20px; 
    box-shadow: linear-gradient(135deg, #000428, #004e92); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 
.logo { 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 3px solid #00ffff; 
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); 
    margin-bottom: 10px; 
} 
.qr-title { 
    font-size: 16px; 
    color: #00ffff; 
    text-align: center; 
    margin-bottom: 10px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
} 
#qrCode { 
    background: white; 
    padding: 10px; 
    border-radius: 10px; 
} 
.amount-display { 
    margin-top: 10px; 
    background: rgba(0, 255, 255, 0.1); 
    padding: 8px 15px; 
    border-radius: 5px; 
    font-weight: bold; 
    border: 1px solid rgba(0, 255, 255, 0.3); 
} 
.upi-id { 
    font-size: 12px; 
    color: #ccc; 
    margin-top: 10px; 
    text-align: center; 
} 
.powered-by { 
    position: absolute; 
    bottom: 10px; 
    font-size: 10px; 
    color: #888; 
    width: 100%; 
    text-align: center; 
} 
.gamer-tag { 
    position: absolute; 
    top: 20px; 
    right: 20px; 
    background: linear-gradient(45deg, #ff0099, #493240); 
    padding: 5px 10px; 
    border-radius: 5px; 
    font-weight: bold; 
    font-size: 14px; 
    transform: rotate(15deg); 
} 
.download-btn { 
    margin-top: 20px; 
    background: linear-gradient(45deg, #11998e, #38ef7d); 
} 
.gaming-elements { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    z-index: 1; 
    overflow: hidden; 
    border-radius: 10px; 
} 
.gaming-element { 
    position: absolute; 
    opacity: 0.2; 
    filter: saturate(2); 
} 
.element-1 { 
    top: 10px; 
    left: 10px; 
    width: 30px; 
    height: 30px; 
    background: radial-gradient(circle, cyan, transparent 70%); 
    animation: pulse 3s infinite; 
} 
.element-2 { 
    bottom: 20px; 
    right: 30px; 
    width: 50px; 
    height: 3px; 
    background: linear-gradient(to right, transparent, #00ffff, transparent); 
    animation: slide 4s infinite; 
} 
.element-3 { 
    bottom: 50px; 
    left: 20px; 
    width: 20px; 
    height: 20px; 
    border: 2px solid cyan; 
    border-radius: 50%; 
    animation: rotate 5s linear infinite; 
} 
@keyframes pulse { 
    0%, 100% { transform: scale(1); opacity: 0.2; } 
    50% { transform: scale(1.5); opacity: 0.4; } 
} 
@keyframes slide { 
    0% { transform: translateX(-50px); } 
    100% { transform: translateX(100px); } 
} 
@keyframes rotate { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}