[data-math-source][data-visual-source-ready] { display: none !important; }
.visual-math-editor { min-width: 0; width: 100%; }
.visual-math-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin: .35rem 0; }
.visual-math-toolbar button { min-height: 36px; padding: .35rem .75rem; border: 1px solid #d5dce5; border-radius: 8px; color: #1856a4; background: #fff; font: inherit; cursor: pointer; }
.visual-math-content { min-height: 6rem; padding: .8rem; border: 1px solid #cbd2dc; border-radius: 10px; background: #fff; color: #20242a; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; outline: none; }
.visual-math-content:focus { border-color: #2177d8; box-shadow: 0 0 0 3px #2177d820; }
.visual-math-content:empty::before { content: attr(data-placeholder); color: #7a8391; pointer-events: none; }
.visual-math-content[aria-multiline="false"] { min-height: 2.8rem; }
.visual-math-token { display: inline-block; box-sizing: border-box; max-width: 100%; padding: .1rem .2rem; margin: 0 .08rem; border-radius: 5px; background: #f4f7fb; white-space: normal; vertical-align: middle; overflow-x: auto; overflow-y: hidden; cursor: pointer; }
.visual-math-token:hover, .visual-math-token:focus { outline: 2px solid #98bdf0; background: #edf4ff; }
.visual-math-token .katex-display { margin: .25em 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.visual-math-display { display: block; margin: .4rem 0; padding: .3rem .5rem; }
.visual-math-editor.is-locked .visual-math-content { background: #f5f6f8; color: #67717e; }
.visual-math-editor.is-locked .visual-math-token { cursor: default; }
.visual-math-status { margin: .4rem 0 0; color: #ad382a; font-size: .9rem; line-height: 1.5; }
.visual-math-status:empty { display: none; }
dialog.visual-formula-dialog { box-sizing: border-box; width: min(760px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto; border: 1px solid #dce2ec; border-radius: 16px; padding: 1.25rem; color: #20242a; background: white; box-shadow: 0 18px 75px #0003; }
dialog.visual-formula-dialog::backdrop { background: #18233475; }
.visual-formula-dialog h2 { margin: 0 0 .7rem; font-size: 1.3rem; }
.visual-formula-instructions { color: #606b79; font-size: .95rem; line-height: 1.6; }
.visual-formula-dialog math-field { display: block; min-height: 80px; max-width: 100%; padding: .75rem; border: 1px solid #bac8da; border-radius: 10px; font-size: 1.35rem; background: #fff; color: #20242a; --caret-color: #076fe5; --selection-background-color: #cce2ff; }
.visual-formula-dialog math-field::part(menu-toggle) { display: none; }
.visual-formula-keyboard { position: relative; width: 100%; min-width: 0; overflow: hidden; margin-top: .75rem; border-radius: 10px; --keycap-height: 44px; --keycap-gap: 5px; }
.visual-formula-keyboard[hidden] { display: none; }
.visual-formula-actions { display: flex; position: sticky; bottom: -1px; z-index: 2; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1rem; padding: .65rem 0 .1rem; background: #fff; }
.visual-formula-actions button { min-height: 42px; padding: .55rem 1rem; border: 1px solid #d2dbe6; border-radius: 9px; background: #fff; color: #25334a; font: inherit; cursor: pointer; }
.visual-formula-actions button.primary { color: white; background: #076fe5; border-color: #076fe5; }
.visual-formula-actions button:disabled { opacity: .5; cursor: default; }
@media (max-width: 600px) { .visual-math-content { padding: .65rem; font-size: 16px; } dialog.visual-formula-dialog { padding: 1rem; } .visual-formula-dialog math-field { font-size: 1.2rem; } }
@media print { .visual-math-editor, .visual-formula-dialog { display: none !important; } }