@import url(main.css);
@import url(font.css);
body {
  background: url(../image/background5.webp) no-repeat center center;
  background-size: cover;
  background-color: #0a0a18;
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(0.6rem);
  -webkit-backdrop-filter: blur(0.6rem);
  z-index: -1;
}

html,body{font-family:'PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;color:#fff;}

.big_box{
  display:flex;flex-direction:column;gap:0.3rem;
  width:100%;max-width:100vw;
  padding:0.28rem 0.2rem 1.4rem;
}
.main_content{display:flex;flex-direction:column;gap:0.3rem;width:100%;}
.xf_left_box,.xf_center_box,.xf_right_box{width:100% !important;margin:0;padding:0;display:block;}
.slidebox{width:100% !important;}

.xf_hd_box{
  text-align:center;padding:0.24rem 0.2rem 0.1rem;
}
.xf_hd_box h1{
  font-family:'jianyuanti';
  font-size:0.62rem;letter-spacing:0.08rem;
  background-image:-webkit-linear-gradient(right,#a6b8e0,#c9d4f0);
  background-image:linear-gradient(right,#a6b8e0,#c9d4f0);
  -webkit-text-fill-color:transparent;
  background-clip:text;
  -webkit-background-clip:text;
  opacity:0.95;
}
.xf_hd_box h2{display:none;}
.xf_hd_box .xf_search{display:none;}

.center_top, .xf_leftbox_top, .wf_weather, .wf_quote, .wf_fortune, .wf_links, .xf_right_box{
  padding:0.26rem 0.24rem;
  border-radius:0.4rem;
}

.center_top{
  padding:0.28rem 0.2rem;border-radius:0.4rem;
  display:flex;flex-direction:column;gap:0.14rem;
}

.xf_jieshao{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.08rem;
}
.xf_tx{
  width:2.6rem;height:2.6rem;border-radius:50%;overflow:hidden;
  border:2px solid rgba(255,255,255,0.35);
  box-shadow:0 0.08rem 0.22rem rgba(0,0,0,0.45),inset 0 0 0.04rem rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.15);
}
.xf_tx img{width:100%;height:100%;object-fit:cover;}
.xf_jieshao .name small{font-size:0.26rem;color:rgba(255,255,255,0.7);letter-spacing:0.04rem;}
.xf_jieshao .name h3{
  font-family:'jianyuanti';
  font-size:0.54rem;letter-spacing:0.06rem;margin:0.06rem 0 0.04rem;
  text-shadow:0 0.02rem 0.06rem rgba(0,0,0,0.45);
}
.xf_jieshao .name p{font-size:0.26rem;color:rgba(255,255,255,0.85);line-height:1.7;}
.xf_zhuanfa{display:none;}

.xf_tags{
  display:flex;flex-wrap:wrap;gap:0.1rem;justify-content:center;padding:0.02rem;
}
.xf_tags span{
  padding:0.08rem 0.2rem;background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.22);
  color:#fff;font-size:0.22rem;border-radius:0.5rem;letter-spacing:0.03rem;
  backdrop-filter:blur(0.3rem);
}

/* 左栏 顶部 */
.xf_leftbox_top{
  padding:0.2rem;border-radius:0.4rem;
  display:flex;flex-direction:column;gap:0.18rem;
}
.xf_time{display:none !important;}

/* 天气 */
.wf_weather{
  padding:0.24rem 0.28rem;border-radius:0.4rem;
  display:flex;flex-direction:column;gap:0.1rem;
}
.wf_w_top{flex-wrap:wrap;font-size:0.24rem;gap:0.08rem;}
.wf_city{
  font-size:0.28rem;font-weight:500;letter-spacing:0.03rem;
  padding:0.04rem 0.14rem;border-radius:0.5rem;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  display:inline-block;
}
.wf_city a{
  color:rgba(255,255,255,0.8);margin-left:0.1rem;
  font-size:0.22rem;text-decoration:none;
}
.wf_city_input{
  width:100%;font-size:0.26rem;padding:0.1rem 0.14rem;border-radius:0.2rem;
  background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);
  color:#fff;outline:none;
}
.wf_city_input.show{display:block;}

