/* style.css */
:root{
  --font:"PingFang SC","Helvetica Neue",sans-serif;
  --pink:#ff8fa3;
  --blue:#3742fa;
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body{
  font-family:var(--font);
  background:url(jscj_bg1.webp) center/cover no-repeat fixed;
  display:grid;
  place-items:center;
  min-height:100vh;
}
.wrap{
  width:90%;
  max-width:600px;
}
.card{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  padding:clamp(2rem,5vw,3rem);
  border-radius:20px;
  text-align:center;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
  animation:fadeIn 1s ease;
}
h1.glint{
  font-size:clamp(2rem,6vw,3.5rem);
  background:linear-gradient(90deg,var(--pink),var(--blue),var(--pink)) 0 0/200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:glint 3s linear infinite;
}
@keyframes glint{
  to{background-position:200% 0;}
}
.sub{
  margin:1rem 0 2rem;
  font-size:clamp(1rem,2.5vw,1.25rem);
  color:#555;
}
.notify input,.notify button{
  width:100%;
  padding:.8rem;
  border:none;
  border-radius:8px;
  font-size:1rem;
}
.notify input{
  margin-bottom:.75rem;
  transition:transform .3s;
}
.notify input:focus{
  transform:scale(1.05);
  outline:2px solid var(--blue);
}
.notify button{
  background:var(--blue);
  color:#fff;
  cursor:pointer;
  transition:background .3s;
}
.notify button:hover{
  background:var(--pink);
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
@media (max-width:768px){
  .card{padding:2rem;}
}