.reader-classroom-entry{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.classroom-launch{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:10px 17px;border:1px solid #204544;border-radius:12px;background:#204544;color:#fff;font:700 14px system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 16px #20454418}
.classroom-launch svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.classroom-launch:disabled{opacity:.5;cursor:wait}
/* Independent viewport: no site shell, book frame, maximum width or document scroll. */
.tt-classroom,.tt-classroom:fullscreen{position:fixed!important;inset:0!important;width:100%!important;height:100vh!important;height:100dvh!important;max-width:none!important;max-height:none!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;z-index:2147483000;display:flex;flex-direction:column;background:#fffcf7;color:#172827;color-scheme:light;overflow:hidden;isolation:isolate;font:14px/1.4 system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;text-align:start;overscroll-behavior:none}
.tt-classroom:-webkit-full-screen{width:100%!important;height:100%!important}
.tt-classroom[hidden],.tt-classroom [hidden]{display:none!important}
.tt-classroom *{box-sizing:border-box}
.tt-classroom svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.tt-classroom button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 12px;border:1px solid #d8dfd8;border-radius:10px;background:#fffefa;color:#244745;font:650 13px/1.3 system-ui,Tahoma,sans-serif;cursor:pointer;white-space:nowrap}
.tt-classroom button:hover{background:#eaf0e9}
.tt-classroom button:disabled{opacity:.35;cursor:default}
.tt-classroom :focus-visible{outline:3px solid #ce9424;outline-offset:2px}
.tt-classroom button[aria-pressed="true"]:not(.cr-color){background:#204544;color:#fff;border-color:#204544}
.cr-header{position:relative;z-index:5;flex:0 0 auto;display:flex;align-items:center;gap:22px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));background:#f4f2e9;border-bottom:1px solid #dddccc}
.cr-brand{display:flex;gap:10px;align-items:center;color:#204544;flex:0 0 auto}.cr-brand>svg{width:29px;height:29px}.cr-brand strong{font-size:16px}.cr-brand small{display:block;font-size:10px;letter-spacing:.06em}
.cr-heading{flex:1;min-width:0;display:flex;align-items:center;gap:12px}.cr-heading strong{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cr-heading small{color:#67736b;font-size:12px}
.cr-actions{display:flex;gap:7px}.cr-actions #cr-close{background:transparent;border-color:transparent;padding:8px}.cr-actions #cr-hide span,.cr-actions #cr-close span{display:none}
.cr-stage{position:relative;flex:1 1 auto;min-height:0;width:100%;overflow:hidden;touch-action:none}
.cr-board{position:absolute;left:50%;top:50%;width:1440px;height:810px;transform-origin:center;background:#fffcf7;overflow:hidden;user-select:none;-webkit-user-select:none}
.cr-page-head{position:absolute;left:58px;right:58px;top:23px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8d2bd;padding:0 0 14px;color:#64736b;font-size:19px;line-height:1.4}.cr-page-head span:first-child{font-size:27px;color:#204544;font-weight:650}
.cr-text-area{position:absolute;top:106px;bottom:78px;left:70px;right:70px;display:flex;align-items:center;justify-content:center}
.cr-quran{width:100%;flex-shrink:0;max-height:none;margin:0;padding:0.22em 0.08em 0.5em;font-family:var(--active-quran-font,"QuranHafs");font-size:64px;font-weight:400;font-style:normal;font-synthesis:none;line-height:1.95;text-align:center;direction:rtl;unicode-bidi:plaintext;letter-spacing:0;word-spacing:0;font-variant-ligatures:common-ligatures contextual;font-feature-settings:"rlig" 1,"liga" 1,"calt" 1,"kern" 1;color:#192725;overflow:visible}
.cr-ayah{cursor:pointer;border-radius:7px}.cr-ayah.cr-selected{background:#f4e6ae;box-shadow:0 0 0 4px #f4e6ae}
.cr-page-foot{position:absolute;bottom:22px;left:58px;right:58px;display:flex;justify-content:space-between;gap:10px;color:#778378;font-size:15px;border-top:1px solid #e8e3d5;padding-top:14px}
.tt-classroom svg.cr-ink{position:absolute;inset:0;width:100%;height:100%;stroke:none;z-index:2;cursor:crosshair;touch-action:none}
.tt-classroom[data-tool="eraser"] .cr-ink{cursor:cell}
.cr-toolbar{z-index:5;flex:0 0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:10px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#f4f2e9;border-top:1px solid #dddccc;box-shadow:0 -5px 20px #20454406}
.cr-drawing,.cr-history,.cr-colors,.cr-navigation{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.cr-drawing button{flex-direction:column;gap:3px;min-width:55px;font-size:10px;padding:6px 9px}.cr-history button{padding:10px}.cr-history button span{display:none}
.cr-colors{border-inline:1px solid #d8d9cc;padding-inline:6px}
.tt-classroom .cr-color{border:2px solid transparent;border-radius:50%;width:36px;min-height:42px;padding:7px 4px;background:transparent}.cr-color i{display:block;width:23px;height:23px;border-radius:50%;background:var(--swatch);border:2px solid #fffcf7;box-shadow:0 0 0 1px #20454425}.tt-classroom .cr-color[aria-pressed="true"]{border-color:var(--swatch)}
.cr-width{display:flex;flex-direction:column;gap:4px;font-size:10px;color:#54665c}.cr-width select{border:1px solid #d8dfd8;border-radius:6px;padding:4px;background:#fffefa;color:#244745;font:inherit;font-size:12px;min-height:28px}
.cr-navigation{margin-inline-start:auto}.cr-navigation button span{display:none}.cr-navigation output{min-width:52px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:#465c50}
.cr-controls-hidden .cr-header,.cr-controls-hidden .cr-toolbar{display:none}
.tt-classroom .cr-show{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));inset-inline-end:12px;z-index:9;box-shadow:0 3px 15px #20454418;background:#204544;color:white;opacity:.8}
.cr-status{position:absolute;left:50%;bottom:95px;transform:translateX(-50%);z-index:30;max-width:calc(100% - 30px);padding:12px 18px;border-radius:12px;background:#204544;color:#fff;text-align:center;box-shadow:0 6px 25px #0002;font-size:13px;pointer-events:none}
.cr-setup{position:absolute;inset:0;z-index:20;background:#142f2edb;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto;overscroll-behavior:contain}
.cr-form{width:560px;max-width:100%;max-height:100%;overflow:auto;background:#fffcf7;border:1px solid #e4dfd0;border-radius:22px;padding:26px;box-shadow:0 25px 90px #0004}
.cr-form-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.cr-form-head small{color:#66766b;font-size:11px}.cr-form h2{margin:5px 0 0;font-size:29px;line-height:1.2;letter-spacing:-.03em;color:#204544}.cr-form-head button{border:0;background:transparent;padding:8px}.cr-form-head button span{display:none}
.cr-description{margin:14px 0 19px;color:#65736a;font-size:13px;line-height:1.6}
.cr-search-label{display:block;margin-bottom:7px;font-weight:700;font-size:12px}
.cr-search{display:flex;align-items:center;border:1px solid #a9bdb0;border-radius:10px;padding:0 12px;gap:10px;background:#fff}.cr-search input{min-width:0;flex:1;border:0!important;background:transparent;font:14px system-ui,Tahoma,sans-serif;color:#172827;padding:12px 0;outline-offset:3px}
.cr-form #cr-surahs{width:100%;height:136px;margin:9px 0 17px;border:1px solid #d8dfd8;border-radius:10px;padding:5px;background:#fffefa;color:#244745;font:14px/1.6 system-ui,Tahoma,sans-serif;overflow:auto}.cr-form option{padding:7px;border-radius:5px}
.cr-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px}.cr-fields label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:650;color:#425b4e}.cr-fields input,.cr-fields select{width:100%;min-width:0;min-height:43px;padding:9px 11px;border:1px solid #cbd5cb;border-radius:9px;background:#fff;color:#172827;font:14px system-ui,Tahoma,sans-serif}
.cr-error{color:#9b342e;font-size:12px;margin:8px 0;min-height:0}.cr-error:empty{display:none}.tt-classroom .cr-present{width:100%;margin-top:20px;background:#204544;color:white;min-height:49px;font-size:15px;border-color:#204544}.tt-classroom .cr-present:hover{background:#142f2e}.cr-note{font-size:11px;line-height:1.6;color:#708073;margin:13px 0 0;text-align:center}
.cr-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.cr-copy-link{position:absolute;left:5%;bottom:100px;width:90%;z-index:40;background:white;color:#172827;padding:15px;border:2px solid #204544;border-radius:10px;font:14px system-ui}
@media(min-width:1500px){.cr-toolbar{gap:18px}.cr-drawing button{min-width:76px}.cr-history button span{display:inline}.cr-navigation button span{display:inline}}
@media(max-width:1050px){.cr-brand small,.cr-heading small{display:none}.cr-header{gap:12px}.cr-actions button span{display:none}.cr-actions #cr-full span{display:inline}.cr-toolbar{gap:6px}.cr-navigation{margin-inline-start:0}.cr-drawing button{min-width:48px}.cr-color{width:32px!important}.cr-colors{padding-inline:3px}.cr-history button{padding:8px}}
@media(max-width:600px){.reader-heading-row{flex-wrap:wrap}.reader-classroom-entry{width:100%;justify-content:space-between}.classroom-launch{flex:1}.cr-header{padding:7px 8px;gap:8px}.cr-brand{gap:4px}.cr-brand strong{font-size:12px}.cr-brand>svg{width:22px}.cr-heading{display:none}.cr-actions{margin-inline-start:auto;gap:3px}.cr-actions button{min-width:38px;padding:7px;font-size:10px}.cr-actions #cr-full span{display:none}.cr-toolbar{padding:6px 6px max(6px,env(safe-area-inset-bottom));gap:5px}.cr-drawing{gap:3px}.cr-drawing button{min-width:45px;padding:5px 6px;font-size:9px}.cr-colors{gap:0}.cr-color{width:29px!important;min-height:38px!important}.cr-color i{width:21px;height:21px}.cr-width{flex-direction:row;align-items:center}.cr-width>span{display:none}.cr-history{gap:3px}.cr-history button{min-width:38px;padding:7px}.cr-navigation{margin-inline-start:auto;gap:2px}.cr-navigation button{min-width:36px;padding:6px}.cr-navigation output{min-width:40px;font-size:11px}.cr-form{padding:20px;border-radius:16px}.cr-form h2{font-size:25px}.cr-setup{padding:10px}.cr-status{bottom:135px}}
@media(max-height:520px){.cr-header{padding-block:5px}.cr-toolbar{padding-block:5px}.cr-drawing button{flex-direction:row}.cr-drawing button span{display:none}.cr-form{padding:16px}.cr-form #cr-surahs{height:90px}.cr-description{margin-block:7px}.cr-status{bottom:65px}}
/* Qur'an navigation keeps Next on the left in both interface languages. */
.cr-navigation,#cr-page-count{direction:ltr;unicode-bidi:isolate}

/* Lesson names and drawings stay in the browser's local database. */
#cr-saved{width:100%;margin:0 0 18px;white-space:normal}
.cr-library{z-index:25}
.cr-library-card{width:590px}
.cr-library-card h2{font-size:25px;overflow-wrap:anywhere}
.cr-library-card #cr-save-name{display:block;width:100%;min-height:46px;padding:11px 12px;border:1px solid #a9bdb0;border-radius:10px;background:#fff;color:#172827;font:15px system-ui,Tahoma,sans-serif}
.cr-library-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.cr-library-actions button{flex:1 1 150px;white-space:normal;min-width:0}
.cr-library-actions .cr-present{width:auto;margin:0}
.cr-saved-list{display:grid;gap:12px}
.cr-saved-lesson{display:grid;gap:6px;min-width:0;padding:14px;border:1px solid #d8dfd8;border-radius:12px;background:#fffefa}
.cr-saved-lesson>strong{font-size:16px;overflow-wrap:anywhere}
.cr-saved-lesson>small{color:#65736a;font-size:11px}
.cr-saved-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.cr-saved-actions>span{flex-basis:100%;font-size:13px}
.cr-saved-actions button{white-space:normal}
.cr-saved-actions .cr-delete-lesson{border-color:#a3483f;color:#8b3029}
.cr-empty-lessons{padding:18px 0;color:#65736a;line-height:1.6}
#cr-library-close{font-size:28px;min-width:44px;flex-shrink:0}