body{
margin:0;
font-family:Roboto,Arial,sans-serif;
background:
radial-gradient(circle at top, rgba(255,255,255,.35), transparent 35%),
linear-gradient(180deg,#ffe082 0%, #fbbc04 45%, #f4b400 100%);
display:grid;
place-items:center;
min-height:100vh;
padding:20px;
}
.card{
background:#fff;
width:min(480px,94%);
padding:40px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.18);
text-align:center;
animation:fade .25s ease;
}
.logo{
width:105px;
display:block;
margin:0 auto 18px;
}
h2{
margin:8px 0;
font-size:1.9rem;
color:#202124;
font-weight:500;
}
p{
color:#5f6368;
line-height:1.5;
}
.stars{
display:flex;
justify-content:center;
gap:10px;
margin:26px 0 10px;
}
.star{
border:0;
background:none;
font-size:58px;
color:#dadce0;
cursor:pointer;
transition:transform .15s,color .15s;
}
.star:hover{
transform:scale(1.08);
}
.star.on{
color:#fbbc04;
}
.hidden{display:none;}
#chosen{
margin:12px 0 18px;
font-size:1.15rem;
color:#f9ab00;
letter-spacing:2px;
}
input,textarea{
width:100%;
box-sizing:border-box;
padding:14px;
margin:10px 0;
border:1px solid #dadce0;
border-radius:10px;
font:inherit;
}
input:focus,textarea:focus{
outline:none;
border-color:#1a73e8;
box-shadow:0 0 0 3px rgba(26,115,232,.15);
}
textarea{height:150px;resize:vertical;}
#post{
width:100%;
margin-top:10px;
background:#1a73e8;
color:#fff;
border:none;
border-radius:10px;
padding:14px;
font-size:1rem;
font-weight:700;
cursor:pointer;
transition:background .15s;
}
#post:hover{
background:#1558b0;
}
.small{
font-size:.92rem;
color:#5f6368;
margin-top:-2px;
}
@keyframes fade{
from{opacity:0;transform:translateY(8px);}
to{opacity:1;transform:none;}
}


body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at center,
rgba(255,255,255,.18) 0%,
rgba(255,255,255,0) 65%);
}

.card{
position:relative;
overflow:hidden;
}

.card::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:6px;
background:linear-gradient(90deg,#ea4335,#fbbc04,#34a853);
}

.logo{
filter:drop-shadow(0 4px 10px rgba(0,0,0,.12));
}

#post{
box-shadow:0 6px 16px rgba(26,115,232,.25);
}