/* --- 找回灵魂：经典羊皮卷主题与全局设定 --- */
:root {
    --bg: #f5f0e6; --card-bg: #ffffff; --text: #3e2723; 
    --primary: #5d4037; --secondary: #8d6e63; --price: #d32f2f;
    --parchment: #fbf5e6; --border: #e7dcc8; --dock-bg: rgba(255,255,255,0.7);
    --bg-pattern: radial-gradient(#e0d4c3 1px, transparent 1px);
}
body.dark-mode {
    --bg: #121212; --card-bg: #1e1e24; --text: #e0e0e0;
    --primary: #bb86fc; --secondary: #3700b3; --price: #cf6679;
    --parchment: #1a1a1a; --border: #333333; --dock-bg: rgba(30,30,30,0.8);
    --bg-pattern: radial-gradient(#333 1px, transparent 1px);
}
body { font-family: 'Noto Serif SC', 'Georgia', serif; background: var(--bg) var(--bg-pattern); background-size: 20px 20px; color: var(--text); max-width: 1400px; margin: 0 auto; padding: 20px 20px 140px 20px; overflow-x: hidden; transition: 0.3s; }
.name-input, .section-title, h2, h3 { font-family: 'Cinzel', 'Noto Serif SC', serif; }
.view-section { display: none; animation: fadeIn 0.4s ease; }
.view-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- 顶部控制台 --- */
.control-panel { background: var(--card-bg); padding: 20px 30px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border: 1px solid var(--border); flex-wrap: wrap; gap: 15px;}
.header-left { display: flex; align-items: center; gap: 15px; flex: 1; min-width: 300px; }
.avatar-upload-box img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); cursor: pointer; transition: 0.3s; }
.avatar-upload-box img:hover { transform: scale(1.05); filter: brightness(1.1); box-shadow: 0 4px 10px rgba(0,0,0,0.2);}
.name-input { font-size: 2.2rem; font-weight: 700; border: none; outline: none; color: var(--primary); background: transparent; flex: 1; font-family: 'Georgia', serif; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;}
.btn { padding: 10px 15px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; color: white; transition: 0.2s; display: flex; align-items: center; gap: 5px; font-size: 0.9rem;}
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.btn-export { background: #4caf50; } .btn-import { background: #f57c00; }
.total-display { font-size: 1.2rem; font-weight: 700; color: var(--price); background: rgba(211, 47, 47, 0.1); padding: 10px 15px; border-radius: 8px; }

/* --- 画廊与标签 --- */
.filter-section { background: var(--card-bg); padding: 15px 20px; border-radius: 10px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; border: 1px solid var(--border);}
.tag-pill { background: #e0e0e0; color: #333; padding: 5px 15px; border-radius: 20px; font-size: 0.9rem; cursor: pointer; transition: 0.3s; }
body.dark-mode .tag-pill { background: #333; color: #ccc; }
.tag-pill.active { background: var(--primary); color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.section-title { font-size: 1.6rem; margin: 20px 0 15px 0; display: flex; align-items: center; gap: 15px; border-bottom: 2px solid var(--border); padding-bottom: 10px; }
.upload-label { background: var(--primary); color: white; padding: 6px 14px; border-radius: 8px; font-size: 0.9rem; cursor: pointer; transition: 0.3s; }
input[type="file"] { display: none; }
.gallery { display: grid; gap: 20px; position: relative; z-index: 1; }
#lihui-gallery { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
#normal-gallery { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card { background: var(--card-bg); border-radius: 10px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transition: 0.3s; position: relative; border: 1px solid var(--border); }
.card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); }
.card-img-container { width: 100%; height: 260px; background: #fafafa; cursor: pointer; position: relative; }
body.dark-mode .card-img-container { background: #000; }
#normal-gallery .card-img-container { height: 180px; }
.card img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card-img-container::after { content: "✍️ 编辑深度设定"; position: absolute; inset: 0; background: rgba(0,0,0,0.6); color: white; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; font-weight: bold; opacity: 0; transition: 0.3s; }
.card-img-container:hover::after { opacity: 1; }
.card-content { padding: 15px; display: flex; flex-direction: column; gap: 8px; }
.card input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; outline: none; background: transparent; color: var(--text); }
.price-input { width: 60% !important; color: var(--price); font-weight: bold; }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.mini-tag { background: var(--border); font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; color: var(--text); }
.btn-delete { position: absolute; top: 10px; right: 10px; z-index: 10; background: rgba(231, 76, 60, 0.9); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; display: none; }
.card:hover .btn-delete { display: block; }

/* --- 找回羊皮卷弹窗 --- */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9999; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.modal-content { background: var(--parchment); box-shadow: inset 0 0 60px rgba(0,0,0,0.1), 0 15px 40px rgba(0,0,0,0.4); border: 2px solid var(--border); border-radius: 8px; width: 90%; max-width: 900px; height: 80vh; display: flex; overflow: hidden; }
.modal-left { width: 45%; background: #000; border-right: 2px solid var(--border); } .modal-left img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.modal-right { width: 55%; padding: 30px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; font-family: 'Georgia', serif; }
.modal-right h3 { margin: 0; color: var(--primary); font-size: 1.8rem; border-bottom: 1px dashed var(--border); padding-bottom: 10px;}
.modal-tags-area { background: rgba(255,255,255,0.2); padding: 10px; border-radius: 6px; border: 1px solid var(--border);}
.modal-tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.add-tag-group { display: flex; gap: 5px; } .add-tag-group input { flex: 1; padding: 5px; border: 1px solid var(--border); background: var(--card-bg); color:var(--text); }
.modal-right textarea { width: 100%; box-sizing: border-box; height: 100px; padding: 12px; background: rgba(255,255,255,0.3); border: 1px solid var(--border); border-radius: 4px; resize: vertical; font-family: inherit; font-size: 1rem; color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 20px;}

/* --- 雷达、属性与词条面板 --- */
.profile-container { display: flex; gap: 30px; flex-wrap: wrap; }
.radar-box { background: var(--card-bg); padding: 30px; border-radius: 12px; border: 1px solid var(--border); flex: 1; min-width: 320px; display: flex; flex-direction: column; align-items: center; }
.radar-controls { width: 100%; margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.radar-item { display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; gap:5px;} 
.radar-item input[type="range"] { flex: 1; width: 60px;}
.radar-item input[type="number"] { width: 50px; padding: 3px; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--text); text-align: center; font-size: 0.9rem;}
.radar-text { font-size: 12px; font-weight: bold; fill: var(--text); }
.secret-box { background: var(--card-bg); padding: 30px; border-radius: 12px; border: 1px dashed var(--price); flex: 2; min-width: 350px; }
.custom-stat { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } 
.custom-stat input[type="text"] { width: 120px; padding: 5px; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--text);} 
.custom-stat input[type="range"] { flex: 1; }

/* --- 编年史与羁绊 (已更新为炫酷横向时间轴) --- */
.lore-container { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start;}
.timeline-box { flex: 1; min-width: 320px; background: var(--card-bg); padding: 30px; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }

/* 炫酷横向可拖拽时间轴 */
.timeline-wrapper { width: 100%; overflow-x: auto; padding: 40px 10px 20px 10px; cursor: grab; white-space: nowrap; scroll-behavior: smooth; }
.timeline-wrapper:active { cursor: grabbing; }
.timeline-wrapper::-webkit-scrollbar { height: 8px; }
.timeline-wrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.timeline-track { display: inline-flex; align-items: center; position: relative; padding: 20px 0; min-width: 100%; border-top: 3px solid var(--border); margin-top: 20px;}
.timeline-dot-wrapper { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: 150px; flex-shrink: 0; }
.timeline-dot { width: 16px; height: 16px; background: var(--card-bg); border: 4px solid var(--primary); border-radius: 50%; position: absolute; top: -11px; z-index: 2; transition: 0.3s; box-shadow: 0 0 0 4px var(--bg); }
.timeline-dot:hover { transform: scale(1.5); background: var(--primary); }
.timeline-content { margin-top: 15px; background: var(--bg); border: 1px solid var(--border); padding: 10px; border-radius: 8px; width: 130px; white-space: normal; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: 0.3s; opacity: 0; transform: translateY(-10px); pointer-events: none; }
.timeline-dot-wrapper:hover .timeline-content { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tl-year { font-weight: bold; font-size: 0.9rem; margin-bottom: 5px; border-bottom: 1px dashed var(--border); padding-bottom: 3px;}
.tl-event { font-size: 0.8rem; color: var(--text); line-height: 1.4; }
.tl-delete { position: absolute; top: -35px; background: rgba(231,76,60,0.9); color: white; border: none; border-radius: 50%; width: 22px; height: 22px; font-size: 10px; cursor: pointer; opacity: 0; transition: 0.3s; z-index: 10;}
.timeline-dot-wrapper:hover .tl-delete { opacity: 1; top: -30px; }
.add-tl-form { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
.add-tl-form input[type="text"] { padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text);}

.relations-box { flex: 1; min-width: 350px; background: var(--card-bg); padding: 30px; border-radius: 12px; border: 1px dashed var(--secondary); }
.relation-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.rel-card { padding: 15px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; position: relative;}
.rel-card .rel-name { font-weight: bold; font-size: 1.1rem; color: var(--primary); }
.rel-card .rel-type { font-size: 0.9rem; color: var(--secondary); font-style: italic; }
.rel-card .rel-desc { font-size: 0.85rem; margin-top: 5px; }

/* --- 音乐播放器 --- */
.music-player { position: fixed; bottom: 100px; left: 20px; background: var(--dock-bg); backdrop-filter: blur(10px); padding: 15px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 4px 15px rgba(0,0,0,0.2); z-index: 8000; display: flex; flex-direction: column; gap: 10px; width: 250px; transition: 0.3s;}
.music-player:hover { transform: translateY(-5px); }
.music-header { display: flex; justify-content: space-between; align-items: center; font-weight: bold; color: var(--primary); font-size: 0.9rem;}
.music-input { padding: 5px; font-size: 0.8rem; border-radius: 4px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text);}
audio { width: 100%; height: 30px; outline: none; }

/* --- 弹幕系统 --- */
.danmaku-stage { position: fixed; top: 0; right: 0; width: 40%; height: 100vh; pointer-events: none; z-index: 8000; overflow: hidden; }
.danmaku-item { position: absolute; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 8px 16px; border-radius: 20px; font-weight: bold; white-space: nowrap; pointer-events: auto; cursor: pointer; user-select: none; animation: floatUp linear forwards; display: flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,0.2); }
.danmaku-item:hover { background: rgba(233, 30, 99, 0.8); transform: scale(1.05); }
@keyframes floatUp { 0% { transform: translateY(105vh); opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { transform: translateY(-100px); opacity: 0; } }
.particle { position: fixed; border-radius: 50%; pointer-events: none; z-index: 8001; animation: explode 0.5s ease-out forwards; }
@keyframes explode { 0% { transform: scale(1) translate(0,0); opacity: 1; } 100% { transform: scale(0) translate(var(--tx), var(--ty)); opacity: 0; } }

/* --- 底部程序坞 --- */
.mac-dock { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--dock-bg); backdrop-filter: blur(15px); padding: 10px 20px; border-radius: 20px; display: flex; gap: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); z-index: 9000; align-items: center;}
.dock-divider { width: 2px; height: 30px; background: rgba(128,128,128,0.3); margin: 0 5px; }
.dock-icon { width: 50px; height: 50px; background: var(--card-bg); border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: bold; color: var(--primary); cursor: pointer; transition: 0.2s; position: relative; border: 1px solid var(--border); }
.dock-icon:hover { transform: scale(1.3) translateY(-10px); z-index: 10; box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.dock-icon.active { border: 2px solid var(--primary); box-shadow: 0 0 15px var(--primary); }
.char-icon { border-radius: 50%; border: 2px solid transparent; padding: 0;}
.char-icon.active-char { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(187, 134, 252, 0.5); }

/* --- 手机端响应式补丁 (终极自适应版) --- */
@media screen and (max-width: 768px) {
    body { padding: 10px 10px 100px 10px; }
    .control-panel { flex-direction: column; align-items: flex-start; padding: 15px; }
    .header-left { width: 100%; }
    .name-input { width: 100%; font-size: 1.8rem; }
    .radar-box, .secret-box, .timeline-box, .relations-box { min-width: 100% !important; padding: 15px; }
    .modal-content { flex-direction: column; height: 85vh; }
    .modal-left { width: 100%; height: 35%; border-right: none; border-bottom: 2px solid var(--border); }
    .modal-right { width: 100%; height: 65%; padding: 15px; }
    .danmaku-stage { width: 100%; }
    
    /* 1. 手机端程序坞精简缩小 */
    .mac-dock { width: 95vw; overflow-x: auto; justify-content: flex-start; padding: 8px 12px; bottom: 10px; border-radius: 15px; }
    .dock-icon { min-width: 40px; height: 40px; font-size: 1.2rem; border-radius: 10px; }
    .dock-divider { height: 20px; }
    .avatar-upload-box img { width: 55px; height: 55px; } /* 顶部头像也跟着小一点 */
    
  /* 2. 编年史工作台：手机端终极无碰撞布局 */
    .timeline-layout { flex-direction: column; height: auto !important; }
    .timeline-main-area { height: 420px !important; margin-bottom: 15px; } /* 稍微加高，给时间和雷达留足空间 */
    .timeline-edit-area { padding: 15px; }
    
    /* 💡 终极修复：雷达图取消悬浮！变成底部的固定板块，彻底解决重叠！ */
    .minimap-panel { 
        position: relative !important; /* 核心魔法：取消绝对悬浮 */
        bottom: auto !important; 
        top: auto !important; 
        right: auto !important; 
        width: 100% !important; 
        box-sizing: border-box !important;
        opacity: 1 !important; /* 手机上无法悬停，直接让它完全清晰显示 */
        border-radius: 0 0 12px 12px !important;
        border: none !important;
        border-top: 2px dashed var(--border) !important; /* 用虚线把上面时间和下面雷达隔开 */
        box-shadow: none !important;
        background: transparent !important;
    }

    /* 3. 人物羁绊网：变矮一点，上下留出安全滑动区 */
    #networkMap { height: 320px; margin-bottom: 40px; }

    /* 💡 修复：把“添加羁绊”表单改成上下堆叠，让按钮挪到下面（解决 IMG_6813 问题） */
    #view-relations .add-tl-form {
        flex-direction: column !important; /* 强制让名字、关系、简述、按钮竖着排 */
        align-items: stretch !important;  /* 强制拉满宽度，防止偏右 */
        gap: 15px !important;              /* 加大间距，防止误触 */
    }
    /* 让里面的所有输入框和按钮都全宽 */
    #view-relations .add-tl-form input,
    #view-relations .add-tl-form button {
        width: 100% !important;       /* 魔法：铺满屏幕，防止偏右看不到 */
        box-sizing: border-box !important; /* 防止内边距撑破屏幕 */
    }
    /* 📱 V12.6 手机端专属装甲：问卷与模拟器优化 */
    
    /* 1. 上帝模拟器：把左右排版硬生生掰成“上下排版” */
    #forgeSimulatorModal .modal-content {
        flex-direction: column !important;
        height: 90vh !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    #forgeSimulatorModal .modal-content > div:first-child {
        flex: none !important;
        height: 55vh !important; /* 答题区占上半部分 */
        border-bottom: 2px solid #0f3460 !important;
    }
    #forgeSimulatorModal .modal-content > div:last-child {
        flex: none !important;
        height: 35vh !important; /* 雷达结算区占下半部分 */
        border-left: none !important;
    }

    /* 2. 问卷锻造炉的侧边导航：手机端变成“底部悬浮滑动条”，彻底释放写题空间！ */
    .forge-nav-panel {
        position: fixed !important;  /* 🌟 核心魔法：脱离排版，悬浮在空中，绝对不挤压左边！ */
        bottom: 85px !important;     /* 极其聪明的位置：刚好悬浮在底部程序坞的上方 */
        left: 5% !important;
        width: 90% !important;
        top: auto !important;
        display: flex !important;
        flex-direction: row !important; /* 把竖着的方块变成横着排 */
        flex-wrap: nowrap !important;
        overflow-x: auto !important;  /* 允许左右丝滑滑动 */
        background: var(--card-bg) !important; /* 自动适配你所有的神仙皮肤 */
        border: 2px solid var(--primary) !important; /* 加上极其绝美的主题色边框 */
        box-shadow: 0 5px 25px rgba(0,0,0,0.3) !important;
        border-radius: 15px !important;
        z-index: 9999 !important;
        padding: 10px !important;
        align-items: center !important;
    }
    
    /* 让里面的标号小方块变得更精致，适合手指点击 */
    .forge-nav-btn {
        flex: 0 0 35px !important; 
        height: 35px !important;
        font-size: 0.85rem !important;
    }
