/* ================= 基础重置 ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ================= 全局主题色定义 ================= */
:root {
    /*粉色的主题*/
    /*--theme-pink: #ffb6c1;*/    /* 猛男粉 */
    /*--theme-blue: #87ceeb;*/    /* 清新蓝 */
    
    /*蓝紫的主题*/
    --theme-blue: #74b9ff;  /* 保持明亮的蓝色 */
    --theme-pink: #a29bfe;  /* 将原本的粉色改为这种带有紫色调的“冰凌紫”，更具冰晶感 */

    --glass-bg: rgba(255, 255, 255, 0.75); /* 毛玻璃背景色 */
    --glass-border: rgba(255, 255, 255, 0.6); /* 毛玻璃高光边框 */
    --text-main: #555;        /* 主文字色（比纯黑更柔和） */
    --text-light: #999;       /* 次要文字色 */
}

/* ================= 基础重置优化 ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 使用更圆润的系统字体组合 */
    font-family: "Nunito", "Microsoft YaHei", "PingFang SC", sans-serif;
}

body {
    background-color: #f0f2f5;
/* ...保持你原有的背景图片代码不变... */
    /* 只修改下面这两行颜色设定 */
    color: var(--text-main);
    line-height: 1.7; /* 让文字行高更宽松一点，看起来更舒服 */
    /* ==== 新增：固定平铺二次元背景 ==== */
    /* 将下面单引号里的文字替换成我刚才单独发给你的那串图片链接，或者你保存在本地的图片路径 */
    background-image: url('https://i.etsystatic.com/44283612/r/il/614a7c/5187283592/il_1588xN.5187283592_afxb.jpg');
    background-repeat: repeat; /* 让背景像地砖一样铺满 */
    background-size: 2000px; /* 控制平铺图案的大小，数值越小图案越密集 */
    background-attachment: fixed; /* 核心：鼠标滚动网页时，背景图保持固定不动 */
}

/* ================= 整体布局 (玻璃化) ================= */
.page-wrapper {
    min-height: 100vh;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 防止内容少时居中而在长页面跳动 */
}

.main-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    /* 【核心改动】：毛玻璃特效 */
    background-color: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(120%); /* 模糊+轻微增加饱和度，更通透 */
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-radius: 16px; /* 更大的圆角 */
    border: 2px solid var(--glass-border); /* 加上一道亮晶晶的白边 */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1), inset 0 0 20px rgba(255,255,255,0.5); /* 外阴影+内发光 */
    overflow: hidden; 
    transition: transform 0.3s, box-shadow 0.3s;
}

/* 让整个大容器悬浮时也有一种呼吸感 */
.main-container:hover {
    box-shadow: 0 20px 45px rgba(0,0,0,0.12), inset 0 0 20px rgba(255,255,255,0.6);
}

/* ================= 侧边栏样式 ================= */
.sidebar {
width: 260px;
    flex-shrink: 0;
    /* 去掉原有的实色背景和灰色边框 */
    background-color: transparent; 
    border-right: 2px solid var(--glass-border); /* 改用半透明分割线 */
    display: flex;
    flex-direction: column;
}

.sidebar-header {
/* 【核心修改】：紫蔷薇与冰蓝色的梦幻渐变，带有 85% 的半透明果冻感 */
    background-image: linear-gradient(135deg, rgba(116, 185, 255, 0.85), rgba(162, 155, 254, 0.9));
    color: #ffffff;
    padding: 15px 20px;
    text-align: center;
    border-bottom-right-radius: 16px;
    /* 顺手给左上角也加个圆角，完美贴合外层大容器 */
    border-top-left-radius: 14px; 
    box-shadow: 0 4px 15px rgba(162, 155, 254, 0.2); /* 加一点紫色的发光阴影 */
    margin-bottom: 15px;
}

.sidebar-header h1 {
    color: #ffffff;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 给大字加一层柔和的阴影 */
}

.sidebar-header p {
color: #ffffff;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    /* 【核心修改】：缩小副标题和主标题之间的间距 */
    margin-top: 2px; 
    opacity: 1 !important;
}

/* 侧边栏导航 */
.sidebar-menu {
    padding: 20px 0;
    flex-grow: 1;
}

.sidebar-menu ul {
    list-style: none;
}

.sidebar-menu li {
    padding: 0 20px;
    position: relative;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: #555;
    font-size: 15px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.sidebar-menu a i {
    width: 25px;
    text-align: center;
    margin-right: 10px;
    color: #888;
}

.sidebar-menu li:hover a, 
.sidebar-menu li.active a {
    /* 使用主题粉色作为高亮背景，并加个小圆角 */
    background-color: var(--theme-pink);
    color: #fff;
    box-shadow: 0 4px 10px rgba(255, 182, 193, 0.4); /* 粉色光晕 */
    transform: translateX(5px); /* 悬浮时微微向右弹一下 */
}
/* 给图标也变个色 */
.sidebar-menu li:hover a i, 
.sidebar-menu li.active a i {
    color: #fff;
}
.sidebar-menu a {
    /* (原有代码不变) */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 加上 Q 弹的过渡曲线 */
}

/* 侧边栏徽章 (数字) */
.badge {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #e0e0e0;
    color: #666;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
}

/* 侧边栏底部小工具 */
.sidebar-widget {
    padding: 20px;
    text-align: center;
    /* 改用半透明分割线 */
    border-top: 2px solid var(--glass-border);
    background-color: rgba(255,255,255,0.2); /* 稍微加一点点底色衬托组件 */
}

.sidebar-widget img {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 10px;
}

.widget-title {
    font-weight: bold;
}

.widget-subtitle {
    font-size: 12px;
    color: #888;
}

/* ================= 主内容区域样式 ================= */
.content-area {
    flex-grow: 1;
    padding: 40px;
    /* 去掉白色背景 */
    background-color: transparent;
    overflow-y: auto; 
}

/* 文章头部 */
.article-header {
    text-align: center;
    margin-bottom: 30px;
}

.sub-title {
    font-size: 20px;
    color: #87ceeb; /* 浅蓝色 */
    font-weight: normal;
    margin-bottom: 10px;
}

.main-title {
    font-size: 28px;
    color: #333;
    margin-bottom: 15px;
}

.article-meta {
    font-size: 13px;
    color: #999;
}

.article-meta span {
    margin: 0 10px;
}

/* 文章图片 */
.article-image {
    margin-bottom: 30px;
}

.article-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 文章正文 */
.article-content h3 {
    font-size: 22px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}

.article-content ol {
    padding-left: 20px;
    line-height: 1.8;
    color: #555;
}

.article-content li {
    margin-bottom: 15px;
}

.article-content code {
    background-color: #f9f2f4;
    color: #c7254e;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
}
/* ================= 交互特效与组件样式 ================= */

/* 1. 鼠标光彩拖尾 */
.mouse-trail {
    position: fixed;
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none; /* 防止特效阻挡鼠标点击 */
    z-index: 9999;
    /* 拖尾渐渐缩小并消失的动画 */
    animation: trailFade 0.6s linear forwards; 
}
@keyframes trailFade {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.2); }
}

