/* 全局重置与基础样式 */
        * {
            font-family: "宋体", "SimSun", "楷体", "KaiTi", "微软雅黑", "Microsoft YaHei", sans-serif !important;
            box-sizing: border-box !important;
        }

        body, .main-container {
            background: linear-gradient(135deg, #f8f4e9 0%, #e8f4f8 50%, #f0f8f0 100%) !important;
            color: #5d4037 !important;
            font-family: "宋体", "SimSun", serif !important;
            line-height: 1.6 !important;
            padding: 15px !important;
            margin: 0 !important;
            min-height: 100vh !important;
        }

        /* 面板容器 - 确保每次只有一个实例 */
        #panel-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
        }

        /* 侧边栏面板基础样式 - 优化版 */
        .panel {
            position: fixed !important;
            z-index: 1001 !important;
            background: linear-gradient(135deg, #ffffff 0%, #f8fdfe 50%, #f5f9ff 100%) !important;
            border: 1px solid #a1887f !important;
            border-radius: 12px !important;
            box-shadow: 2px 2px 12px rgba(139, 115, 85, 0.1) !important;
            font-family: "宋体", "SimSun", serif !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            overflow: hidden !important;
            margin: 0 !important;
            width: auto !important;
            max-height: 85vh !important;
            pointer-events: auto !important;
        }

        /* 分割侧边栏：左边系统界面，右边人物状态栏 */
        #panel-events,
        #panel-timeline {
            left: 0 !important;
            right: auto !important;
        }

        #panel-characters {
            right: 0 !important;
            left: auto !important;
        }

        /* 未展开状态：细长竖状文字排布 */
        .panel:not([open]) {
            max-width: 40px !important;
            min-width: 40px !important;
            height: auto !important;
            min-height: 120px !important;
            writing-mode: vertical-lr !important;
            text-orientation: mixed !important;
        }

        /* 收起状态下的初始位置 */
        #panel-timeline:not([open]) {
            top: calc(20% - 60px) !important;
            left: 10px !important;
        }

        #panel-events:not([open]) {
            top: calc(40% - 60px) !important;
            left: 10px !important;
        }

        #panel-characters:not([open]) {
            top: calc(60% - 60px) !important;
            right: 10px !important;
        }

        /* 展开状态：优化手机端显示 */
        .panel[open] {
            z-index: 1002 !important;
            max-width: 280px !important;
            top: 5% !important;
            transform: none !important;
            max-height: 90vh !important;
            overflow-y: auto !important;
            writing-mode: horizontal-tb !important;
            height: auto !important;
            min-height: auto !important;
        }

        #panel-events[open],
        #panel-timeline[open] {
            left: 5px !important;
            right: auto !important;
        }

        #panel-characters[open] {
            right: 5px !important;
            left: auto !important;
        }

        /* 面板内容区优化：完全可滚动 */
        .panel[open] > div,
        .panel[open] details {
            padding: 8px !important;
            background: #f9f9f9 !important;
            border-radius: 6px !important;
            max-height: none !important;
            overflow: visible !important;
        }

        /* 标题样式优化 */
        .panel summary {
            color: #336666 !important;
            font-weight: bold !important;
            cursor: pointer !important;
            padding: 8px 10px !important;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(121, 134, 203, 0.05) 100%) !important;
            border: 1px solid rgba(161, 136, 127, 0.2) !important;
            border-radius: 8px !important;
            font-family: "楷体", "KaiTi", serif !important;
            transition: all 0.3s ease !important;
            font-size: 14px !important;
            /* 确保summary在收起状态下可点击 */
            pointer-events: auto !important;
        }

        .panel summary:hover {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(121, 134, 203, 0.15) 100%) !important;
            color: #8b7355 !important;
            box-shadow: 0 2px 8px rgba(212, 175, 55, 0.15) !important;
        }

        /* 收起状态下的summary样式 - 竖排文字 */
        .panel:not([open]) summary {
            padding: 15px 8px !important;
            font-size: 14px !important;
            text-align: center !important;
            white-space: nowrap !important;
            overflow: visible !important;
            text-overflow: unset !important;
            letter-spacing: 2px !important;
            height: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        /* 代码块样式优化 */
        .panel pre {
            background: #fff !important;
            padding: 8px !important;
            border-radius: 4px !important;
            margin-bottom: 8px !important;
            white-space: pre-wrap !important;
            word-wrap: break-word !important;
            font-size: 12px !important;
            border: 1px solid #d7ccc8 !important;
        }

        /* 对话气泡美化 */
        .group .bg-gray-100\/90 {
            background: linear-gradient(135deg, #ffffff 0%, #f8fdfe 50%, #f5f9ff 100%) !important;
            border: 2px solid #a1887f !important;
            border-radius: 18px 18px 6px 18px !important;
            box-shadow: 3px 3px 15px rgba(139, 115, 85, 0.15),
                        -1px -1px 10px rgba(255, 255, 255, 0.8) !important;
            color: #5d4037 !important;
            padding: 18px !important;
            position: relative !important;
            font-family: "楷体", "KaiTi", serif !important;
            line-height: 1.7 !important;
            margin: 12px 0 !important;
        }

        .group .bg-gray-100\/90::before {
            content: "✦" !important;
            position: absolute !important;
            left: -28px !important;
            top: 15px !important;
            color: #d4af37 !important;
            font-size: 18px !important;
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.6) !important;
            background: rgba(255, 255, 255, 0.9) !important;
            border-radius: 50% !important;
            width: 24px !important;
            height: 24px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .group .bg-white {
            background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 50%, #f5f0ff 100%) !important;
            border: 2px solid #7986cb !important;
            border-radius: 18px 18px 18px 6px !important;
            box-shadow: 3px 3px 15px rgba(121, 134, 203, 0.15),
                        -1px -1px 10px rgba(255, 255, 255, 0.8) !important;
            color: #3949ab !important;
            padding: 18px !important;
            position: relative !important;
            font-family: "宋体", "SimSun", serif !important;
            line-height: 1.7 !important;
            margin: 12px 0 !important;
        }

        .group .bg-white::before {
            content: "❖" !important;
            position: absolute !important;
            right: -28px !important;
            top: 15px !important;
            color: #7986cb !important;
            font-size: 18px !important;
            text-shadow: 0 0 8px rgba(121, 134, 203, 0.6) !important;
            background: rgba(255, 255, 255, 0.9) !important;
            border-radius: 50% !important;
            width: 24px !important;
            height: 24px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        /* 自定义内容块样式 */
        .content-block {
            background: linear-gradient(135deg, #ffffff 0%, #f8fdfe 100%) !important;
            border-left: 4px solid #a1887f !important;
            padding: 18px !important;
            margin: 14px 0 !important;
            border-radius: 8px !important;
            box-shadow: 2px 2px 10px rgba(139, 115, 85, 0.1) !important;
            font-family: "宋体", "SimSun", serif !important;
        }

        /* 对话和心声样式 */
        .dialogue {
            color: #e65100 !important;
            font-weight: bold !important;
            background: rgba(255, 236, 179, 0.3) !important;
            padding: 8px 12px !important;
            border-radius: 8px !important;
            border-left: 3px solid #ff9800 !important;
            margin: 8px 0 !important;
            font-family: "楷体", "KaiTi", serif !important;
        }

        .male-dialogue, .female-dialogue {
            color: #e65100 !important;
            font-style: italic !important;
            background: rgba(255, 236, 179, 0.2) !important;
            padding: 6px 10px !important;
            border-radius: 6px !important;
        }

        .thought {
            color: #c62828 !important;
            font-style: italic !important;
            background: rgba(255, 205, 210, 0.3) !important;
            border-left: 3px solid #f44336 !important;
            padding: 8px 12px !important;
            margin: 8px 0 !important;
            border-radius: 8px !important;
            font-family: "楷体", "KaiTi", serif !important;
        }

        .male-thought, .female-thought {
            color: #c62828 !important;
            background: rgba(255, 205, 210, 0.2) !important;
            padding: 6px 10px !important;
            border-radius: 6px !important;
        }

        /* 选项列表样式 */
        .options-list {
            list-style: none !important;
            padding: 0 !important;
            margin: 16px 0 !important;
        }

        .options-list li {
            background: linear-gradient(135deg, #ffffff 0%, #f8fdfe 100%) !important;
            margin: 8px 0 !important;
            padding: 14px !important;
            border: 2px solid #a1887f !important;
            border-radius: 12px !important;
            transition: all 0.3s ease !important;
            cursor: pointer !important;
            box-shadow: 2px 2px 8px rgba(139, 115, 85, 0.1) !important;
            font-family: "宋体", "SimSun", serif !important;
            color: #5d4037 !important;
        }

        .options-list li:hover {
            background: linear-gradient(135deg, #f1f8e9 0%, #e3f2fd 100%) !important;
            transform: translateY(-3px) !important;
            box-shadow: 4px 4px 15px rgba(139, 115, 85, 0.2) !important;
            border-color: #d4af37 !important;
        }

        /* 手机端全面优化 */
        @media (max-width: 768px) {
            .panel:not([open]) {
                max-width: 35px !important;
                min-width: 35px !important;
                min-height: 100px !important;
            }
            
            .panel[open] {
                max-width: calc(100vw - 15px) !important;
                left: 7px !important;
                right: 7px !important;
                top: 2% !important;
                max-height: 96vh !important;
                border: 1px solid #a1887f !important;
            }
            
            #panel-characters[open] {
                right: 7px !important;
                left: auto !important;
            }
            
            #panel-events[open],
            #panel-timeline[open] {
                left: 7px !important;
                right: auto !important;
            }
            
            body {
                padding-left: 50px !important;
                padding-right: 50px !important;
            }
            
            .panel summary {
                padding: 6px 8px !important;
                font-size: 13px !important;
            }
            
            .panel:not([open]) summary {
                padding: 12px 6px !important;
                font-size: 12px !important;
                letter-spacing: 1px !important;
            }
            
            .panel pre {
                font-size: 11px !important;
                padding: 6px !important;
            }
            
            /* 手机端NPC信息显示优化 */
            .panel[open] details[open] {
                margin-bottom: 10px !important;
            }
            
            .panel[open] details > summary {
                margin-bottom: 5px !important;
            }

            .group .bg-gray-100\/90,
            .group .bg-white {
                padding: 14px !important;
                margin: 10px 2px !important;
                border-radius: 14px !important;
                font-size: 14px !important;
            }
            
            .group .bg-gray-100\/90::before,
            .group .bg-white::before {
                display: none !important;
            }
        }

        /* 确保details内容可读性 */
        .panel details > div {
            padding: 5px 0 !important;
        }

        /* 滚动条美化 - 更细的滚动条 */
        .panel[open]::-webkit-scrollbar {
            width: 6px !important;
        }

        .panel[open]::-webkit-scrollbar-track {
            background: rgba(248, 244, 233, 0.5) !important;
            border-radius: 3px !important;
        }

        .panel[open]::-webkit-scrollbar-thumb {
            background: rgba(161, 136, 127, 0.5) !important;
            border-radius: 3px !important;
        }

        .panel[open]::-webkit-scrollbar-thumb:hover {
            background: rgba(161, 136, 127, 0.7) !important;
        }

        /* 超小屏幕优化 */
        @media (max-width: 480px) {
            .panel:not([open]) {
                max-width: 30px !important;
                min-width: 30px !important;
                min-height: 90px !important;
            }
            
            .panel[open] {
                max-width: calc(100vw - 10px) !important;
                left: 5px !important;
                right: 5px !important;
            }
            
            body {
                padding-left: 40px !important;
                padding-right: 40px !important;
            }
            
            .panel summary {
                font-size: 12px !important;
                padding: 5px 6px !important;
            }
            
            .panel:not([open]) summary {
                font-size: 11px !important;
                padding: 10px 4px !important;
                letter-spacing: 0.5px !important;
            }
            
            .panel pre {
                font-size: 10px !important;
            }
        }

        /* 标题样式 */
        h1, h2, h3, h4 {
            color: #8b7355 !important;
            border-bottom: 2px solid #a1887f !important;
            padding-bottom: 8px !important;
            margin-top: 20px !important;
            margin-bottom: 16px !important;
            font-family: "楷体", "KaiTi", serif !important;
            text-shadow: 1px 1px 2px rgba(139, 115, 85, 0.1) !important;
        }

        h1 {
            font-size: 2em !important;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(121, 134, 203, 0.1) 100%) !important;
            padding: 15px !important;
            border-radius: 12px !important;
            text-align: center !important;
        }

        h2 {
            font-size: 1.6em !important;
            padding-left: 10px !important;
            border-left: 4px solid #d4af37 !important;
        }

        h3 {
            font-size: 1.3em !important;
            color: #a1887f !important;
        }

        /* 淡入动画效果 */
        .group .bg-gray-100\/90,
        .group .bg-white,
        .content-block {
            animation: fadeInUp 0.5s ease-out !important;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
/* ================================================= *//* == 侧边栏 (书签风格) - 优化间距 == */details {position: fixed;right: 0;z-index: 1000;width: auto;transition: all 0.3s ease;}/* 增加间距，避免重叠 */details:nth-of-type(1) { top: 100px; }details:nth-of-type(2) { top: 200px; }details:nth-of-type(3) { top: 300px; }details:nth-of-type(4) { top: 400px; }details:nth-of-type(5) { top: 500px; }details > summary {padding: 15px 8px;color: #333333 !important;cursor: pointer;list-style: none;outline: none;background: #ffffff !important;border: 2px solid #a1c4fd !important;border-right: none !important;border-radius: 10px 0 0 10px !important;box-shadow: -2px 2px 5px rgba(74, 60, 90, 0.2) !important;font-family: "MPLUS Rounded 1c", sans-serif;transition: all 0.2s ease !important;writing-mode: vertical-rl;text-orientation: upright;letter-spacing: 2px;position: relative;}details > summary::before {display: none; /* 去掉❀图标 */}details > summary::-webkit-details-marker {display: none;}details > summary:hover {background: #a1c4fd !important;transform: translateX(-5px);}details[open] {z-index: 1001;top: 80px !important;width: 350px;max-height: 80vh;background-color: #fffdfd !important;background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpathd='M00h20v20H0z' fill='none'/%3E%3Cpath d='M0 19h20v1H0z' fill='%23a1c4fd' fill-opacity='0.2'/%3E%3C/svg%3E");border: 2px solid #a1c4fd;border-right: none;border-radius: 15px 0 0 15px;box-shadow: -5px 5px 20px rgba(161, 196, 253, 0.3);overflow-y: auto !important;}details[open] > summary {background: #a1c4fd !important;border-bottom: 2px dashed #fffdfd !important;border-radius: 0 !important;padding: 10px 20px;font-size: 1.2em;writing-mode: horizontal-tb;position: sticky !important;top: 0 !important;z-index: 1;}details[open] > summary::before {display: none;}details[open] > summary::after {content: '×';float: right;font-size: 1.2em;font-weight: bold;}.panel-content {padding: 20px;font-family: "Noto Serif JP", serif;}.panel-content h3 {font-family: "MPLUS Rounded 1c", sans-serif !important;color: #d8b8ff !important;border-bottom: 2px dotted #ffb6c1;padding-bottom: 5px;margin-bottom: 10px;font-size: 1.3em;}/* 小屏幕适配 */@media (max-width: 768px) {/* 调整移动端间距 */details:nth-of-type(1) { top: 80px; }details:nth-of-type(2) { top: 160px; }details:nth-of-type(3) { top: 240px; }details:nth-of-type(4) { top: 320px; }details:nth-of-type(5) { top: 400px; }details:not([open]) > summary {transform: translateX(calc(100% - 35px));padding: 10px 5px;font-size: 0.9em;}details:not([open]) > summary:hover {transform: translateX(calc(100% - 40px));}details[open] {width: 90vw;max-width: none;height: 60vh;top: 60px !important;border-radius: 15px 0 0 15px;}}