/*!
 * ThreEva Editor v3.1 — Complete Stylesheet (Light + Dark)
 */

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — Light mode (default)
═══════════════════════════════════════════════════════════ */
:root {
  --te-bg:         #f8fafc;
  --te-surface:    #f1f5f9;
  --te-panel:      #ffffff;
  --te-border:     #e2e8f0;
  --te-border-md:  #cbd5e1;
  --te-text:       #0f172a;
  --te-text-md:    #334155;
  --te-text-lt:    #64748b;
  --te-text-xlt:   #94a3b8;
  --te-primary:    #2563eb;
  --te-prim-lt:    #eff6ff;
  --te-prim-md:    #bfdbfe;
  --te-prim-dk:    #1d4ed8;
  --te-ok:         #16a34a;
  --te-err:        #dc2626;
  --te-ed-bg:      #ffffff;
  --te-ed-text:    #0f172a;
  --te-hover-bg:   #f1f5f9;
  --te-card-bg:    #ffffff;
  --te-card-hover: #eff6ff;
  --te-sh:         0 1px 3px rgba(15,23,42,.08), 0 4px 16px rgba(15,23,42,.06);
  --te-sh-lg:      0 8px 40px rgba(15,23,42,.16), 0 0 0 1px rgba(15,23,42,.05);
  --te-r:   10px;
  --te-rsm:  6px;
  --te-rxs:  4px;
  --te-tr:  140ms cubic-bezier(.4,0,.2,1);
  --te-f-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --te-f-ed: Georgia, 'Times New Roman', serif;
  --te-f-mo: 'SF Mono', 'Fira Code', Consolas, monospace;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — applied via .te-dark on .te-wrap
   Modals inside dark editors also get .te-dark
═══════════════════════════════════════════════════════════ */
.te-dark,
.te-md.te-dark {
  --te-bg:         #1a2030;
  --te-surface:    #141b28;
  --te-panel:      #1f2840;
  --te-border:     #2a3550;
  --te-border-md:  #374460;
  --te-text:       #e8edf8;
  --te-text-md:    #b8c5de;
  --te-text-lt:    #7a8fab;
  --te-text-xlt:   #4a5a72;
  --te-primary:    #4d8ef5;
  --te-prim-lt:    #192540;
  --te-prim-md:    #243660;
  --te-prim-dk:    #6ba4ff;
  --te-ed-bg:      #151d2e;
  --te-ed-text:    #dde5f5;
  --te-hover-bg:   #212d42;
  --te-card-bg:    #1f2840;
  --te-card-hover: #192540;
  --te-sh:         0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
  --te-sh-lg:      0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
}

/* ═══════════════════════════════════════════════════════════
   BASE RESET
═══════════════════════════════════════════════════════════ */
.te-wrap *, .te-ov * { box-sizing: border-box; margin: 0; padding: 0; }

/* ═══════════════════════════════════════════════════════════
   WRAPPER
═══════════════════════════════════════════════════════════ */
.te-wrap {
  display: flex; flex-direction: column;
  background: var(--te-panel);
  border: 1.5px solid var(--te-border);
  border-radius: var(--te-r);
  box-shadow: var(--te-sh);
  font-family: var(--te-f-ui); font-size: 13px; color: var(--te-text);
  overflow: hidden;
  transition: border-color var(--te-tr), box-shadow var(--te-tr), background var(--te-tr);
}
.te-wrap:focus-within {
  border-color: var(--te-primary);
  box-shadow: var(--te-sh), 0 0 0 3px rgba(77,142,245,.12);
}
.te-wrap.te-fs { position:fixed; inset:0; z-index:99999; border-radius:0; border:none; box-shadow:none; }

/* ═══════════════════════════════════════════════════════════
   TOOLBAR
═══════════════════════════════════════════════════════════ */
.te-tb {
  background: var(--te-bg);
  border-bottom: 1.5px solid var(--te-border);
  padding: 6px 8px 5px;
  user-select: none; flex-shrink: 0;
  transition: background var(--te-tr), border-color var(--te-tr);
}
.te-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px; min-height: 34px;
}
.te-row + .te-row {
  padding-top: 5px; margin-top: 4px;
  border-top: 1px solid var(--te-border);
}
.te-grp {
  display: flex; align-items: center; gap: 1px;
  padding-right: 7px; margin-right: 4px;
  border-right: 1.5px solid var(--te-border);
}
.te-grp:last-child { border-right: none; padding-right: 0; margin-right: 0; }