/* 2. 点击烟花爆炸粒子 */
.firework-particle {
    position: fixed;
    position: fixed;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    /* 烟花向四周散开并消失的动画 */
    animation: blast 0.8s ease-out forwards;
}
@keyframes blast {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* 3. 点击烟花爆炸圆环 */
.firework-ring {
    position: fixed;
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid;
    pointer-events: none;
    z-index: 10000;
    /* 圆环从中心向外扩大并淡出的动画 */
    animation: ringExpand 0.8s ease-out forwards;
    transform: translate(-50%, -50%); /* 让圆环从中心点向外扩展 */
}

@keyframes ringExpand {
    0% {
        width: 20px;
        height: 20px;
        opacity: 1;
        border-width: 2px;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
        border-width: 1px;
    }
}

/* 3. 左下角桌宠样式 */
.web-pet-container {
    position: fixed;
    left: 20px; /* 距离屏幕左侧的距离 */
    bottom: 20px; /* 距离屏幕底部的距离 */
    z-index: 9998;
    cursor: pointer;
}

.web-pet-container img {
    height: 250px; /* 桌宠图片的高度，可根据你的图片调整 */
    width: auto;
    transition: transform 0.2s; /* 转身时的过渡动画 */
}

/* 桌宠对话框样式（截图里那种带半透明底色的文字框） */
.pet-dialog {
    position: absolute;
    top: -40px; /* 悬浮在小人头上 */
    left: 40px;
    background-color: rgba(240, 230, 210, 0.9); /* 奶黄色半透明背景 */
    color: #666;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 显示对话框的类名 */
.pet-dialog.show {
    opacity: 1;
}
/* ================= WA 流水账页面样式 ================= */
/* ================= WA 流水账页面样式 ================= */
/* ================= WA 流水账页面样式 ================= */
/* ================= WA 流水账页面样式 ================= */
/* ================= WA 流水账页面样式 ================= */
/* ================= WA 流水账页面样式 ================= */
/* WA 页面卡片玻璃化，并加上粉色边框 */
.wa-editor-box, .wa-post {
    background: rgba(255, 255, 255, 0.55) !important; /* 稍微比大背景白一点，突出层次 */
    /* ========= 【删除这一行！】 ========= */
    /* backdrop-filter: blur(8px); */ 
    /* ================================= */
    border: 2px solid var(--glass-border); /* 亮晶晶边框 */
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Q弹动画 */
}
/* 悬浮时卡片上浮并发光 */
.wa-editor-box:hover, .wa-post:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 12px 25px rgba(255, 182, 193, 0.25) !important; /* 粉色光晕阴影 */
    border-color: var(--theme-pink); /* 边框变粉 */
}
#wa-textarea {
    width: 100%;
    min-height: 100px;
    border: none;
    resize: vertical;
    outline: none;
    font-size: 15px;
    color: #333;
    font-family: inherit;
    margin-bottom: 10px;
}

.wa-editor-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #eaeaea;
    padding-top: 10px;
}

.wa-tool-btn {
    cursor: pointer;
    color: #666;
    font-size: 14px;
    transition: color 0.2s;
}
.wa-tool-btn:hover { color: #87ceeb; }

.wa-meta-info {
    font-size: 12px;
    color: #999;
    margin-right: 15px;
}

#wa-submit-btn {
    background-color: #87ceeb;
    color: white;
    border: none;
    padding: 6px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}
#wa-submit-btn:hover { background-color: #5bbde0; }

#wa-image-preview-container {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}
#wa-image-preview {
    max-height: 100px;
    border-radius: 4px;
    border: 1px solid #eee;
}
#wa-remove-image {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4757;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 12px;
}

/* 发布的单条记录卡片 */
.wa-post {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.wa-post-header {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
}
.wa-post-content {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
    white-space: pre-wrap; /* 保留文本换行 */
}
.wa-post-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* 评论区样式 */
.wa-comments {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 6px;
    margin-top: 15px;
}
.wa-comment-item {
    font-size: 13px;
    border-bottom: 1px dashed #eee;
    padding: 8px 0;
}
.wa-comment-item:last-child { border-bottom: none; }
.wa-comment-time {
    color: #aaa;
    font-size: 11px;
    margin-left: 10px;
}
.wa-comment-input-box {
    display: flex;
    margin-top: 10px;
}
.wa-comment-input {
    flex-grow: 1;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
}
.wa-comment-btn {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 15px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 13px;
}
.wa-comment-btn:hover { background: #eee; }
/* ================= 三个点下拉菜单样式 ================= */
.wa-more-options {
    position: relative;
}
.wa-more-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 16px;
    padding: 2px 8px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}
.wa-more-btn:hover {
    background: #f0f0f0;
    color: #87ceeb; /* 悬浮时变成清新的蓝色 */
}
.wa-dropdown-menu {
    display: none; 
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 5px;
    background: #fff;
    border: 1px solid #ffe4e1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border-radius: 8px;
    z-index: 100;
    min-width: 120px;
    overflow: hidden;
}
.wa-dropdown-menu.show {
    display: block;
    animation: fadeIn 0.2s ease-out;
}
.wa-dropdown-menu .wa-delete-btn {
    width: 100%;
    text-align: left;
    padding: 10px 15px;
    background: none;
    border: none;
    color: #ff4757;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}
.wa-dropdown-menu .wa-delete-btn:hover {
    background: #fff0f1; /* 鼠标放上去有浅红色的底色反馈 */
}

/* ================= 二次元居中弹窗样式 ================= */
.anime-modal-overlay {
    display: none; /* 默认隐藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 半透明黑底 */
    backdrop-filter: blur(3px); /* 弹窗时背景微微模糊 */
    z-index: 99999;
    justify-content: center;
    align-items: center;
}
.anime-modal-overlay.show {
    display: flex;
    animation: fadeIn 0.2s;
}
.anime-modal-box {
    background: #fff;
    width: 320px;
    border-radius: 16px; /* 比较圆润可爱的边缘 */
    box-shadow: 0 10px 40px rgba(255, 182, 193, 0.4);
    text-align: center;
    border: 3px solid #ffe4e1; /* 萌萌的粉色边框 */
    transform: scale(0.9);
    /* 加入弹跳出现的动画，非常有活力 */
    animation: popUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
    overflow: hidden;
}
.anime-modal-header {
    background: #fff0f1;
    color: #ff7675;
    padding: 12px;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
}
.anime-modal-body {
    padding: 30px 20px;
    color: #555;
    font-size: 15px;
    line-height: 1.5;
}
.anime-modal-footer {
    display: flex;
    border-top: 1px solid #ffe4e1;
}
.anime-btn {
    flex: 1;
    padding: 14px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    background: #fff;
    transition: background 0.2s, color 0.2s;
}
.anime-btn.cancel {
    border-right: 1px solid #ffe4e1;
    color: #999;
}
.anime-btn.cancel:hover {
    background: #f9f9f9;
    color: #666;
}
.anime-btn.confirm {
    color: #ff4757;
    font-weight: bold;
}
.anime-btn.confirm:hover {
    background: #ff7675;
    color: #fff;
}

/* 动画关键帧 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes popUp {
    to { transform: scale(1); }
}
/* ================= 全局滚动条美化 (二次元纤细风) ================= */
/* ================= 全局滚动条美化 (二次元纤细风) ================= */
/* ================= 全局滚动条美化 (二次元纤细风) ================= */
/* ================= 全局滚动条美化 (二次元纤细风) ================= */
/* ================= 全局滚动条美化 (二次元纤细风) ================= */
/* 滚动条整体宽度 */
::-webkit-scrollbar {
    width: 8px; /* 侧边主滚动条 */
    height: 8px; /* 横向滚动条 */
}
/* 滚动条轨道 (透明) */
::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}
/* 滚动条滑块 (猛男粉色，圆润) */
::-webkit-scrollbar-thumb {
    background: var(--theme-pink); 
    background-image: linear-gradient(45deg, var(--theme-pink), var(--theme-blue)); /* 渐变色更梦幻 */
    border-radius: 10px;
    border: 2px solid transparent; /*通过透明边框挤压，让滑块看起来更细 */
    background-clip: content-box;
}
/* 鼠标按住滚动条时 */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--theme-blue);
}

/* ================= 右下角帧率显示 ================= */
/* ================= 右下角帧率显示 ================= */
/* ================= 右下角帧率显示 ================= */
/* ================= 右下角帧率显示 ================= */
/* ================= 右下角帧率显示 ================= */