.wf_w_main{display:flex;align-items:center;gap:0.22rem;}
.wf_w_icon{
  width:1rem;height:1rem;border-radius:50%;
  background:rgba(255,255,255,0.15);
  display:flex;align-items:center;justify-content:center;font-size:0.72rem;
  box-shadow:inset 0 0 0.06rem rgba(255,255,255,0.15);
  background-size:cover;background-position:center;
}
.wf_w_info{flex:1;min-width:0;}
.wf_w_temp{font-size:0.72rem;font-weight:700;line-height:1;letter-spacing:0.02rem;}
.wf_w_temp span{font-size:0.3rem;color:rgba(255,255,255,0.65);font-weight:normal;}
.wf_w_state{font-size:0.26rem;color:rgba(255,255,255,0.9);margin-top:0.04rem;}
.wf_w_sub{display:flex;flex-wrap:wrap;gap:0.1rem;margin-top:0.08rem;font-size:0.2rem;color:rgba(255,255,255,0.7);}
.wf_w_sub span{
  padding:0.04rem 0.12rem;background:rgba(255,255,255,0.08);
  border-radius:0.5rem;border:1px solid rgba(255,255,255,0.12);
}
.wf_w_sub span b{color:#fff;margin-left:0.04rem;}
.wf_w_life{display:flex;flex-wrap:wrap;gap:0.08rem;margin-top:0.08rem;}
.wf_w_life span{
  padding:0.04rem 0.1rem;font-size:0.18rem;color:rgba(255,255,255,0.8);
  background:rgba(255,255,255,0.1);border-radius:0.4rem;
}

/* 一言 */
.wf_quote{
  padding:0.28rem 0.3rem;border-radius:0.4rem;
  display:flex;flex-direction:column;gap:0.08rem;
}
.wf_quote_head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:0.12rem;border-bottom:1px dashed rgba(255,255,255,0.18);
}
.wf_quote_label{font-size:0.24rem;color:rgba(255,255,255,0.7);letter-spacing:0.06rem;}
.wf_quote_refresh{
  width:0.5rem;height:0.5rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);
  font-size:0.3rem;color:rgba(255,255,255,0.8);
}
.wf_quote_text{
  font-size:0.3rem;line-height:2;color:#fff;letter-spacing:0.02rem;
  text-align:center;min-height:0.8rem;
  text-shadow:0 0.01rem 0.03rem rgba(0,0,0,0.4);
}

/* 社交图标 */
.xf_ico_banner{
  padding:0.18rem 0.2rem;border-radius:0.4rem;
}
.xf_ico_banner ul{display:flex;gap:0.2rem;justify-content:center;list-style:none;padding:0;margin:0;}
.xf_ico_banner li{flex:0 0 auto;}
.xf_ico_banner li a{
  width:0.9rem;height:0.9rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 0.02rem 0.08rem rgba(0,0,0,0.3);
  transition:transform 0.2s ease,background 0.2s ease;
}
.xf_ico_banner li a:active{transform:scale(0.92);}
.xf_ico_banner li a img{width:72%;height:72%;object-fit:contain;}
.xf_ico_banner .dy_icon{
  width:0.72rem;height:0.72rem;border-radius:50%;
  background:linear-gradient(135deg,#0a0a0a 0 55%,#FE2C55 55 78%,#25F4EE 78%);
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.xf_ico_banner .dy_bg::before{
  content:'♪';font-size:150%;font-weight:900;color:#fff;
  text-shadow:0 0.02rem 0.04rem rgba(0,0,0,0.7);line-height:1;
}
.swiper-button-next-ico,.swiper-button-prev-ico{display:none !important;}
.swiper-wrapper{display:block;}

/* 运势 - 纯卡面 */
.center_bottom{display:flex;flex-direction:column;gap:0.3rem;margin-top:0.02rem;}
.wf_fortune{
  padding:0.28rem 0.28rem;border-radius:0.4rem;
  display:flex;flex-direction:column;gap:0.12rem;
  background-image:
    radial-gradient(120% 40% at 20% 0%,rgba(255,159,209,0.35),transparent 60%),
    radial-gradient(120% 40% at 80% 0%,rgba(166,184,224,0.3),transparent 60%);
}
.wf_fortune_head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:0.12rem;border-bottom:1px dashed rgba(255,255,255,0.22);
}
.wf_fortune_title{font-size:0.26rem;letter-spacing:0.08rem;color:rgba(255,255,255,0.85);}
.wf_fortune_date{font-size:0.22rem;color:rgba(255,255,255,0.6);}
.wf_fortune_main{
  display:flex;flex-direction:column;align-items:center;gap:0.1rem;
  padding:0.24rem 0 0.1rem;
}
.wf_fortune_emoji{
  font-size:1.1rem;line-height:1;
  filter:drop-shadow(0 0.04rem 0.08rem rgba(0,0,0,0.45));
}
.wf_fortune_phrase{
  font-family:'jianyuanti';
  font-size:0.54rem;font-weight:600;letter-spacing:0.08rem;
  text-shadow:0 0.02rem 0.06rem rgba(0,0,0,0.5);
}
.wf_fortune_tip{
  font-size:0.24rem;padding:0.16rem 0.2rem;
  border-radius:0.2rem;line-height:1.9;text-align:center;
  letter-spacing:0.03rem;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  backdrop-filter:blur(0.3rem);
}
.wf_fortune_grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0.1rem;margin-top:0.02rem;
}
.wf_fortune_chip{
  display:flex;flex-direction:column;align-items:center;gap:0.04rem;
  padding:0.12rem 0.06rem;border-radius:0.22rem;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:inset 0 0 0.04rem rgba(255,255,255,0.1);
}
.wf_fortune_chip_icon{font-size:0.4rem;line-height:1;}
.wf_fortune_chip_name{font-size:0.22rem;color:rgba(255,255,255,0.85);letter-spacing:0.02rem;}
.wf_fortune_chip_stars{
  font-size:0.22rem;letter-spacing:0.02rem;
  text-shadow:0 0 0.04rem rgba(0,0,0,0.45);
}

