.drawBtn {
    height: 36px;
    line-height: 36px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: inline-flex;
    align-item: center;
    gap: 5px;
    transition: all 0.2s ease;
}
.drawBtn:hover {
    cursor: pointer;
    background: #f5f5f5;
    border-color: #ccc;
}

.drawBtn:active {
    background: #e8e8e8;
    transform: translateY(1px);
}

.drawBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#custom-cursor {
    width: 20px;
    height: 20px;
    border: 2px solid black;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease;
    display: none;
}

#custom-cursor.move {
    transform: rotate(45deg);
    border: 2px solid blue;
}

math {
    font-family: Latin Modern Math, STIX Two Math!important;
    font-size: 100%;
}

.allModal {
    position: fixed;
    top: 50%;
    max-width: 380px;
    max-height: calc(100vh - 40px);
    transform: translateY(-50%);
    background-color: #c9dcff;
    padding: 5px 5px 5px 10px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
    z-index: 1000;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Editable text defaults */
.editable-text {
    font-size: 18px;
    color: #000000;
    /* 确保内联样式的font-weight和font-style能够正常工作 */
    font-weight: inherit;
    font-style: inherit;
}


/* Math Calculator Styles */

/* Math Calculator Button */
#mathCalculatorBtn {
    height: 28px;
    line-height: 2px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: #667eea;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

#mathCalculatorBtn:hover {
    background: #5b6fe8;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}

#mathCalculatorBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

#testEditor #mathCalculatorBtn {
    height: 28px;
    line-height: 2px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: #667eea;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

#testEditor #mathCalculatorBtn:hover {
    background: #5b6fe8;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}

#testEditor #mathCalculatorBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

/* Math Calculator Modal - uses allModal base styles */
.math-calculator-modal {
    width: 280px;
    max-width: 320px;
    padding: 0 !important;
    background: rgba(248, 251, 255, 0.98) !important;
    border: 1px solid rgba(74, 144, 226, 0.25);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(20, 30, 60, 0.22) !important;
    z-index: 10050;
}

.math-caret-tip {
    position: fixed;
    z-index: 20060;
    display: none;
    pointer-events: none;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(20, 30, 60, 0.96);
    color: #ffffff;
    font-size: 12px;
    line-height: 1.2;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

.math-calculator-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #4a90e2 0%, #6b7cff 100%);
    padding: 0 14px;
    height: 40px;
}

.math-calculator-modal .modal-header h3 {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.math-calculator-modal .close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #ffffff;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.math-calculator-modal .close-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: rotate(90deg) scale(1.05);
}

.math-calculator-modal .form-group {
    margin-bottom: 5px;
}

.math-calculator-modal .form-group label {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    color: #34495e;
}

.math-calculator-modal .form-group input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    background: white;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.math-calculator-modal .form-group select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    background: white;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.math-calculator-modal .question-type-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.math-calculator-modal .question-type-controls select {
    width: 180px;
    flex: 0 0 auto;
}

.math-calculator-modal .insert-expression-btn {
    flex: 0 0 auto;
    padding: 4px 12px;
    border: 1px solid rgba(39, 75, 30, 0.55);
    border-radius: 6px;
    background: rgba(51, 167, 82, 0.96);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    appearance: none;
}

.math-calculator-modal .insert-expression-btn:hover {
    background: rgba(32, 96, 26, 0.98);
    border-color: rgba(73, 147, 75, 0.75);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
    color: white;
}

.math-calculator-modal .insert-expression-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.math-calculator-modal .insert-expression-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.22);
}

.math-calculator-modal .form-group select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.math-calculator-modal #expressionInput {
    width: 100%;
    padding: 8px 10px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    background: white;
    min-height: 34px;
    outline: none;
}

.math-calculator-modal #expressionInput:focus,
.math-calculator-modal #expressionInput:focus-within {
    border-color: #4a90e2 !important;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1) !important;
}

.math-calculator-modal #expressionInput .mq-sup,
.math-calculator-modal #expressionInput .mq-nthroot-index,
.math-calculator-modal #expressionInput .mq-root-index {
    font-size: 0.75em !important;
}

