body{background:#fff;margin:0;padding:15px;display:flex;flex-direction:column;align-items:center;justify-content: center;min-height:100vh;box-sizing:border-box;}
#time{font-size:min(10vw, 90px);color:#0055ff;font-weight:bold;line-height:1.1;}
#date{font-size:min(4vw, 28px);color:#000000;margin-top:20px;font-weight:bold;}
#lunarDate{font-size:min(2.5vw, 22px);color:#666;margin-top:10px;font-weight:500;}
#ganzhi{font-size:min(2vw, 18px);color:#0055ff;margin-top:10px;font-weight:bold;text-align:center;max-width:90%;}
#location{font-size:min(2vw, 18px);color:#333;margin-top:15px;font-weight:500;text-align:center;}
#sunrise{font-size:min(2vw, 18px);color:#ff6600;margin-top:15px;font-weight:bold;text-align:center;}
#sunsetInfo{font-size:min(2vw, 18px);color:#333;margin-top:10px;font-weight:500;text-align:center;}
#weatherModule{margin-top:20px;padding:20px;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);border-radius:20px;color:#333;width:85%;max-width:600px;display:flex;flex-direction:column;gap:15px;box-shadow:0 8px 32px rgba(0,0,0,0.1);box-sizing:border-box;}
#weatherNowMain{display:flex;align-items:center;justify-content:space-between;gap:15px;}
#weatherLeft{display:flex;align-items:center;gap:15px;}
#weatherIcon{font-size:min(12vw, 56px);}
#weatherTemp{font-size:min(10vw, 42px);font-weight:bold;color:#ff6b35;}
#weatherDesc{display:flex;flex-direction:column;gap:4px;}
#weatherText{font-size:min(4vw, 20px);font-weight:600;color:#2c3e50;}
#weatherRange{font-size:min(3vw, 14px);color:#7f8c8d;}
#weatherCity{font-size:min(4vw, 18px);font-weight:bold;color:#34495e;text-align:right;}
#weatherDetails{display:flex;justify-content:space-around;padding:12px 0;border-top:1px solid rgba(0,0,0,0.1);}
#weatherDetails .detail-item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:70px;}
#weatherDetails .detail-label{font-size:min(2.5vw, 12px);color:#95a5a6;}
#weatherDetails .detail-value{font-size:min(3vw, 14px);font-weight:500;color:#2c3e50;}
#weatherHourly{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid rgba(0,0,0,0.1);gap:15px;}
.hourly-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;background:rgba(255,255,255,0.6);border-radius:10px;flex:1;min-width:50px;}
.hourly-icon{font-size:min(5vw, 22px);}
.hourly-time{font-size:min(2.5vw, 11px);color:#7f8c8d;}
.hourly-temp{font-size:min(3vw, 13px);font-weight:600;color:#2c3e50;}
#sunModule{
   width: 85%;
   max-width: 600px;
   aspect-ratio: 2.5 / 1;
   margin-top: 20px;
   border-radius: 20px;
   background: #5098ff;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   box-sizing:border-box;
 }
#sunImage{
  width: 100%;
  height: 75%;
  object-fit: contain;
}
#sunriseTime{
  position: absolute;
  top: 20px;
  left: 30px;
  font-size: 24px;
  color: white;
  font-weight: bold;
}
#sunsetTime{
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 24px;
  color: white;
  font-weight: bold;
}
@media (max-width: 1200px) {
  #time{font-size: 120px;}
  #sunModule{width: 70%;}
}
@media (max-width: 900px) {
  #time{font-size: 80px;}
  #date{font-size: 32px;}
  #lunarDate{font-size: 22px;}
  #sunModule{width: 80%;}
  #sunriseTime, #sunsetTime{font-size: 20px;}
}
@media (max-width: 600px) {
  #time{font-size: 50px;}
  #date{font-size: 20px;margin-top: 20px;}
  #lunarDate{font-size: 16px;margin-top: 10px;}
  #location, #sunrise{font-size: 14px;}
  #sunModule{width: 95%;margin-top: 20px;}
  #sunriseTime, #sunsetTime{font-size: 16px;top: 10px;left: 15px;}
  #sunsetTime{right: 15px;}
  #weatherModule{width: 95%;padding:15px;gap:15px;}
  #weatherTemp{font-size: 36px;}
  #weatherIcon{font-size: 48px;}
  #weatherText{font-size: 20px;}
  .hourly-item{min-width:50px;padding:8px 4px;}
  .hourly-icon{font-size:20px;}
}
@media (max-width: 400px) {
  #time{font-size: 40px;}
  #date{font-size: 16px;}
  #lunarDate{font-size: 14px;}
  #sunriseTime, #sunsetTime{font-size: 14px;}
}
#toggleMs{
  position:fixed;
  bottom:20px;
  right:20px;
  padding:10px 20px;
  font-size:18px;
  cursor:pointer;
  background:#0055ff;color:#fff;
  border:none;border-radius:8px;
}

#friendLink a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
    margin: 0 10px;
}
#friendLink a:hover {
    color: #007bff;
    text-decoration: none;
}