/* 链接 */
.wf_links{
  padding:0.28rem 0.26rem;border-radius:0.4rem;
  display:flex;flex-direction:column;gap:0.14rem;
}
.wf_links_head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:0.12rem;border-bottom:1px dashed rgba(255,255,255,0.18);
}
.wf_links_title{font-size:0.24rem;color:rgba(255,255,255,0.75);letter-spacing:0.06rem;}
.wf_links_grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0.12rem;
}
.wf_link{
  display:flex;flex-direction:column;align-items:center;gap:0.08rem;
  padding:0.2rem 0.06rem;border-radius:0.3rem;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(0.3rem);
}
.wf_link_icon{
  width:0.8rem;height:0.8rem;border-radius:0.22rem;
  background:rgba(255,255,255,0.15);
  display:flex;align-items:center;justify-content:center;font-size:0.5rem;
  box-shadow:inset 0 0 0.06rem rgba(255,255,255,0.18);
}
.wf_link_name{font-size:0.24rem;color:rgba(255,255,255,0.95);letter-spacing:0.03rem;}

/* 音乐 */
.xf_right_box{
  padding:0.28rem 0.28rem;border-radius:0.4rem;
  display:flex;flex-direction:column;gap:0.18rem;
}
.wf_music_box{
  display:flex;flex-direction:column;align-items:center;gap:0.14rem;padding:0.1rem;
}
.wf_music_info{
  display:flex;flex-direction:column;align-items:center;gap:0.1rem;width:100%;
}
.wf_music_pic{
  width:2.2rem;height:2.2rem;border-radius:50%;
  background:rgba(255,255,255,0.12);
  background-size:cover;background-position:center;
  box-shadow:0 0.08rem 0.28rem rgba(0,0,0,0.5),inset 0 0 0.06rem rgba(255,255,255,0.15);
  animation:wf_spin 10s linear infinite;animation-play-state:paused;
  position:relative;
}
.wf_music_pic.playing{animation-play-state:running;}
.wf_music_pic::after{
  content:'';position:absolute;left:50%;top:50%;
  width:0.32rem;height:0.32rem;margin:-0.16rem;
  background:rgba(10,10,24,0.9);border-radius:50%;
  box-shadow:0 0 0.04rem rgba(255,255,255,0.1);
}
@keyframes wf_spin{from{transform:rotate(0)}to{transform:rotate(360deg);}}

.wf_music_title{
  font-size:0.34rem;font-weight:700;text-align:center;
  letter-spacing:0.02rem;width:100%;word-break:break-all;
  text-shadow:0 0.02rem 0.06rem rgba(0,0,0,0.45);
}
.wf_music_artists{
  font-size:0.24rem;color:rgba(255,255,255,0.7);text-align:center;
  letter-spacing:0.02rem;width:100%;word-break:break-all;
}