.fps-box {
    position: fixed;
    bottom: 10px; 
    left: 15px;  
    bottom: 10px; 
    left: 15px;  
    /* 【修改】：将透明度从 0.6 提高到 0.85，背景变得更白、更实一点 */
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(6px); /* 稍微增加一点模糊度，质感更好 */
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--glass-border);
    border-radius: 8px; 
    /* 【修改】：内边距稍微撑大一点，让框更有分量感 */
    padding: 6px 14px; 
    /* 【修改】：字体稍微调大，从 11px 改到 13px，清晰但又不会太大 */
    font-size: 13px; 
    color: var(--theme-pink); 
    font-weight: bold;
    font-family: 'Nunito', monospace; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 稍微加深一点点阴影，让它更有立体感 */
    z-index: 99999;
    pointer-events: none; 
}

/* ================= 课表与 DDL 页面样式 ================= */
/* ================= 课表与 DDL 页面样式 ================= */
/* ================= 课表与 DDL 页面样式 ================= */
/* ================= 课表与 DDL 页面样式 ================= */
/* ================= 课表与 DDL 页面样式 ================= */
/* ================= 课表与 DDL 页面样式 ================= */

.week-nav {
    display: flex;
    align-items: center;
    background: var(--glass-bg);
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
}
.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--theme-pink);
    font-size: 16px;
    padding: 5px;
    transition: transform 0.2s;
}
.icon-btn:hover { transform: scale(1.2); }

/* 课表网格系统 */
.schedule-box {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 30px;
    overflow-x: auto; /* 屏幕太小时允许横向滚动 */
}

.schedule-grid {
    display: grid;
    /* 1列时间轴(50px) + 7列星期(等宽) */
    grid-template-columns: 65px repeat(7, 1fr);
    /* 1行表头(40px) + 12行节次(60px) */
    grid-template-rows: 40px repeat(12, 60px);
    gap: 2px;
    min-width: 600px;
    position: relative;
}

/* 单元格基础样式 */
.grid-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: var(--text-light);
    border-bottom: 1px dashed rgba(0,0,0,0.05);
    border-right: 1px dashed rgba(0,0,0,0.05);
}
.grid-header {
    font-weight: bold;
    color: var(--text-main);
    border-bottom: 2px solid var(--glass-border);
}
.time-col {
    flex-direction: column;
    font-size: 11px;
}

/* 课程卡片 */
.course-card {
    border-radius: 6px;
    padding: 5px;
    font-size: 12px;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
    margin: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.course-card:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 10;
}
.course-name { font-weight: bold; margin-bottom: 4px; }
.course-room { font-size: 11px; opacity: 0.8; }

/* DDL 区域样式 */
.ddl-section {
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    padding: 20px;
}
.ddl-input-box {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
#ddl-task-input { flex-grow: 1; }
#ddl-task-input, #ddl-date-input {
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.5);
    outline: none;
    font-family: inherit;
}

.ddl-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.6);
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    border-left: 4px solid var(--theme-blue);
    transition: transform 0.2s;
}
.ddl-item:hover { transform: translateX(5px); }
.ddl-task { font-weight: bold; color: var(--text-main); }
.ddl-date { font-size: 12px; color: var(--text-light); margin-left: 10px;}
.ddl-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    color: white;
}
/* DDL 紧急程度颜色 */
.badge-urgent { background-color: #ff7675; } /* 小于3天 */
.badge-warning { background-color: #fdcb6e; } /* 小于7天 */
.badge-safe { background-color: #74b9ff; }   /* 7天以上 */

/* ================= 备忘录 (Remind) 页面样式 ================= */
/* ================= 备忘录 (Remind) 页面样式 ================= */
/* ================= 备忘录 (Remind) 页面样式 ================= */
/* ================= 备忘录 (Remind) 页面样式 ================= */
/* ================= 备忘录 (Remind) 页面样式 ================= */
.remind-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* 左侧控制台 */
.remind-left-panel {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.anime-poster {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid var(--glass-border);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.anime-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.poster-mask {
    position: absolute;
    bottom: 0; width: 100%;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    padding: 15px 10px 10px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
}

.glass-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border: 2px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

#remind-text {
    width: 100%;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 10px;
    background: rgba(255,255,255,0.5);
    outline: none;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 15px;
}

/* 右侧时光卡片区 */
.remind-right-panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.remind-card {
    position: relative;
    display: flex;
    background: rgba(255, 255, 255, 0.65);
    border: 2px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    transition: transform 0.3s;
}
.remind-card:hover {
    transform: translateY(-5px);
}

.remind-card-img {
    width: 180px;
    flex-shrink: 0;
    object-fit: cover;
    border-right: 2px solid var(--glass-border);
}

.remind-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.remind-card-text {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-main);
    margin-bottom: 15px;
    padding-right: 30px; /* 给右上角的删除按钮留空间 */
}

/* 酷炫的大倒计时数字块 */
.countdown-row {
    display: flex;
    gap: 15px;
    align-items: center;
}
.time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--theme-pink);
    border-radius: 10px;
    padding: 10px 15px;
    min-width: 60px;
    box-shadow: inset 0 0 10px rgba(255, 182, 193, 0.2);
}
.time-num {
    font-size: 28px;
    font-weight: 900;
    color: var(--theme-pink);
    line-height: 1;
    font-family: 'Nunito', monospace;
}
.time-label {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 5px;
}
.time-finished {
    font-size: 24px;
    font-weight: bold;
    color: #74b9ff;
    padding: 10px;
    background: rgba(116, 185, 255, 0.1);
    border-radius: 8px;
}

/* ================= 留言板 (left.html) 专属样式 ================= */
/* ================= 留言板 (left.html) 专属样式 ================= */
/* ================= 留言板 (left.html) 专属样式 ================= */
/* ================= 留言板 (left.html) 专属样式 ================= */
/* ================= 留言板 (left.html) 专属样式 ================= */

.message-intro {
    background: rgba(255, 255, 255, 0.4);
    border-left: 5px solid var(--theme-blue);
    padding: 20px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 30px;
    line-height: 1.8;
    font-size: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.comment-form-box {
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed var(--glass-border);
    border-radius: 12px;
    padding: 20px;
    transition: box-shadow 0.3s;
}
.comment-form-box:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

.comment-inputs {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}
.comment-inputs input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.6);
    outline: none;
    font-family: inherit;
    transition: all 0.3s;
}
.comment-inputs input:focus, #comment-text:focus {
    border-color: var(--theme-blue);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(135, 206, 235, 0.2);
}

#comment-text {
    width: 100%;
    padding: 15px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.6);
    resize: vertical;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.3s;
}

/* 留言列表项 */
.comment-item {
    display: flex;
    gap: 20px;
    padding: 25px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.08);
    transition: background 0.3s;
}
.comment-item:last-child {
    border-bottom: none;
}
.comment-item:hover {
    background: rgba(255,255,255,0.4);
    border-radius: 12px;
    padding: 25px 15px;
    margin: 0 -15px;
}

.comment-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--glass-border);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    object-fit: cover;
    transition: transform 0.5s;
}
.comment-item:hover .comment-avatar img {
    transform: rotate(360deg); /* 鼠标放上去头像会转圈圈！ */
}

.comment-body {
    flex: 1;
}
.comment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}
.comment-author {
    font-weight: bold;
    color: #555;
    font-size: 15px;
}
/* 浏览器和系统的小尾巴标签 */
.comment-os {
    font-size: 11px;
    color: var(--text-light);
    background: rgba(0,0,0,0.04);
    padding: 3px 8px;
    border-radius: 4px;
}
.comment-date {
    font-size: 12px;
    color: #aaa;
    width: 100%;
    margin-top: -5px;
}

.comment-content {
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.7;
    white-space: pre-wrap;
}