/* Toolbar buttons */
.te-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px;
  border: 1px solid transparent; border-radius: var(--te-rxs);
  background: transparent; color: var(--te-text-md);
  font-size: 13px; cursor: pointer;
  transition: background var(--te-tr), border-color var(--te-tr), color var(--te-tr);
}
.te-btn:hover  { background: var(--te-hover-bg); border-color: var(--te-border-md); color: var(--te-text); }
.te-btn:active { transform: scale(.94); }
.te-btn.te-on  { background: var(--te-prim-lt); border-color: var(--te-prim-md); color: var(--te-primary); font-weight: 600; }
.te-btn:focus-visible { outline: 2px solid var(--te-primary); outline-offset: 1px; }
.te-btn i { pointer-events: none; }

/* Selects */
.te-sel {
  height: 28px; padding: 0 22px 0 7px;
  border: 1px solid var(--te-border); border-radius: var(--te-rxs);
  background: var(--te-panel)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 6px center;
  color: var(--te-text); font-size: 12px; font-family: var(--te-f-ui);
  cursor: pointer; appearance: none; -webkit-appearance: none; outline: none;
  transition: border-color var(--te-tr), background var(--te-tr), color var(--te-tr);
}
.te-sel:hover { border-color: var(--te-border-md); }
.te-sel:focus { border-color: var(--te-primary); box-shadow: 0 0 0 3px rgba(77,142,245,.1); }

