body { 
    font-family: 'Arial', sans-serif; /* 设置字体系列 */  
    font-size: 16px; /* 设置字体大小 */  
    line-height: 1.5; /* 设置行高，提升可读性 */  
    font-weight: 400; /* 设置字体粗细，正常 400 */  
    color: #333; /* 设置文本颜色 */  
    background-color: #FFFFFF; /* 设置背景颜色 */ 
    position: relative; 
    overflow: hidden; 
} 



.container {  
    display: flex;  
    flex-direction: column; /* 纵向排列 */  
    align-items: flex-start; /* 顶部对齐 */  
    border: 1px solid #ffffff; /* 边框样式 */
    margin: 0 0; /* 外边距 */
    padding: 2px; /* 内边距 */
    width: 98%; /* 设置宽度 */  
    height: 100%; /* 设置高度 */ 
}  

.drawing-area {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    pointer-events: none; /* 默认禁用绘制 */  
    z-index: 1; /* 层级确保在幻灯片之上 */  
}  

.drawing-canvas {  
    position: absolute;  
    top: 0;  
    left: 0;    
    pointer-events: auto; /* 允许画布交互 */
    width: 100vw;
    height: 500vh; /* 画布高度为视口高度的两倍 */
    background: rgba(255, 255, 255, 0); /* 完全透明背景 */
    z-index: 1;  
}  

/* 默认样式，适用于大多数设备 */
.controls {  
    position: absolute;  
    bottom: 6vh;   
    left: 50%;  
    transform: translateX(-50%);  
    background: rgba(255, 255, 255, 0.8);  
    padding: 1vh;  
    border-radius: 5px;  
    z-index: 2;  
    display: flex;	
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0);		
    flex-direction: column; /* 使子元素垂直排列 */
    align-items: center; /* 垂直居中 */ 
    
}
.controlss {  
    position: absolute;  
    bottom: 5vh;   
    left: 50%;  
    transform: translateX(-50%);  
    background: rgba(255, 255, 255, 0.8);  
    padding: 1vh;  
    border-radius: 5px;  
    z-index: 2;  
    display: flex;	
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);		
    flex-direction: column; /* 使子元素垂直排列 */
    align-items: center; /* 垂直居中 */ 
    
}    

.controlss label,   
.controlss button,   
.controlss input {  
    margin: 0vh;   
    font-size: 2vh;
}    

