:root{
    --primary-bg:linear-gradient(135deg,#2f29a4,#cc92fe);
    --glass-bg:rgba(255,255,255,0.08);
    --glass-border:rgba(255,255,255,0.18);
    --glass-shadow:0 10px 30px rgba(0,0,0,0.3);
    --text-main:#fff;
    --text-secondary:#c0d4ff;
    --text-accent:#b0e0ff;
    --purple-accent:#E6E6FA;
    --lavender-border:#D8BFD8;
    --progress-gradient:linear-gradient(to right,#FF416C,#FF4B2B);
    --icon-gradient:linear-gradient(45deg,#6A5ACD,#9370DB);
    --blur-filter:blur(10px);
    --blur-filter-light:blur(5px)
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'PingFang SC','Microsoft YaHei',sans-serif
}
body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0f0f23;
    padding:20px;
    position:relative;
    overflow:hidden;
    transition:all .5s ease
}
body.audio-playing .container{
    box-shadow:inset 0 0 20px rgba(255,75,43,0.2),0 10px 30px rgba(0,0,0,0.3)
}
.background{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center center;
    filter:blur(5px);
    z-index:0
}
.container{
    position:relative;
    width:100%;
    max-width:1200px;
    height:680px;
    background:var(--glass-bg);
    backdrop-filter:var(--blur-filter);
    border-radius:20px;
    border:1px solid var(--glass-border);
    display:grid;
    grid-template-columns:30% 38% 32%;
    padding:25px;
    overflow:hidden;
    z-index:2;
    transition:box-shadow .5s ease
}
.left-panel{
    display:flex;
    flex-direction:column;
    padding-right:20px;
    border-right:1px solid rgba(255,255,255,0.15);
    margin-top:90px
}
.time-display{
    padding:15px;
    background:var(--glass-bg);
    border-radius:12px;
    margin-bottom:20px
}
.time-display .time{
    font-size:3.8rem;
    font-weight:300;
    letter-spacing:1px;
    color:var(--text-main);
    margin-bottom:5px;
    transition:transform .3s ease;
    font-family:'Courier New',Courier,'Lucida Console',Monaco,'Andale Mono',monospace;
    font-variant-numeric:tabular-nums;
    font-weight:bold
}
.time-display .date{
    font-size:1.15rem;
    color:var(--text-secondary);
    opacity:.9
}
.time-display.horizontal{
    position:relative;
    padding:12px 15px;
    min-width:240px;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:12px
}
.time-display.horizontal .time{
    font-size:3rem;
    font-weight:500;
    font-family:'Courier New',Courier,'Lucida Console',Monaco,'Andale Mono',monospace;
    font-variant-numeric:tabular-nums;
    font-weight:bold
}
.time-display.horizontal .date{
    font-size:1.2rem;
    opacity:.85;
    white-space:nowrap;
    max-width:160px;
    overflow:hidden;
    text-overflow:ellipsis
}
.profile-section{
    background:var(--glass-bg);
    border-radius:12px;
    padding:15px
}
.profile-header{
    display:flex;
    align-items:center;
    margin-bottom:15px;
    padding:15px;
    gap:20px
}
.profile-pic-wrapper{
    position:relative;
    width:80px;
    height:80px;
    aspect-ratio:1/1;
    flex-shrink:0
}
.profile-pic {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);  /* 改为半透明白色边框 */
    box-shadow: none;  /* 移除所有阴影，包括紫色发光 */
    position: relative;
    object-fit: cover;
}
/* 已删除 .profile-pic::after 的脉冲动画 */
.profile-name-container{
    display:flex;
    flex-direction:column
}
.profile-name{
    font-size:1.8rem;
    font-weight:700;
    color:var(--text-main);
    margin-bottom:5px
    /* 已移除 text-shadow 发光 */
}
.profile-title{
    font-size:.95rem;
    color:var(--text-accent);
    opacity:.9
}
.profile-bio{
    color:var(--text-secondary);
    font-size:.95rem;
    line-height:1.5;
    margin-bottom:15px
}
.profile-bio p{
    margin-top:8px;
    font-style:italic;
    opacity:.8
}
.quote-container{
    margin-top:20px;
    padding:15px;
    background:rgba(255,255,255,0.05);
    border-radius:10px
}
.quote-text{
    color:var(--text-accent);
    font-size:.95rem;
    font-style:italic;
    line-height:1.4;
    margin-bottom:5px
}
.quote-author{
    color:var(--text-secondary);
    font-size:.85rem;
    text-align:right;
    opacity:.8
}
.middle-panel{
    padding:0 25px;
    display:flex;
    flex-direction:column
}
.website-title{
    text-align:center;
    font-size:2.2rem;
    margin:10px 0 25px;
    color:var(--purple-accent);
    position:relative
    /* 已移除 text-shadow 发光 */
}
.website-title::after{
    content:'';
    position:absolute;
    bottom:-5px;
    left:50%;
    transform:translateX(-50%);
    width:60px;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--purple-accent),transparent)
}
.sites-container{
    margin-top:15px;
    background:var(--glass-bg);
    border-radius:15px;
    padding:20px;
    height:auto
}
.sites-title{
    color:var(--text-main);
    font-size:1.4rem;
    margin-bottom:20px;
    padding-left:10px
}
.sites-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px
}
.site-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:15px;
    background:rgba(255,255,255,0.05);
    border-radius:10px;
    cursor:pointer;
    transition:all .3s ease;
    position:relative;
    text-decoration:none;
    color:inherit
}
.site-item:hover{
    background:rgba(255,255,255,0.1);
    transform:translateY(-3px);
    box-shadow:0 5px 15px rgba(0,0,0,0.2)
}
.site-item:active{
    transform:scale(0.95);
    transition:transform .1s ease
}
.site-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);  /* 加个淡淡的白色描边，更清晰 */
    font-size:1.5rem;
    color:white
}
.site-name{
    color:var(--text-accent);
    font-size:.9rem
}
.site-item::before{
    content:'';
    position:absolute;
    top:10px;
    right:10px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 5px #4CAF50;
    opacity:0;
    transition:opacity .3s ease
}
.site-item.active::before{
    opacity:1
}
.site-item.loading::before{
    background:#FFC107;
    box-shadow:0 0 5px #FFC107;
    animation:pulse 1.5s infinite;
    opacity:1
}
.site-img{
    width:32px;
    height:32px;
    filter:drop-shadow(0 0 4px rgba(255,255,255,0.2))
}
.right-panel{
    padding-left:20px;
    border-left:1px solid rgba(255,255,255,0.15);
    margin-top:80px
}
.music-player{
    padding:20px;
    background:var(--glass-bg);
    border-radius:15px;
    margin-top:20px;
    position:relative;
    height:500px
}
.album-art-container{
    display:flex;
    justify-content:center;
    margin-bottom:20px
}
.album-art{
    width:200px;
    height:200px;
    border-radius:50%;
    overflow:hidden;
    position:relative;
    box-shadow:0 8px 25px rgba(0,0,0,0.3);
    border:3px solid rgba(255,255,255,0.1);
    transition:transform .3s ease
}
.album-art img{
    width:100%;
    height:100%;
    object-fit:cover
}
.album-art.loading{
    background:linear-gradient(45deg,rgba(106,90,205,0.2) 25%,rgba(147,112,219,0.4) 25% 50%,rgba(106,90,205,0.2) 50% 75%,rgba(147,112,219,0.4) 75%);
    background-size:200% 200%;
    animation:loadingAnimation 1.5s linear infinite
}
body.audio-playing .album-art::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border-radius:50%;
    box-shadow:inset 0 0 20px rgba(255,75,43,0.3),0 0 30px rgba(255,75,43,0.2);
    animation:glowPulse 2s infinite alternate;
    opacity:1
}
.song-info{
    text-align:center;
    margin-bottom:25px
}
.song-title{
    font-size:1.5rem;
    font-weight:500;
    color:var(--text-main);
    margin-bottom:8px
}
.artist{
    font-size:1.1rem;
    color:var(--text-accent)
}
.progress-container{
    margin:20px 0
}
.progress-bar{
    width:100%;
    height:5px;
    background:rgba(255,255,255,0.15);
    border-radius:5px;
    position:relative;
    cursor:pointer
}
.progress{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:0%;
    background:var(--progress-gradient);
    border-radius:5px;
    transition:width .1s linear
}
.progress-bar::after{
    content:'';
    position:absolute;
    top:-4px;
    left:var(--progress-percent);
    height:12px;
    width:12px;
    background:white;
    border-radius:50%;
    transform:translateX(-50%);
    opacity:0;
    transition:opacity .2s ease;
    box-shadow:0 0 5px rgba(0,0,0,0.5)
}
.progress-bar:hover::after,.progress-bar:active::after{
    opacity:1
}
.progress-container .time-display{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
    font-size:.8rem;
    color:var(--text-accent)
}
.controls{
    display:flex;
    justify-content:center;
    margin-top:15px
}
.control-btn{
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    background:rgba(255,255,255,0.1);
    color:white;
    border:none;
    transition:all .3s ease;
    font-size:1.2rem;
    position:relative;
    overflow:hidden
}
.control-btn.play-pause{
    width:60px;
    height:60px;
    background:rgba(255,255,255,0.1);  /* 改为纯色半透明背景，取消渐变发光 */
    box-shadow:none;                     /* 移除阴影发光 */
}
.control-btn:hover{
    background:rgba(255,255,255,0.2);
    transform:scale(1.1)
}
.control-btn.play-pause:hover{
    transform:scale(1.1);
    box-shadow:none;                      /* hover时也不显示阴影 */
}
.control-btn::after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    padding-top:0;
    border-radius:100%;
    background:rgba(255,255,255,0.3);
    transform:translate(-50%,-50%);
    opacity:0;
    pointer-events:none
}
.control-btn:active::after{
    width:200%;
    padding-top:200%;
    opacity:1;
    transition:width .4s ease-out,padding-top .4s ease-out,opacity .3s ease
}
.control-btn:focus-visible{
    outline:3px solid var(--purple-accent);
    outline-offset:2px;
    box-shadow:0 0 0 4px rgba(147,112,219,0.3)
}
.meteors-container{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1
}
.meteor{
    position:absolute;
    background:linear-gradient(to right,transparent,rgba(255,255,255,0.8));
    border-radius:50%;
    filter:drop-shadow(0 0 5px rgba(255,255,255,0.8));
    transform-origin:center right;
    z-index:1;
    transition:all .5s ease;
    cursor:pointer
}
@keyframes timePulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.05)}
    100%{transform:scale(1)}
}
@keyframes pulse{
    0%{opacity:.6;transform:scale(1)}
    50%{opacity:.9;transform:scale(1.05)}
    100%{opacity:.6;transform:scale(1)}
}
@keyframes meteor-fall{
    0%{opacity:0;transform:translate(0,0) rotate(-30deg) scale(1)}
    10%{opacity:1}
    100%{opacity:0;transform:translate(var(--translate-x),var(--translate-y)) rotate(-30deg) scale(1)}
}
@keyframes loadingAnimation{
    0%{background-position:100% 100%}
    100%{background-position:0% 0%}
}
@keyframes glowPulse{
    from{opacity:.3}
    to{opacity:.7}
}
@keyframes fortuneShake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-3px)}
    75%{transform:translateX(3px)}
}
@media(max-width:1100px){
    .time-display.horizontal .time{font-size:2.6rem!important}
    .time-display.horizontal .date{font-size:1.1rem;max-width:140px}
    .profile-pic-wrapper{width:70px;height:70px}
    .profile-name{font-size:1.6rem!important}
}
@media(max-width:900px){
    .container{overflow:auto;grid-template-columns:1fr;grid-template-rows:auto auto auto;height:auto;gap:20px}
    .left-panel,.middle-panel,.right-panel{border:none;padding:0}
    .left-panel,.middle-panel{border-bottom:1px solid rgba(255,255,255,0.15);padding-bottom:20px}
    .music-player{height:auto}
    .time-display.horizontal{min-width:auto;flex-wrap:wrap}
    .time-display.horizontal .date{white-space:normal;max-width:100%;margin-top:8px;text-overflow:clip}
    body{overflow:auto;align-items:flex-start;justify-content:flex-start}
    .container{height:auto;max-height:100vh;overflow-y:auto}
    .sites-container{height:auto;min-height:300px}
    .background{position:fixed;width:100vw;height:100vh;z-index:0}
}
@media(max-width:768px){
    .profile-pic-wrapper{width:60px;height:60px}
    .profile-name{font-size:1.5rem!important}
    #waifu{display:none}
    .sites-grid{grid-template-columns:1fr;gap:15px}
    .site-item{margin:0 10px;padding:20px 15px}
    .middle-panel{padding:0 15px}
    .sites-container{padding:15px;margin-top:10px;height:auto;min-height:280px;margin-bottom:20px}
    .time-display .time{font-size:3rem}
    .time-display.horizontal .time{font-size:2.2rem!important}
    .quote-container{margin-top:15px;padding:12px}
    .quote-text{font-size:.9rem}
    .quote-author{font-size:.8rem}
    .meteors-container{display:none!important}
}
@media(max-width:480px){
    .profile-header{flex-direction:column;align-items:center;text-align:center}
    .profile-pic-wrapper{width:50px;height:50px;margin-right:0;margin-bottom:15px}
    .sites-grid{grid-template-columns:1fr!important;gap:12px}
    .site-item{margin:0 5px;padding:15px 10px;min-height:80px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:15px}
    .time-display.horizontal{flex-direction:column;align-items:center;gap:5px}
    .container{padding:10px;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:15px}
    .sites-container{height:auto;padding:12px;min-height:250px}
    .middle-panel{padding:0 10px;width:100%;overflow:hidden}
    .site-icon{width:40px;height:40px;flex-shrink:0}
    .site-name{font-size:.85rem;flex:1}
    .fortune-container{padding:12px;min-height:85px}
    .fortune-header{margin-bottom:8px}
    .fortune-title{font-size:1rem}
    .fortune-motto{font-size:.7rem}
    .fortune-result{min-height:30px}
    .fortune-btn{min-height:30px}
}
@media(max-width:360px){
    .fortune-content{flex-direction:column;height:auto;gap:12px}
    .fortune-result{min-height:40px;width:100%;padding:10px 12px;text-align:center}
    .fortune-btn{width:100%;min-height:36px;justify-content:center}
    .btn-text{display:inline;font-size:.85rem}
    .fortune-text{font-size:.8rem;line-height:1.3;white-space:normal;word-break:break-word}
    .fortune-icon{min-width:28px;font-size:1rem}
}
@media(max-width:320px){
    .fortune-container{padding:10px}
    .fortune-header{flex-direction:column;align-items:center;text-align:center;gap:5px}
    .fortune-title{font-size:1rem;border-left:none;padding-left:0}
    .fortune-motto{font-size:.7rem}
    .fortune-result{min-height:35px;padding:8px 10px}
}
link[rel="preload"]{
    display:none
}
.tech-stack-container{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:15px;
    padding:15px;
    background:var(--glass-bg);
    border-radius:10px
}
.tech-tag{
    padding:8px 16px;
    background-color:var(--glass-bg);
    color:var(--text-main);
    border-radius:20px;
    font-size:.9rem;
    font-weight:500;
    transition:all .3s ease;
    cursor:default
}
.tech-tag:hover{
    background-color:rgba(255,255,255,0.15);
    transform:translateY(-2px)
}