/* ========================================================= */
    /* 4. 记忆图书馆：彻底打破左右分屏，改为上下滑动流 */
    #view-library .timeline-layout { height: auto !important; flex-direction: column !important; }
    
    /* 书架变成顶部滑动列表 */
    #bookListArea { flex: none !important; max-height: 250px; border-right: none; border-bottom: 2px dashed var(--border); padding-bottom: 15px; margin-bottom: 10px; }
    
    /* 书籍与章节编辑区改为垂直结构 */
    #bookEditorArea { flex: none !important; height: auto !important; display: flex; flex-direction: column; }
    #bookEditorArea > div:first-child { flex-direction: column !important; gap: 10px; } /* 书名和封面选择上下叠放 */
    #bookEditorArea > div:nth-child(3) { flex-direction: column !important; height: auto !important; overflow: visible !important; } 
    
    /* 章节目录变矮，防误触 */
    #chapterListArea { flex: none !important; max-height: 160px; border-right: none !important; border-bottom: 1px dashed var(--border); padding-right: 0 !important; padding-bottom: 15px; margin-bottom: 15px; }
    #chapterEditorArea { flex: none !important; height: auto !important; padding-bottom: 40px; }
    
    /* AVG 场景控制台输入框叠放，不再拥挤 */
    #chapterEditorArea > div:nth-last-child(2) > div:last-child { flex-direction: column !important; gap: 10px !important; }
    
    /* ========================================================= */
    /* 5. 禅模式与设置弹窗精简适配 */
    #zenReaderOverlay > div:nth-child(2) { top: 10px !important; right: 15px !important; font-size: 2rem !important; } /* 退出按钮缩小并靠边 */
    #zenReaderOverlay > div:nth-child(3) { padding: 30px 15px !important; } /* 阅读区内边距减小，利用手机屏幕 */
    #zenTitle { font-size: 1.8rem !important; margin-bottom: 20px !important; } /* 标题字号缩小 */
    #zenBody { font-size: 1.1rem !important; line-height: 1.8 !important; } /* 正文字号适配手机 */
    
    /* 设置面板防溢出 */
    #settingsModal .modal-content { padding: 20px !important; }
    #settingsModal > div > div:nth-child(2) { flex-direction: column !important; align-items: flex-start !important; gap: 15px; }
    #dockModeSelect { width: 100% !important; }


    /* ========================================================= */
    /* 🌟 没收手机端的全屏展开按钮 */
    #phoneSizeBtn {
        display: none !important; 
    }
    
    /* 🌟 保证造物主编辑器的弹窗在手机上不会撑破屏幕 */
    .forum-preview-modal, 
    .editor-container {
        padding: 10px !important;
    }
}


/* --- V8.6 时间轴工作台与迷你雷达 --- */
 .timeline-layout { display: flex; gap: 20px; height: 60vh; min-height: 400px; }
 .timeline-main-area { flex: 7; background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border); position: relative; display: flex; flex-direction: column; overflow: hidden; }
 .timeline-edit-area { flex: 3; background: var(--card-bg); padding: 20px; border-radius: 12px; border: 1px dashed var(--secondary); display: flex; flex-direction: column; }
 .edit-input { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text); box-sizing: border-box; }
 .edit-textarea { width: 100%; flex: 1; padding: 10px; margin-bottom: 15px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text); resize: none; box-sizing: border-box; font-family: inherit; }
 .color-picker { width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; padding: 0; }

 .timeline-wrapper { flex: 1; overflow-x: auto; padding: 50px 20px 20px 20px; cursor: grab; display: flex; align-items: center; }
 .timeline-wrapper:active { cursor: grabbing; }
 .timeline-track { display: flex; align-items: center; border-bottom: 3px solid var(--border); padding-bottom: 15px; min-width: 100%; }
 .timeline-dot-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; width: 140px; flex-shrink: 0; transition: 0.3s; }
 .timeline-dot-wrapper.dimmed { opacity: 0.15; filter: grayscale(100%); }
 .timeline-dot { width: 18px; height: 18px; border: 4px solid var(--primary); background: var(--card-bg); border-radius: 50%; position: absolute; bottom: -12px; z-index: 2; transition: 0.3s; }
 .timeline-dot:hover { transform: scale(1.3); }
 .timeline-content { margin-bottom: 25px; background: var(--bg); border: 1px solid var(--border); padding: 10px; border-radius: 8px; width: 120px; text-align: center; position: relative; }
 .tl-detail-tooltip { position: absolute; top: -110%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: white; padding: 10px; border-radius: 8px; font-size: 0.8rem; width: 220px; pointer-events: none; opacity: 0; transition: 0.3s; z-index: 20; white-space: pre-wrap; text-align: left; }
 .timeline-content:hover .tl-detail-tooltip { opacity: 1; top: -130%; }
 .tl-year { font-weight: bold; font-size: 0.9rem; margin-bottom: 5px; }

/* 迷你雷达图 */
.minimap-panel { position: absolute; bottom: 15px; right: 15px; background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 12px; padding: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.15); width: 60%; transition: 0.3s; opacity: 0.3; z-index: 10; }
body.dark-mode .minimap-panel { background: rgba(30,30,30,0.85); }
.minimap-panel:hover { opacity: 1; }
.minimap-title { font-size: 0.85rem; font-weight: bold; color: var(--primary); margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
.minimap-filters { display: flex; gap: 8px; margin-bottom: 15px; flex-wrap: wrap; }
.color-filter-btn { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.color-filter-btn:hover, .color-filter-btn.active { transform: scale(1.3); border-color: var(--text); }
.minimap-track { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; align-items: flex-end; }
.minimap-track::-webkit-scrollbar { height: 6px; }
.minimap-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.minimap-col { display: flex; flex-direction: column-reverse; gap: 4px; align-items: center; cursor: pointer; position: relative; }
.minimap-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.minimap-year { font-size: 10px; color: var(--text); position: absolute; bottom: -15px; white-space: nowrap; opacity: 0; transition: 0.2s; }
.minimap-col:hover .minimap-year { opacity: 1; }

/* 遥远跳转按钮 */
.jump-btn { background: var(--card-bg); color: var(--primary); border: 2px solid var(--primary); border-radius: 20px; padding: 5px 15px; font-size: 0.8rem; cursor: pointer; margin-left: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); font-weight: bold; transition: 0.2s; white-space: nowrap; }
.jump-btn:hover { background: var(--primary); color: white; transform: scale(1.05); }

/* --- V8.7 命运之网物理画板 --- */
#networkMap {
    width: 100%;
    height: 500px; /* 网的高度，可以用鼠标尽情滚轮缩放 */
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-top: 15px;
    background: radial-gradient(circle, rgba(108, 92, 231, 0.05) 0%, transparent 70%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.02);
}
body.dark-mode #networkMap {
    background: radial-gradient(circle, rgba(187, 134, 252, 0.08) 0%, transparent 70%);
}