.color-button {  
    width: 3vh;  
    height: 3vh;   
    border: none;  
    cursor: pointer;		
    display: inline-block;  
}  
.mbutton {
    background-color: #ffffff;
    color: white;
    border: none;
    height: 25px;
    width: 25px;
    padding: 2px 2px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    /* 让里面的元素居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.mbutton:hover {
    background-color: #d3d3d3;
}

/* 新增选中时的样式 */
.mbutton:active,
.mbutton:focus {
    background-color:#3299FA;
}
input[type="range"] {  
    width: 40px; /* 修改为固定宽度 */  
    height: 2vh;   
    margin: 0.5vh 0;   
} 
 .color-button {  
        width: 25px;  
        height: 25px;  
    }  
    .controlss label,   
    .controlss button,   
    .controlss input {  
        margin: 0px;   /* 增加外边距，使元素之间有更多空间 */
        
        font-size: 10px;  /* 调整字体大小，使其更适合小屏幕 */
    }    

/* 针对屏幕宽度小于768px的设备（如手机） */
@media screen and (max-width: 768px) {
    .controlss {  
        padding: 2px;  /* 增加内边距，使元素之间有更多空间 */
    }  

    .controlss label,   
    .controlss button,   
    .controlss input {  
        margin: 0px;   /* 增加外边距，使元素之间有更多空间 */
        font-size: 14px;  /* 调整字体大小，使其更适合小屏幕 */
    }    

    .color-button {  
        width: 30px;  /* 调整按钮大小，使其更适合小屏幕 */
        height: 30px;  
    }  

    input[type="range"] {  
        width: 80px;  /* 调整滑块宽度，使其更适合小屏幕 */
        height: 10px;  
        margin: 5px 0;  
    } 
}

.first-row, .second-row, .third-row {
    display: flex;
    gap: 10px;
}
.top {  
    flex: 0 0 0.5%; /* 固定高度为容器高度的20% */  
    border-bottom: 1px solid #ffffff; /* 底部边框 */  
    padding: 1px 1px 1px 10px; /* 内边距 */  
    background-color: #19c954; /* 背景颜色 */  
    width: 100%; /* 设置宽度 */  
   margin-top: 20px;
    border-radius: 10px; /* 添加圆角，您可以根据需求调整这个值 */  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影，可以调整值来改变阴影的效果 */  
}  

  .middle {
   
    padding: 1px; /* 内边距 */
   
    width: 98%; /* 设置宽度 */
    height:auto;
  }

  .bottom {
    position: fixed; /* 固定在页面底部 */
    bottom: 15px; /* 距离页面底部的距离 */
    left: 50px; /* 距离页面左侧的距离 */
    width: 95%; /* 宽度固定为页面宽度 */
    height: 15px; /* 高度固定为50像素（可根据需要调整） */
    display: flex; /* 保持flex布局 */
    justify-content: flex-start; /* 水平居中（可选） */
    align-items: center; /* 垂直居中（可选） */
    padding: 0  10px; /* 内边距 */
    background-color: #ffffff00; /* 背景颜色 */
    z-index: 1000; /* 确保在其他内容之上（可选） */
  }
  /* 将按钮样式化为链接形式（可选） */
.link-button {
    border: none;
    color: black;
    cursor: pointer;
    padding: 0;
    font: inherit;
    background-color: white;
    transition: background-color 0.3s ease;
  }
  .link-button.active {
    background-color: #666;
    color: white;
}
  

  .bottom button {
    margin-right: 2px; /* 每个按钮之间的间距 */
    padding: 8px 16px; /* 按钮的内边距 */
    background-color: #ffffff; /* 按钮背景颜色 */
    border: none; /* 去掉边框 */
    border-radius: 4px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停时的指针样式 */
    font-size: 14px; /* 字体大小 */
    display: inline-block; /* 确保 margin 生效 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    transition: box-shadow 0.3s ease; /* 添加过渡效果 */
    
  }
  
  .bottom button:last-child {
    margin-right: 0; /* 最后一个按钮右边不需要间距 */
  }

  
  
  .left {
    position: relative;
    height:85%;
   
    padding: 1px; /* 内边距 */
    
    width: 85%; /* 设置宽度 */
  }

  .left::before {
    content: ''; /* 伪元素需要内容属性 */
    position: absolute; /* 绝对定位 */
    bottom: 0; /* 底部对齐 */
    left: 0; /* 左侧对齐 */
    width: 70px; /* 根据需要设置宽度 */
    height: 70px; /* 根据需要设置高度 */
    background-color: #ffffff; /* 白色背景 */
    z-index: 10; /* 确保方块在上层 */
}

  .right {
   
    padding: 20px; /* 内边距 */
    background-color: #ffffff; /* 背景颜色 */
    width: 40%; /* 设置宽度 */
  }


      /* 默认的滚动条宽度（适用于电脑） */
::-webkit-scrollbar {
    width: 16px; /* 纵向滚动条宽度 */
    height: 2px; /* 横向滚动条高度 */
    
}

::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* 平板设备上的滚动条宽度（屏幕宽度小于1024px） */
@media (max-width: 1024px) {
    ::-webkit-scrollbar {
        width: 16px; /* 纵向滚动条宽度 */
        height: 2px; /* 横向滚动条高度 */
    }

    ::-webkit-scrollbar-track {
        background: #e0e0e0;
        border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb {
        background: #666;
        border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #444;
    }
}

/* 4K屏幕上的滚动条宽度（屏幕宽度大于等于3840px） */
@media (min-width: 3840px) {
    ::-webkit-scrollbar {
        width: 24px; /* 纵向滚动条宽度 */
        height: 2px; /* 横向滚动条高度 */
    }

    ::-webkit-scrollbar-track {
        background: #e0e0e0;
        border-radius: 12px;
    }

    ::-webkit-scrollbar-thumb {
        background: #666;
        border-radius: 12px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #444;
    }
}

 /* 试题 */
 
   .top{
    font-family: 'LiSu', serif;
    font-size: 5rem;
            /* 设置字体大小 */
    font-weight: 400;
            /* 设置字体粗细，粗体 700 */
    line-height: 1;
            /* 设置行高 */
    color: #2c3e50;
            /* 设置标题颜色 */
    margin: 0px 0px 0px 0px;
            /* 设置外边距，上下左右都为20px */
   }
        
    .bt {
    font-family: '隶书', 'Georgia', serif;
    /* 设置标题字体，优先使用隶书字体，若系统中没有则使用 Georgia 字体 */
    font-size: 7rem;
    /* 设置字体大小 */
    font-weight: 400;
    /* 设置字体粗细 */
    line-height: 1.2;
    /* 设置行高 */
    color: #2c3e50;
    /* 设置标题颜色 */
    position: absolute; /* 设置为绝对定位 */  
    top: 40%; /* 垂直方向50% */  
    left: 50%; /* 水平方向50% */  
    transform: translate(-50%, -50%); /* 通过 transform 移动至中心 */ 
    text-align: center;
    /* 设置文字水平居中 */
	
}
  .st {
    font-family: 'Georgia', serif;
    /* 设置标题字体 */
    font-size: 4rem;
    /* 设置字体大小 */
    font-weight: 400;
    /* 设置字体粗细，粗体 700 */
    line-height: 1.2;
    /* 设置行高 */
    color: #2c3e50;
    /* 设置标题颜色 */
    margin: 20px 20px 0px 20px;
    /* 设置外边距，上下左右都为20px */
}
@media (min-width: 1921px) and (max-width: 3840px) {
    /* 2K */
    .st {
        font-size: 70px !important;
        /* 调整2K端字号为70px，使用 !important 确保优先级 */
    }
}

@media (min-width: 3841px) {
    /* 4K */
    .st {
        font-size: 90px !important;
        /* 调整4K端字号为90px，使用 !important 确保优先级 */
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* 平板 */
    .st {
        font-size: 3rem !important;
        /* 调整平板端字号为较小值，使用 !important 确保优先级 */
    }
}

        /* 新增画布容器样式 */
        .canvas-container {
            width: 100%;
            height: 100%;
            /* overflow: auto; */
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            overflow: hidden;
            cursor: grab;
        }

        .canvas-container.dragging {
    cursor: grabbing;
}


.grid {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(220, 220, 220, 0.2) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(220, 220, 220, 0.2) 1px, transparent 1px);
    background-size: 50px  50px; /* 设置网格大小 */
    z-index: -1; /* 确保网格在画布之下 */
}
.hidden {
            display: none;
        }
   
        
/* 控制面板布局切换样式 - 移除了拖拽相关样式 */
.controlss.right-layout {
    flex-direction: column;
    left: auto;
    right: 20px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    cursor: default; /* 移除抓取光标 */
}

/* 右侧布局时的第一行样式 */
.controlss.right-layout .first-row {
    flex-direction: column;
}

/* 橡皮擦范围指示器样式 */
.eraser-indicator {
    position: fixed;
    border-radius: 50%;
    border: 2px solid #888;
    background-color: rgba(200, 200, 200, 0.3);
    pointer-events: none;
    z-index: 1001;
    display: none;
}

/* 添加以下样式 */
.controlss.right-layout .first-row {
    gap: 8px;
}

.mbutton {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mbutton svg {
    width: 20px;
    height: 20px;
}