.comment-reply-btn {
    color: #ff7675;
    cursor: pointer;
    font-size: 13px;
    float: right;
    background: none;
    border: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
}
.comment-item:hover .comment-reply-btn {
    opacity: 1;
}
.comment-reply-btn:hover {
    transform: scale(1.1);
}
/* ================= 留言板回复区域样式 ================= */
.comment-replies {
    margin-top: 15px;
    padding-left: 15px;
    border-left: 3px solid rgba(135, 206, 235, 0.3); /* 浅蓝色的引用线 */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reply-item {
    background: rgba(255, 255, 255, 0.3);
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
    position: relative;
}

.reply-author {
    font-weight: bold;
    color: var(--theme-blue);
    margin-right: 5px;
}

/* 隐藏的回复输入框，点击回复后展开 */
.reply-input-box {
    display: none; 
    margin-top: 15px;
    gap: 10px;
    animation: fadeIn 0.3s;
}
.reply-input-box.show {
    display: flex;
}
.reply-input-box input {
    flex-grow: 1;
    border: 1px dashed var(--glass-border);
    background: rgba(255,255,255,0.7);
    border-radius: 6px;
    padding: 6px 12px;
    outline: none;
}

/* ================= 关于页面 (about.html) 专属样式 ================= */
.about-section ul {
    list-style-type: disc;
    padding-left: 20px;
    color: var(--text-main);
}

.about-section li {
    margin-bottom: 15px;
    font-size: 15px;
}

.contact-list a {
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.2s;
    margin-left: 5px;
}

.contact-list a:hover {
    color: var(--theme-pink);
}

.contact-list i {
    font-size: 12px;
    color: #ccc;
    margin-left: 3px;
    transition: color 0.2s;
}

.contact-list a:hover i {
    color: var(--theme-pink);
}

/* ================= 侧边栏重构：独立卡片化与紧凑化 ================= */

/* 第二块：开发者名片区（变成独立卡片） */
.developer-profile {
    /* 【修改】：大幅减小内边距，让内容更紧凑 */
    padding: 15px; 
    text-align: center;
    /* 【修改】：去掉单线边框，改为完整的圆角卡片 */
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.3); 
    /* 【修改】：左右往里缩一点点，底部留出明显间隔 */
    margin: 5px 12px 15px 12px; 
}
.profile-avatar {
    /* 【修改】：头像缩小一点，适配紧凑的布局 */
    width: 85px; 
    height: 85px;
    object-fit: cover;
    border-radius: 12px; 
    border: 2px solid var(--glass-border);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    /* 【修改】：减小头像下方的留白 */
    margin-bottom: 8px; 
    transition: transform 0.3s;
}
.profile-avatar:hover {
    transform: scale(1.05) rotate(3deg);
}
.profile-name {
    /* 【修改】：名字字号稍微收敛一点 */
    font-size: 16px; 
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 4px;
    letter-spacing: 1px;
}
.profile-signature {
    font-size: 12px;
    color: var(--text-light);
    font-style: italic;
    line-height: 1.4;
}

/* 第三块：有趣的传送门区（变成独立卡片） */
.sidebar-links-section {
    /* 【修改】：减小内边距 */
    padding: 15px; 
    /* 【修改】：改为完整的圆角卡片 */
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.3);
    /* 【修改】：和名片一样左右缩进，底部留出空间 */
    margin: 0 12px 15px 12px; 
}
.links-title {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: var(--theme-pink);
    /* 【修改】：减小标题和下方列表的间距 */
    margin-bottom: 12px; 
    letter-spacing: 1px;
}
.sidebar-links-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* 【修改】：减小链接之间的垂直间距 */
    gap: 8px; 
}
.sidebar-links-list li {
    text-align: center;
}
.sidebar-links-list a {
    display: inline-block;
    font-size: 12px;
    color: var(--text-main);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px dashed rgba(0,0,0,0.15); 
    transition: all 0.3s;
}
.sidebar-links-list a:hover {
    color: var(--theme-blue);
    border-bottom-color: var(--theme-blue); 
    transform: translateY(-2px); 
}

/* ================= 侧边栏终极重构：完全断开的独立悬浮卡片 ================= */

/* 1. 抽去原有的长条大背景，让缝隙彻底透明 */
.sidebar {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 20px; /* 这就是三个模块之间露出的“原画背景”缝隙大小，你可以改成 15px 会更紧凑 */
    height: max-content; /* 让它紧紧贴合内容，不要出现底部无用留白 */
}

/* 2. 赋予三个独立模块统一的毛玻璃卡片样式 */
.sidebar-block {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(10px);
    border: 2px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden; /* 让顶部招牌的颜色不溢出圆角 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* 3. 修复顶部紫蔷薇招牌的边距 */
.sidebar-header {
    border-radius: 0; /* 贴满卡片顶部 */
    margin-bottom: 0; /* 去除多余间距 */
    padding: 20px 15px;
}

/* 4. 名片模块紧凑化 */
.developer-profile {
    padding: 20px 15px;
    text-align: center;
}
.profile-avatar {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid var(--glass-border);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform 0.3s;
}
.profile-avatar:hover { transform: scale(1.05) rotate(3deg); }
.profile-name {
    font-size: 17px;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 5px;
}
.profile-signature { font-size: 12px; color: var(--text-light); font-style: italic; }

/* 5. 传送门模块紧凑化 */
.sidebar-links-section {
    padding: 20px 15px;
}
.links-title {
    text-align: center; font-size: 13px; font-weight: bold;
    color: var(--theme-pink); margin-bottom: 15px;
}
.sidebar-links-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sidebar-links-list li { text-align: center; }
.sidebar-links-list a {
    font-size: 12px; color: var(--text-main); text-decoration: none;
    padding-bottom: 2px; border-bottom: 1px dashed rgba(0,0,0,0.15); transition: all 0.3s;
}
.sidebar-links-list a:hover { color: var(--theme-blue); border-bottom-color: var(--theme-blue); }

/* ================= 模块九：全局抽屉式音乐播放器 (重构版) ================= */
.global-player {
    position: fixed;
    left: 20px;
    bottom: 50px;
    bottom: 50px;
    z-index: 1000;
    display: flex;
    align-items: flex-end; 
}

/* --- 1. 左侧：全透明亚克力质感外方内圆唱片机 --- */
.player-toggle {
    width: 90px;
    height: 90px;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    /* 去掉原本的底色和阴影，只保留唱片机本体的悬浮感 */
    background: transparent;
    z-index: 2; 
    flex-shrink: 0;
}

/* 旋转的唱片封面本身保持不变 */
#player-cover {
    position: absolute;
    width: 76px;
    height: 76px;
    top: 7px;
    left: 7px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #222;
    animation: spin 10s linear infinite;
    animation-play-state: paused; 
}
#player-cover.playing { animation-play-state: running; }

/* 神奇的镂空磨砂外壳 */
/* 核心修改：去掉 radial-gradient 磨砂白，变成完全透明的塑料感外壳 */
.player-sleeve {
    position: absolute;
    inset: 0;
    background: transparent;      /* 完全透明 */
    backdrop-filter: none;        /* 移除毛玻璃特效 */
    border: 2px solid rgba(255, 255, 255, 0.4); /* 微微泛白的透明亚克力边框 */
    border-radius: 12px;
    box-sizing: border-box;
    pointer-events: none; 
}

/* 唱片中心的白色小轴孔保持不变 */
.record-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 14px; height: 14px; background: #fdfdfd; border: 1px solid #ccc;
    border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2) inset;
}

/* 侧边箭头放大 */
.toggle-arrow {
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    color: var(--theme-blue);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes spin { 100% { transform: rotate(360deg); } }

/* --- 2. 右侧：超大屏拉出控制面板 --- */
.player-panel {
    background: rgba(255, 255, 255, 0.85); /* 稍微加深一点点底色，保护超大面板的文字阅读性 */
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 0 16px 16px 0;
    
    /* 【核心放大】：巨幅加宽加高 */
    width: 450px;         /* 宽度暴增，歌名再长也能显示全 */
    height: 70vh;         /* 高度变为屏幕高度的 70% */
    max-height: 800px;    /* 设定一个极限最大高度 */
    padding: 25px;        /* 内边距也变得更宽裕 */
    
    display: flex;
    flex-direction: column;
    transform: translateX(-110%);
    opacity: 0;
    margin-left: -20px; 
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
    pointer-events: none;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.1); /* 加大阴影，更有悬浮层级感 */
}