/* Color button */
.te-col-btn {
  display: inline-flex; align-items: center; gap: 3px;
  height: 28px; padding: 0 8px;
  border: 1px solid var(--te-border); border-radius: var(--te-rxs);
  background: var(--te-panel); cursor: pointer; position: relative;
  transition: border-color var(--te-tr), background var(--te-tr); white-space: nowrap;
}
.te-col-btn:hover { border-color: var(--te-border-md); }
.te-col-btn i { font-size: 12px; color: var(--te-text-md); pointer-events: none; }
.te-sw  { width: 14px; height: 5px; border-radius: 2px; pointer-events: none; display: inline-block; }
.te-col-btn input[type=color] {
  position: absolute; opacity: 0; inset: 0;
  width: 100%; height: 100%; cursor: pointer; border: none; padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   EDITOR BODY
═══════════════════════════════════════════════════════════ */
.te-body { position: relative; overflow: hidden; flex: 1; }

.te-ed {
  min-height: 320px; height: 420px; max-height: 72vh;
  padding: 24px 28px; outline: none;
  font-family: var(--te-f-ed); font-size: 16px; line-height: 1.75;
  color: var(--te-ed-text); background: var(--te-ed-bg);
  overflow-y: auto; resize: vertical; word-break: break-word;
  caret-color: var(--te-primary);
  transition: background var(--te-tr), color var(--te-tr);
}
.te-fs .te-ed { height: calc(100vh - 114px) !important; max-height: none; resize: none; }
.te-ed > * + * { margin-top: .45em; }
.te-ed h1 { font-size: 2em;    font-weight: 700; line-height: 1.2; }
.te-ed h2 { font-size: 1.55em; font-weight: 700; line-height: 1.25; }
.te-ed h3 { font-size: 1.28em; font-weight: 600; line-height: 1.3; }
.te-ed h4 { font-size: 1.1em;  font-weight: 600; }
.te-ed h5, .te-ed h6 { font-size: .95em; font-weight: 600; }
.te-ed p { margin: .35em 0; }
.te-ed ul, .te-ed ol { padding-left: 2em; margin: .4em 0; }
.te-ed ul { list-style-type: disc; }
.te-ed ol { list-style-type: decimal; }
.te-ed li { display: list-item; margin: .15em 0; }
.te-ed li::marker { color: var(--te-primary); }
.te-ed ul ul  { list-style-type: circle; }
.te-ed ul ul ul { list-style-type: square; }
.te-ed blockquote {
  border-left: 4px solid var(--te-primary); padding: 10px 16px; margin: 14px 0;
  background: var(--te-prim-lt); border-radius: 0 var(--te-rsm) var(--te-rsm) 0;
  color: var(--te-prim-dk); font-style: italic;
}
.te-ed a { color: var(--te-primary); text-decoration: underline; text-underline-offset: 2px; }
.te-ed img { max-width: 100%; height: auto; border-radius: var(--te-rxs); }
.te-ed table { border-collapse: collapse; width: 100%; }
.te-ed td, .te-ed th { padding: 8px 12px; border: 1px solid var(--te-border); vertical-align: top; }
.te-ed th { background: var(--te-bg); font-weight: 600; }
.te-ed pre, .te-ed .te-cpre {
  background: var(--te-bg); border: 1px solid var(--te-border);
  border-radius: var(--te-rsm); padding: 16px; overflow-x: auto; margin: 12px 0;
  font-family: var(--te-f-mo); font-size: 13px; line-height: 1.6;
}
.te-ed .te-hr { border: none; border-top: 2px solid var(--te-border); margin: 20px 0; }

/* Math in editor */
.te-ed .te-mblk {
  text-align: center; padding: 18px 8px; overflow-x: auto; margin: 14px 0;
  background: var(--te-bg); border-radius: var(--te-rsm); border: 1px solid var(--te-border);
  cursor: pointer; transition: background var(--te-tr), border-color var(--te-tr);
  position: relative;
}
.te-ed .te-mblk:hover { background: var(--te-prim-lt); border-color: var(--te-prim-md); }
.te-ed .te-mblk::after {
  content: 'Double-click to edit'; display: block;
  font-size: 10px; color: var(--te-text-xlt); margin-top: 6px;
  font-family: var(--te-f-ui); font-style: italic;
}
.te-ed .te-minl {
  display: inline; cursor: pointer; padding: 0 2px; border-radius: 2px;
  transition: background var(--te-tr);
}
.te-ed .te-minl:hover { background: var(--te-prim-lt); }
.te-ed .katex-display { margin: 0 !important; overflow-x: auto; }
.te-ed ::selection { background: rgba(77,142,245,.18); }

.te-src {
  width: 100%; height: 420px; border: none; outline: none;
  font-family: var(--te-f-mo); font-size: 13px; line-height: 1.6;
  color: var(--te-text); background: var(--te-bg);
  padding: 20px; resize: vertical; border-top: 1px solid var(--te-border);
}

/* ═══════════════════════════════════════════════════════════
   STATUS BAR
═══════════════════════════════════════════════════════════ */
.te-sb {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; padding: 6px 14px;
  background: var(--te-bg); border-top: 1.5px solid var(--te-border);
  font-size: 11.5px; color: var(--te-text-lt); user-select: none; flex-shrink: 0;
  transition: background var(--te-tr), border-color var(--te-tr);
}
.te-sbl, .te-sbr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.te-ss { display: inline-flex; align-items: center; gap: 4px; }
.te-ss i { font-size: 10px; }
.te-ftag { font-size: 11px; padding: 1px 5px; border: 1px solid var(--te-border-md); border-radius: 3px; background: var(--te-panel); }
.te-fmts { color: var(--te-primary); font-weight: 500; }
.te-hint { color: var(--te-text-xlt); font-style: italic; }

/* ═══════════════════════════════════════════════════════════
   MODAL OVERLAY
═══════════════════════════════════════════════════════════ */
.te-ov {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(5px);
  animation: te-fa .14s ease;
}
@keyframes te-fa { from { opacity: 0; } to { opacity: 1; } }

.te-md {
  background: var(--te-panel);
  border-radius: var(--te-r);
  box-shadow: var(--te-sh-lg);
  width: 100%; max-width: 520px; max-height: 90vh;
  display: flex; flex-direction: column;
  animation: te-up .18s cubic-bezier(.4,0,.2,1); overflow: hidden;
  color: var(--te-text);
  border: 1px solid var(--te-border);
}
@keyframes te-up { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.te-md-math { max-width: 900px; max-height: 92vh; }

.te-md-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid var(--te-border);
  background: var(--te-bg); flex-shrink: 0;
}
.te-md-tt { font-weight: 600; font-size: 14.5px; color: var(--te-text); display: flex; align-items: center; gap: 7px; }
.te-md-tt i { color: var(--te-primary); }
.te-md-cl {
  width: 28px; height: 28px; border: none; background: transparent;
  border-radius: var(--te-rxs); cursor: pointer; color: var(--te-text-lt); font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--te-tr), color var(--te-tr);
}
.te-md-cl:hover { background: var(--te-surface); color: var(--te-text); }

