* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-family: sans-serif; background: #f9f9f9; color: #2d3436; }

.app-container { 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 20px; 
    gap: 10px;
    text-align: center;
}

.client-logo { max-height: 60px; max-width: 150px; object-fit: contain; }
h1 { font-size: 1.2rem; margin: 0; }

.wheel-box { position: relative; width: 280px; height: 280px; margin: 10px auto; }
.wheel { 
    width: 100%; height: 100%; border-radius: 50%; border: 5px solid white; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    background: conic-gradient(#ff7675 0 60deg, #fdcb6e 60deg 120deg, #55efc4 120deg 180deg, #81ecec 180deg 240deg, #a29bfe 240deg 300deg, #fab1a0 300deg 360deg);
    transition: transform 4s cubic-bezier(0.15, 0, 0.15, 1);
}
.pointer { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid #2d3436; z-index: 10; }

.btn-primary { width: 100%; max-width: 280px; padding: 15px; border: none; border-radius: 12px; background: #2d3436; color: white; font-size: 1rem; font-weight: bold; cursor: pointer; }
.btn-google { display: block; text-decoration: none; background: #4285F4; color: white; padding: 15px; border-radius: 10px; margin: 20px 0; font-weight: bold; }
.btn-close { background: none; border: none; color: #636e72; text-decoration: underline; cursor: pointer; }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 100; align-items: center; justify-content: center; }
.modal-card { background: white; width: 90%; max-width: 350px; padding: 25px; border-radius: 20px; text-align: center; }