.global-player.expanded .player-panel { transform: translateX(0); opacity: 1; pointer-events: auto; }
.global-player.expanded .toggle-arrow { transform: translateY(-50%) rotate(180deg); }

/* --- 3. 内部字体同步放大 --- */
.player-info {
    border-bottom: 2px dashed rgba(0,0,0,0.1);
    padding-bottom: 20px;
    margin-bottom: 15px;
    text-align: center;
}
.player-title { font-weight: 900; font-size: 22px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px;}
.player-artist { font-size: 14px; color: var(--theme-pink); margin-bottom: 20px; font-weight: bold;}

.player-controls { display: flex; justify-content: center; gap: 35px; align-items: center;}
.player-controls button { background: none; border: none; color: var(--theme-blue); font-size: 20px; cursor: pointer; transition: all 0.2s; }
.player-controls button.play-btn-main { font-size: 32px; color: var(--theme-pink); }
.player-controls button:hover { transform: scale(1.15); }

/* --- 4. 歌单列表行距拉开 --- */
.playlist { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; padding-right: 8px; }
.playlist li {
    font-size: 15px;      /* 字号变大 */
    padding: 12px 16px;   /* 点击热区变大 */
    border-radius: 8px; 
    cursor: pointer; 
    transition: all 0.2s;
    display: flex; justify-content: space-between; align-items: center; 
    color: var(--text-main); margin-bottom: 6px;
}
.playlist li:hover { background: rgba(255,255,255,0.7); transform: translateX(5px); }
.playlist li.active { background: var(--theme-pink); color: white; box-shadow: 0 4px 12px rgba(162, 155, 254, 0.4); }

.playlist li span:first-child { font-weight: bold; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 20px;}
.playlist li span:last-child { font-size: 13px; opacity: 0.8; white-space: nowrap; }
/* 滚动条美化 */
.playlist::-webkit-scrollbar { width: 6px; }
.playlist::-webkit-scrollbar-thumb { background: rgba(116, 185, 255, 0.6); border-radius: 3px; }

/* ================= 模块十：Live2D 看板娘 ================= */
/* ================= 模块十：Live2D 看板娘 ================= */
/* ================= 模块十：Live2D 看板娘 ================= */
/* ================= 模块十：Live2D 看板娘 ================= */
/* ================= 模块十：Live2D 看板娘 ================= */
.live2d-container {
    position: fixed;
    /*调整position距离右/下多少像素*/
    right: -60px;
    bottom: 0px; 
    
    /* 【在这里自由调整培养舱的实际大小】 */
    width: 500px;   /* 可以改宽一点 */
    height: 500px;  /* 亚丝娜比较高挑，可以改高一点 */
    
    z-index: 999;
    pointer-events: none; 
}

#live2d-canvas {
    width: 100%;
    height: auto;
    pointer-events: auto; 
    cursor: pointer;
}

/* ================= 亚丝娜专属：对话气泡 ================= */
.live2d-dialog {
    position: absolute;
    /* 气泡的垂直位置：如果你觉得气泡挡住了她的脸，就把 -30px 改小（比如 -50px 往上挪） */
    top: 30px; 
    left: 50%;
    transform: translateX(-50%);
    
    /* 气泡外观设计 */
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--theme-pink, #ffb6c1); /* 用粉色描边 */
    border-radius: 12px;
    padding: 10px 15px;
    font-size: 14px;
    color: #333;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    white-space: pre-wrap; /* 允许换行 */
    
    /* 动画与交互属性 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none; /* 极其重要：防止气泡挡住你的鼠标点击 */
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ================= 亚丝娜专属：SAO经典 UI 气泡 (大尺寸灵动版) ================= */
/* ================= 亚丝娜专属：SAO经典 UI 气泡 (加大超宽版) ================= */
/* ================= 亚丝娜专属：SAO经典 UI 气泡 (加大超宽版) ================= */
.live2d-dialog {
    position: absolute;
    /* 【位置上调】：从 5px 改成了 -15px，气泡会整体往上移 20 像素 */
    /* 如果你觉得还不够高，可以继续改成 -25px 或者 -30px */
    top: 0px; 
    left: 50%;
    
    min-width: 260px; 
    max-width: 320px; 
    padding: 16px 28px; 
    
    background: rgba(250, 250, 250, 0.95);
    border: 2px solid #ff9900; 
    border-radius: 8px; 
    
    font-size: 15px; 
    color: #333;
    font-weight: bold;
    text-align: center;
    white-space: pre-wrap;
    line-height: 1.6;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); 
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none; 
    z-index: 1000;
    
    transform: translateX(-50%);
    transition: opacity 0.3s ease;
}

/* (保留你之前的 .live2d-dialog.show, @keyframes 和 ::after/before 代码，不要删) */

/* 灵动呼吸动画 */
.live2d-dialog.show {
    opacity: 1;
    visibility: visible;
    animation: irregularFloat 4s ease-in-out infinite;
}

/* 不规则漂浮关键帧 */
@keyframes irregularFloat {
    0%   { transform: translateX(-50%) translate(0px, 0px) rotate(0deg); }
    20%  { transform: translateX(-50%) translate(-4px, -6px) rotate(-1.5deg); }
    40%  { transform: translateX(-50%) translate(3px, -10px) rotate(1deg); }
    60%  { transform: translateX(-50%) translate(5px, -3px) rotate(2deg); }
    80%  { transform: translateX(-50%) translate(-2px, 4px) rotate(-1deg); }
    100% { transform: translateX(-50%) translate(0px, 0px) rotate(0deg); }
}

/* 【尾巴颜色同步回归：橙色边框 + 白色填充】 */
.live2d-dialog::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 12px 10px 0;
    border-style: solid;
    border-color: #ff9900 transparent transparent transparent; /* 经典橙 */
}
.live2d-dialog::before {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 8px 0;
    border-style: solid;
    border-color: rgba(250, 250, 250, 0.95) transparent transparent transparent; /* 经典白 */
    z-index: 1;
}

/* ================= 终极防御：打破物理结界 ================= */

/* 1. 把侧边栏的层级拉到极限，无视一切遮挡！ */
.sidebar {
    position: relative !important;
    z-index: 999999 !important; 
}

/* 2. 剥夺真凶（播放器外壳、亚丝娜外壳）的物理碰撞体积 */
#global-player, #live2d-container {
    pointer-events: none !important; 
}

/* 3. 单独给里面的按钮和亚丝娜身体恢复碰撞，保证能点歌、能摸头 */
#player-toggle, .player-panel, #live2d-canvas {
    pointer-events: auto !important; 
}

/* ================================================================= */
/* ================= 视觉升级：Link Start 昼夜交替 ================= */
/* ================================================================= */

/* 1. 给全局元素加上颜色过渡动画，让变黑/变白的过程像呼吸一样丝滑（0.5秒） */
/* 让几乎所有元素在切换昼夜时，都拥有丝滑的渐变过渡 */
body, .sidebar, .content-area, .glass-card, .wa-post, .comment-item, .sidebar-block, 
h1, h2, h3, p, span, a, input, textarea, select, button, .wa-editor-box, .anime-modal-box {
    transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease !important;
}