.te-md-bd {
  flex: 1; padding: 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.te-md-bd label {
  display: block; font-size: 11px; font-weight: 700; color: var(--te-text-lt);
  text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; margin-bottom: 2px;
}
.te-md-bd label:has(input[type=checkbox]),
.te-md-bd label:has(input[type=radio]) {
  display: flex !important; align-items: center; gap: 6px;
  font-size: 13px; text-transform: none; letter-spacing: 0;
  font-weight: 400; color: var(--te-text-md); cursor: pointer;
}
.te-md-ft {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--te-border);
  background: var(--te-bg); flex-shrink: 0;
}

/* Modal fields */
.te-f {
  width: 100%; padding: 8px 10px;
  border: 1.5px solid var(--te-border); border-radius: var(--te-rsm);
  font-size: 13px; font-family: var(--te-f-ui);
  color: var(--te-text); background: var(--te-panel); outline: none;
  transition: border-color var(--te-tr), box-shadow var(--te-tr), background var(--te-tr), color var(--te-tr);
}
.te-f:hover { border-color: var(--te-border-md); }
.te-f:focus { border-color: var(--te-primary); box-shadow: 0 0 0 3px rgba(77,142,245,.1); }
textarea.te-f  { resize: vertical; line-height: 1.5; }
select.te-f    { cursor: pointer; appearance: none; -webkit-appearance: none; }
.te-mono       { font-family: var(--te-f-mo) !important; font-size: 12.5px !important; }

.te-btn-ok {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px;
  background: var(--te-primary); color: #fff; border: none; border-radius: var(--te-rsm);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--te-tr), box-shadow var(--te-tr), transform 60ms;
}
.te-btn-ok:hover  { background: var(--te-prim-dk); box-shadow: 0 2px 10px rgba(77,142,245,.35); }
.te-btn-ok:active { transform: scale(.97); }
.te-btn-cn {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 16px;
  background: var(--te-panel); color: var(--te-text-md);
  border: 1.5px solid var(--te-border); border-radius: var(--te-rsm);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background var(--te-tr), border-color var(--te-tr);
}
.te-btn-cn:hover { background: var(--te-surface); }
.te-btn-danger {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  background: transparent; color: var(--te-err);
  border: 1.5px solid rgba(220,38,38,.3); border-radius: var(--te-rsm);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background var(--te-tr); margin-top: 4px;
}
.te-btn-danger:hover { background: rgba(220,38,38,.08); }

/* Tabs */
.te-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--te-border); margin-bottom: 2px; padding-bottom: 4px; }
.te-tab {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
  border: 1.5px solid transparent; border-radius: var(--te-rsm);
  background: transparent; color: var(--te-text-lt);
  font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all var(--te-tr);
}
.te-tab:hover  { background: var(--te-surface); color: var(--te-text); }
.te-tab.te-on  { background: var(--te-prim-lt); border-color: var(--te-prim-md); color: var(--te-primary); font-weight: 600; }

/* Layout helpers */
.te-r2      { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.te-chkrow  { display: flex; gap: 14px; flex-wrap: wrap; }

.te-img-prev {
  border: 1.5px dashed var(--te-border); border-radius: var(--te-rsm);
  min-height: 80px; display: flex; align-items: center; justify-content: center;
  color: var(--te-text-xlt); font-size: 13px; background: var(--te-bg); overflow: hidden;
}
.te-img-prev img { max-width: 100%; max-height: 140px; }
.te-layout-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 8px; }
.te-layout-opt {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 8px 12px; border: 1.5px solid var(--te-border); border-radius: var(--te-rsm);
  cursor: pointer; font-size: 12.5px !important; color: var(--te-text-md) !important;
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important;
  transition: background var(--te-tr), border-color var(--te-tr); background: var(--te-panel);
}
.te-layout-opt:hover { background: var(--te-prim-lt); border-color: var(--te-prim-md); }
.te-layout-opt span  { display: flex; align-items: center; gap: 5px; font-size: 12px; }

