/* 用于拖动分割线 */
        .resizer {
            background-color: #ccc;
            width: 5px;
            cursor: col-resize;
        }

        .resizer-horizontal {
            background-color: #ccc;
            height: 5px;
            cursor: row-resize;
        }

        /* 弹出框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            position: relative;
            resize: both;
            overflow: auto;
        }

        /* 右键菜单样式 */
        .context-menu {
            display: none;
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        }

        .context-menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .context-menu li {
            padding: 8px 12px;
            cursor: pointer;
        }

        .context-menu li:hover {
            background-color: #f0f0f0;
        }

        /* 不同主题样式 */
        .theme-gray {
            background-color: #f0f0f0;
        }
        
        /* 句子和短语高亮样式 */
        .theme-gray .sentence.highlight {
            background-color: #fff3cd;
        }

        .theme-gray .phrase-cn.phraselight, .theme-gray .phrase-en.phraselight {
            background-color: #d1e7dd;
        }
        
        .theme-gray .child-cn.childlight, .theme-gray .child-en.childlight {
            background-color: #d1e7dd;
            font-weight: bold;//文字加粗
        }
        
        .theme-white {
            background-color: white;
        }

        .theme-white .sentence.highlight {
            background-color: yellow;
        }

        .theme-white .phrase-cn.phraselight, .theme-white .phrase-en.phraselight  {
            background-color: lightgreen;
        }
        
        .theme-white .child-cn.childlight, .theme-white .child-en.childlight {
            background-color: lightgreen;
            font-weight: bold;
        }
        
        .theme-black {
            background-color: #121212;
            color: white;
        }

        .theme-black .sentence.highlight {
            background-color: #1967D2  ;/* MidnightBlue MediumBlue #333;*/
        }

        .theme-black .phrase-cn.phraselight, .theme-black .phrase-en.phraselight {
            background-color: MediumBlue;/*DodgerBlue #555;*/
        }

        .theme-black .child-cn.childlight, .theme-black .child-en.childlight {
            background-color: MediumBlue;/*DodgerBlue #555;*/
            font-weight: bold;
        }        

        /* 提示信息样式 */
        #topLineTip {
            display: none;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 0 0 5px 5px;
            z-index: 100;
        }
        
        /* 顶部细线样式 */
        #topLine {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #ccc;
            cursor: pointer;
            z-index: 500;
        }
        
        /* 自定义 select 和 button 样式 */
        select {
            background-color: white;
            color: black;
        }

        .theme-black select {
            background-color: #333;
            color: white;
        }

        button {
            background-color: #333;
            color: white;
        }

        button:hover {
            background-color: #555;
        }
         /*课文生词的文字颜色*/
        .theme-gray .textcolor{
            color: #800000;/*黑色 #000000‌36 或深红色 #800000‌*/
        }        
        .theme-white .textcolor {
            color: #DC143C; /*黑色 #000000‌36、藏青色 #000080‌4 或深绿色 #006400‌46 高对比度选项：猩红色 #DC143C*/
        } 
        .theme-black .textcolor {
            color: #FF4500;/*白色 #FFFFFF‌36、浅粉红 #FFB6C1‌26 或水绿色 #00FFFF‌4 高亮选项：橙红色 #FF4500‌*/
        } 

         /*播放文字的背景色*/
        .theme-gray .selectColor{
            background-color: rgba(237,145,33,0.27); //#ED9121;
        }        
        .theme-white .selectColor{/* 前面没.sentence，就可以被其它颜色覆盖*/
            background-color: rgba(0,100,0,0.27); 
        } 
        .theme-black .selectColor{
            background-color:  rgba(255,182,193,0.55); /* 替换#FFB6C1‌26 */
        } 
        
        /* 下拉按钮样式 */
        .dropbtn {
            /*background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            border-radius: 4px;*/
        }

        /* 下拉按钮悬停效果 */
        .dropbtn:hover {
            /*background-color: #3e8e41;*/
        }

        /* 下拉菜单容器 - 默认隐藏 */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* 下拉菜单内容 */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            border-radius: 4px;
        }

        /* 下拉菜单中的链接 */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* 鼠标悬停在下拉菜单链接上时的样式 */
        .dropdown-content a:hover {
            background-color: #f1f1f1;
            border-radius: 4px;
        }

        .theme-black .context-menu {
            background-color: #333;
            color: white;
        }
        .theme-black .context-menu li:hover {
            background-color: #1967D2;/*RoyalBlue #4169E1;*/
        }
        
        /* 显示下拉菜单 */
        .show {
            display: block;
        }
        
        /* 主内容区 
        #contentWrapper {
          white-space: pre-wrap;
          text-align: right;
        }*/
        /* 取消斜体 
        #contentWrapper i {
            font-style: normal; 
        }*/
        
        /* 显示其它按钮 */
        #showAll {
          display: none;
        }
        
        /* 智能定位悬浮框 */
        .popup-div {
            display: none;
            position: fixed;
            border: 1px solid #ccc;
            /*background: white;*/
            padding: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            max-width: 500px;
            min-width: 300px;  /* 锁定最小宽度 */
            line-height: 1.5;  /* 用于计算行高基准 */
        }

        .active {
            display: block !important;
        }      
        
        .theme-gray .popup-div {
            background-color: #f0f0f0;
        }
        .theme-white .popup-div {
            background-color: white;
        }       
        .theme-black .popup-div {
            background-color: #121212;
        }        

        #englishColumn table {
          border-collapse: separate; /* 需与border-spacing配合 */
          border-spacing: 10px 0px; /* 水平间距10px，垂直间距5px */
        }
        #chineseColumn table {
          border-collapse: separate; /* 需与border-spacing配合 */
          border-spacing: 0px 0px; /* 水平间距10px，垂直间距5px */
        }
        td .rt {
            white-space: nowrap;
            text-align: right;
            vertical-align: top;
        }
        
        /* PC端原有样式保留 */
        #topToolbar {
            display: flex;
            /*align-items: center;
            justify-content: space-between;*/
        }
     
        #contentWrapper {
            
            flex-direction: row;
        }
        
        /*#spacer_tool, #spacer {
          display: block; 
        }       */ 
        
        /* PC端保持原有布局，手机端（竖屏）单独适配 */
        @media (max-width: 767px) {          
            /*#spacer_tool, #spacer {
              display: block; 
            }*/
            /* 手机端工具栏调整 */
            #topToolbar {
                height: auto;
                padding: 8px 16px;
                flex-wrap: wrap;
                justify-content: center;
            }
            /* 手机端隐藏非必要元素 */
            #topToolbar select:not(#courseNum),
            #topToolbar button:not(#loadPreCourse, #loadNextCourse, .dropbtn, #toggleToolbar) {
                display: none;
            }
            /* 主内容区改为上下分栏 */
            #contentWrapper {
                flex-direction: column;
                /*margin-top: 60px;*/
            }
            #englishColumn, #chineseColumn {
                width: 100% !important;
                border-right: none;
                border-bottom: 1px solid #e5e7eb;
            }
            .resizer {
                display: none;
            }
            #mp3 {
                display: none;
            }
            #showAll {
              display: block;
            }            
            /* 手机端字体优化 */
            #contentWrapper {
                font-size: 16px;
                line-height: 1.6;
            }
        }