/* 2. 暗黑模式下的专属全局变量与背景覆盖 */
body.dark-mode {
    /* 【100%稳定】：用高级的午夜蓝紫渐变作为底色，绝对不消失 */
    background: radial-gradient(circle at top right, #1a2035 0%, #0a0c15 100%) fixed;
    
    /* （可选）如果你自己下载了一张好看的夜景图放在文件夹里，可以把下面这行的注释取消掉： */
     background: url('sky.png') no-repeat center center fixed; background-size: cover; 
    
    /* 将明亮的毛玻璃变暗，降低透明度，增加科技感 */
    --glass-bg: rgba(20, 25, 35, 0.85); 
    --glass-border: rgba(100, 150, 255, 0.2); 
    
    /* 文字颜色变亮灰，防止在黑背景下刺眼 */
    --text-main: #dcdcdc;  
    --text-light: #888;
    
    /* 蓝紫主题在暗色下需要稍微提亮和偏霓虹一点 */
    --theme-blue: #82b1ff; 
    --theme-pink: #b39ddb; 

    
}

/* 3. 侧边栏在暗黑模式下的特殊处理（加深背景色） */
body.dark-mode .sidebar {
    background: linear-gradient(135deg, rgba(15, 20, 35, 0.9) 0%, rgba(25, 30, 50, 0.95) 100%);
    border-right: 1px solid rgba(100, 150, 255, 0.2);
}

/* 4. Link Start 切换按钮的专属样式 */
.dark-mode-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--theme-blue);
    color: var(--theme-blue);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 12px;
    margin-top: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer; /* 鼠标放上去变小手 */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 按钮悬停时的发光效果 */
.dark-mode-toggle:hover {
    background: var(--theme-blue);
    color: #fff;
    box-shadow: 0 0 10px var(--theme-blue);
}

/* ================= 暗黑模式下：全面黑化各种白底控件 ================= */

/* 1. 把所有输入框、文本区变成半透明黑底 + 亮灰字 + 幽蓝边框 */
body.dark-mode input, 
body.dark-mode textarea, 
body.dark-mode select {
    background-color: rgba(10, 15, 25, 0.6) !important; 
    color: #dcdcdc !important; 
    border: 1px solid rgba(100, 150, 255, 0.4) !important;
}

/* 调整输入框里“占位提示文字”的颜色，别让它太亮 */
body.dark-mode input::placeholder, 
body.dark-mode textarea::placeholder {
    color: #777 !important;
}

/* 2. 修复各种原本带有大白底的包裹框（如 WA编辑器、留言板表单、备忘录输入框、二次元弹窗） */
body.dark-mode .wa-editor-box,
body.dark-mode .comment-form-box,
body.dark-mode .remind-input-box,
body.dark-mode .anime-modal-box {
    background: rgba(20, 25, 35, 0.85) !important; 
    border-color: rgba(100, 150, 255, 0.2) !important;
    color: #dcdcdc;
}

/* 3. 修复点击“三个点”弹出的下拉菜单 */
body.dark-mode .wa-dropdown-menu {
    background: rgba(15, 20, 30, 0.95) !important;
    border: 1px solid rgba(100, 150, 255, 0.3) !important;
}

/* 下拉菜单里的按钮文字变亮，悬停时底色变亮 */
body.dark-mode .wa-dropdown-menu button {
    color: #dcdcdc !important;
}
body.dark-mode .wa-dropdown-menu button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}
/* ================= 暗黑模式：消灭所有残余的白框和浅色卡片 ================= */

/* 1. 修复 WA 页面：流水账帖子卡片 */
body.dark-mode .wa-post {
    background: rgba(20, 25, 35, 0.85) !important;
    border-color: rgba(100, 150, 255, 0.2) !important;
}

/* 2. 修复 WA 页面：就是你说的那个“评论区周围的一圈白框” */
body.dark-mode .wa-comments {
    background: rgba(10, 15, 25, 0.5) !important; /* 变成深邃的暗黑色 */
    border: 1px solid rgba(100, 150, 255, 0.1) !important;
}

/* 评论区底下每条评论的分割线变暗 */
body.dark-mode .wa-comment-item {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* 3. 修复 备忘录页面：备忘卡片 */
body.dark-mode .remind-card {
    background: rgba(20, 25, 35, 0.85) !important;
    border-color: rgba(100, 150, 255, 0.2) !important;
}

/* 4. 修复 留言板页面：别人留下的评论卡片 */
body.dark-mode .comment-item {
    background: rgba(20, 25, 35, 0.85) !important;
    border-color: rgba(100, 150, 255, 0.2) !important;
}

/* 5. 修复 课表页面：DDL 列表和课程表格子线条 */
body.dark-mode .ddl-item {
    background: rgba(20, 25, 35, 0.85) !important;
    color: #dcdcdc !important;
}
body.dark-mode .grid-cell {
    border-color: rgba(255, 255, 255, 0.1) !important; /* 网格线变暗 */
}
body.dark-mode .grid-header {
    background: rgba(255, 255, 255, 0.05) !important; /* 表头背景变暗 */
}
/* ================= 暗黑模式：深色幽蓝按钮专项优化 ================= */

/* 1. WA页面：【发布记录】 按钮 (褪去天蓝，换上深邃海军蓝) */
body.dark-mode #wa-submit-btn {
    background: rgba(40, 60, 100, 0.8) !important; 
    color: #dcdcdc !important;
    border: 1px solid rgba(100, 150, 255, 0.4) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode #wa-submit-btn:hover {
    background: rgba(60, 90, 140, 0.9) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(100, 150, 255, 0.5) !important;
}

/* 2. WA页面：评论区的 【提交】 按钮 */
body.dark-mode .wa-comment-btn {
    background: rgba(30, 45, 75, 0.6) !important; 
    color: #82b1ff !important;
    border: 1px solid rgba(100, 150, 255, 0.3) !important;
}
body.dark-mode .wa-comment-btn:hover {
    background: rgba(50, 75, 115, 0.9) !important;
    color: #fff !important;
}

/* 3. 通用动漫按钮：【传图】、【手滑了（取消）】等辅助按钮 */
body.dark-mode .anime-btn {
    background: rgba(30, 45, 75, 0.6) !important; 
    color: #82b1ff !important;
    border: 1px solid rgba(100, 150, 255, 0.3) !important;
}
body.dark-mode .anime-btn:hover {
    background: rgba(50, 75, 115, 0.9) !important;
    color: #fff !important;
}

/* 4. 通用确认按钮：【记下来】、【添加 DDL】、【提交留言】等主操作按钮 */
body.dark-mode .anime-btn.confirm {
    background: rgba(40, 60, 100, 0.8) !important; 
    color: #dcdcdc !important;
    border: 1px solid rgba(100, 150, 255, 0.4) !important;
}
body.dark-mode .anime-btn.confirm:hover {
    background: rgba(60, 90, 140, 0.9) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(100, 150, 255, 0.4) !important;
}
/* ================================================================= */
/* ================= 细节打磨：丝滑动效与高级感排版 ================= */
/* ================================================================= */

/* 1. 修复悬停突兀：把 transform (放大/位移) 加入丝滑套餐，时间设为 0.4秒 */
.wa-post, 
.comment-item, 
.remind-card {
    /* 使用 all 让所有的变化（包括放大和阴影）都拥有 0.4秒 的高级缓动效果 */
    transition: all 0.4s ease !important;
}

/* 2. 拯救留言板的“方形毛坯房”与“极度拥挤” */
.comment-item {
    border-radius: 16px !important;    /* 强制变成极其温柔的大圆角 */
    margin-bottom: 25px !important;    /* 拉开不同留言之间的上下距离，拒绝拥挤 */
    padding: 20px !important;          /* 增加内部留白，让文字和边缘有呼吸感 */
    overflow: hidden;                  /* 防止内部元素溢出破坏圆角 */
}

/* 3. 给留言板的“楼中楼（回复区）”加上清晰的分界线 */
.comment-replies {
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px dashed rgba(150, 150, 150, 0.3) !important; /* 加一条高级的半透明虚线 */
}

/* 4. 优化 WA 页面底下的评论区（同样需要圆角和间距） */
.wa-comments {
    border-radius: 16px !important;    /* 评论大外壳变大圆角 */
    padding: 15px !important;
    margin-top: 20px !important;
}
.wa-comment-item {
    border-radius: 10px !important;    /* 每条单聊小圆角 */
    margin-bottom: 12px !important;    /* 小评论之间也留出缝隙 */
    padding: 10px 15px !important;
}
/* ================================================================= */
/* ================= 备忘录页面：传图与记下来按钮微调 ================= */
/* ================================================================= */

