*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  height:100%;
  font-family:"Inter","PingFang SC","Microsoft YaHei",sans-serif;
  overflow-x:hidden;
  color:#fff;
  transition:background .5s,color .5s;
}

/* ===== 渐变流动背景 ===== */
.background{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(120deg,#ff9a9e,#fad0c4,#a1c4fd,#c2e9fb);
  background-size:400% 400%;
  animation:gradientMove 15s ease infinite;
  z-index:-1;
  filter:brightness(0.9);
}
@keyframes gradientMove{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* 夜间模式 */
body.night{color:#e0e0e0;}
body.night .background{
  background:linear-gradient(120deg,#141e30,#243b55,#434343);
  filter:brightness(0.7);
}

/* ===== 标题部分 ===== */
header{
  text-align:center;
  padding-top:70px;
}
.glow{
  font-size:2.6em;
  letter-spacing:2px;
  text-shadow:0 0 15px #fff,0 0 25px #00c3ff,0 0 35px #00bcd4;
}
#clock{font-size:1.2em;margin-top:8px;color:#fff;}
#greet{font-size:1.1em;margin-top:6px;}

/* ===== 主体卡片 ===== */
main{
  max-width:900px;
  margin:50px auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
}
.card{
  flex:1 1 300px;
  background:rgba(255,255,255,0.15);
  border-radius:20px;
  backdrop-filter:blur(10px);
  padding:25px;
  min-height:150px;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
  transition:transform .4s, box-shadow .4s;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 25px rgba(0,0,0,0.4);
}
h2{margin-bottom:12px;}
.countdown{font-size:1.3em;color:#00ffc6;}

/* ===== 名言 ===== */
blockquote{
  font-style:italic;
  color:#fff;
  opacity:0.9;
  border-left:3px solid #00ffc6;
  padding-left:10px;
}

/* ===== 进度条 ===== */
.progress{
  width:100%;height:20px;border-radius:10px;
  background:rgba(255,255,255,0.2);
  overflow:hidden;margin:10px 0;
}
#progressFill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#00e0ff,#00ffc6);
  transition:width 2s ease;
}

/* ===== 页脚 ===== */
footer{
  text-align:center;
  padding:20px;
  font-size:14px;
  color:#eee;
}
footer a{
  color:#fff;text-decoration:none;
}
footer button{
  background:transparent;
  border:1px solid #fff;
  color:#fff;
  border-radius:20px;
  padding:5px 14px;
  margin-left:10px;
  cursor:pointer;
  transition:.3s;
}
footer button:hover{
  background:#fff;color:#000;
}

/* 动画 */
.fade-in{opacity:0;transform:translateY(20px);transition:1s;}
.fade-in.visible{opacity:1;transform:translateY(0);}