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;}
#topNav{position:fixed;top:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:6px;border-radius:30px;box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:1000;}
#topNav .nav-logo{display:flex;align-items:center;gap:6px;padding:4px 14px 4px 8px;text-decoration:none;border-radius:22px;}
#topNav .nav-logo .logo-icon{font-size:20px;line-height:1;}
#topNav .nav-logo .logo-text{font-size:16px;font-weight:700;color:#0055ff;}
#topNav .nav-divider{width:1px;height:20px;background:rgba(0,0,0,0.12);margin:0 4px;}
#topNav .nav-link{padding:8px 18px;font-size:15px;color:#333;text-decoration:none;border-radius:22px;font-weight:500;transition:all .2s;}
#topNav .nav-link:hover{background:rgba(0,85,255,0.08);color:#0055ff;}
#topNav .nav-link.active{background:#0055ff;color:#fff;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
#time{font-size:min(10vw, 150px);color:#0055ff;font-weight:bold;line-height:1.1;margin-top:80px;}
#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;}
#modulesContainer{display:flex;gap:20px;margin-top:20px;width:90%;max-width:1200px;justify-content:center;align-items:flex-end;}
#sunContainer{flex:1;min-width:300px;max-width:500px;display:flex;flex-direction:column;gap:15px;justify-content:flex-end;position:relative;}
#sunriseInfo{position:absolute;top:-108px;left:0;right:0;padding:15px 20px;background:#fff;border-radius:15px;box-shadow:0 4px 16px rgba(0,0,0,0.08);box-sizing:border-box;}
#sunrise{font-size:min(2.5vw, 18px);color:#ff6600;font-weight:bold;text-align:left;margin:0;}
#sunsetInfo{font-size:min(2.5vw, 18px);color:#333;font-weight:500;text-align:left;margin:5px 0 0 0;}
#weatherModule{flex:1;padding:20px;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);border-radius:20px;color:#333;min-width:300px;max-width:500px;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{
   flex:1;
   min-width:300px;
   max-width:500px;
   aspect-ratio: 2.3 / 1;
   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: 15px;
  left: 20px;
  font-size: 18px;
  color: white;
  font-weight: bold;
}
#sunsetTime{
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 18px;
  color: white;
  font-weight: bold;
}
@media (max-width: 1200px) {
  #time{font-size: 100px;}
  #sunModule{width: 70%;}
}
@media (max-width: 900px) {
  #time{font-size: 80px;}
  #date{font-size: 32px;}
  #lunarDate{font-size: 22px;}
  #modulesContainer{flex-direction:column;align-items:center;width:100%;}
  #sunContainer{width:90%;max-width:600px;}
  #weatherModule{width:90%;max-width:600px;}
  #sunModule{width:100%;max-width:600px;}
  #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;
}