/* 1. 精准调整【传图】按钮（通过 label 的 for 属性来精确锁定它） */
label[for="remind-file-input"] {
    margin-right: 20px !important;  /* 【调间距】：用力把右边的元素推开 20px，拒绝拥挤！ */
    padding: 8px 20px !important;   /* 【调大小】：内部上下撑开 8px，左右撑开 20px */
    font-size: 14px !important;     /* 【调字号】：字体大小 */
    display: inline-block;          /* 必须加这个，否则 padding 和 margin 可能不生效 */
    border-radius: 8px;             /* 给点小圆角，看着更舒服 */
}

/* 2. 精准调整【记下来】按钮 */
#remind-submit-btn {
    padding: 8px 28px !important;   /* 主操作按钮，左右稍微给宽一点（28px），显得更大气稳重 */
    font-size: 14px !important;     /* 字体大小 */
    font-weight: bold !important;   /* 字体加粗，强调这是提交动作 */
    border-radius: 8px;             /* 同样的小圆角 */
    cursor: pointer;
}
/* ================================================================= */
/* ================= 课表编辑弹窗：消灭粉色与原生白箭头 ================= */
/* ================================================================= */

/* 1. 终极魔法：强制浏览器把输入框原生的小箭头、下拉三角切换成【暗黑版】！ */
body.dark-mode input, 
body.dark-mode select, 
body.dark-mode textarea {
    color-scheme: dark !important; 
}

/* （备用杀招）如果某些旧浏览器箭头还不黑，用滤镜强制反色 */
body.dark-mode input[type="number"]::-webkit-inner-spin-button,
body.dark-mode input[type="number"]::-webkit-outer-spin-button {
    filter: invert(1) hue-rotate(180deg) brightness(1.2); 
}

/* 2. 精准击杀课表弹窗头部的“猛男粉”区域 */
body.dark-mode #course-modal .anime-modal-header,
body.dark-mode #course-modal .modal-header,
body.dark-mode #course-modal-title {
    background: rgba(20, 30, 50, 0.9) !important; /* 换成深邃的海军蓝背景 */
    color: #82b1ff !important; /* 文字换成发光的科技蓝 */
    border-bottom: 1px solid rgba(100, 150, 255, 0.3) !important;
}

/* 如果标题框有粉色阴影，一并干掉 */
body.dark-mode #course-modal .anime-modal-box {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}
/* ================================================================= */
/* ================= 课表弹窗：白箭头与掉帧终极修复 ================= */
/* ================================================================= */

/* 1. 彻底黑化原生数字输入框的上下小箭头 */
body.dark-mode #course-modal input::-webkit-inner-spin-button,
body.dark-mode #course-modal input::-webkit-outer-spin-button {
    /* 强制把白底黑箭头，反转成黑底白箭头，并稍微压暗 */
    filter: invert(100%) brightness(0.8) !important; 
}

/* 2. 拯救被吞噬的帧率 (FPS 优化) */
/* 强行关掉弹窗外层遮罩的“实时背景模糊”，改用高级的纯色半透明黑底 */
#course-modal, 
.anime-modal-overlay {
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important;
    background-color: rgba(0, 0, 0, 0.7) !important; /* 70% 不透明度的纯黑，无性能损耗 */
}

/* 顺便修复一下弹窗内部可能引发重绘卡顿的过渡效果 */
#course-modal .anime-modal-box {
    will-change: transform, opacity; /* 告诉显卡把这个盒子单独拿出来渲染，不要影响别人 */
}

/* ================================================================= */
/* ================= 全局设定：彻底抹杀所有原生数字输入框小箭头 ================= */
/* ================================================================= */

/* 针对 Chrome、Edge、Safari：不管黑夜白天，强制隐藏上下箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important; 
    margin: 0 !important; 
}

/* ================================================================= */
/* ================= 记忆碎片：散落拍立得相册 ================= */
/* ================================================================= */

/* 相册的大桌子：让照片自动换行、居中对齐、拉开间距 */
.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px;
    padding: 20px 10px 50px 10px;
}