.te-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px,1fr)); gap: 4px; max-height: 280px; overflow-y: auto; }
.te-pk {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; font-size: 20px;
  background: transparent; border: 1.5px solid transparent;
  border-radius: var(--te-rxs); cursor: pointer;
  transition: background var(--te-tr), border-color var(--te-tr);
}
.te-pk:hover { background: var(--te-surface); border-color: var(--te-border); }
.te-pksm { font-size: 14px; }

.te-fr-st  { font-size: 12.5px; color: var(--te-ok); min-height: 20px; display: flex; align-items: center; gap: 5px; }
.te-ls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: 8px; }
.te-ls-btn {
  padding: 9px 12px; border: 1.5px solid var(--te-border); border-radius: var(--te-rsm);
  background: var(--te-panel); color: var(--te-text-md); font-size: 13px; font-family: var(--te-f-ui);
  cursor: pointer; text-align: left; transition: all var(--te-tr);
}
.te-ls-btn:hover { background: var(--te-prim-lt); border-color: var(--te-prim-md); color: var(--te-primary); }

/* ═══════════════════════════════════════════════════════════
   MATH EDITOR — Two-column layout
═══════════════════════════════════════════════════════════ */
/* Outer layout: left (input+preview) | right (scrollable cards) */
.te-math-layout {
  grid-template-columns: 380px 1fr;
  gap: 0;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

/* LEFT panel */
.te-math-left {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
  border-right: 1.5px solid var(--te-border);
  overflow-y: auto; min-height: 0;
}

/* Mode buttons */
.te-math-mode-row { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.te-mmode {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border: 1.5px solid var(--te-border); border-radius: var(--te-rsm);
  background: var(--te-panel); color: var(--te-text-lt);
  font-size: 12px; font-weight: 500; cursor: pointer;
  font-family: var(--te-f-ui);
  transition: all var(--te-tr);
}
.te-mmode:hover { background: var(--te-surface); color: var(--te-text); border-color: var(--te-border-md); }
.te-mmode.te-on { background: var(--te-primary); border-color: var(--te-primary); color: #fff; font-weight: 600; }

/* Input label */
.te-math-input-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--te-text-lt); flex-shrink: 0;
}
.te-math-append-hint {
  font-size: 10px; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--te-text-xlt); font-style: italic;
}

/* LaTeX textarea */
.te-matin {
  min-height: 100px; max-height: 150px;
  font-size: 13px !important;
  resize: none; flex-shrink: 0;
}

/* Preview label */
.te-math-pv-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--te-text-lt);
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}

/* Live preview */
.te-mpv {
  min-height: 80px; max-height: 160px;
  border: 1.5px solid var(--te-border); border-radius: var(--te-rsm);
  padding: 14px; background: var(--te-bg);
  display: flex; align-items: center; justify-content: center;
  overflow: auto; font-size: 17px;
  transition: background var(--te-tr), border-color var(--te-tr);
  flex-shrink: 0;
}
.te-mpv-blk { font-size: 19px; }
.te-mph     { color: var(--te-text-xlt); font-size: 12.5px; font-style: italic; display: flex; align-items: center; gap: 5px; }
.te-mph-err { color: var(--te-err) !important; font-style: normal; font-size: 11.5px; }

/* Action buttons row */
.te-math-actions { display: flex; gap: 6px; flex-shrink: 0; }
.te-mact {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: 1px solid var(--te-border); border-radius: var(--te-rxs);
  background: var(--te-panel); color: var(--te-text-lt);
  font-size: 11.5px; font-family: var(--te-f-ui); cursor: pointer;
  transition: all var(--te-tr);
}
.te-mact:hover { background: var(--te-hover-bg); color: var(--te-text); border-color: var(--te-border-md); }

/* RIGHT panel — scrollable visual cards */
.te-math-right {
  height: 400px;
  display: flex; flex-direction: column;
  overflow: auto; min-height: 0;
}
.te-math-right-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--te-text-lt);
  padding: 10px 16px 6px;
  border-bottom: 1px solid var(--te-border); flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
}
.te-math-cards-scroll {
  flex: 1; overflow-y: auto; padding: 10px 14px 14px;
}

/* Visual content (matches document structure exactly) */
.te-math-visual-content { display: flex; flex-direction: column; gap: 12px; }

.te-math-cat-label {
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--te-primary);
  padding: 0 0 4px; border-bottom: 1px solid var(--te-border);
}

.te-math-visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 6px;
}

