:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#252a27;background:#fafaf9;font-size:14px}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;border-radius:7px;background:#29362f;color:#fff;padding:9px 12px}button:hover{filter:brightness(.96)}button.secondary{background:#fff;border:1px solid #dedfdd;color:#29362f}.small{font-size:12px;padding:6px 9px}.hidden{display:none}header{height:62px;background:#fff;border-bottom:1px solid #e8eae7;display:flex;justify-content:space-between;align-items:center;padding:0 24px}.brand{font-size:16px;display:flex;align-items:center;gap:9px}.header-actions{display:flex;align-items:center;gap:14px}#saveStatus,.aside-note{font-size:12px;color:#818983}main{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 62px)}aside{border-right:1px solid #e8eae7;padding:24px 12px;background:#fdfdfc}.aside-head{display:flex;justify-content:space-between;padding:0 10px 14px}.lesson-item{display:block;width:100%;text-align:left;background:transparent;color:#4b524d;padding:11px;border-radius:6px;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lesson-item.selected{background:#ecefeb;font-weight:600}.aside-note{padding:16px 10px}.workspace{width:100%;min-width:0;padding:26px 30px 64px}.topline{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}.topline>div:first-child{flex:1}label{display:block;color:#777f79;font-weight:650;letter-spacing:.06em;font-size:10px;margin-bottom:8px}#title{font-size:25px;font-weight:650;padding:6px 0;border:0;background:transparent;width:100%;outline:0}.top-buttons{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.tab{background:transparent;color:#777;border-radius:0;border-bottom:2px solid transparent}.tab.active{border-color:#29362f;color:#29362f;font-weight:650}.danger-text{background:transparent;color:#a16e68}.settings{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}.settings select{width:100%;padding:11px;border:1px solid #dfe1dd;border-radius:7px;background:#fff}.field{margin:24px 0}.fieldhead{display:flex;justify-content:space-between;align-items:center}.fieldhead span{font-size:12px;color:#969e97}.field textarea,.rich-input{width:100%;border:1px solid #dfe1dd;border-radius:7px;background:#fff;padding:14px;min-height:150px;line-height:1.7;resize:vertical;outline-color:#809887}.rich-input{white-space:pre-wrap}.rich-input:empty:before,.rich-edit:empty:before{content:attr(data-placeholder);color:#a2aaa4}.field-actions{display:flex;align-items:center;gap:12px;margin-top:10px}.field-actions span{font-size:12px;color:#78817a}.linkbtn{background:transparent;color:#426b52;padding:4px 0}.question-card{border-bottom:1px solid #e7e9e5;padding:15px 0;margin:0}.cardhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;color:#777;font-size:12px}.cardhead button{background:transparent;color:#a16e68;padding:4px}.rich-edit{background:#fff;border:1px solid #e1e4df;border-radius:6px;min-height:38px;padding:9px 11px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap;outline-color:#809887}.q-rich{min-height:54px;margin-bottom:9px}.optrow{display:flex;align-items:center;gap:8px;margin:5px 0}.optrow input[type=radio]{accent-color:#446f55}.letter{width:17px;color:#68716a;font-weight:600}.option-rich{flex:1;min-width:0}.empty{padding:24px;text-align:center;border:1px dashed #d7dad5;border-radius:8px;color:#929b93}.preview-tools{display:flex;justify-content:space-between;align-items:center;margin:12px 0;color:#747d77;font-size:12px}.preview-right{display:flex;align-items:center;gap:12px}.exercise-layout.full{max-width:850px;margin:auto}.exercise-layout.split{--split-left:50%;display:grid;grid-template-columns:minmax(0,var(--split-left)) minmax(0,1fr);gap:0;position:relative;height:calc(100dvh - 260px);min-height:380px;overflow:hidden;border:1px solid #e4e7e2;border-radius:8px;background:#fff}.document,.question-panel{min-width:0;padding:24px;background:#fff}.document{line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}.document p{margin:0 0 12px}.exercise-layout.split .document,.exercise-layout.split .question-panel{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.exercise-layout.split .document{border-right:1px solid #e6e8e5}.split-grip{position:absolute;top:0;bottom:0;left:var(--split-left);width:12px;transform:translateX(-6px);z-index:3;cursor:col-resize;touch-action:none}.split-grip:after{content:'';position:absolute;top:0;bottom:0;left:5px;width:2px;background:#d2d8d2}.question-panel .question-card{padding:12px 0 16px}.question-title{font-weight:600;line-height:1.55;margin-bottom:8px}.answer-option{display:block;width:100%;text-align:left;background:#fff;color:#313733;border:1px solid #e8eae7;border-radius:6px;margin:5px 0;padding:9px 11px;line-height:1.45;font-size:13px}.answer-option.chosen{background:#f1f6f1;border-color:#809c86}.option-letter{font-weight:600}.cloze-line{line-height:2.3}.cloze-line input{width:130px;max-width:40%;padding:6px;border:1px solid #aaa;border-radius:5px}.footer-note{color:#929b93;font-size:11px;margin-top:18px} .annotation-settings{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 10px;font-size:12px;color:#777f79}.annotation-settings select{border:1px solid #dfe1dd;background:#fff;border-radius:6px;padding:5px 8px}.annotation-settings label{font-size:12px;letter-spacing:0;font-weight:400;margin:0;display:flex;gap:5px;align-items:center}.annotation-settings input{margin:0}.selection-menu{position:fixed;z-index:50;display:flex;gap:3px;background:#fff;border:1px solid #dfe1dd;box-shadow:0 5px 20px #0002;border-radius:9px;padding:4px}.selection-menu button{background:transparent;color:#26352c;font-size:12px;padding:8px 10px}.selection-menu button:hover{background:#f0f3ef}.selection-menu.hidden,.note-popup.hidden{display:none}.note-popup{position:fixed;z-index:51;background:white;border:1px solid #dfe1dd;box-shadow:0 5px 20px #0002;padding:10px;border-radius:8px;width:260px}.note-popup textarea{width:100%;padding:8px;border:1px solid #dfe1dd;border-radius:5px;resize:vertical}.note-popup>div{display:flex;justify-content:flex-end;gap:6px;margin-top:7px}.document[contenteditable=true]:focus{outline:2px solid #b5c9b9;outline-offset:-2px}.document[contenteditable=true]{cursor:text}
.annotation-mark.highlight{background:#fde68a}.annotation-mark.underline{text-decoration:underline;text-decoration-color:#c26349;text-decoration-thickness:2px;text-underline-offset:3px}.annotation-mark.note{background:#dbeafe;border-bottom:2px dotted #4c76b0}.annotation-mark.has-private.highlight{background:#d8eee0}.annotation-mark.has-private.underline{text-decoration-color:#36816a}@media(max-width:800px){main{grid-template-columns:1fr}aside{display:flex;gap:6px;overflow:auto;padding:8px;border:0;border-bottom:1px solid #e8eae7}.aside-head,.aside-note{display:none}.lesson-item{width:auto;flex:none;margin:0}.workspace{padding:18px 14px 50px}.topline{align-items:start;flex-direction:column}.settings{grid-template-columns:1fr}.exercise-layout.split{height:calc(100dvh - 270px);min-height:330px}.document,.question-panel{padding:14px}header{padding:0 14px}}@media(max-width:550px){.exercise-layout.split{display:flex;flex-direction:column;height:auto;min-height:0}.exercise-layout.split .document,.exercise-layout.split .question-panel{height:38dvh;min-height:200px;overflow:auto;width:100%}.exercise-layout.split .document{border-right:0;border-bottom:1px solid #e6e8e5}.split-grip{display:none}}

/* V11: unified pencil interaction layer and settings. */
.pencil-tools{display:inline-flex;gap:2px;padding:3px;border:1px solid #dfe1dd;border-radius:8px;background:#fff}
.pencil-tools .mode-button{font-size:12px;background:transparent;color:#536057;padding:6px 9px;border-radius:5px}
.pencil-tools .mode-button.active{background:#e8eee8;color:#253c2c;font-weight:650}
.ink-options,.zoom-options{display:flex;align-items:center;gap:6px;font-size:11px}
.ink-options label{margin:0;font-size:11px;letter-spacing:0;font-weight:400}
.ink-options input[type=color]{width:27px;height:27px;padding:1px;border:1px solid #dfe1dd;border-radius:5px;background:white}
.ink-options input[type=range]{width:65px;accent-color:#426b52}
.ink-options output{min-width:25px;font-variant-numeric:tabular-nums}
.ink-options.eraser-active #inkColor,.ink-options.eraser-active #inkWidth{opacity:.4}
.zoom-options{border-left:1px solid #e4e7e2;padding-left:8px}
.zoom-options button{padding:4px 7px}
.document,.question-panel{position:relative}
.ink-content{position:relative;min-height:100%;width:100%;transform-origin:top left}
.ink-layer{position:absolute;top:0;left:0;z-index:2;pointer-events:none}
.ink-layer canvas{display:block;width:100%;height:100%;pointer-events:none}
.ink-mode .document{caret-color:transparent}
/* Eraser preview is an outline, centered on the pencil tip, like a notebook eraser. */
.eraser-cursor{position:absolute;z-index:6;left:0;top:0;display:none;pointer-events:none;transform:translate(-50%,-50%);border:1.5px solid #455b4d;background:#8fa99b26;border-radius:50%;box-shadow:0 0 0 1px #fff8}
.eraser-cursor.visible{display:block}
@media(max-width:800px){.annotation-settings{gap:8px}.ink-options{flex-wrap:wrap}.ink-options input[type=range]{width:55px}}

/* Pencil mode: disable browser panning before pointerdown so Safari cannot cancel strokes.
   Finger scrolling and pinch are handled by the pointer handlers above. */
#previewContent.ink-mode .document,
#previewContent.ink-mode .question-panel,
#previewContent.ink-mode .ink-content {touch-action:none;-webkit-user-select:none;user-select:none}
#previewContent:not(.ink-mode) .document,
#previewContent:not(.ink-mode) .question-panel {touch-action:auto}

/* V13: keep the ink overlay aligned with the text coordinate system. */
.ink-content{box-sizing:border-box}
.ink-layer{opacity:1}
.ink-layer canvas{image-rendering:auto}


/* V14: fixed-size viewport; scaled document, text, and ink share one origin. */
.ink-viewport{position:relative;display:block;flex:none;max-width:none}
.ink-content{position:relative;min-height:0;width:100%;transform-origin:top left}
.exercise-layout.full .document,.exercise-layout.full .question-panel{overflow:auto}

/* Select mode: Pencil taps can select text; ink mode retains gesture handling. */
#previewContent:not(.ink-mode) .ink-layer{pointer-events:none}

/* V17: Stylus selection is managed by Pointer Events; finger panning and pinch are
   handled by the same surface so Safari cannot take over a stylus drag. */
#previewContent .document,#previewContent .question-panel,#previewContent .ink-content{touch-action:none}
#previewContent .document[contenteditable="false"]{caret-color:transparent;outline:none}
#editReadingBtn.active{background:#e4ede5;border-color:#829d87}

/* Smart highlights use the glyph inline box itself: zero padding and no extra height. */
.annotation-mark.highlight{padding:0;margin:0;border-radius:0;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#previewContent .annotation-mark.highlight{line-height:inherit}

/* V19: a visible, high-contrast selected text region while annotation menu is open. */
#previewContent ::selection{background:#91b9ff;color:#13233b}
#previewContent ::-moz-selection{background:#91b9ff;color:#13233b}
/* Minimal icon-led pen controls, without visible size/color labels. */
.ink-options{display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid #e1e5e0;border-radius:999px;background:#fff}
.ink-options input[type=color]{width:28px;height:28px;border-radius:50%;border:1px solid #d4dad5;overflow:hidden;cursor:pointer}
.ink-options input[type=range]{width:72px;cursor:pointer}
.ink-options::before{content:'✎';font-size:15px;color:#657469}
.ink-options label,.ink-options output{display:none}

/* Shared color control: the chosen color applies to new Pen strokes and text Highlights. */
.ink-options input[type=color]{flex:none}
.ink-options.eraser-active #inkColor{opacity:1}

/* V21: explicit transient selection, visible on iPad without native ::selection. */
.selection-overlay{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.selection-highlight{position:absolute;background:rgba(73,145,236,.34);border-radius:1px;pointer-events:none}
/* Minimal pen controls: color swatch and hairline size control, no decorative frames. */
.pencil-tools,.ink-options{border:0;background:transparent;border-radius:0;padding:0;gap:4px}
.pencil-tools .mode-button{width:33px;height:33px;padding:0;font-size:17px;border-radius:8px}
.ink-options{gap:6px}
.ink-options::before{display:none}
.ink-options input[type=color]{width:27px;height:27px;padding:0;border:0;border-radius:50%;background:transparent}
.ink-options input[type=range]{width:62px;height:18px;accent-color:#3d5d4a}
.zoom-options{border-left:0;padding-left:0}
.zoom-options button{border:0;background:transparent;color:#3b5142;padding:4px 6px}
.annotation-settings{gap:9px}
.annotation-settings select{border:0;background:#f0f2ef;border-radius:6px}