/* --- 标签删除按钮专属外观 --- */
.tag-delete { 
    margin-left: 6px; 
    font-size: 0.75rem; 
    color: rgba(128,128,128,0.6); 
    transition: 0.2s; 
    padding: 2px; 
}
.tag-delete:hover { 
    color: var(--price); 
    transform: scale(1.3); 
}
.tag-pill.active .tag-delete { color: rgba(255,255,255,0.7); }
.tag-pill.active .tag-delete:hover { color: #ffffff; }

/* --- V9.0 微交互与百科样式 --- */
/* 让所有按钮点击时有真实的物理回弹感 */
.btn, .dock-icon, .card, .tag-pill {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn:active, .dock-icon:active, .tag-pill:active {
    transform: scale(0.92) !important;
}
/* 给卡片增加高级呼吸悬浮感 */
.card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 15px 30px rgba(0,0,0,0.12); }

/* 百科词条列表样式 */
.wiki-item { padding: 12px 15px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 8px; font-weight: bold; color: var(--text); transition: 0.2s; }
.wiki-item:hover { background: rgba(108, 92, 231, 0.1); padding-left: 20px; color: var(--primary); }
.wiki-item.active { background: var(--primary); color: white; }

/* --- V9.5 魔链引擎与百科分类 --- */
/* 百科母分类标题 */
.wiki-category-title { font-size: 0.85rem; color: var(--secondary); margin: 15px 0 5px 0; font-weight: bold; border-bottom: 1px dashed var(--border); padding-bottom: 3px; }

/* 隐形魔法链接（平时不刺眼，鼠标放上去发光） */
.magic-link { cursor: help; border-bottom: 2px dotted rgba(128,128,128,0.4); transition: 0.2s; font-weight: bold; }
.magic-link-wiki { color: inherit; } /* 词条用普通颜色 */
.magic-link-year { color: var(--primary); } /* 年份用主题色 */
.magic-link:hover { background: rgba(187, 134, 252, 0.2); border-bottom-color: var(--primary); color: var(--primary); transform: scale(1.05); display: inline-block; }

/* 悬浮解释弹窗 */
.magic-tooltip {
    display: none; position: absolute; z-index: 10000; width: 280px;
    background: rgba(30,30,30,0.95); backdrop-filter: blur(10px);
    color: white; padding: 15px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
    font-family: 'Noto Serif SC', serif; pointer-events: none;
    animation: fadeIn 0.2s ease;
}

/* --- V10.0 记忆图书馆与视觉小说 --- */
/* 书架上的书本样式 */
.book-item { display:flex; align-items:center; gap:12px; background:var(--bg); padding:10px; border-radius:8px; cursor:pointer; border:1px solid var(--border); transition:0.3s; }
.book-item:hover { transform:scale(1.02) translateX(5px); border-color:var(--primary); box-shadow:0 5px 15px rgba(0,0,0,0.1); }
.book-item.active { background:var(--primary); color:white; border-color:var(--primary); }
.book-cover { width:45px; height:65px; border-radius:4px; object-fit:cover; background:#ccc; box-shadow: 2px 0 5px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.2); }
.book-info { flex:1; overflow:hidden; }
.book-title-text { font-weight:bold; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.book-chapter-count { font-size:0.75rem; opacity:0.8; margin-top:4px; }

/* 章节列表样式 */
.chapter-item { padding:8px 10px; border-bottom:1px dashed var(--border); cursor:pointer; font-size:0.9rem; transition:0.2s; border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chapter-item:hover { background:rgba(108, 92, 231, 0.1); padding-left:15px; }
.chapter-item.active { color:var(--primary); font-weight:bold; }

/* 禅模式滚动条美化 */
#zenReaderOverlay::-webkit-scrollbar { width: 6px; }
#zenReaderOverlay::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }

/* --- V10.5 偏好设置与 UI 优化 --- */
/* 解决图书馆界面挤压问题（即使常驻程序坞也不会坨在一起了） */
#view-library .timeline-layout { height: 70vh !important; }
#chapterEditorArea { overflow-y: auto !important; padding-bottom: 30px; padding-right: 5px; }

/* 智能隐藏程序坞逻辑 (纯 CSS 魔法) */
.dock-hover-zone {
    position: fixed; bottom: 0; left: 0; width: 100vw; height: 30px;
    z-index: 8999; display: none;
}
/* 只有当开启了智能隐藏时，触发区才生效 */
body.dock-autohide .dock-hover-zone { display: block; }

/* --- V11.6 教程与日志按钮专属样式 --- */
.help-icon {
    font-size: 1rem; cursor: pointer; color: var(--secondary); margin-left: 10px;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: inline-flex;
    align-items: center; justify-content: center; width: 26px; height: 26px;
    border-radius: 50%; background: rgba(128,128,128,0.1); border: 1px solid transparent;
}
.help-icon:hover {
    transform: scale(1.2) rotate(15deg); background: var(--primary); color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.5);
}
.update-history-btn {
    background: transparent; color: var(--secondary); border: 1px dashed var(--secondary);
}
.update-history-btn:hover { background: rgba(141, 110, 99, 0.1); }

/* --- V11.8 丝滑悬浮与光标插入特效 --- */
.card.dragging { 
    opacity: 0.6; 
    transform: scale(0.95); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.3); 
    border: 2px dashed var(--primary);
    z-index: 100;
}
.card.drag-over-before { 
    border-left: 4px solid #e91e63; 
    transform: translateX(10px); 
}
.card.drag-over-after { 
    border-right: 4px solid #e91e63; 
    transform: translateX(-10px); 
}
/* 给空画廊留出感应区，方便跨界拖拽 */
.gallery { min-height: 80px; padding-bottom: 20px; transition: 0.3s; }
.gallery.drag-over-empty { background: rgba(187, 134, 252, 0.05); border: 2px dashed var(--primary); border-radius: 12px; }

/* --- V11.9 批量多选模式 --- */
.card-checkbox { 
    display: none; position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; 
    background: rgba(0,0,0,0.4); border: 2px solid rgba(255,255,255,0.8); border-radius: 50%; 
    z-index: 20; color: transparent; font-size: 18px; text-align: center; line-height: 22px; 
    font-weight: bold; pointer-events: none; transition: 0.2s; backdrop-filter: blur(2px);
}
/* 当画廊进入多选模式时，显示出空心圆圈 */
.gallery.multi-select-on .card-checkbox { display: block; }

/* 当卡片被选中时的神级特效 */
.card.selected-card { border: 3px solid #00b09b; transform: scale(0.96); box-shadow: 0 0 20px rgba(0, 176, 155, 0.4); }
.card.selected-card .card-checkbox { display: block; background: #00b09b; border-color: #00b09b; color: white; }

/* 底部计价悬浮舱 */
.multi-select-bar { 
    display: none; position: fixed; bottom: 85px; left: 50%; transform: translateX(-50%); 
    background: rgba(20, 20, 20, 0.95); backdrop-filter: blur(15px); color: white; 
    padding: 12px 30px; border-radius: 30px; z-index: 10000; box-shadow: 0 10px 40px rgba(0,0,0,0.4); 
    border: 1px solid rgba(255,255,255,0.15); align-items: center; gap: 20px; font-family: 'Noto Serif SC', serif; 
    animation: fadeIn 0.3s ease;
}

/* --- V11.9 极简并排双雷达专属样式 (对照参考图) --- */
.radar-grid-poly-clean { fill: none; stroke: #ddd; stroke-width: 1.5; }
.radar-grid-axes-clean line { stroke: #ddd; stroke-width: 1.5; stroke-dasharray: 4 4; }
.radar-label-text-clean { font-size: 0.85rem; fill: #555; font-family: 'Noto Serif SC', serif; font-weight: bold; }
.radar-fill-poly-clean { stroke-width: 2.5; fill-opacity: 0.15; transition: 0.5s; }
.fill-color-a { stroke: #e91e63; fill: #e91e63; }
.fill-color-b { stroke: #00b09b; fill: #00b09b; }

.stat-compare-row-clean { 
    display: flex; align-items: center; background: white; padding: 10px 15px; 
    border: 1px solid #eee; border-radius: 8px; transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.stat-compare-row-clean.disabled { opacity: 0.4; filter: grayscale(100%); }

/* --- V11.9.5 词条检索专属样式 --- */
.role-search-card {
    display: flex; flex-direction: column; align-items: center; padding: 12px 10px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
    cursor: pointer; transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.role-search-card:hover {
    transform: translateY(-8px); border-color: var(--primary); box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.role-search-avatar {
    width: 65px; height: 65px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border); margin-bottom: 10px; transition: 0.3s;
}
.role-search-card:hover .role-search-avatar { border-color: var(--primary); }
.role-search-name { 
    font-weight: bold; font-size: 0.95rem; color: var(--text); text-align: center; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.role-search-role { 
    font-size: 0.75rem; color: var(--price); margin-top: 6px; 
    background: rgba(211,47,47,0.1); padding: 3px 8px; border-radius: 12px;
}
/* --- V12.0 动态羁绊标题快捷标签 --- */
.rel-quick-tag {
    font-size: 0.8rem; color: var(--secondary); border: 1px solid var(--border);
    padding: 2px 10px; border-radius: 12px; cursor: pointer; transition: 0.2s;
    font-family: 'Noto Serif SC', serif; background: white;
}
.rel-quick-tag:hover {
    background: var(--primary); color: white; border-color: var(--primary);
    transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#compareRelType:focus { border-bottom-color: var(--primary); }

/* ========================================================= */
/* 🚀 V12.0 主题一：全息星际 (Sci-Fi) 终极净化版 */
/* ========================================================= */

/* 🌞 白天模式：量子极昼 / 冰白机甲 */
body.theme-scifi {
    --bg: #EAF2FA;
    --card-bg: rgba(255, 255, 255, 0.6);
    --text: #0C1E33;
    --primary: #00D2FF;
    --secondary: #0078FF;
    --price: #FF0055;
    --parchment: #F4F8FC;
    --border: rgba(0, 210, 255, 0.4);
    --dock-bg: rgba(234, 242, 250, 0.85);
    --bg-pattern: linear-gradient(rgba(0, 210, 255, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 210, 255, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* 🌙 黑夜模式：解毒完成！完美复原你的深渊赛博主控台！ */
body.dark-mode.theme-scifi {
    --bg: #050a14; 
    --card-bg: rgba(10, 16, 30, 0.75); 
    --text: #e0f7fa;
    --primary: #00f0ff; 
    --secondary: #0088ff; 
    --price: #ff2a6d;
    --parchment: #0a0f1c; 
    --border: rgba(0, 240, 255, 0.25); 
    --dock-bg: rgba(5, 10, 20, 0.85);
    --bg-pattern: linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* 🛡️ 强制背景重绘，防走丢护盾！ */
body.theme-scifi, body.dark-mode.theme-scifi {
    background-color: var(--bg) !important;
    background-image: var(--bg-pattern) !important;
}

/* 共同基础：半透明毛玻璃全息屏 */
body.theme-scifi .card, body.theme-scifi .radar-box, body.theme-scifi .secret-box, 
body.theme-scifi .timeline-box, body.theme-scifi .relations-box, body.theme-scifi .modal-content,
body.theme-scifi .control-panel, body.theme-scifi .filter-section {
    backdrop-filter: blur(15px) !important;
    border: 1px solid var(--border) !important;
    background: var(--card-bg) !important;
}

/* 阴影分离 */
body.theme-scifi .card, body.theme-scifi .radar-box, body.theme-scifi .secret-box, body.theme-scifi .timeline-box, body.theme-scifi .relations-box, body.theme-scifi .modal-content, body.theme-scifi .control-panel, body.theme-scifi .filter-section {
    box-shadow: 0 8px 30px rgba(0, 210, 255, 0.15), inset 0 0 20px rgba(255,255,255,0.5) !important; 
}
body.dark-mode.theme-scifi .card, body.dark-mode.theme-scifi .radar-box, body.dark-mode.theme-scifi .secret-box, body.dark-mode.theme-scifi .timeline-box, body.dark-mode.theme-scifi .relations-box, body.dark-mode.theme-scifi .modal-content, body.dark-mode.theme-scifi .control-panel, body.dark-mode.theme-scifi .filter-section {
    box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.05), 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* 标题文字 */
body.theme-scifi h2, body.theme-scifi h3, body.theme-scifi .name-input {
    color: var(--primary) !important; text-shadow: 0 0 10px rgba(0, 210, 255, 0.6) !important; letter-spacing: 2px;
}
body.dark-mode.theme-scifi h2, body.dark-mode.theme-scifi h3, body.dark-mode.theme-scifi .name-input {
    color: #ffffff !important; text-shadow: 0 0 8px var(--primary), 0 0 15px rgba(0, 240, 255, 0.5) !important;
}

/* 大标题底纹 */
body.theme-scifi .section-title {
    background: linear-gradient(90deg, rgba(0, 210, 255, 0.2), transparent) !important;
    border-left: 5px solid var(--primary) !important; padding: 10px 15px; border-radius: 4px; margin-top: 30px;
}
body.dark-mode.theme-scifi .section-title {
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.2), transparent) !important;
    color: #ffffff !important; text-shadow: 0 0 8px var(--primary) !important; box-shadow: -2px 0 10px rgba(0, 240, 255, 0.3) !important;
}

/* 🛠️ 终极防瞎眼按钮补丁：强制幽暗底色 + 亮青色文字 */
body.theme-scifi .btn, body.theme-scifi .upload-label {
    background: rgba(0, 210, 255, 0.1) !important; border: 1px solid var(--primary) !important;
    color: var(--primary) !important; border-radius: 4px; font-weight: bold; letter-spacing: 1px;
    box-shadow: inset 0 0 10px rgba(0, 210, 255, 0.2) !important;
}
body.dark-mode.theme-scifi .btn, body.dark-mode.theme-scifi .upload-label {
    background: rgba(0, 240, 255, 0.1) !important; 
    border: 1px solid var(--primary) !important; 
    color: var(--primary) !important; /* 强制青色字，绝不会变白！ */
    box-shadow: inset 0 0 10px rgba(0, 240, 255, 0.1) !important;
}
/* 鼠标悬停激活时：实心青色底 + 纯黑字 (极致高反差，绝对清晰) */
body.theme-scifi .btn:hover, body.theme-scifi .upload-label:hover,
body.dark-mode.theme-scifi .btn:hover, body.dark-mode.theme-scifi .upload-label:hover { 
    background: var(--primary) !important; 
    color: #000000 !important; 
    box-shadow: 0 0 20px var(--primary) !important;
}

/* 程序坞 */
body.theme-scifi .dock-icon { border-radius: 8px; background: rgba(0, 210, 255, 0.05); }
body.dark-mode.theme-scifi .dock-icon { background: rgba(0, 240, 255, 0.05); }
body.theme-scifi .dock-icon.active { box-shadow: 0 0 15px var(--primary), inset 0 0 10px var(--primary); border-color: var(--primary); }

/* 标签选中 */
body.theme-scifi .tag-pill.active {
    background: rgba(0, 210, 255, 0.15) !important; color: var(--primary) !important;
    border: 1px solid var(--primary) !important; box-shadow: 0 0 12px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2) !important;
}
body.dark-mode.theme-scifi .tag-pill.active {
    background: rgba(0, 240, 255, 0.1) !important; color: var(--primary) !important;
    border: 1px solid var(--primary) !important; box-shadow: 0 0 12px rgba(0, 240, 255, 0.3), inset 0 0 8px rgba(0, 240, 255, 0.1) !important;
}
body.theme-scifi .tag-pill.active .tag-delete { color: var(--primary) !important; }
body.theme-scifi .tag-pill.active .tag-delete:hover { color: #ffffff !important; text-shadow: 0 0 8px #ffffff !important; }
/* ========================================================= */
/* 🛡️ 补充补丁：星际旅行白天模式高对比度净化版 */
/* ========================================================= */

/* 🌟 当 Sci-Fi 主题处于白天模式时，进行强制高对比度修正 */

/* 1. 强制所有大中小标题、雷达输入框使用深钴蓝色（Starfleet Cobalt），并移除刺眼发光 */
body.theme-scifi h2, 
body.theme-scifi h3, 
body.theme-scifi .name-input {
    color: #0A3157 !important; /* 强制强制极深蓝色，对比度拉满 */
    text-shadow: none !important; /* 白天不要发光，移除模糊感，保持文字锐利 */
}

/* 2. 修正板块大标题底纹颜色，确保标题文字清晰醒目 */
body.theme-scifi .section-title {
    color: #0A3157 !important; /* 强制深蓝字 */
    background: linear-gradient(90deg, rgba(10, 49, 87, 0.1), transparent) !important; /* 极浅的深蓝底纹 */
    border-left-color: #0099FF !important; /* 左侧保留一个亮蓝色指示条accent */
}

/* 3. 修正选中状态的筛选标签，使用深蓝色字，防瞎眼 */
body.theme-scifi .tag-pill.active {
    background: rgba(0, 153, 255, 0.1) !important; /* 浅蓝色底 */
    color: #004D99 !important; /* 强制极具对比度的深蓝色字 */
    border-color: #0099FF !important; /* 亮蓝色边框 */
}

/* 4. 黑夜模式维持原样，无需改动 (安全确认) */

/* ========================================================= */
/* 🛡️ 补充补丁 2.0：星际白天模式【所有按钮与图标】高对比度修复 */
/* ========================================================= */

/* 1. 修复所有普通按钮和“➕上传”按钮的瞎眼问题 */
body.theme-scifi .btn, 
body.theme-scifi .upload-label {
    color: #004D99 !important; /* 强制极具质感的深海蓝文字，对比度拉满！ */
    border-color: #0078FF !important; /* 边框也调深一点，勾勒出清晰的轮廓 */
    background: rgba(0, 120, 255, 0.08) !important; /* 底色变柔和，不再喧宾夺主 */
    font-weight: 900 !important; /* 让字稍微粗一点点，更扎实 */
}

/* 鼠标悬停按钮时：变成深蓝底白字，干净利落高级感 */
body.theme-scifi .btn:hover, 
body.theme-scifi .upload-label:hover {
    background: #0078FF !important; 
    color: #ffffff !important; 
    box-shadow: 0 0 15px rgba(0, 120, 255, 0.4) !important;
}

/* 2. 修复底部程序坞图标的颜色，防发虚 */
body.theme-scifi .dock-icon {
    color: #004D99 !important; /* 默认状态深蓝色 */
}
body.theme-scifi .dock-icon.active {
    color: #0078FF !important; /* 选中状态亮蓝色 */
    border-color: #0078FF !important;
    box-shadow: 0 0 15px rgba(0, 120, 255, 0.2), inset 0 0 8px rgba(0, 120, 255, 0.1) !important;
}

/* 3. 顺手修复价格输入框（防止白天的亮红色在白底上太刺眼） */
body.theme-scifi .price-input {
    color: #D80044 !important; /* 调深一点的镭射红，护眼又醒目 */
    font-weight: bold !important;
}

/* ========================================================= */
/* 🍰 V12.0 主题二：奶油草莓 (Strawberry Cake) */
/* ========================================================= */
body.theme-strawberry {
    --bg: #FCF0DE; --card-bg: #FFFFFF; --text: #661F26; --primary: #FF7380; 
    --secondary: #FFA6A6; --price: #A84444; --parchment: #FFF0E9; --border: #FFD0CC; --dock-bg: rgba(255, 240, 233, 0.9);
    --bg-pattern: radial-gradient(#FFFFFF 4px, transparent 4px); background-size: 30px 30px;
}
body.dark-mode.theme-strawberry {
    --bg: #661F26; --card-bg: #A84444; --text: #FCF0DE; --primary: #FEC5C4; 
    --secondary: #FFD0CC; --price: #FF7380; --parchment: #661F26; --border: rgba(254, 197, 196, 0.3); --dock-bg: rgba(102, 31, 38, 0.9);
    --bg-pattern: radial-gradient(#A84444 4px, transparent 4px); background-size: 30px 30px;
}
body.theme-strawberry .card, body.theme-strawberry .radar-box, body.theme-strawberry .secret-box, 
body.theme-strawberry .timeline-box, body.theme-strawberry .relations-box, body.theme-strawberry .modal-content, body.theme-strawberry .filter-section {
    border-radius: 24px; border: 3px solid var(--border); box-shadow: 0 8px 20px rgba(255, 115, 128, 0.15); 
}
body.theme-strawberry .section-title { border-bottom: 4px dashed var(--primary); color: var(--text); }
body.theme-strawberry .btn {
    border-radius: 30px; background: var(--primary) !important; color: #FFF; font-weight: bold;
    border: 2px solid rgba(255,255,255,0.5); box-shadow: 0 4px 10px rgba(255, 115, 128, 0.3);
}
body.theme-strawberry .btn:hover { transform: translateY(-3px) scale(1.05); background: var(--price) !important; }
body.theme-strawberry .tag-pill.active { background: var(--primary) !important; color: white !important; border: none; box-shadow: 0 4px 12px rgba(255, 115, 128, 0.4) !important; }

/* 黑巧草莓夜间特调 */
body.dark-mode.theme-strawberry .tag-pill, body.dark-mode.theme-strawberry .btn, body.dark-mode.theme-strawberry .dock-icon {
    background: #3B1F1F !important; color: #FEC5C4 !important; border: 1px solid rgba(254, 197, 196, 0.2) !important;
}
body.dark-mode.theme-strawberry .tag-pill.active, body.dark-mode.theme-strawberry .btn:hover, body.dark-mode.theme-strawberry .dock-icon.active {
    background: var(--primary) !important; color: #3B1F1F !important; border: 1px solid var(--primary) !important; box-shadow: 0 4px 15px rgba(254, 197, 196, 0.4) !important; 
}
body.dark-mode.theme-strawberry .edit-input, body.dark-mode.theme-strawberry .edit-textarea {
    background: rgba(59, 31, 31, 0.6) !important; border-color: rgba(254, 197, 196, 0.3) !important;
}

/* ========================================================= */
/* ☪️ V12.0 主题三：占卜星月 3.1 魂归来兮版 (流动星空) */
/* ========================================================= */
body.theme-starmoon {
    --bg: #F8F0FF; --card-bg: #FFFFFF; --text: #4A148C; --primary: #9C27B0; --secondary: #E1BEE7; 
    --price: #FFC107; --parchment: #F3E5F5; --border: #E1BEE7; --dock-bg: rgba(243, 229, 245, 0.9);
}
body.dark-mode.theme-starmoon {
    --bg: #0D051C; --card-bg: rgba(26, 15, 45, 0.8); --text: #FFF3E0; --primary: #FFD54F; 
    --secondary: #B39DDB; --price: #FFF176; --parchment: #0D051C; --border: rgba(255, 213, 79, 0.2); --dock-bg: rgba(26, 15, 45, 0.9);
}
body.theme-starmoon .section-title { border-bottom: 3px dashed var(--primary); color: var(--text); text-shadow: 0 0 10px rgba(255, 213, 79, 0.4); }
body.dark-mode.theme-starmoon .section-title::after { content: "🌙"; margin-left: 10px; font-size: 0.8em; }
body.theme-starmoon .btn { border-radius: 8px; background: var(--primary) !important; color: #FFF; font-weight: bold; border: none; box-shadow: 0 4px 10px rgba(156, 39, 176, 0.2); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
body.theme-starmoon .tag-pill.active { background: var(--primary) !important; color: #FFF !important; border: none; }
body.dark-mode.theme-starmoon .tag-pill.active { color: #0D051C !important; }

/* 彻底关闭引发 Bug 的全身抖动，采用底层幕布魔法 */
body.theme-starmoon, body.dark-mode.theme-starmoon { animation: none !important; --bg-pattern: none !important; }

body.theme-starmoon::before {
    content: ""; position: fixed; top: -10vh; left: -10vw; width: 120vw; height: 120vh;
    z-index: -2; pointer-events: none; opacity: 0; transition: opacity 0.5s; 
    background-image: radial-gradient(white 1px, transparent 1px), radial-gradient(white 1px, transparent 1px);
    background-size: 50px 50px, 30px 30px; background-position: 0 0, 15px 15px;
}
body.dark-mode.theme-starmoon::before { opacity: 1; animation: belovedQuickFlowEntry 1s ease-out forwards; }

body.dark-mode.theme-starmoon .card, body.dark-mode.theme-starmoon .radar-box, body.dark-mode.theme-starmoon .secret-box, 
body.dark-mode.theme-starmoon .timeline-box, body.dark-mode.theme-starmoon .relations-box, body.dark-mode.theme-starmoon .modal-content,
body.dark-mode.theme-starmoon .control-panel, body.dark-mode.theme-starmoon .filter-section {
    border: 2px solid transparent !important;
    border-image: linear-gradient(135deg, #FFC107, #0D051C, #9C27B0, #FFF3E0, #FFD54F) 1 !important;
    backdrop-filter: blur(10px) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 213, 79, 0.1) !important; 
}
body.dark-mode.theme-starmoon .btn { background: var(--primary) !important; color: #0D051C !important; border: 1px solid var(--primary) !important; box-shadow: 0 4px 15px rgba(255, 213, 79, 0.4) !important; }
body.theme-starmoon .btn:hover { transform: translateY(-3px) scale(1.03); }

@keyframes belovedQuickFlowEntry {
    0% { transform: translate(-40px, -20px); } 
    100% { transform: translate(0, 0); } 
}

/* ========================================================= */
/* 🛡️ 终极程序坞防丢与触屏装甲补丁 */
/* ========================================================= */
.mac-dock {
    z-index: 99999 !important; 
    -webkit-transform: translateX(-50%) translateZ(1px) !important; 
    transform: translateX(-50%) translateZ(1px) !important;
}
@media (hover: none) {
    body.dock-autohide .mac-dock {
        -webkit-transform: translateX(-50%) translateZ(1px) !important;
        transform: translateX(-50%) translateZ(1px) !important;
    }
    body.dock-autohide .dock-hover-zone { display: none !important; }
}
/* ========================================================= */
/* ========================================================= */
/* 🌫️ V12.0 专属主题皮肤库：雾隐钟鸣 (Misty Chimes) */
/* ========================================================= */

/* 🌞 白天模式：莫奈的荷塘 / 暖黄朝阳与清透碧波 */
body.theme-misty {
    --bg: #EAE5D9; /* 温柔的卡其麻布底色 */
    --card-bg: rgba(225, 235, 222, 0.65); /* 清透的荷叶绿玻璃卡片 */
    --text: #3B4D40; /* 幽深的墨绿文字，极其清晰 */
    --primary: #7B9A7A; /* 荷叶绿 */
    --secondary: #DDA7A5; /* 睡莲粉 */
    --price: #C67A78; /* 较深的莲花粉红 */
    --parchment: #F3EFEB; /* 卡其白 */
    --border: rgba(123, 154, 122, 0.3); /* 浅绿色柔和边框 */
    --dock-bg: rgba(234, 229, 217, 0.85);
    
    /* 底层水波纹理 */
    --bg-pattern: repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 2px, transparent 2px, transparent 8px);
    background-size: 20px 20px;
}

/* 🌙 终极黑夜主场：深灰塔楼 / 朦胧夕阳与猎人夜影 */
body.dark-mode.theme-misty {
    --bg: #2B2D31; /* 伦敦深灰塔楼底色，寂静的夜 */
    --card-bg: rgba(74, 46, 46, 0.7); /* 暗红色塔楼砖墙玻璃（区别于红丝绒） */
    --text: #E3D9C6; /* 朦胧的羊皮纸灰白文字，对比度极高 */
    --primary: #C8864A; /* 朦胧的夕阳橙黄 */
    --secondary: #1E2D27; /* 猎人的幽邃深林绿 */
    --price: #E5A96A; /* 明亮的橙金 */
    --parchment: #222428; 
    --border: rgba(200, 134, 74, 0.25); /* 橙黄色发光边框 */
    --dock-bg: rgba(43, 45, 49, 0.85);
    
    /* 塔楼暗黑砖石纹理 */
    --bg-pattern: radial-gradient(rgba(0,0,0,0.2) 1px, transparent 1px);
    background-size: 15px 15px;
}

/* 🌫️ 核心魔法：全屏物理造雾机与光晕（绝对防 Bug 垫底层） */
body.theme-misty::before {
    content: ""; position: fixed; top: -10vh; left: -10vw; width: 120vw; height: 120vh;
    z-index: -2; pointer-events: none;
    /* 白天：暖黄色的朝阳在右上角透出，白雾弥漫 */
    background: radial-gradient(circle at 75% 25%, rgba(255, 225, 150, 0.45) 0%, transparent 55%), rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px); /* 极其强烈的朦胧大雾感 */
    transition: background 1s ease, backdrop-filter 1s ease;
}

body.dark-mode.theme-misty::before {
    /* 黑夜：橙黄色的朦胧夕阳在左侧透出，深灰雾气弥漫 */
    background: radial-gradient(circle at 25% 40%, rgba(200, 100, 40, 0.3) 0%, transparent 60%), rgba(20, 22, 25, 0.5);
    backdrop-filter: blur(5px);
}

/* 让所有卡片变成雾中的玻璃 */
body.theme-misty .card, body.theme-misty .radar-box, body.theme-misty .secret-box, 
body.theme-misty .timeline-box, body.theme-misty .relations-box, body.theme-misty .modal-content,
body.theme-misty .control-panel, body.theme-misty .filter-section {
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), inset 0 0 15px rgba(255,255,255,0.4) !important;
}

body.dark-mode.theme-misty .card, body.dark-mode.theme-misty .radar-box, body.dark-mode.theme-misty .secret-box, body.dark-mode.theme-misty .timeline-box, body.dark-mode.theme-misty .relations-box, body.dark-mode.theme-misty .modal-content, body.dark-mode.theme-misty .control-panel, body.dark-mode.theme-misty .filter-section {
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(200, 134, 74, 0.05) !important;
}

/* 标题文字：莫奈绿 vs 夕阳金 */
body.theme-misty h2, body.theme-misty h3, body.theme-misty .name-input {
    color: #2F4033 !important; text-shadow: 0 0 10px rgba(255,255,255,0.8) !important; 
}
body.dark-mode.theme-misty h2, body.dark-mode.theme-misty h3, body.dark-mode.theme-misty .name-input {
    color: #E5A96A !important; text-shadow: 0 0 12px rgba(200, 134, 74, 0.4) !important;
}

/* 大标题底纹：莫奈画笔拉丝 vs 塔楼暗影 */
body.theme-misty .section-title {
    background: linear-gradient(90deg, rgba(123, 154, 122, 0.15), transparent) !important;
    border-left: 5px solid var(--primary) !important; color: #2F4033 !important;
}
body.dark-mode.theme-misty .section-title {
    background: linear-gradient(90deg, rgba(200, 134, 74, 0.15), transparent) !important;
    border-left: 5px solid var(--primary) !important; color: #E5A96A !important;
}

/* 🔘 按钮魔法：荷叶粉莲 vs 猎人夕阳 */
body.theme-misty .btn, body.theme-misty .upload-label {
    background: var(--primary) !important; /* 荷叶绿 */
    color: #FFF !important;
    border: none !important; border-radius: 20px; /* 柔和的圆角 */
    box-shadow: 0 4px 12px rgba(123, 154, 122, 0.3) !important; font-weight: bold;
}
body.theme-misty .btn:hover, body.theme-misty .upload-label:hover {
    background: var(--secondary) !important; /* 悬停变成粉色睡莲 */
    box-shadow: 0 6px 15px rgba(221, 167, 165, 0.4) !important;
}

/* 标签选中状态 */
body.theme-misty .tag-pill.active {
    background: var(--secondary) !important; color: #FFF !important; border: none !important;
    box-shadow: 0 4px 10px rgba(221, 167, 165, 0.3) !important;
}
body.dark-mode.theme-misty .tag-pill.active {
    background: var(--card-bg) !important; color: var(--primary) !important; border: 1px solid var(--primary) !important;
}

/* 强制重绘，确保颜色不丢失 */
body.theme-misty, body.dark-mode.theme-misty {
    background-color: var(--bg) !important; background-image: var(--bg-pattern) !important;
}
/* ========================================================= */
/* ========================================================= */
/* 🛡️ 补充补丁：【🌫️ 雾隐钟鸣】黑夜模式【橙色 UI】护眼高对比度修复 */
/* ========================================================= */

/* 3. 强制所有“橙色底色”筛选标签文字，使用【圣洁冰白】 */
body.dark-mode.theme-misty .tag-pill.active {
    background: var(--card-bg) !important; /* 维持暗红色塔楼底 */
    color: #ffffff !important; /* 强制圣洁冰白文字，对比度极高！ */
    border: 1px solid var(--primary) !important; /* 保留橙色边框 */
}

/* 让选中标签旁边的 ✖ 小叉叉也变成纯白 */
body.dark-mode.theme-misty .tag-pill.active .tag-delete {
    color: #ffffff !important;
}

/* 4. 黑夜价格输入框（防止橙色数字和暗红底糊在一起） */
body.dark-mode.theme-misty .price-input {
    color: #FEC5C4 !important; /* 调成极其温柔的高级淡粉色，护眼醒目 */
    font-weight: bold !important;
}
/* ========================================================= */
/* ========================================================= */
/* 🛡️ 补充补丁一：【🌫️ 雾隐钟鸣】黑夜模式【动态点灯】重制版 */
/* ========================================================= */

/* 1. 默认状态（未选中/未悬停）：安静的黄昏暗橙色 + 纯白文字 */
body.dark-mode.theme-misty .btn, 
body.dark-mode.theme-misty .upload-label,
body.dark-mode.theme-misty .tag-pill {
    background: #b27237 !important; /* 暗一点的黄昏黄/橙 */
    color: #FFFFFF !important; /* 纯白文字，保证基础清晰度 */
    border: 1px solid rgba(200, 134, 74, 0.4) !important; /* 极浅的轮廓线 */
    box-shadow: none !important; /* 默认不发光，隐藏在夜色中 */
    transition: all 0.3s ease !important; /* 让点灯的过程极其丝滑 */
}

/* 2. 交互状态（鼠标悬停/已选中）：瞬间点灯！亮金色 + 深渊黑字 + 温暖光晕 */
body.dark-mode.theme-misty .btn:hover, 
body.dark-mode.theme-misty .upload-label:hover,
body.dark-mode.theme-misty .tag-pill.active,
body.dark-mode.theme-misty .dock-icon.active {
    background: #ffba0b !important; /* 极其明亮的暖金色 */
    color: #1A1A1A !important; /* 深渊黑字，极致高反差防瞎眼 */
    border: 1px solid #FFB700 !important; 
    box-shadow: 0 0 20px rgba(255, 183, 0, 0.6) !important; /* 驱逐黑夜的灯笼光晕散发！ */
    transform: translateY(-3px) scale(1.03) !important; /* 微微浮起，点亮瞬间的呼吸感 */
}

/* 3. 细节修复：让选中标签旁边的 ✖ 小叉叉在点灯时也变成深色 */
body.dark-mode.theme-misty .tag-pill.active .tag-delete {
    color: #1A1A1A !important;
}

/* 细节修复：平时未选中的标签叉叉维持浅色 */
body.dark-mode.theme-misty .tag-pill .tag-delete {
    color: rgba(255, 255, 255, 0.6) !important;
}
body.dark-mode.theme-misty .tag-pill .tag-delete:hover {
    color: #ffffff !important;
}
/* ========================================================= */
/* ========================================================= */
/* 📱 移动端完美排版适配 (所有手机通用) */
/* ========================================================= */
@media screen and (max-width: 768px) {
   /* 双人宿命对比弹窗改为“上下排版” */
    #compareModal .modal-content { padding: 20px !important; }
    /* 🌟 修复魔法：目标锁定为被挤到第 4 位的雷达图盒子！ */
    #compareModal .modal-content > div:nth-child(4) { flex-direction: column !important; gap: 20px !important; }
    #compareModal .modal-content > div:nth-child(4) > div:nth-child(2) { width: 100% !important; height: 1px !important; margin: 15px 0 !important; }

    /* 手机上“普通稿件”一排两张，“核心立绘”一张 */
    #normal-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
    #lihui-gallery { grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)) !important; }

    /* 修复顶部按钮换行乱七八糟 */
    .actions { justify-content: center; }
    .actions .btn { flex: 1 1 40%; justify-content: center; text-align: center; }
}

/* ========================================================= */
/* 🍎 苹果设备专属防崩抢救 (只有触发了雷达的设备才会生效) */
/* ========================================================= */
body.ios-safe-mode.theme-scifi .card, body.ios-safe-mode.theme-scifi .radar-box, body.ios-safe-mode.theme-scifi .secret-box, body.ios-safe-mode.theme-scifi .timeline-box, body.ios-safe-mode.theme-scifi .relations-box, body.ios-safe-mode.theme-scifi .modal-content, body.ios-safe-mode.theme-scifi .control-panel, body.ios-safe-mode.theme-scifi .filter-section,
body.ios-safe-mode.dark-mode.theme-scifi .card, body.ios-safe-mode.dark-mode.theme-scifi .radar-box, body.ios-safe-mode.dark-mode.theme-scifi .secret-box, body.ios-safe-mode.dark-mode.theme-scifi .timeline-box, body.ios-safe-mode.dark-mode.theme-scifi .relations-box, body.ios-safe-mode.dark-mode.theme-scifi .modal-content, body.ios-safe-mode.dark-mode.theme-scifi .control-panel, body.ios-safe-mode.dark-mode.theme-scifi .filter-section,
body.ios-safe-mode.theme-misty .card, body.ios-safe-mode.theme-misty .radar-box, body.ios-safe-mode.theme-misty .secret-box, body.ios-safe-mode.theme-misty .timeline-box, body.ios-safe-mode.theme-misty .relations-box, body.ios-safe-mode.theme-misty .modal-content, body.ios-safe-mode.theme-misty .control-panel, body.ios-safe-mode.theme-misty .filter-section,
body.ios-safe-mode.dark-mode.theme-misty .card, body.ios-safe-mode.dark-mode.theme-misty .radar-box, body.ios-safe-mode.dark-mode.theme-misty .secret-box, body.ios-safe-mode.dark-mode.theme-misty .timeline-box, body.ios-safe-mode.dark-mode.theme-misty .relations-box, body.ios-safe-mode.dark-mode.theme-misty .modal-content, body.ios-safe-mode.dark-mode.theme-misty .control-panel, body.ios-safe-mode.dark-mode.theme-misty .filter-section {
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important;
    background: var(--card-bg) !important;
}

/* 剥离雾隐钟鸣的底层大雾 */
body.ios-safe-mode.theme-misty::before, body.ios-safe-mode.dark-mode.theme-misty::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 0.8 !important; 
}
/* ========================================================= */
/* ========================================================= */
/* 🛡️ 修复补丁：夺回智能隐藏的最高优先级控制权 */
body.dock-autohide .mac-dock {
    transform: translate(-50%, 150%) translateZ(1px) !important; 
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
body.dock-autohide .dock-hover-zone:hover + .mac-dock,
body.dock-autohide .mac-dock:hover {
    transform: translate(-50%, 0) translateZ(1px) !important; 
}
/* ========================================================= */
/* ⏳ 编年史编辑状态高亮特效 */
/* ========================================================= */
.timeline-dot-wrapper.editing-active .timeline-content {
    border: 2px solid #e91e63 !important;
    box-shadow: 0 0 20px rgba(233, 30, 99, 0.3) !important;
    transform: translateY(0) scale(1.05) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 50;
}
.timeline-dot-wrapper.editing-active .timeline-dot {
    transform: scale(1.5) !important;
    background: #ca527a !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 15px rgba(233, 30, 99, 0.5) !important;
    z-index: 51;
}
/* ========================================================= */
/* 🛠️ 优化补丁：画廊深度设定弹窗输入框高度与滚动条修复 */
/* ========================================================= */
.modal-right textarea {
    min-height: 90px !important; /* 强制保底高度，完美容纳 3-4 行字 */
    resize: vertical !important; /* 保留右下角的上下拖拽缩放功能 */
    line-height: 1.6 !important; /* 让字与字之间更舒展 */
    overflow-y: auto !important; /* 🌟 强制召唤滚轮！一旦字满了立刻出现滑动条！ */
}
/* ========================================================= */
/* ⚖️ V12.5 宇宙法则锻造炉 (问卷系统 UI) */
/* ========================================================= */
.forge-faction-card { 
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px; 
    padding: 20px; position: relative; display: flex; flex-direction: column; gap: 10px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
}
.forge-faction-card .btn-delete { top: -10px; right: -10px; } /* 借用已有的红叉叉样式 */

.forge-question-card { 
    background: var(--bg); border: 2px solid var(--border); border-radius: 12px; 
    padding: 20px; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    display: flex; flex-direction: column; gap: 15px; transition: 0.3s;
}
.forge-question-card:hover { border-color: var(--primary); transform: translateX(5px); }

.forge-option-item { 
    background: var(--card-bg); border: 1px dashed var(--secondary); border-radius: 8px; 
    padding: 15px; display: flex; flex-direction: column; gap: 10px; position: relative;
}
.forge-score-row { 
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: rgba(0,0,0,0.03); padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; 
}
.forge-score-pill {
    background: var(--primary); color: white; padding: 2px 8px; border-radius: 12px; font-weight: bold;
    display: flex; align-items: center; gap: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* ========================================================= */
/* ⚖️ V12.5 宇宙法则锻造炉 - 导航小窗与折叠样式 */
/* ========================================================= */

/* 侧边导航小地图 (半透明、有滚轮、吸顶) */
.forge-nav-panel {
    position: sticky; top: 20px; width: 140px; max-height: 400px;
    background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px);
    border: 1px solid var(--border); border-radius: 12px; padding: 15px 10px;
    overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
    gap: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); z-index: 10;
}
body.dark-mode .forge-nav-panel { background: rgba(30, 30, 30, 0.4); }

/* 导航里的小方块 */
.forge-nav-btn {
    aspect-ratio: 1; border-radius: 6px; background: var(--bg); border: 1px solid var(--border);
    display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 0.9rem;
    cursor: pointer; position: relative; transition: 0.2s; color: var(--text);
}
.forge-nav-btn:hover { transform: translateY(-2px); border-color: var(--primary); }
.forge-nav-btn.active { background: var(--primary); color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.2); border-color: var(--primary); }

/* 题目折叠状态：变成细长条 */
.forge-question-collapsed {
    cursor: pointer; padding: 12px 20px !important; flex-direction: row !important; 
    align-items: center; gap: 15px; background: rgba(0,0,0,0.02) !important;
}
.forge-question-collapsed:hover { background: var(--bg) !important; transform: translateX(5px); border-color: var(--primary); }

/* ⭐ 星星标记魔法 */
.forge-star {
    position: absolute; top: 12px; left: 15px; font-size: 1.2rem; cursor: pointer; 
    color: rgba(128,128,128,0.3); transition: 0.2s; z-index: 10; line-height: 1; user-select: none;
}
.forge-star:hover { transform: scale(1.3); color: #FFD700; }
.forge-star.active { color: #FFD700; text-shadow: 0 0 10px rgba(255,215,0,0.6); }

/* 导航窗里的超迷你星星 */
.nav-star {
    position: absolute; top: -6px; left: -6px; font-size: 0.6rem; 
    color: #FFD700; text-shadow: 0 0 3px rgba(0,0,0,0.5); z-index: 5;
}

/* ========================================================= */
/* 🚀 修复补丁：PC 端程序坞极限承载与防拖拽复制 */
/* ========================================================= */
.mac-dock {
    max-width: 95vw !important; /* 限制最大宽度，绝对不准被挤出屏幕边缘！ */
    overflow-x: auto !important; /* 允许内部横向滚动 */
    cursor: grab !important; /* 鼠标放上去变成“小手”抓取手势 */
}
.mac-dock:active {
    cursor: grabbing !important; /* 抓住时手握紧 */
}
/* 隐藏丑陋的系统滚动条，保持绝美悬浮舱外观 */
.mac-dock::-webkit-scrollbar {
    display: none !important;
}
/* 🌟 核心魔法：彻底根除“拖出残影复制图片”的系统 Bug */
.dock-icon {
    -webkit-user-drag: none !important; /* 禁用苹果/谷歌内核自带的图片拖拽 */
    user-select: none !important; /* 禁用文本选中 */
    flex-shrink: 0 !important; /* 保证头像再多也绝对不被压扁变形！ */
}

/* ========================================================= */
/* 🌟 终极修复：全局悬浮 Tooltip (PC大气白底黑字 + 手机小巧) */
/* ========================================================= */

/* 2. 💻 电脑端主样式：霸气、清晰、高定白底黑字！ */
.global-dock-tooltip {
    position: fixed;
    background: rgba(255, 255, 255, 0.95) !important; /* 极其清透的白底 */
    color: #333 !important; /* 极其清晰的黑字 */
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 1.05rem !important; /* 电脑端字号放大！尽情舒展！ */
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15) !important;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 999999;
    white-space: nowrap;
    font-family: 'Noto Serif SC', serif;
    font-weight: bold;
    letter-spacing: 1px;
}

/* 🌙 极其聪明的黑夜模式自动反转 */
body.dark-mode .global-dock-tooltip {
    background: rgba(30, 30, 30, 0.95) !important;
    color: #eee !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* 3. 📱 手机端：听妈咪的话，保持极其小巧精致 */
@media screen and (max-width: 768px) {
    .global-dock-tooltip {
        background: rgba(0, 0, 0, 0.85) !important; /* 手机端用低调的黑底防遮挡 */
        color: white !important;
        font-size: 0.75rem !important; /* 字号极其小巧 */
        padding: 5px 10px !important;
        border-radius: 6px !important;
        border: none !important;
    }
    
    body.dark-mode .global-dock-tooltip {
        background: rgba(255, 255, 255, 0.9) !important;
        color: #000 !important;
    }
}



/* ========================================================= */
/* 👁️ 上帝视角模拟器 UI */
/* ========================================================= */
.sim-opt {
    border: 2px solid var(--border);
    padding: 15px 20px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: all 0.2s;
    background: var(--card-bg);
}
.sim-opt:hover {
    border-color: var(--secondary);
    transform: translateX(5px);
}
.sim-opt.selected {
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.05);
    box-shadow: inset 4px 0 0 var(--primary);
}
body.dark-mode .sim-opt.selected {
    background: rgba(255, 255, 255, 0.05);
}

/* ========================================================= */
/* 🌟 V12.6 极简交互：悬浮添加试炼按钮 */
/* ========================================================= */
.floating-add-btn {
    position: fixed;
    bottom: 120px; /* 电脑端默认位置 */
    right: 40px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e91e63, #9c27b0);
    color: white;
    font-size: 2rem;
    border: none;
    box-shadow: 0 5px 20px rgba(233, 30, 99, 0.4);
    cursor: pointer;
    z-index: 8000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 鼠标放上去时的呼吸与旋转特效 */
.floating-add-btn:hover {
    transform: scale(1.15) rotate(90deg);
    box-shadow: 0 8px 25px rgba(233, 30, 99, 0.6);
    background: linear-gradient(135deg, #ff4081, #d500f9);
}

/* 📱 手机端专属：变得更小巧，且避开底部程序坞 */
@media screen and (max-width: 768px) {
    .floating-add-btn {
        bottom: 85px; /* 完美避开手机屏幕底部的程序坞和安全区 */
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 1.5rem;
    }
}

/* ========================================================= */
/* 📱 V13.0 智能手机终端专属外观 */
/* ========================================================= */

/* 悬浮唤醒按钮 (定位在屏幕左下角，极其小巧精致) */
.floating-phone-btn {
    position: fixed; bottom: 120px; left: 40px; width: 55px; height: 55px;
    border-radius: 50%; background: linear-gradient(135deg, #3498db, #8e44ad);
    color: white; font-size: 2rem; border: none; box-shadow: 0 5px 20px rgba(52, 152, 219, 0.4);
    cursor: pointer; z-index: 8000; display: flex; justify-content: center; align-items: center;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.floating-phone-btn:hover { transform: scale(1.15) rotate(-10deg); box-shadow: 0 8px 25px rgba(52, 152, 219, 0.6); }

/* 核心手机壳容器 (逼真的手机比例与黑色边框包裹) */
.phone-container {
    width: 375px; height: 750px; /* 经典手机长宽比 */
    background: var(--bg); border-radius: 35px; border: 8px solid #1a1a1a;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 15px rgba(0,0,0,0.1);
    display: flex; flex-direction: column; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

/* 🌟 魔法伸缩：被展开为全屏网页时的形态 */
.phone-container.expanded {
    width: 900px; height: 85vh; border-radius: 15px; border-width: 2px; border-color: var(--primary);
}

.phone-header {
    background: var(--card-bg); padding: 10px 15px; display: flex; justify-content: space-between;
    align-items: center; border-bottom: 1px solid var(--border); z-index: 10;
}
.phone-status { font-size: 0.75rem; font-weight: bold; color: var(--text); display: flex; gap: 10px; }
.phone-controls { display: flex; align-items: center; }

.phone-body { display: flex; flex: 1; overflow: hidden; }

/* 左侧 Discord 风格 App 导航栏 */
.phone-sidebar {
    width: 65px; background: rgba(0,0,0,0.03); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center; padding-top: 15px; gap: 12px; overflow-y: auto;
}
body.dark-mode .phone-sidebar { background: rgba(255,255,255,0.02); }

/* 单个 App 图标的果冻呼吸感特效 */
.app-icon {
    width: 45px; height: 45px; border-radius: 15px; background: var(--card-bg); border: 1px solid var(--border);
    display: flex; justify-content: center; align-items: center; font-size: 1.5rem; cursor: pointer;
    transition: 0.2s; position: relative; color: var(--text);
}
.app-icon:hover { border-radius: 10px; background: var(--primary); color: white; transform: scale(1.05); }
.app-icon.active { border-radius: 10px; background: var(--primary); color: white; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.app-icon.disabled { opacity: 0.3; cursor: not-allowed; filter: grayscale(100%); }
.app-icon.disabled:hover { transform: none; background: var(--card-bg); color: inherit; }

.phone-screen { flex: 1; background: var(--bg); overflow-y: auto; position: relative; }

/* 📱 真实手机设备端防崩压缩 */
@media screen and (max-width: 768px) {
    .floating-phone-btn { bottom: 150px; left: 15px; width: 45px; height: 45px; font-size: 1.5rem; }
    .phone-container { width: 95vw !important; height: 90vh !important; border-radius: 20px; border-width: 2px; }
    .phone-sidebar { width: 55px; }
    .app-icon { width: 40px; height: 40px; font-size: 1.2rem; }
    #phoneSizeBtn { display: none; } /* 真实手机上不需要展开全屏的按钮 */
}

/* ========================================================= */
/* 📱 V13.0 社交主页专属 UI (高定重制版) */
/* ========================================================= */

/* 绝美背景模糊横幅 */
.social-banner { 
    width: 100%; height: 140px; background-size: cover; background-position: center; 
    filter: blur(8px) brightness(0.85); transform: scale(1.1); 
    border-bottom: 2px solid var(--border);
}

/* 坚不可摧的头像容器 (绝对不会破图) */
.social-avatar-container { 
    position: relative; width: 100px; height: 100px; border-radius: 50%; padding: 4px; 
    background: var(--bg); cursor: pointer; transition: 0.3s; box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
}
.social-avatar-container:hover { transform: translateY(-5px) scale(1.05); }

/* 真正的头像图片层 */
.social-avatar-img { 
    width: 100%; height: 100%; border-radius: 50%; background-size: cover; 
    background-position: center; border: 2px solid var(--primary); 
    background-color: var(--card-bg); /* 如果没图，这就是极其干净的底色 */
}

/* 右下角极其逼真的小相机 */
.social-avatar-camera { 
    position: absolute; bottom: -2px; right: -2px; background: var(--primary); color: white; 
    border-radius: 50%; width: 32px; height: 32px; display: flex; justify-content: center; 
    align-items: center; font-size: 0.95rem; border: 3px solid var(--bg); box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}

/* 苹果/微信风格的高级资料卡片 */
.social-form-card { 
    background: var(--card-bg); margin: 20px 20px 10px 20px; border-radius: 16px; 
    border: 1px solid var(--border); box-shadow: 0 4px 15px rgba(0,0,0,0.03); overflow: hidden; 
}
.social-form-group { padding: 15px 20px; border-bottom: 1px dashed var(--border); }
.social-label { font-size: 0.8rem; font-weight: bold; color: var(--primary); margin-bottom: 8px; letter-spacing: 1px; }

/* 极其无痕的输入框 */
.social-sleek-input { 
    width: 100%; box-sizing: border-box; border: none; background: transparent; font-size: 1.1rem; 
    color: var(--text); outline: none; font-weight: bold; font-family: 'Noto Serif SC', serif;
}
.social-sleek-textarea { 
    width: 100%; box-sizing: border-box; border: none; background: transparent; font-size: 0.95rem; 
    color: var(--text); outline: none; resize: none; height: 60px; font-family: inherit; line-height: 1.6; margin-top: 5px;
}

/* 绝美保存按钮 */
.social-save-btn { 
    margin: 0 20px 20px 20px; background: linear-gradient(135deg, var(--primary), var(--secondary)); 
    color: white; border: none; padding: 15px; border-radius: 12px; font-size: 1.1rem; font-weight: bold; 
    cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.15); transition: 0.3s; display: flex; 
    justify-content: center; align-items: center; letter-spacing: 1px;
}
.social-save-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); filter: brightness(1.1); }

/* 📱 手机内部的画廊选择器网格 */
.phone-gallery-grid { 
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; 
    width: 100%; box-sizing: border-box; align-content: start;
}
.phone-gallery-item { 
    width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; 
    cursor: pointer; border: 2px solid transparent; transition: 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.phone-gallery-item:hover { border-color: var(--primary); transform: scale(1.05); }

/* ========================================================= */
/* 📱 V13.0 宇宙朋友圈专属 UI */
/* ========================================================= */

/* 朋友圈滚动外壳 */
.moments-wrapper { 
    display: flex; flex-direction: column; height: 100%; background: var(--bg); 
    overflow-y: auto; position: relative; font-family: 'Noto Serif SC', serif;
}
.moments-wrapper::-webkit-scrollbar { display: none; } /* 隐藏滚动条，模拟真实手机 */

/* 顶部绝美横幅与自己头像 */
.moments-header { 
    width: 100%; height: 260px; background-size: cover; background-position: center; 
    position: relative; margin-bottom: 50px; border-bottom: 1px solid var(--border); 
}
.moments-user-info { 
    position: absolute; bottom: -25px; right: 20px; display: flex; align-items: flex-end; gap: 15px; z-index: 5; 
}
.moments-user-name { 
    font-size: 1.2rem; font-weight: bold; color: white; text-shadow: 0 1px 6px rgba(0,0,0,0.9); 
    margin-bottom: 35px; letter-spacing: 1px; 
}
.moments-user-avatar { 
    width: 75px; height: 75px; border-radius: 12px; border: 2px solid var(--bg); 
    object-fit: cover; background: var(--card-bg); box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
}

/* 动态列表流 */
.moments-list { display: flex; flex-direction: column; padding: 0 20px 100px 20px; gap: 25px; }

/* 每一条动态的卡片 */
.moment-card { display: flex; gap: 12px; border-bottom: 1px solid rgba(128,128,128,0.2); padding-bottom: 25px; }
.moment-avatar { 
    width: 45px; height: 45px; border-radius: 8px; object-fit: cover; 
    cursor: pointer; flex-shrink: 0; background: var(--card-bg); 
}
.moment-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* 名字与文字 */
.moment-author { font-weight: bold; color: #576b95; font-size: 1.05rem; margin-bottom: 8px; cursor: pointer; }
body.dark-mode .moment-author { color: #82a0d8; }
.moment-text { font-size: 1.05rem; color: var(--text); line-height: 1.6; margin-bottom: 12px; word-wrap: break-word; }

/* 配图 */
.moment-post-img { 
    max-width: 75%; max-height: 220px; border-radius: 6px; object-fit: cover; 
    cursor: pointer; margin-bottom: 12px; border: 1px solid var(--border); 
}

/* 底部时间与操作按钮 */
.moment-footer { 
    display: flex; justify-content: space-between; align-items: center; 
    font-size: 0.8rem; color: var(--secondary); margin-bottom: 12px; 
}
.moment-actions { display: flex; gap: 15px; }
.moment-action-btn { 
    background: rgba(0,0,0,0.03); border: none; padding: 4px 10px; border-radius: 4px; 
    cursor: pointer; color: var(--text); font-size: 0.95rem; transition: 0.2s; 
}
body.dark-mode .moment-action-btn { background: rgba(255,255,255,0.05); }
.moment-action-btn:hover { background: rgba(0,0,0,0.08); transform: scale(1.1); }

/* 点赞与评论高定框 */
.moment-interact-area { 
    background: rgba(0,0,0,0.03); border-radius: 6px; padding: 10px; 
    font-size: 0.9rem; display: flex; flex-direction: column; gap: 8px; position: relative;
}
body.dark-mode .moment-interact-area { background: rgba(255,255,255,0.03); }

/* 小三角气泡 */
.moment-interact-area::before {
    content: ""; position: absolute; top: -10px; left: 15px; 
    border-width: 0 8px 10px 8px; border-style: solid; 
    border-color: transparent transparent rgba(0,0,0,0.03) transparent;
}
body.dark-mode .moment-interact-area::before { border-bottom-color: rgba(255,255,255,0.03); }

.moment-likes-box { color: var(--primary); font-weight: bold; border-bottom: 1px solid rgba(128,128,128,0.1); padding-bottom: 6px; }
.moment-comments-box { display: flex; flex-direction: column; gap: 6px; line-height: 1.5; padding-top: 4px; }

/* 悬浮发朋友圈按钮 */
.moments-publish-btn { 
    position: absolute; bottom: 25px; right: 25px; width: 55px; height: 55px; 
    border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); 
    color: white; border: none; font-size: 1.6rem; box-shadow: 0 5px 20px rgba(0,0,0,0.25); 
    cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 10; transition: 0.3s; 
}
.moments-publish-btn:hover { transform: scale(1.1) rotate(15deg); box-shadow: 0 8px 25px rgba(0,0,0,0.35); }

/* ========================================================= */
/* 📱 V13.0 宇宙私聊专属 UI (微信沉浸级复刻) */
/* ========================================================= */

/* 通讯录卡片 */
.chat-contact-card {
    display: flex; align-items: center; gap: 15px; padding: 12px 15px;
    background: var(--card-bg); border-bottom: 1px solid rgba(128,128,128,0.1);
    cursor: pointer; transition: 0.2s; border-radius: 12px; margin-bottom: 8px;
}
.chat-contact-card:hover { background: rgba(0,0,0,0.03); transform: translateX(5px); }
body.dark-mode .chat-contact-card:hover { background: rgba(255,255,255,0.03); }

.chat-contact-avatar { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; background: var(--border); flex-shrink: 0; }
.chat-contact-info { flex: 1; overflow: hidden; }
.chat-contact-name { font-weight: bold; color: var(--text); font-size: 1.05rem; }
.chat-contact-lastmsg { font-size: 0.85rem; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }

/* 聊天气泡布局 */
.chat-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin-bottom: 5px; }
.chat-row-me { flex-direction: row-reverse; } /* 自己的消息在右边 */
.chat-row-other { flex-direction: row; }      /* 对方的消息在左边 */

.chat-avatar { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: var(--border); flex-shrink: 0; }

/* 气泡本体 */
.chat-bubble {
    max-width: 65%; padding: 10px 14px; border-radius: 10px; font-size: 1.05rem;
    line-height: 1.6; word-wrap: break-word; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: relative;
}

/* 🤍 对方的白色气泡 (带极其逼真的小三角) */
.chat-bubble-other { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); }
.chat-bubble-other::before {
    content: ""; position: absolute; top: 12px; left: -6px;
    border-width: 6px 6px 6px 0; border-style: solid;
    border-color: transparent var(--card-bg) transparent transparent;
}

/* 💚 自己的微信绿气泡 */
.chat-bubble-me { background: #95ec69; color: #111; border: 1px solid #85d35c; }
.chat-bubble-me::after {
    content: ""; position: absolute; top: 12px; right: -6px;
    border-width: 6px 0 6px 6px; border-style: solid;
    border-color: transparent transparent transparent #95ec69;
}

/* 🌙 极其贴心的黑夜护眼模式 */
body.dark-mode .chat-bubble-me { background: #2eb82e; color: #fff; border-color: #248f24; }
body.dark-mode .chat-bubble-me::after { border-color: transparent transparent transparent #2eb82e; }

/* ========================================================= */
/* 📱 朋友圈封面专属部件 */
/* ========================================================= */

/* 📷 悬浮的换封面按钮 (玻璃拟态效果) */
.moments-bg-edit-btn {
    position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.4);
    color: white; border: 1px solid rgba(255,255,255,0.3); padding: 6px 14px;
    border-radius: 20px; font-size: 0.85rem; cursor: pointer; backdrop-filter: blur(5px);
    transition: 0.3s; z-index: 10; font-weight: bold; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.moments-bg-edit-btn:hover { background: rgba(0,0,0,0.7); transform: scale(1.05); }

/* 高定滑块样式 */
.bg-slider {
    -webkit-appearance: none; width: 100%; height: 8px; border-radius: 4px;
    background: var(--border); outline: none; opacity: 0.8; transition: opacity .2s;
}
.bg-slider:hover { opacity: 1; }
.bg-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
    border-radius: 50%; background: var(--primary); cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4); border: 2px solid var(--card-bg);
}
/* ========================================================= */
/* 📱 朋友圈排版修复与升级 */
/* ========================================================= */

/* 1. 极其强硬的防压扁装甲：死死锁住高度，绝不允许列表撑长时压缩头部！ */
.moments-header { flex-shrink: 0 !important; }

/* 2. 朋友圈配图改为极其精致的小方块 */
.moment-post-img {
    width: 150px !important;
    height: 150px !important;
    object-fit: cover !important; /* 智能裁切成正方形，绝不变形 */
    border-radius: 8px !important;
    cursor: pointer;
    margin-bottom: 12px;
    border: 1px solid rgba(128,128,128,0.2) !important;
    transition: 0.2s;
}
.moment-post-img:hover { filter: brightness(0.95); transform: scale(1.02); }

/* ========================================================= */
/* 📱 手机全局滚动条高定美化 & 防截断护盾 */
/* ========================================================= */

/* 强制开放手机内部所有页面的滚动权限，绝对不截断名片！ */
#phoneScreen > div { overflow-y: auto !important; overflow-x: hidden !important; }

/* 极其优雅的隐形透明滚动条 */
#phoneScreen ::-webkit-scrollbar { width: 6px; }
#phoneScreen ::-webkit-scrollbar-track { background: transparent; }
#phoneScreen ::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.2); border-radius: 10px; }
#phoneScreen ::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* 🌟 手机重载动画 (量子纠缠光环) */
.phone-quantum-loader {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: var(--primary);
    border-bottom-color: var(--secondary);
    animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    position: relative;
}
.phone-quantum-loader::before {
    content: ''; position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px;
    border-radius: 50%; border: 4px solid transparent;
    border-left-color: var(--price); border-right-color: var(--primary);
    animation: spin 1.5s linear infinite reverse;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulse { 0% { opacity: 0.5; } 100% { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; pointer-events: none; } }
/* ========================================================= */
/* 🗞️ V13.0 宇宙头条专属高定 UI (极其完美的双端自适应) */
/* ========================================================= */

.news-section-title {
    font-size: 1.1rem; color: var(--text); margin-bottom: 15px; 
    display: flex; align-items: center; gap: 8px; font-weight: bold;
}
.news-section-tag {
    background: var(--price); color: white; padding: 2px 8px; 
    border-radius: 4px; font-size: 0.8rem; font-weight: bold; letter-spacing: 1px;
}

/* 🌟 神级自适应网格：手机端单列，展开宽屏自动变多列！ */
.news-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 这个代码价值千金！ */
    gap: 20px;
    margin-bottom: 30px;
}

/* 绝密档案卡片样式 */
.news-dossier-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    position: relative; overflow: hidden; transition: 0.3s;
    display: flex; flex-direction: column; gap: 15px;
}
.news-dossier-card:hover {
    transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); border-color: var(--primary);
}

/* 极其逼真的 TOP SECRET 红色印章角标 */
.news-dossier-card::before {
    content: "TOP SECRET"; position: absolute; top: 22px; right: -35px;
    transform: rotate(45deg); background: rgba(211,47,47,0.1); color: var(--price);
    font-size: 0.7rem; font-weight: bold; font-family: 'Cinzel', serif;
    padding: 5px 40px; letter-spacing: 2px; border: 1px dashed var(--price);
    pointer-events: none;
}

.news-dossier-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px dashed var(--border); padding-bottom: 10px;
}
.news-dossier-stamp { font-weight: bold; color: var(--text); font-size: 0.95rem; }
.news-dossier-year { font-family: 'Cinzel', serif; color: var(--primary); font-weight: bold; font-size: 1.15rem; }

.news-dossier-body { color: var(--text); font-size: 0.95rem; line-height: 1.6; }
/* ========================================================= */
/* 🔥 星际热搜榜专属 UI */
/* ========================================================= */

.news-hot-list {
    display: grid;
    /* 🌟 自适应魔法：宽度够就分两列，不够就单列 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.news-hot-item {
    display: flex; align-items: center; gap: 15px; padding: 12px 15px;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 10px; cursor: pointer; transition: 0.3s;
    position: relative; overflow: hidden;
}
.news-hot-item:hover {
    background: rgba(255, 152, 0, 0.05); border-color: #ff9800; transform: translateX(5px);
}

/* 排名数字美化 */
.news-hot-rank {
    font-size: 1.2rem; font-weight: 900; font-style: italic;
    min-width: 30px; text-align: center; color: var(--secondary);
}
.rank-1 { color: #f44336; font-size: 1.5rem; } /* 第一名火红色 */
.rank-2 { color: #ff9800; } /* 第二名橙色 */
.rank-3 { color: #ffeb3b; text-shadow: 0 0 2px rgba(0,0,0,0.2); } /* 第三名黄色 */

.news-hot-content { flex: 1; }
.news-hot-title {
    font-size: 0.95rem; font-weight: bold; color: var(--text);
    margin-bottom: 4px; line-height: 1.4;
}
.news-hot-stats {
    font-size: 0.75rem; color: var(--secondary); font-family: monospace;
}

/* ========================================================= */
/* 🎭 V13.0 热搜卡片专属“世界观水印”装饰 */
/* ========================================================= */

/* 1. 基础装饰层：在卡片右下角垫一个浅浅的图案 */
.news-hot-item::before {
    position: absolute; right: 10px; bottom: -10px; 
    font-size: 3.5rem; opacity: 0.05; /* 极其浅的透明度，若隐若现最显高级 */
    pointer-events: none; transition: 0.3s ease;
}

/* 2. 鼠标悬停时，图案微微浮现并放大，增加交互感 */
.news-hot-item:hover::before { opacity: 0.12; transform: scale(1.1) rotate(-5deg); }

/* 📜 东方修仙专属：清幽竹叶 */
.theme-xianxia .news-hot-item::before { content: "🎋"; }

/* 🔮 西幻大陆专属：灵动精灵 */
.theme-fantasy .news-hot-item::before { content: "🧚‍♀️"; }

/* 🚀 赛博星际专属：冰冷机械 */
.theme-scifi .news-hot-item::before { content: "🤖"; }

/* 🌍 现代地球专属：吃瓜群众 */
.theme-modern .news-hot-item::before { content: "🍉"; }

/* ========================================================= */
/* 🌐 V14.0 匿名论坛专属 UI (全自动暗黑适配 + 宽屏自适应) */
/* ========================================================= */

.forum-wrapper {
    background-color: var(--bg); 
    min-height: 100%; display: flex; flex-direction: column;
}

/* 顶部导航 */
.forum-header {
    background: var(--card-bg); padding: 15px 20px; display: flex; 
    justify-content: space-between; align-items: center; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.forum-back-btn {
    background: transparent; color: var(--primary); border: 1px solid var(--primary);
    padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; cursor: pointer; transition: 0.2s;
}
.forum-back-btn:hover { background: var(--primary); color: var(--card-bg); }

/* ✨ 极其吸睛的造物主入口按钮 */
.forum-fab-btn {
    background: linear-gradient(135deg, #d32f2f, #8b0000); color: white;
    border: none; padding: 8px 16px; border-radius: 20px; font-weight: bold;
    font-size: 0.95rem; cursor: pointer; transition: 0.3s;
    box-shadow: 0 4px 15px rgba(139, 0, 0, 0.4); border: 1px solid rgba(255,255,255,0.2);
}
.forum-fab-btn:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(139, 0, 0, 0.6); }

/* 🌟 核心：大厅列表自适应网格 (宽屏双列，手机单列) */
.forum-list-container {
    padding: 20px; display: grid; gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.forum-thread-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 18px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); cursor: pointer;
    transition: 0.2s; display: flex; flex-direction: column; justify-content: space-between;
}
.forum-thread-card:hover { transform: translateY(-3px); border-color: var(--primary); }
.forum-card-title { font-size: 1.1rem; font-weight: bold; color: var(--text); margin-bottom: 12px; line-height: 1.5; }
.forum-card-footer { font-size: 0.8rem; color: var(--secondary); display: flex; justify-content: space-between; }

/* 🌟 核心：阅读视口控制 (哪怕宽屏，文字也乖乖居中，绝不拉满全屏！) */
.forum-read-container {
    padding: 25px 20px; max-width: 800px; margin: 0 auto; width: 100%; box-sizing: border-box;
}

/* 论坛回帖核心样式 (融合了你的设计与暗黑变量) */
.forum-post { padding: 15px; border-bottom: 1px dashed var(--border); transition: 0.2s; }
.forum-post:last-child { border-bottom: none; }

/* 楼主专属底色 (白天米黄，晚上微亮深灰) */
.lz-post { background-color: rgba(139, 0, 0, 0.05); border-radius: 8px; margin: 10px 0; border: 1px solid rgba(139,0,0,0.1); }

.post-user { font-size: 0.85rem; color: var(--secondary); margin-bottom: 8px; margin-top: 0; }
.post-user strong { color: var(--text); font-size: 1rem; margin-right: 8px; }

/* 标签组 */
.lz-tag { background-color: #8b0000; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; margin-right: 8px; }
.admin-tag { background-color: #ff9800; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; margin-right: 8px; font-weight: bold;}

.post-content { line-height: 1.7; font-size: 1rem; color: var(--text); }
.post-content p { margin: 8px 0; }

/* 系统警告红框 (高度兼容黑夜模式) */
.system-warning {
    background-color: rgba(211, 47, 47, 0.08); border-left: 4px solid var(--price);
    padding: 12px 15px; color: var(--price); font-weight: bold; border-radius: 0 6px 6px 0;
}

/* ========================================================= */
/* 🛠️ V15.0 论坛编辑器高定UI (折叠护眼 + 实时预览) */
/* ========================================================= */

.editor-container { padding: 15px; background: var(--bg); }

/* 🌟 医美级楼层卡片：取消生硬边框，改用高级侧边光晕和柔和阴影 */
.editor-floor-card {
    background: var(--card-bg); border-radius: 12px; padding: 15px; margin-bottom: 15px;
    position: relative; animation: slideUp 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04); border: 1px solid transparent; transition: 0.3s;
}
.editor-floor-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); }

/* 楼主和警告的高级侧面光晕 */
.editor-floor-card.is-lz { border-left: 4px solid #8b0000; background: rgba(139,0,0,0.02); }
.editor-floor-card.is-warning { border-left: 4px solid #d32f2f; background: rgba(211,47,47,0.03); }

/* 🌟 折叠态专属样式 (极其清爽) */
.floor-collapsed {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 15px; cursor: pointer;
}
.floor-collapsed-info { display: flex; align-items: center; gap: 10px; overflow: hidden; flex: 1; margin-right: 15px; }
.floor-collapsed-text { font-size: 0.85rem; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }

.editor-label { font-size: 0.85rem; font-weight: bold; color: var(--secondary); margin-bottom: 6px; display: block; }

/* 楼层操作按钮组 */
.floor-controls {
    display: flex; gap: 8px; margin-top: 15px; border-top: 1px dashed var(--border); padding-top: 15px;
}
.control-btn {
    flex: 1; padding: 8px; font-size: 0.8rem; border: 1px solid var(--border); 
    background: var(--bg); cursor: pointer; border-radius: 6px; transition: 0.2s; font-weight:bold; color:var(--text);
}
.control-btn:hover { background: var(--primary); color: var(--card-bg); }
.btn-del { color: #d32f2f; border-color: rgba(211,47,47,0.3); background: rgba(211,47,47,0.05); }
.btn-del:hover { background: #d32f2f; color: white; }

.toggle-box { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; cursor: pointer; background: rgba(0,0,0,0.02); padding: 8px; border-radius: 6px;}
.toggle-box input { width: 16px; height: 16px; cursor: pointer; }

/* 🌟 重新排版的悬浮底栏 */
.editor-footer {
    position: sticky; bottom: 0; background: var(--card-bg); 
    padding: 15px; border-top: 1px solid var(--border); z-index: 100;
    display: flex; flex-wrap: wrap; gap: 10px; box-shadow: 0 -5px 20px rgba(0,0,0,0.03);
}

/* 🌟 实时预览弹窗样式 */
.forum-preview-modal {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg); z-index: 1000; display: flex; flex-direction: column;
    animation: slideInUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1);
}