/* THE CARD — matches exact HTML from document */
.te-math-visual-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 4px 7px;
  background: var(--te-card-bg);
  border: 1.5px solid var(--te-border);
  border-radius: var(--te-rsm);
  cursor: pointer; text-align: center;
  min-height: 58px;
  transition: all var(--te-tr);
  user-select: none;
}
.te-math-visual-card:hover {
  background: var(--te-card-hover);
  border-color: var(--te-primary);
  box-shadow: 0 2px 8px rgba(77,142,245,.2);
  transform: translateY(-1px);
}
.te-math-visual-card:active { transform: translateY(0); box-shadow: none; }
.te-math-visual-card span { pointer-events: none; color: var(--te-text); }
.te-math-visual-card small {
  pointer-events: none;
  color: var(--te-text-lt) !important;  /* override inline var */
  line-height: 1.2;
}
.te-math-visual-card:hover span { color: var(--te-primary); }
.te-math-visual-card:hover small { color: var(--te-primary) !important; }

/* Footer */
.te-md-math .te-md-ft {
  border-top: 1.5px solid var(--te-border);
  background: var(--te-bg); padding: 12px 18px;
}

/* ═══════════════════════════════════════════════════════════
   CONTEXT MENU
═══════════════════════════════════════════════════════════ */
.te-ctx {
  position: fixed; z-index: 200000;
  background: var(--te-panel); border: 1px solid var(--te-border);
  border-radius: var(--te-rsm); box-shadow: var(--te-sh-lg);
  min-width: 200px; padding: 4px; overflow: hidden;
  animation: te-fa .1s ease; color: var(--te-text);
}
.te-ctx-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 12px;
  border: none; background: transparent; text-align: left;
  font-size: 13px; font-family: var(--te-f-ui); color: var(--te-text-md);
  cursor: pointer; border-radius: var(--te-rxs);
  transition: background var(--te-tr), color var(--te-tr);
}
.te-ctx-item:hover { background: var(--te-prim-lt); color: var(--te-text); }
.te-ctx-item i { font-size: 13px; width: 16px; text-align: center; color: var(--te-text-lt); }
.te-ctx-item:hover i { color: var(--te-primary); }
.te-ctx-item.te-ctx-danger { color: var(--te-err); }
.te-ctx-item.te-ctx-danger:hover { background: rgba(220,38,38,.07); }
.te-ctx-sep { height: 1px; background: var(--te-border); margin: 3px 0; }

/* ═══════════════════════════════════════════════════════════
   SCROLLBARS
═══════════════════════════════════════════════════════════ */
.te-ed::-webkit-scrollbar,
.te-math-left::-webkit-scrollbar,
.te-math-cards-scroll::-webkit-scrollbar,
.te-md-bd::-webkit-scrollbar,
.te-grid::-webkit-scrollbar { width: 5px; }
.te-ed::-webkit-scrollbar-track,
.te-math-cards-scroll::-webkit-scrollbar-track { background: transparent; }
.te-ed::-webkit-scrollbar-thumb,
.te-math-cards-scroll::-webkit-scrollbar-thumb,
.te-md-bd::-webkit-scrollbar-thumb { background: var(--te-border-md); border-radius: 3px; }
.te-ed::-webkit-scrollbar-thumb:hover,
.te-math-cards-scroll::-webkit-scrollbar-thumb:hover { background: var(--te-text-xlt); }

/* ═══════════════════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════════════════ */
@media print {
  .te-tb, .te-sb { display: none !important; }
  .te-wrap { border: none !important; box-shadow: none !important; }
  .te-ed { height: auto !important; max-height: none !important; overflow: visible !important; }
  .te-ed .te-mblk::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .te-math-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .te-math-left   { border-right: none; border-bottom: 1.5px solid var(--te-border); max-height: 340px; }
  .te-math-right  { min-height: 200px; }
}
@media (max-width: 600px) {
  .te-tb { padding: 4px 6px; }
  .te-btn { width: 26px; height: 26px; font-size: 12px; }
  .te-ed  { padding: 14px; font-size: 15px; height: 280px; }
  .te-md  { max-width: 100%; }
  .te-r2, .te-layout-picker { grid-template-columns: 1fr; }
  .te-math-visual-grid { grid-template-columns: repeat(auto-fill, minmax(54px,1fr)); }
}