body
{
}

body {
    text-align: center;
    font-family: Arial, sans-serif;
    background-color: mistyrose;
    color: #333;
    transition: all 0.3s ease;
    margin: 0;
    padding: 20px;
    }
body.dark {
    background: #2a2a2a;
    color: #fff;
            }
img {
    width: 150px;
    border-radius: 50%;
    display: block;
    margin: 0 auto 20px auto;
    }
.github-link,.email-link {
    display: inline-block;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    border-radius: 8px;}
.email-link{background: lightblue;border:none;}
.github-link{background: lightpink;}
.note {font-size: 14px;color: grey;}
body.dark .note {color: #ccc;}
    h1 {color: hotpink;}
    hr {
    width: 250px;
    border-top: 3px solid pink;
    border-radius: 5px;
    }
/*个人信息卡片*/
.info-card {
    background: rgba(255,255,255,0.5);
    padding: 10px;
    border-radius: 10px;
    width: 300px;
    margin: 0 auto;
    transition: all 0.3s ease;
            }
body.dark .info-card {background: #3a3a3a;color: #fff;}
    .info-card p { color: #555;}
    body.dark .info-card p {color: #eee;}
    .info-card h2 {color: palevioletred;}
body.dark .info-card h2 { color: #ffb6c1;}

/*切换皮肤*/
/* 切换皮肤按钮 - 固定定位，跟随滚动 */
#skinBtn {
    display: inline-block;
    padding: 10px 20px;
    background: pink;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    position: fixed;  /* 改成 fixed，跟随滚动 */
    top: 20px;        /* 距离顶部20px */
    left: 20px;       /* 距离左边20px */
    border: none;
    cursor: pointer;
    z-index: 999;     /* 确保在其他元素上面 */
    transition: all 0.3s ease;
}

#skinBtn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
}

body.dark #skinBtn {background: #555;}
/*爱好*/
#toastMsg{
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffb7c5;
  color: #d43f6b;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);}
#toastMsg.show{opacity: 1;}
.hobby-item {
    cursor: pointer;
    text-decoration: underline;
    color: hotpink;}
body.dark .hobby-item { color: #ffb6c1;}
#gameDetail, #musicDetail, #fanjuDetail {
    background: #fff0f5;
    transition: all 0.3s ease;}
body.dark #gameDetail,
body.dark #musicDetail,
body.dark #fanjuDetail {
    background: #3a3a3a;
    color: #fff;}
/* 手机缩放 */
@media (max-width: 600px) { 
    body {padding: 15px;}
    h1 {font-size: 28px;}
    p {font-size: 16px;}
    .info-card {width: 90%;}
    .info-card p {font-size: 14px;}
    .message-board {
        width: 90%;
    }
    .message-board input,
    .message-board textarea,
    .message-board button {
        font-size: 16px;
    }
    #skinBtn {
        top: 10px;      /* 手机上距离顶部10px */
        left: 10px;     /* 手机上距离左边10px */
        padding: 8px 16px;
        font-size: 14px;
    }
    .github-link, .email-link {
        padding: 6px 12px;
        font-size: 12px;
    }
    .github-link {
        margin-left: 0;  /* 手机上去掉左边距，避免和按钮重叠 */
    }
    #gameDetail, #musicDetail, #fanjuDetail {
        width: 90%;
    }
}

#visitCount { font-weight: bold; color: hotpink; }
body.dark #visitCount { color: #ffb6c1; }
.update-time { font-size: 12px; color: #999; margin-top: 30px; }
body.dark .update-time { color: #aaa; }

/*每日一句的样式*/
#randomQuote { font-size: 16px; color: hotpink; margin-top: 15px; }
#quoteBtn { background: pink; color: white; border: none; padding: 5px 12px; border-radius: 20px; cursor: pointer;transition: all 0.3s ease; }
body.dark #quoteBtn { background: #555;color:white; }
/*显示时间样式*/
#liveTime { font-size: 12px; color: #999; margin-top: 10px; }
/*返回顶部样式*/
#backToTop { position: fixed; bottom: 20px; right: 20px; background: pink; color: white; border: none; border-radius: 30px; padding: 10px 15px; cursor: pointer; }
body.dark #backToTop { background: #555; }
/*每日推荐歌曲*/
.today-recommend {
background: rgba(255,255,255,0.5);
padding: 10px;
border-radius: 15px;
width: 300px;
margin: 20px auto;
transition: all 0.3s ease;
}
body.dark .today-recommend {
background: #3a3a3a;
}
.today-recommend h3 {
color: hotpink;
margin: 0 0 5px 0;
}
@media (max-width: 600px) {
.today-recommend { width: 90%; }
}
/*统计留言*/
.msg-count {
font-size: 14px;
color: #888;
margin-top: 10px;
}
body.dark .msg-count {
color: #aaa;
}
/* 留言板容器 - 颜色和 info-card 一样 */
.message-board {
    background: rgba(255, 255, 255, 0.5);  /* 改成和 info-card 一样 */
    padding: 20px;
    border-radius: 10px;  /* 和 info-card 一样的圆角 */
    width: 90%;
    max-width: 400px;
    margin: 20px auto;  /* 和 info-card 一样 */
    text-align: center;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 输入框 */
.message-board input,
.message-board textarea {
    width: 90%;
    margin: 8px 0;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid pink;
    outline: none;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.8);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* 按钮 */
.message-board button {
    background: pink;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.message-board button:hover {
    transform: translateY(-2px);
}

/* 留言条目 */
.msg-item {
    background: rgba(255, 255, 255, 0.5);
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 气泡留言行 */
.msg-row {
    display: flex;
    margin: 10px 0;
}

/* 左气泡 */
.msg-row.left .msg-bubble {
    background: rgba(255, 255, 255, 0.5);
    color: #333;
    max-width: 70%;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 右气泡 */
.msg-row.right .msg-bubble {
    background: rgba(255, 255, 255, 0.5);
    max-width: 70%;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 名字颜色和 info-card 一样 */
.msg-item strong,
.msg-bubble strong {
    color: palevioletred;
}

/* ========== 黑夜模式（和 info-card 黑夜一样） ========== */
body.dark .message-board {
    background: #3a3a3a;  /* 和 body.dark .info-card 一样 */
    color: #fff;
}

body.dark .message-board input,
body.dark .message-board textarea {
    background: #555;
    color: #fff;
    border: 1px solid #777;
}

body.dark .message-board button {
    background: #555;
    color: white;
}

body.dark .msg-item {
    background: #3a3a3a;
    color: #fff;
}

body.dark .msg-row.left .msg-bubble,
body.dark .msg-row.right .msg-bubble {
    background: #3a3a3a;
    color: #fff;
}

body.dark .msg-item strong,
body.dark .msg-bubble strong {
    color: #ffb6c1;  /* 和 info-card 黑夜的 h2 颜色一样 */
}
/* 留言板柔和背景 */
.message-board {
    background: rgba(255, 240, 245, 0.8) !important;
    /* 淡粉色半透明 */
}

.msg-item {
    background: rgba(255, 255, 255, 0.9) !important;
    /* 留言条白色半透明 */
    backdrop-filter: blur(2px);
    /* 轻微毛玻璃效果 */
}

body.dark .message-board {
    background: rgba(50, 50, 70, 0.8) !important;
    /* 暗色模式半透明 */
}

body.dark .msg-item {
    background: rgba(60, 60, 80, 0.9) !important;
}