.wf_music_ctrl{display:flex;justify-content:center;align-items:center;gap:0.28rem;}
.wf_music_ctrl button{
  width:0.84rem;height:0.84rem;border-radius:50%;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.22);
  color:#fff;font-size:0.46rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0.03rem 0.12rem rgba(0,0,0,0.35),inset 0 0 0.02rem rgba(255,255,255,0.15);
  transition:transform 0.18s ease,background 0.18s ease;
  font-family:iconfont,'pingfang SC','Microsoft YaHei',serif;
}
.wf_music_ctrl button:active{transform:scale(0.92);background:rgba(255,255,255,0.22);}
.wf_music_ctrl button.main{
  width:1.08rem;height:1.08rem;font-size:0.6rem;
  background:linear-gradient(145deg,rgba(255,255,255,0.28),rgba(255,255,255,0.1));
  border:1px solid rgba(255,255,255,0.3);
  box-shadow:0 0.04rem 0.18rem rgba(0,0,0,0.5),inset 0 0 0.02rem rgba(255,255,255,0.2);
}
.wf_music_progress{
  width:100%;height:0.14rem;border-radius:0.08rem;
  background:rgba(255,255,255,0.12);
  box-shadow:inset 0 0 0.02rem rgba(0,0,0,0.25);
  overflow:hidden;margin-top:0.04rem;
}
.wf_music_progress_fill{
  height:100%;width:0%;border-radius:0.08rem;
  background:linear-gradient(90deg,#a6b8e0,#c9d4f0);
  box-shadow:0 0 0.06rem rgba(198,212,240,0.5);
}
.wf_lyrics{
  width:100%;max-height:2.6rem;overflow-y:auto;
  padding:0.2rem;border-radius:0.24rem;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  font-size:0.24rem;color:rgba(255,255,255,0.85);
  line-height:2;text-align:center;letter-spacing:0.02rem;
}
.wf_lyrics::-webkit-scrollbar{width:0.02rem;}
.wf_lyrics::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.25);border-radius:0.02rem;}

/* 页脚 */
.xf_footer{
  margin-top:0.2rem;padding:0.2rem 0.24rem;
  font-size:0.22rem;text-align:center;letter-spacing:0.04rem;
  color:rgba(255,255,255,0.7);
}
.xf_footer a{color:rgba(255,255,255,0.9);text-decoration:none;}

/* 模态框 */
.modal{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.82);
  backdrop-filter:blur(0.4rem);
  -webkit-backdrop-filter:blur(0.4rem);
  align-items:center;justify-content:center;
}
.modal.show{display:flex;}
.modal .modal-content{
  width:86%;max-width:7rem;border-radius:0.3rem;object-fit:contain;
  box-shadow:0 0.06rem 0.24rem rgba(0,0,0,0.6);
}
.modal #caption{font-size:0.26rem;color:#fff;text-align:center;margin-top:0.14rem;}
.modal .close{
  position:absolute;top:0.24rem;right:0.3rem;
  width:0.8rem;height:0.8rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.15);
  font-size:0.6rem;color:#fff;line-height:1;
}

/* 加载遮罩 */
.xf_load{
  position:fixed;inset:0;z-index:1809185784;
  background:linear-gradient(135deg,#0a0a18 0%,#1a1a2e 50%,#0a0a18 100%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity 0.6s ease;
}
.xf_load span{
  font-family:'jianyuanti';font-size:0.5rem;color:#fff;letter-spacing:0.09rem;
  animation:xf-load 1.8s infinite alternate ease-in-out;
  user-select:none;
}
@keyframes xf-load{
  0%{opacity:1;letter-spacing:0.09rem;}
  100%{opacity:0.3;letter-spacing:0.18rem;}
}

@media screen and (max-width:480px){
  .big_box{padding-left:0.16rem;padding-right:0.16rem;}
  .xf_hd_box h1{font-size:0.5rem;}
  .xf_jieshao .name h3{font-size:0.46rem;}
  .wf_music_pic{width:2rem;height:2rem;}
  .wf_fortune_phrase{font-size:0.46rem;}
  .wf_fortune_grid{gap:0.08rem;}
  .wf_links_grid{gap:0.1rem;}
}