#glass-overlay{
    position:fixed;
    inset:0;
    z-index:-1;
    backdrop-filter:blur(2px) saturate(180%);
    -webkit-backdrop-filter:blur(2px) saturate(180%);
    background:var(--overlay-bg);
    transition:background .3s;
}
:root{
    --overlay-bg: rgba(255,255,255,.20);   /* 亮色：更透 */
    --font-color:#111;
    --card-bg:rgba(255,255,255,.25);  /* 毛玻璃卡片背景 */
    --accent:#0078ff;
    --btn-color:#fff;
    --btn-bg:#111;
}

body.dark{
    --overlay-bg: rgba(0,0,0,.55);         /* 暗色：更暗 */
    --font-color: #fff;
    --card-bg: rgba(0,0,0,.35);
    --btn-color: #111;
    --btn-bg: #fff;
}

/* ===== 通用 ===== */
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;}
html,body{height:100%;overflow-x:hidden;}


/* ===== 粒子层 ===== */
#particles-js{
    position:fixed;
    inset:0;
    z-index:-2;
    transition:opacity .3s;
}

/* ===== 毛玻璃卡片（资料卡） ===== */
#glass-card{
    position:relative;
    z-index:1;
    max-width:480px;
    margin:40px auto;
    padding:50px 30px 40px;
    border-radius:24px;
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    background:var(--card-bg);
    box-shadow:0 8px 32px rgba(0,0,0,.15);
}
main{display:flex;flex-direction:center;align-items:center;text-align:center;flex-direction:column;}

/* ===== 进度条 ===== */
#progress{
    position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:9999;width:0;transition:width .1s;
}

/* ===== 右上角主题按钮 ===== */
#theme-toggle{
    position:fixed;top:20px;right:20px;width:46px;height:46px;border-radius:50%;border:none;
    background:var(--card-bg);color:var(--font-color);cursor:pointer;transition:transform .3s;z-index:999;
}
#theme-toggle:hover{transform:translateY(5px);}
#theme-icon{font-size:20px;}

/* ===== 头像 ===== */
#avatar{
    width:140px;height:140px;border-radius:50%;object-fit:cover;
    box-shadow:0 0 20px rgba(0,0,0,.15);transition:transform .3s,box-shadow .3s;
}
#avatar:hover{transform:scale(1.1);box-shadow:0 0 30px var(--accent);}

/* ===== 霓虹标题 ===== */
#title{
    margin:20px 0 10px;font-size:2.5rem;font-weight:700;
    background:linear-gradient(90deg,#ff2a6d,var(--accent),#ff2a6d);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:shine 3s linear infinite;
}
@keyframes shine{0%{background-position:-200px}100%{background-position:calc(200px + 100%)}}

/* ===== 简介 ===== */
#bio{min-height:28px;margin-bottom:25px;font-size:1.1rem;color:var(--font-color);opacity:.8;}

/* ===== 联系方式 ===== */
#contacts{margin:20px 0;}
#contacts a{
    display:inline-block;margin:0 10px;font-size:1.6rem;color:var(--font-color);
    transition:color .3s,transform .2s;
}
#contacts a:hover{color:var(--accent);transform:scale(1.2);}

/* ===== 友情链接 ===== */
#friends{margin-top:30px;}
#friends h2{font-size:1rem;margin-bottom:10px;opacity:.6;}
#friends a{
    display:inline-block;margin:4px 8px;padding:6px 12px;border-radius:15px;
    background:var(--card-bg);color:var(--font-color);text-decoration:none;font-size:.9rem;
    transition:background .3s;
}
#friends a:hover{background:var(--accent);color:#fff;}

/* ===== 右下角博客按钮 ===== */
#blog-btn{
    position:fixed;right:30px;bottom:-60px;padding:12px 24px;border-radius:30px;
    background:var(--btn-bg);color:var(--btn-color);text-decoration:none;font-size:1rem;
    box-shadow:0 4px 12px rgba(0,0,0,.25);transition:bottom .4s,transform .3s;z-index:998;
}
#blog-btn:hover{transform:translateY(-3px);}
body:hover #blog-btn{bottom:30px;}