body {
    font-family: Arial, sans-serif;
    background: #f0f0f0;
    padding: 40px;
}

.container {
    max-width: 700px;
    margin: auto;
    padding: 30px;
    background: #fafafa;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
    border: 1px solid #e0e0e0;
}

.logo-container { text-align: center; margin-bottom: 20px; }
.logo { max-width: 180px; }

h1 { text-align: center; margin-bottom: 10px; }

label {
    display: block;
    margin-top: 26px;
    margin-bottom: 6px;
    font-weight: bold;
}
.req { color: red; }

/* YES/NO buttons */
.btn-group { display:flex; gap:10px; margin-bottom:10px; }
.yn-btn {
    flex:1;
    padding:12px;
    background:#ddd;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-size:16px;
}
.yn-btn.selected { background:#0073bb; color:white; }

/* Satisfaction options */
.satisfaction-group label {
    display:block;
    margin-top:6px;
}

/* Stars */
.stars { display:flex; font-size:32px; cursor:pointer; margin-top:10px; }
.star { padding:5px; color:#bbb; transition:color .2s; }
.star.hover, .star.selected { color:gold; }

.submit-btn {
    width:100%;
    padding:15px;
    margin-top:30px;
    background:#0073bb;
    color:white;
    border:none;
    font-size:16px;
    cursor:pointer;
    border-radius:6px;
}
.submit-btn:hover { background:#005f99; }

.error {
    background:#ffe5e5;
    color:#a10000;
    padding:12px;
    border-radius:8px;
    margin-bottom:15px;
    border:1px solid #cc0000;
}


.container { opacity:0; animation: fadein 0.8s forwards; }
@keyframes fadein { from{opacity:0;} to{opacity:1;} }

.spinner { border:6px solid #ddd; border-top:6px solid #555; border-radius:50%; width:50px; height:50px; animation:spin 1s linear infinite; margin:auto; }
@keyframes spin{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}