body { 
    margin: 0; 
    background: radial-gradient(circle at top right, #2b0000, #000 70%); 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
}

.glass { 
    background: rgba(255,255,255,0.05); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); /* Safari support */
    padding: 40px; 
    border-radius: 20px; 
    border: 1px solid rgba(255,255,255,0.1); 
    width: 90%; 
    max-width: 320px; 
    text-align: center; 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
}

/* Adjustments for mobile logo size */
svg {
    max-width: 120px;
    height: auto;
}

h2 {
    margin-top: 10px;
    font-weight: 600;
    letter-spacing: 1px;
}

input { 
    width: 100%; 
    padding: 14px; 
    margin: 20px 0; 
    background: rgba(255,255,255,0.1); 
    border: 1px solid rgba(255,255,255,0.2); 
    border-radius: 8px; 
    color: white; 
    box-sizing: border-box; 
    outline: none; 
    font-size: 16px; /* Prevents auto-zoom on iOS */
}

input::placeholder {
    color: rgba(255,255,255,0.5);
}

button { 
    width: 100%; 
    padding: 14px; 
    background: #ff0000; 
    color: white; 
    border: none; 
    border-radius: 8px; 
    font-weight: bold; 
    cursor: pointer; 
    font-size: 16px;
    transition: background 0.3s ease, transform 0.1s ease;
}

button:hover {
    background: #cc0000;
}

button:active {
    transform: scale(0.98);
}

/* Small mobile screens */
@media (max-width: 360px) {
    .glass {
        padding: 30px 20px;
    }
}