:root{
--editor-bg: #fff;
--editor-fg: #111;
--editor-border: #d8d8dc;
--editor-shadow: 0 8px 26px rgba(0,0,0,.06);
--editor-focus: #3a7afe;
--placeholder: #9aa0a6;
--ring: 0 0 0 3px rgba(58,122,254,.15);
--radius: 14px;
--pad-y: 18px;
--pad-x: 20px;
--line: 1.6;
}

/* Page chrome (kept minimal, but pleasant) */
html, body{
height:100%;
background: linear-gradient(180deg,#f6f7fb 0%, #f1f2f7 100%);
margin:0;
}
.wrap{
max-width: 880px;
margin: 5vh auto;
padding: 24px;
}
.label{
font: 600 12px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial;
letter-spacing: .08em;
text-transform: uppercase;
color:#6b7280;
margin: 0 0 10px 12px;
}

/* The editor shell */
.editor{
background: var(--editor-bg);
color: var(--editor-fg);
border: 1px solid var(--editor-border);
border-radius: var(--radius);
box-shadow: var(--editor-shadow);
padding: var(--pad-y) var(--pad-x);
min-height: 42vh;
max-height: 72vh;
overflow: auto;
/* Fixed typography requirements */
font-size: 14pt;
line-height: var(--line);
/* IMPORTANT: Prefer Times New Roman for Latin; fall back to KaiTi for CJK glyphs */
font-family: "Times New Roman", "KaiTi", "STKaiti", "Kaiti SC", "Kaiti TC", serif;
/* Ensure soft-wrap and preservation of user line breaks */
white-space: pre-wrap;
word-break: break-word;
caret-color: var(--editor-fg);
outline: none;
}

/* Focus ring */
.editor:focus{
border-color: var(--editor-focus);
box-shadow: var(--editor-shadow), var(--ring);
}

/* Subtle placeholder when empty */
.editor:empty::before{
content: attr(data-placeholder);
color: var(--placeholder);
pointer-events: none;
}

/* --- LOCK DOWN TYPOGRAPHY + FORMATTING --- */
/* Force inherited, uniform appearance for anything that may slip in. */
.editor, .editor *{
font-size: 14pt !important;
font-family: "Times New Roman", "KaiTi", "STKaiti", "Kaiti SC", "Kaiti TC", serif !important;
font-weight: 400 !important;
font-style: normal !important;
letter-spacing: normal !important;
text-transform: none !important;
/* Disallow decorations except where explicitly re-enabled below */
text-decoration: none !important;
line-height: var(--line) !important;
color: inherit !important;
}

/* Disable lists, headings, blockquotes, code look, images, etc. */
.editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6,
.editor blockquote, .editor code, .editor pre, .editor kbd,
.editor ul, .editor ol, .editor li, .editor img, .editor table, .editor hr{
all: unset !important;
display: inline !important;
}
.editor img{ display:none !important; }

/* Neutralize sub/sup to baseline text */
.editor sub, .editor sup{
vertical-align: baseline !important;
}

/* --- THE ONLY ALLOWED STYLES --- */

/* 1) Underline (allowed) */
.editor u, .editor [data-u="true"]{
text-decoration: underline !important;
text-decoration-thickness: 3px;
text-decoration-color: currentColor;
}

/* 2) Highlight (allowed) — semantic <mark> or helper class */
.editor mark, .editor .highlight{
background: #fff2a8 !important; /* soft yellow */
border-radius: 2px;
padding: 0 .06em;
}

/* Optional: “mark as red text” helper (as requested). */
.editor .red{
color: #c81414 !important;
}

/* Scrollbar aesthetics (supported browsers) */
.editor::-webkit-scrollbar{ width: 10px; }
.editor::-webkit-scrollbar-thumb{
background: #dadde3;
border-radius: 10px;
}
.editor::-webkit-scrollbar-thumb:hover{ background:#cfd3db; }

/* Print-friendly */
@media print{
body{ background:#fff; }
.wrap{ margin:0; padding:0; }
.editor{ box-shadow:none; border:1px solid #aaa; }
}

#tooltip {
    position: absolute;
    display: none;
    padding: 6px 10px;
    font-family: "Times New Roman", serif;
    font-size: 12pt;

    background: linear-gradient(to bottom, #e9f4ff, #ffffff);
    border: 1px solid #9ec5ff;
    border-radius: 8px;

    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    z-index: 1000;
}