body,html{margin:0;height:100%;padding:0;overflow:hidden;user-select:none}#bt{position:fixed;top:0;left:0;right:0;height:30px;background-color:#f7f7f7}a{text-decoration:none;display:inline-block;transition:transform .1s ease,background-color .1s ease}a:active{transform:scale(.5)}.container_right{position:fixed;top:30px;display:flex;width:100vw}#leftPanel{width:100%;overflow:hidden}#rightPanel{flex:1;overflow:hidden;background-color:#f7f7f7}.divider{width:5px;background-color:#f7f7f7;cursor:ew-resize;position:relative}.divider::after{content:'';position:absolute;left:-2px;width:9px;height:100%;z-index:1}.mya{opacity:.3}.mya:hover{opacity:1}a.cooldown-link{color:#00f;text-decoration:none;cursor:pointer}a.cooldown-link.cooling-down{color:gray;pointer-events:none;cursor:default}.range-container{margin:20px 0 20px 20px;max-width:400px;display:flex;align-items:flex-start;gap:10px}.container{display:flex;flex-direction:column;width:400px;margin:20px 0 20px 20px;gap:10px}.item{display:flex;border:1px solid #ccc;padding:5px;background:#f9f9f9;cursor:grab;align-items:flex-start;border-radius:8px}.item.highlight{background-color:yellow}.number{width:15px;text-align:left;border-right:1px solid #aaa;padding:5px;background:#eee;user-select:none;border-radius:4px}.content{flex:1;padding:5px;display:flex;justify-content:space-between;align-items:flex-start}.label{cursor:pointer;margin-right:auto;padding:2px 5px;border-radius:6px}.buttons{display:flex;gap:5px}button{padding:2px 10px;cursor:pointer;border-radius:6px}input.edit-input{width:120px}#myDiv{height:60%;overflow-x:hidden;overflow-y:auto}.upload-container{width:400px;margin:10px}#drop-zone{border:2px dashed #aaa;border-radius:5px;padding:5px;text-align:center;color:#555;margin-top:5px;margin-bottom:5px}#processFiles{border:2px rgba(78, 110, 242);border-radius:5px;padding:10px;text-align:center;background-color:rgba(78, 110, 242);color:#fff;margin-top:5px;margin-bottom:5px}
.floating-panel {
    position: fixed; background: #f0f0f0;
    padding: 10px; border: 1px solid #ccc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    display: none; z-index: 1002; border-radius: 6px;
}
.color-option {
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-block; margin: 1px; cursor: pointer;
    border: 5px solid #fff;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
    vertical-align: middle;
}
.color-option.active { border-color: #000; }
.selection-rectangle {
    position: fixed; border: 2px dashed #000;
    background: rgba(0,0,0,0.1); pointer-events: none;
    animation: blink 0.8s steps(2,start) infinite;
    z-index: 10;
}
@keyframes blink { to { visibility:hidden; } }
.rainbow-checkbox{opacity:.3}.rainbow-checkbox:hover{opacity:1}
.rainbow-checkbox input[type="checkbox"] {
display: none;
}
.rainbow-checkbox label {
display: inline-block;
width: 22px;
height: 22px;
border: 3px solid transparent;
border-radius: 50%;
background: linear-gradient(white, white) padding-box, 
            linear-gradient(90deg, red, orange, yellow, green, cyan, blue, purple) border-box;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.rainbow-checkbox label::after {
content: "✔";
color: black; 
font-size: 18px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: all 0.2s ease;
}
.rainbow-checkbox input[type="checkbox"]:checked + label::after {
transform: translate(-50%, -50%) scale(1);
}



#lefttest {
position: fixed;
bottom: 0;
left: 0;
width: 40%;
height: 50%;
background-color:#f7f7f7;
z-index: 888;
overflow: hidden;
box-sizing: border-box;
}
#resizer_right {
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 100%;
cursor: ew-resize;
background-color:#f7f7f7;
}
#resizer_top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
cursor: ns-resize;
background-color:#f7f7f7;
}

#rightBottom {
position: fixed;
bottom: 0;
right: 0;
width: 40%;
height: 50%;
background-color:#f7f7f7; 
z-index: 888;
overflow: hidden;
box-sizing: border-box;
}
#rb_resizer_top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
cursor: ns-resize;
background-color:#f7f7f7;
}
#rb_resizer_left {
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 100%;
cursor: ew-resize;
background-color:#f7f7f7;
}


.cm-var-highlight {
background: yellow;
border-radius: 3px;
}


.cm-s-material.CodeMirror {
    background: #ffffff !important;  /* 白底 */
    color: #000000 !important;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #ddd;
    border-radius: 6px;
}

/* 彩虹括号颜色 */
.cm-bracket-level-0 { color: #000000; }
.cm-bracket-level-1 { color: #ff0000; }
.cm-bracket-level-2 { color: #ff00f7; }
.cm-bracket-level-3 { color: #1900ff; }
.cm-bracket-level-4 { color: #ff0099; }
.cm-bracket-level-5 { color: #b48ead; }
.cm-bracket-level-6 { color: #40e0d0; }
.cm-bracket-level-7 { color: #ff7f50; }

/* 不匹配的括号 */
.cm-mismatch-bracket { color: white !important; background-color: #e51400; }

/* 新增: 相同项高亮的样式 (可以自定义背景色) */
.cm-matchhighlight {
    background-color: #bcc5ca;
}

.CodeMirror-matchingbracket { 
    outline: 1px solid #b7b1b1;  
    background: #d7d1d1 !important;
}

/* 光标 */
.CodeMirror-cursor {
    border-left: 3px solid  #000000 !important;
}

/* 行号栏 */
.CodeMirror-gutters {
    background: #f9f9f9 !important;
    border-right: 1px solid #ddd !important;
    color: #666 !important;
}

    .cm-keyword     { color: #000000 !important; font-weight: bold; }  
    .cm-variable    { color: #4400ff !important; }            
    .cm-comment     { color: #999999 !important; font-style: italic; }  
    .cm-number      { color: #000000 !important; }                     
    .cm-string      { color: #008000 !important; }                    
    .cm-operator    { color: #9c27b0 !important; }             

    .CodeMirror-scrollbar-annotate {
    background: red;
    opacity: 0.6; /* 可调透明度 */
}

.CodeMirror {
    height: 88%;
    overflow: atuo;
}