/* 拍立得照片卡片基础样式 */
.photo-card {
    background: #ffffff;
    padding: 12px 12px 45px 12px; /* 底部留出 45px 用来写字 */
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* 淡淡的投影 */
    position: relative;
    cursor: pointer;
    width: 220px;
    /* 划重点：给所有的变化加上 0.4秒 的高级缓动动画 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 照片里面的图片 */
.photo-card img {
    width: 100%;
    height: 260px;
    object-fit: cover; /* 保证图片不被拉伸变形 */
    border-radius: 4px;
}

/* 照片底部的文字说明 */
.photo-caption {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    font-family: "Courier New", Courier, monospace; /* 用打字机字体更有感觉 */
}

/* 🎯 悬停大招：摆正、放大、浮起！ */
/* 注意：这里必须加 !important，因为等下我们要用 JS 随机给它初始角度 */
.photo-card:hover {
    transform: scale(1.15) rotate(0deg) translateY(-10px) !important;
    z-index: 10; /* 悬停时保证它在最上面，不被别人挡住 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
}

/* 🌙 暗黑模式适配：拍立得纸张变暗，文字变灰 */
body.dark-mode .photo-card {
    background: rgba(30, 40, 60, 0.85) !important;
    border: 1px solid rgba(100, 150, 255, 0.2);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}
body.dark-mode .photo-caption {
    color: #dcdcdc;
}
/* ================================================================= */
/* ================= 记忆碎片：自适应瀑布流与放大灯箱 ================= */
/* ================================================================= */

/* 1. 瀑布流大容器 (Masonry Layout) */
.gallery-container {
    column-count: 3; /* 电脑端显示 3 列 */
    column-gap: 20px; /* 列之间的间距 */
    padding-bottom: 50px;
}

/* 屏幕较小的时候，自动变成 2 列或 1 列 */
@media (max-width: 900px) { .gallery-container { column-count: 2; } }
@media (max-width: 600px) { .gallery-container { column-count: 1; } }

/* 2. 拍立得卡片本体 */
.photo-card {
    background: #ffffff;
    padding: 10px 10px 40px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    position: relative;
    cursor: pointer;
    break-inside: avoid; /* 核心：防止一张照片被强行切成两半排在两列！ */
    margin-bottom: 20px; /* 上下间距 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 里面的图片：宽度100%，高度自适应！完美解决形状单一问题 */
.photo-card img {
    width: 100%;
    height: auto; /* 核心：按照原图比例自动伸缩高度！ */
    border-radius: 4px;
    display: block;
}

.photo-caption {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #555;
}

.photo-card:hover {
    transform: scale(1.05) translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
    z-index: 10;
}

/* 🌙 暗黑模式适配 */
body.dark-mode .photo-card {
    background: rgba(30, 40, 60, 0.85) !important;
    border: 1px solid rgba(100, 150, 255, 0.2);
}
body.dark-mode .photo-caption { color: #dcdcdc; }

/* ================================================================= */
/* ================= 灯箱终极修复：绝对贴合尺寸与随动背景 ================= */
/* ================================================================= */

/* 1. 基础弹窗大背景（白天模式：明亮毛玻璃） */
.lightbox-modal {
    display: none; 
    position: fixed !important;
    z-index: 9999999 !important;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    background-color: rgba(255, 255, 255, 0.85) !important; /* 白天的纯白毛玻璃 */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
}
.lightbox-modal.show { display: flex !important; }

/* 🌙 2. 暗黑模式下的弹窗大背景（黑夜模式：深空蓝毛玻璃） */
body.dark-mode .lightbox-modal {
    background-color: rgba(15, 20, 35, 0.92) !important; /* 完美匹配 Link Start 的海军蓝 */
}

/* ================================================================= */
/* ================= 灯箱弹窗：剥夺白底，绝对贴身 ================= */
/* ================================================================= */

.lightbox-content {
    max-width: 85vw !important;
    max-height: 80vh !important;
    width: fit-content !important;  /* 【解药1】强迫外框紧贴图片内容 */
    height: fit-content !important; /* 【解药2】强迫外框紧贴图片高度 */
    
    background: transparent !important; /* 【终极解药】：干掉一切全局继承来的白色背景！ */
    border: none !important;            /* 干掉边框 */
    padding: 0 !important;              /* 干掉内边距 */
    
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important; /* 让阴影真正打在图片边缘 */
    object-fit: cover !important; 
    display: block !important;
    margin: 0 auto !important;
}

/* 4. 底部说明文字样式 */
.lightbox-caption {
    margin-top: 15px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    color: #333 !important; /* 白天黑字 */
}
body.dark-mode .lightbox-caption {
    color: #82b1ff !important; /* 黑夜发光蓝字 */
}

/* 5. 右上角关闭叉叉样式 */
.lightbox-close {
    position: absolute !important;
    top: 20px !important;
    right: 35px !important;
    font-size: 40px !important;
    cursor: pointer !important;
    color: #555 !important; /* 白天灰叉 */
    transition: all 0.3s ease !important;
}
body.dark-mode .lightbox-close {
    color: #dcdcdc !important; /* 黑夜亮灰叉 */
}
.lightbox-close:hover { 
    transform: scale(1.2) !important; 
}
/* ================================================================= */
/* ================= 灯箱左右切换按钮样式 (修复白天隐形问题) ================= */
/* ================================================================= */

.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    /* 【修改这里】：白天模式下使用你的“蓝蔷薇色” (主题蓝)，并稍微降低一点透明度显得柔和 */
    color: var(--theme-blue); 
    opacity: 0.7; 
    
    font-size: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 20px;
    z-index: 10000000;
    user-select: none;
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

/* 【修改这里】：白天模式下，鼠标放上去透明度拉满，并且散发蓝蔷薇颜色的光晕！ */
.lightbox-prev:hover, .lightbox-next:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
    text-shadow: 0 0 15px var(--theme-blue);
}

/* 🌙 暗黑模式下的按钮保持不变（因为你觉得这个颜色挺好的） */
body.dark-mode .lightbox-prev, 
body.dark-mode .lightbox-next {
    color: rgba(130, 177, 255, 0.6); 
    opacity: 1; /* 这里重置 opacity，因为颜色里自带了 0.6 的透明度 */
}
body.dark-mode .lightbox-prev:hover, 
body.dark-mode .lightbox-next:hover {
    color: #82b1ff;
    text-shadow: 0 0 15px rgba(130, 177, 255, 0.8);
}
/* ================= 首页随机图片：悬停互动特效 ================= */
.article-image {
    overflow: hidden; /* 防止图片放大时撑破容器 */
    border-radius: 8px; /* 确保有圆角 */
}

.article-image img {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease !important;
}

.article-image img:hover {
    transform: scale(1.03) !important; /* 微微放大 3% */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; /* 加深高级阴影 */
}

/* ========================================================================= */
/* ================= 屏幕右侧隐藏抽屉与御守样式 ================= */
/* ========================================================================= */
.omamori-drawer {
    position: fixed;
    top: 60%; /* 放低一点，不挡视线 */
    right: -100px; /* 默认隐藏主体部分，只留把手在外面 */
    width: 100px;
    height: 140px;
    background: rgba(15, 20, 35, 0.85); /* 深邃的海军蓝毛玻璃 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--theme-blue);
    border-right: none;
    border-radius: 12px 0 0 12px;
    box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.5);
    transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.omamori-drawer.open {
    right: 0; /* 展开抽屉 */
}

/* 抽屉的拉手 */
.omamori-handle {
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 50px;
    background: rgba(15, 20, 35, 0.85);
    border: 1px solid var(--theme-blue);
    border-right: none;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-blue);
    cursor: pointer;
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
}

.omamori-drawer.open .omamori-handle i {
    transform: rotate(180deg); /* 抽屉拉开后，箭头反向 */
}

.omamori-handle:hover {
    color: #fff;
    background: var(--theme-blue);
}

/* 御守本体 */
.omamori-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}


.omamori-charm:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 15px rgba(130, 177, 255, 0.4);
}

/* 御守顶部的穿线孔装饰 */
.omamori-charm::before {
    content: ""; position: absolute; top: 6px; width: 6px; height: 6px; background: #f1faee; border-radius: 50%;
}

.omamori-hint {
    font-size: 11px; color: #82b1ff; opacity: 0.8; font-weight: bold;
}

/* ========================================================================= */
/* ================= 屏幕右侧：树枝与御守悬挂系统 ================= */
/* ========================================================================= */
.omamori-system {
    position: fixed;
    top: 35%; /* 偏上一点，符合树枝垂下的视觉习惯 */
    right: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 靠右对齐 */
    /* 弹性伸出动画，模仿树枝弹出的真实物理感 */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

/* 🔒 闭合状态：向右隐藏，只漏出御守的左下角 */
.omamori-system.closed {
    transform: translateX(110px); 
}

/* 🌿 树枝设计 */
.omamori-branch {
    width: 140px;
    height: 8px;
    background: #4a3320; /* 深邃的木质棕色 */
    border-radius: 6px 0 0 6px;
    position: relative;
    box-shadow: 2px 5px 10px rgba(0,0,0,0.3);
}
/* 给树枝加个小分叉，显得更自然 */
.omamori-branch::after {
    content: ''; position: absolute; top: -6px; right: 30px; 
    width: 20px; height: 5px; background: #4a3320; 
    transform: rotate(35deg); border-radius: 3px;
}
/* 🌙 暗黑模式下的树枝变为夜樱木色 */
body.dark-mode .omamori-branch, 
body.dark-mode .omamori-branch::after {
    background: #2c3e50;
    box-shadow: 2px 5px 15px rgba(0,0,0,0.6);
}

/* 🪢 悬挂系统（绳索+御守的整体） */
.omamori-hanging {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 90px; /* 绑在树枝靠外的位置 */
    transform-origin: top center; /* 旋转轴定在绳子与树枝的绑点 */
    /* 整体随风摇曳动画 */
    animation: swayHanging 4s ease-in-out infinite;
}

@keyframes swayHanging {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(6deg); }
}

/* 🧶 细绳 */
.omamori-string {
    width: 2px;
    height: 35px;
    background: #d4af37; /* 金色结绳 */
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
body.dark-mode .omamori-string { background: #82b1ff; }

/* 🏮 御守本体 (复用你的高颜值设计) */
.omamori-charm {
    position: relative; width: 50px; height: 75px;
    background: linear-gradient(135deg, #e63946, #b00020);
    border: 2px dashed rgba(255, 215, 0, 0.7); border-radius: 4px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 15%, 100% 100%, 0% 100%, 0% 15%);
    cursor: pointer; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; padding-top: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: box-shadow 0.3s ease, transform 0.2s;
}
body.dark-mode .omamori-charm {
    background: linear-gradient(135deg, #2a0845, #6441A5);
    border-color: rgba(130, 177, 255, 0.7);
}

/* 悬停时：抓住御守发光 */
.omamori-charm:hover { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
body.dark-mode .omamori-charm:hover { box-shadow: 0 0 20px rgba(130, 177, 255, 0.8); }

/* 御守细节 */
.omamori-knot { position: absolute; top: 5px; width: 6px; height: 6px; background: #fff; border-radius: 50%; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); }
.omamori-label {
    background: rgba(255, 255, 255, 0.95); color: #b00020; padding: 6px 3px; border-radius: 2px; writing-mode: vertical-rl; font-size: 13px; font-weight: 900; letter-spacing: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,0.3); font-family: "Microsoft YaHei", "Noto Serif CJK SC", serif;
}
body.dark-mode .omamori-label { background: rgba(15, 20, 35, 0.9); color: #82b1ff; box-shadow: 1px 1px 3px rgba(0,0,0,0.8); }