body { 
    font-family: sans-serif; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 50px 20px; 
    background-color: #f0f2f5; 
}

.card { 
    background: white; 
    padding: 2rem; 
    border-radius: 12px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    text-align: center; 
    max-width: 320px; 
    width: 100%; 
}

input { 
    padding: 12px; 
    width: 100%; 
    box-sizing: border-box; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    margin-bottom: 20px; 
    font-size: 16px; 
}

button { 
    padding: 12px 20px; 
    cursor: pointer; 
    background: #007bff; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    font-weight: bold; 
    width: 100%; 
    font-size: 16px; 
}

button:hover { 
    background: #0056b3; 
}

#qrcode-container { 
    margin-top: 20px; 
    padding: 10px; 
    display: inline-block;
    background-image: 
        linear-gradient(45deg, #ccc 25%, transparent 25%), 
        linear-gradient(-45deg, #ccc 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #ccc 75%), 
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px; 
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    border-radius: 8px;
}

#qrcode img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

.hint { 
    font-size: 12px; 
    color: #666; 
    margin-top: 15px; 
    line-height: 1.4; 
}