.math-calculator-modal .form-group [contenteditable="true"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    background: white;
    min-height: 34px;
    line-height: 18px;
    outline: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.math-calculator-modal .form-group [contenteditable="true"]:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.math-calculator-modal .form-group [contenteditable="true"][data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: #bdc3c7;
}

.math-calculator-keypad {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.math-calculator-keypad.preset-layout-arith {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "d7 d8 d9 lparen rparen op1"
        "d4 d5 d6 var q op2"
        "d1 d2 d3 backspace clear op3"
        "pm d0 dot op_eq  .      op4"
        ".  .  .   .      .      .";
}

.math-calculator-keypad.preset-layout-trig {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "sin cos tan lparen rparen op1"
        "d7  d8  d9  var   q      op2"
        "d4  d5  d6  backspace clear op3"
        "d1  d2  d3  op_eq .      op4"
        "pm  d0_under_d2   dot .     .      ."
        ".   .   .   .     .      .";
}

.math-calculator-keypad.preset-layout-custom {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "sin cos tan op_div lparen rparen"
        "sqrt pow abs op_mul var q"
        "d7 d8 d9 op_sub y z"
        "d4 d5 d6 op_add backspace clear"
        "d1 d2 d3 op_eq pow2 nthRoot"
        "pm d0 dot frac . .";
}

.math-calculator-modal .math-calculator-keypad.tools-panel {
    display: grid !important;
}

.math-calculator-keypad .math-fn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(60, 70, 90, 0.25);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 700;
    color: #2c3e50;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    appearance: none;
}

.math-calculator-keypad .math-fn-btn[hidden] {
    display: none !important;
}

.math-calculator-keypad .math-fn-spacer {
    height: 36px;
    border: 1px solid transparent;
    border-radius: 6px;
    pointer-events: none;
}

.math-calculator-keypad .math-fn-btn:hover {
    background: rgba(240, 246, 255, 0.98);
    border-color: rgba(74, 144, 226, 0.75);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.math-calculator-keypad .math-fn-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.math-calculator-keypad .math-fn-btn.is-pressed {
    animation: math-keypad-press 160ms ease-out;
}

.math-calculator-keypad .math-fn-btn.is-pressed:hover {
    animation: math-keypad-press 160ms ease-out;
}

@keyframes math-keypad-press {
    0% {
        transform: translateY(0) scale(1);
        filter: none;
    }
    45% {
        transform: translateY(2px) scale(0.97);
        background: rgba(255, 228, 238, 0.98);
        border-color: rgba(244, 114, 182, 0.7);
        box-shadow: 0 2px 10px rgba(244, 114, 182, 0.22);
    }
    100% {
        transform: translateY(0) scale(1);
        filter: none;
    }
}

.math-calculator-keypad .math-fn-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.22);
}

.math-calculator-keypad .math-fn-btn.wide {
    grid-column: span 3;
}

.math-calculator-keypad .math-fn-btn.wide2 {
    grid-column: span 2;
}

.math-calculator-keypad.preset-layout-arith .math-fn-btn.wide,
.math-calculator-keypad.preset-layout-arith .math-fn-btn.wide2,
.math-calculator-keypad.preset-layout-trig .math-fn-btn.wide,
.math-calculator-keypad.preset-layout-trig .math-fn-btn.wide2,
.math-calculator-keypad.preset-layout-custom .math-fn-btn.wide,
.math-calculator-keypad.preset-layout-custom .math-fn-btn.wide2 {
    grid-column: auto;
}

@media (max-width: 380px) {
    .math-calculator-keypad {
        grid-template-columns: repeat(4, 1fr);
    }
    .math-calculator-keypad .math-fn-btn.wide {
        grid-column: span 2;
    }
}

.math-calculator-keypad .math-fn-btn[data-action="backspace"] {
    background: rgba(255, 240, 214, 0.95);
    border-color: rgba(235, 142, 54, 0.55);
}

.math-calculator-keypad .math-fn-btn[data-action="clear"] {
    background: rgba(255, 227, 230, 0.95);
    border-color: rgba(231, 76, 60, 0.55);
}

.math-calculator-keypad .math-fn-btn[data-insert="+"],
.math-calculator-keypad .math-fn-btn[data-insert="-"],
.math-calculator-keypad .math-fn-btn[data-insert="×"],
.math-calculator-keypad .math-fn-btn[data-insert="÷"],
.math-calculator-keypad .math-fn-btn[data-insert="="],
.math-calculator-keypad .math-fn-btn[data-action="toggle-sign"],
.math-calculator-keypad .math-fn-btn[data-insert="("],
.math-calculator-keypad .math-fn-btn[data-insert=")"] {
    background: rgba(232, 241, 255, 0.96);
    border-color: rgba(74, 144, 226, 0.55);
}

.math-calculator-keypad .math-fn-btn[data-insert="sin()"],
.math-calculator-keypad .math-fn-btn[data-insert="cos()"],
.math-calculator-keypad .math-fn-btn[data-insert="tan()"] {
    background: rgba(243, 232, 255, 0.96);
    border-color: rgba(168, 85, 247, 0.55);
}

.math-calculator-modal .question-type-controls .custom-select-wrapper {
    width: 180px;
    flex: 0 0 auto;
    margin-bottom: 0;
}

.math-calculator-modal .modal-body {
    padding: 12px 12px 10px;
}

.math-calculator-modal .form-group [contenteditable="true"] {
    font-size: 14px;
    min-height: 34px;
    line-height: 18px;
}

.math-calculator-help {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(60, 70, 90, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    color: #2c3e50;
    font-size: 13px;
    line-height: 1.5;
}

.math-calculator-modal .form-group input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.math-calculator-modal .form-group input::placeholder {
    color: #bdc3c7;
}

/* Solved Value Highlight */
.solved-value {
    color: #1e6bd6 !important;
    background: rgba(255, 77, 79, 0.18) !important;
    border-radius: 4px;
    padding: 2px 6px;
    display: inline-block;
    font-weight: 600;
}

@keyframes highlight-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}