:root{font-family:Inter,Arial,sans-serif;color:#202536;background:#e9edf3}*{box-sizing:border-box}body{margin:0}header{background:#171e30;color:white;min-height:65px;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:12px 20px}header strong{letter-spacing:2px}header span{color:#aebbd1;font-size:13px}.actions,.inline,.canvasbar,.sectionhead{display:flex;gap:7px;align-items:center}.actions{flex-wrap:wrap}button{border:1px solid #d3d9e4;border-radius:7px;padding:9px 12px;background:white;color:#26324a;cursor:pointer;font-weight:600}button:hover{background:#e7f0ff}button:disabled{opacity:.4;cursor:default}header button{background:#2b3750;color:white;border-color:#46536b}header button:hover{background:#425476}button.primary{background:#3166ec;color:white;border-color:#3166ec}.wide{width:100%}main{display:grid;grid-template-columns:330px minmax(0,1fr);min-height:calc(100vh - 65px)}aside{background:#fff;padding:19px;overflow:auto;max-height:calc(100vh - 65px);border-right:1px solid #d6dce5}h2{font-size:20px;margin:0 0 18px}h2 small{font-size:11px;color:#7d8798}h3{font-size:14px;margin:10px 0}.sectionhead{justify-content:space-between}label{font-size:12px;font-weight:650;display:block;flex:1;min-width:0;margin:9px 0;color:#526078}input,select{display:block;width:100%;margin-top:5px;padding:9px;border:1px solid #d3dae5;border-radius:7px;background:white;color:#202536;font:inherit}input[type=color]{padding:3px;height:38px}.hint{font-size:12px;color:#697589;line-height:1.5}hr{border:0;border-top:1px solid #e6eaf0;margin:17px 0}.buttons{flex-wrap:wrap}.buttons button{flex:1;white-space:nowrap;font-size:12px}.workspace{display:flex;flex-direction:column;min-width:0}.canvasbar{padding:12px 17px;justify-content:space-between;font-size:12px;color:#697589;flex-wrap:wrap}.canvasbar div{display:flex;align-items:center;gap:10px}.canvaswrap{flex:1;min-height:500px;overflow:auto;display:flex;align-items:center;justify-content:center;padding:40px;background-image:radial-gradient(#cbd3df 1px,transparent 1px);background-size:18px 18px}#art{background:white;box-shadow:0 12px 40px #1a29402b;max-width:none;flex-shrink:0;touch-action:none}#art .object{cursor:move}#art .selected{filter:drop-shadow(0 0 3px #3166ec)}.foot{padding:12px 18px;background:#fff;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.foot label{max-width:270px}.foot #status{font-size:12px;color:#3e6b55}.layer,.puzzle{display:flex;align-items:center;gap:5px;padding:6px 3px;border-bottom:1px solid #edf0f4;font-size:12px}.layer>button,.puzzle>button{padding:5px 7px;font-size:11px}.layer .name,.puzzle .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.layer.active{background:#eaf0ff}.layer input{margin:0;padding:5px}#library{max-height:220px;overflow:auto}@media(max-width:850px){main{display:flex;flex-direction:column}aside{max-height:none}header{align-items:flex-start;flex-direction:column}.canvaswrap{min-height:450px}.foot label{min-width:160px}}

/* V4: compact editor + two facing A4 sheets */
main{grid-template-columns:285px minmax(370px,1fr) minmax(500px,1.55fr)}
aside{padding:14px}.workspace{min-height:0}.canvaswrap{min-height:400px;padding:20px}.sheet-panel{min-width:0;padding:16px;background:#dfe5ec;overflow:auto;max-height:calc(100vh - 65px);border-left:1px solid #c9d2df}.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.sheet-top h2{margin:0 0 4px}.sheet-top p{margin:0;font-size:12px;color:#667184}.sheet-buttons{display:flex;gap:6px}.sheets{display:flex;gap:12px;align-items:flex-start}.a4{flex:1 1 0;min-width:0;aspect-ratio:210/297;background:white;box-shadow:0 5px 20px #23344b2b;padding:5%;display:flex;flex-direction:column}.a4 h3{text-align:center;font-size:clamp(10px,.95vw,17px);letter-spacing:.08em;border-bottom:1px solid #b8c2cd;padding-bottom:9px;margin:0 0 9px}.a4 footer{font-size:9px;text-align:center;color:#768091;margin-top:8px}.sheet-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:1.5%}.sheet-cell{position:relative;border:1px solid #d5dce5;border-radius:3px;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:4px;cursor:default}.sheet-cell.editable{cursor:pointer}.sheet-cell.active{outline:2px solid #3166ec;outline-offset:-2px}.sheet-cell .number{position:absolute;top:3px;left:4px;font-size:clamp(7px,.6vw,10px);font-weight:700;color:#617089}.sheet-cell .mini-art{width:100%;height:72%;display:flex;align-items:center;justify-content:center}.sheet-cell svg{width:100%;height:100%;object-fit:contain}.sheet-cell .clue{font-size:clamp(6px,.57vw,10px);line-height:1.2;text-align:center;color:#5d687b;max-height:26%;overflow:hidden}.sheet-cell .answer{font-size:clamp(8px,.8vw,13px);font-weight:700;text-align:center;overflow-wrap:anywhere;padding:5px}.sheet-foot{display:flex;align-items:center;gap:15px;font-size:12px;color:#536176}.sheet-foot label{max-width:170px}.resize-handle{fill:#fff;stroke:#3166ec;stroke-width:3;cursor:nwse-resize}.selection-outline{fill:none;stroke:#3166ec;stroke-width:2;stroke-dasharray:6 4;pointer-events:none}
@media(max-width:1550px){main{grid-template-columns:260px minmax(350px,1fr)}.sheet-panel{grid-column:1/-1;max-height:none}.sheets{max-width:1050px;margin:auto}}
@media(max-width:850px){main{display:flex;flex-direction:column}.sheet-panel{width:100%}.sheets{gap:8px}.a4{padding:3%}.sheet-cell .number{font-size:8px}}
@media print{header,aside,.workspace,.sheet-top,.sheet-foot{display:none!important}main,.sheet-panel{display:block!important;margin:0;padding:0;background:white;overflow:visible;max-height:none}.sheets{display:block;max-width:none}.a4{width:210mm;height:297mm;aspect-ratio:auto;box-shadow:none;page-break-after:always;break-after:page;padding:12mm}.a4 h3{font-size:17pt}.sheet-cell .number{font-size:9pt}.sheet-cell .clue{font-size:8pt}.sheet-cell .answer{font-size:11pt}.sheet-grid{gap:3mm}}

/* V6: multiple titled A4 page pairs and image uploads */
#pageSets{display:flex;flex-direction:column;gap:25px}.page-pair{border-bottom:1px solid #b9c5d5;padding-bottom:20px}.pair-heading{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:13px}.pair-heading input{max-width:270px;margin:0;padding:6px 9px}.empty-slot{font-size:clamp(6px,.62vw,10px);color:#a4afbe;text-align:center;padding:4px}.sheet-foot{flex-wrap:wrap}.sheet-foot label{max-width:240px}.navback{display:inline-flex;align-items:center;padding:9px 12px;border:1px solid #56667e;border-radius:7px;color:white;text-decoration:none;font-size:12px;font-weight:700}.navback:hover{background:#40516b}@media print{.pair-heading{display:none}.page-pair{border:0;padding:0;break-inside:auto}#pageSets{display:block}.a4{break-after:page;page-break-after:always}}

.photo-import{margin:12px 0}.photo-import .buttons{display:flex;gap:8px;flex-wrap:wrap}#photoCropDialog{max-width:min(92vw,850px);width:850px;border:1px solid #b8c1cc;border-radius:12px;padding:20px;color:#1e293b;background:white}#photoCropDialog::backdrop{background:#101827bb}#photoCropDialog canvas{display:block;max-width:100%;max-height:65vh;margin:12px auto;border:1px solid #ccd5df;touch-action:none;cursor:crosshair}#photoCropDialog .photo-head,#photoCropDialog .photo-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}#photoCropDialog .photo-actions label{display:flex;align-items:center;gap:5px}

/* V8: compact creation tools and contextual under-canvas properties */
.under-canvas-properties{padding:12px 18px;border-top:1px solid #d9e1ed;background:#fff}.under-canvas-properties #properties{max-width:none}.under-canvas-properties #properties>hr{display:none}.under-canvas-properties #properties h3{margin:0 0 10px}.under-canvas-properties #properties{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:8px 14px;align-items:end}.under-canvas-properties #properties[hidden]{display:none!important}.under-canvas-properties #properties h3{grid-column:1/-1}.under-canvas-properties #properties .inline{gap:10px}.under-canvas-properties #properties input,.under-canvas-properties #properties select{max-width:100%}.under-canvas-properties #properties .buttons{grid-column:1/-1;justify-content:flex-start}.canvas-actions{display:flex;align-items:center;gap:12px;padding:12px 18px;background:#f5f8fe;border-top:1px solid #d9e1ed}.canvas-actions button{min-width:155px}.canvas-actions span{font-size:12px;color:#64748b}.asset-sources{display:flex;flex-direction:column;gap:7px;width:100%;margin-top:8px}.asset-sources label{width:100%}.asset-sources .hint{margin:0}.scan-toggle{width:100%;text-align:left;font-weight:700}.photo-import #scanOptions[hidden]{display:none!important}.photo-import #scanOptions{padding-top:10px}.photo-import{margin:10px 0}@media(max-width:850px){.under-canvas-properties #properties{grid-template-columns:1fr 1fr}.canvas-actions{flex-wrap:wrap}}

/* V9 quiz studio enhancements */
.studio-types{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;background:#f8faff;border-bottom:1px solid #dce3ed;font-size:12px}.studio-types a{padding:5px 9px;border:1px solid #d5ddeb;border-radius:6px;text-decoration:none;color:#223450;background:#fff}.studio-types a.current{background:#3264ec;color:white}.studio-types span{color:#687891}.answer-entry{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:600}.answer-entry input{width:190px;max-width:100%;padding:7px;border:1px solid #ccd4e2;border-radius:5px}.quiz-savebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px;border-top:1px solid #ccd4e2}.quiz-savebar span{font-size:11px;color:#536078}.answer-writing{margin-top:auto;border-top:1px solid #e5eaf0;padding:4px 2px;font-size:9px;color:#34415a}.sheet-cell{display:flex;flex-direction:column}.sheet-cell .mini-art{flex:1;min-height:0}.sheet-cell .answer{margin-top:auto;padding:5px 3px;font-weight:700}.sheet-cell .clue{font-size:9px}@media print{.studio-types,.quiz-savebar{display:none!important}}

/* V15: compact, accessible native dialogs */
.studio-dialog{border:1px solid #cbd5e1;border-radius:14px;padding:24px;max-width:min(92vw,520px);width:100%;box-shadow:0 18px 70px #0004;color:#17223b;background:#fff}.studio-dialog::backdrop{background:#0f172a99}.studio-dialog h2{margin:0 0 10px}.studio-dialog p{margin:0 0 18px}.dialog-actions{display:flex;gap:8px;flex-wrap:wrap}.dialog-actions button{flex:1 1 150px}.project-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #ddd}.project-row span{overflow-wrap:anywhere}

/* V16: explicit native file inputs so macOS Finder exposes supported PDFs */
.a4-file-fields{display:grid;gap:10px;margin:10px 0}.a4-file-fields label{display:grid;gap:5px;font-size:13px;font-weight:650}.a4-file-fields input[type=file]{display:block;width:100%;max-width:100%;font-size:12px;padding:8px;border:1px solid #bdc9d9;border-radius:7px;box-sizing:border-box;background:#fff}.a4-file-fields input::file-selector-button{padding:7px;border:1px solid #aab8cb;border-radius:5px;background:#f5f7fb;margin-right:7px;cursor:pointer}

/* V21: viewport can scroll/pan at high zoom without changing saved crop coordinates */
#importViewport {overflow:auto;max-height:70vh;overscroll-behavior:contain;}
#importViewport canvas {max-width:none;touch-action:none;}
#photoCropDialog .photo-actions {flex-wrap:wrap;}
#photoCropDialog #importZoomValue {min-width:3.5em;font-variant-numeric:tabular-nums;}

/* V22: fixed PDF viewport; zoom changes page pixels, not dialog dimensions */
#photoCropDialog{width:min(94vw,1100px);max-width:1100px;max-height:94vh;overflow:auto;}
#photoCropDialog #importViewport{width:100%;height:min(58vh,650px);max-height:none;overflow:auto;position:relative;background:#e7ebf1;border:1px solid #c4cedb;border-radius:8px;overscroll-behavior:contain;}
#photoCropDialog #importViewport canvas{display:block;max-width:none!important;max-height:none!important;width:auto;height:auto;margin:0!important;touch-action:none;user-select:none;}
#photoCropDialog .import-tool-buttons{display:flex;gap:5px;align-items:center;}
#photoCropDialog .import-tool-buttons button{white-space:nowrap;}
#photoCropDialog .import-tool-buttons button.active{background:#3166ec;color:white;border-color:#3166ec;}
#photoCropDialog .photo-actions label{flex:0 1 auto;}
#photoCropDialog #importZoom{width:160px;}

/* V24: true document zoom, independent crop and compact preview */
#photoCropDialog .import-selection-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 0;flex-wrap:wrap}#photoCropDialog #importSelectionInfo{margin-right:auto;color:#53627a;font-size:13px}#photoCropDialog #importCropPreview{max-height:230px;overflow:auto;background:#f3f6fa;text-align:center;padding:8px;border:1px solid #cbd5e1;border-radius:8px}#photoCropDialog #importCropPreview img{max-width:100%;max-height:210px;object-fit:contain}#photoCropDialog #importZoomIn,#photoCropDialog #importZoomOut{min-width:34px;padding:6px 9px}#photoCropDialog #importViewport canvas{image-rendering:auto}

/* V25: original-size PDF canvas inside scrollable viewport; crop coordinates match displayed artwork. */
#photoCropDialog #photoCanvas{max-width:none!important;max-height:none!important;width:auto!important;height:auto!important;margin:0!important;touch-action:none!important;}
#photoCropDialog #importViewport{overflow:auto!important;max-height:65vh;position:relative;}

/* V32: approved A4 layout refinements. Applies to preview and print. */
.a4 h3{text-align:left;border-bottom:0;padding:0;margin:0 0 12px;letter-spacing:.045em;min-height:1.4em;cursor:text;outline-offset:3px}
.a4 h3:focus{outline:2px solid #3166ec;border-radius:2px}
.a4 footer{display:none!important}
.sheet-cell .mini-art{width:100%;height:auto;flex:1 1 auto;min-height:0;margin:14px 0 3px}
.sheet-cell .mini-art svg{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.sheet-cell .answer-writing{width:100%;flex:0 0 auto;margin-top:2px}
.sheet-cell .answer{flex:0 0 auto;margin-top:2px}
.sheet-cell .clue{flex:0 0 auto}
@media print{.a4 h3{text-align:left;border-bottom:0;padding:0;margin-bottom:4mm}.sheet-cell .mini-art{margin:3mm 0 1mm}}

/* V33: target-proportion editing surface and independently collapsible tools. */
.studio-fold{border-top:1px solid #e2e8f0;padding:9px 0;margin:6px 0}
.studio-fold>summary{cursor:pointer;font-weight:750;color:#1d293b;display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:revert}
.studio-fold .fold-note{font-size:10px;font-weight:500;color:#64748b;text-align:right}
.studio-fold .fold-body{padding-top:10px}
.studio-fold .fold-body .hint{margin:6px 0 10px}
.studio-fold .asset-sources{margin-top:12px}
#studioImportAnchor>*,#studioImportAnchor .import-a4{max-width:100%}
#art{max-width:none;flex-shrink:0}
@media(max-width:700px){.studio-fold .fold-note{display:none}}

/* V34: editable artwork is independent of the dynamic question number and answer fields. */
.sheet-cell .mini-art{cursor:pointer;position:relative}
.sheet-cell .number{pointer-events:none;z-index:2}
.sheet-cell .answer[contenteditable="true"]{cursor:text;min-height:1.5em;outline-offset:2px}
.sheet-cell .answer[contenteditable="true"]:focus{outline:2px solid #3166ec;background:#f4f8ff}
@media print{.sheet-cell .answer[contenteditable="true"]{outline:0;background:transparent}}

/* V35: clear, progressive quiz-import workflow; preserve existing import and editing controls. */
.workflow-heading{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin:14px 0 10px;font-size:15px}.workflow-heading span{font-size:12px;color:#64748b}.workflow-step{border:1px solid #cbd5e1;border-radius:12px;margin:10px 0;background:#fff;overflow:hidden}.workflow-step>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 12px;font-weight:750;cursor:pointer;list-style:none}.workflow-step>summary::-webkit-details-marker{display:none}.workflow-step>summary>span:first-child{display:flex;align-items:center;gap:9px}.workflow-step[open]>summary{background:#edf4ff}.workflow-step .fold-body{padding:12px}.step-num{display:inline-grid;place-items:center;flex:none;background:#3166ec;color:white;border-radius:50%;height:27px;width:27px;font-size:14px}.workflow-step-plain{padding:12px}.workflow-step-title{display:flex;align-items:center;gap:9px}.workflow-step-plain .hint{margin:10px 0}.workflow-action{width:100%;font-weight:700;border-color:#3166ec!important;color:#1d4ed8!important}.workflow-step .fold-note{font-weight:400;font-size:11px;text-align:right;max-width:48%}@media(max-width:560px){.workflow-step>summary{align-items:flex-start}.workflow-heading{flex-wrap:wrap}}

/* V36: artwork editing canvas follows the A4 question artwork zone, without fixed artboard padding. */
.canvaswrap{padding:18px;min-height:0;overflow:auto}#art{display:block;max-width:none;max-height:none;flex:0 0 auto} .canvasbar{flex-shrink:0}

/* V39: compact, optional-help Dingbat controls */
.compact-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.compact-title h2{margin:0 0 12px}.tiny-help{position:relative;z-index:10}.tiny-help summary{list-style:none;cursor:pointer;border:1px solid #cbd5e1;border-radius:50%;width:23px;height:23px;display:grid;place-items:center;font-weight:700;color:#475569}.tiny-help summary::-webkit-details-marker{display:none}.help-pop{position:absolute;top:29px;right:0;width:235px;padding:12px;background:#fff;border:1px solid #cbd5e1;box-shadow:0 8px 20px #0002;border-radius:8px;font-size:12px;line-height:1.5}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 12px}.quick-action{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;min-height:34px;padding:7px 5px;font:600 12px Inter,Arial,sans-serif;color:#1d4ed8;background:#f0f5ff;border:1px solid #c8d7fb;border-radius:7px;cursor:pointer}.quick-action:last-child{grid-column:span 2;background:#3164ef;color:white}.compact-fold{margin:0 0 8px!important;border:1px solid #d5deeb!important;border-radius:8px!important}.compact-fold>summary{padding:10px 12px!important;font-size:13px;font-weight:650;cursor:pointer}.compact-fold .fold-body{padding:9px!important}.compact-fold .hint{display:none}.compact-fold .workflow-step{margin:5px 0}.compact-fold .workflow-step .hint{display:none}main>aside .sectionhead{margin-top:12px}main>aside>hr{margin:12px 0}

/* V40: compact flexible grid and server PDF import */
.grid-config,.server-pdf{border:1px solid #d5deeb;border-radius:8px;padding:10px;margin-bottom:9px;background:#f8faff;display:grid;gap:8px;font-size:12px}.grid-config>div{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.grid-config label,.server-pdf label{display:grid;gap:3px;flex:1;min-width:75px}.grid-config input{width:64px}.server-pdf input{width:100%;min-width:0}.grid-config input,.server-pdf input{border:1px solid #cbd5e1;border-radius:5px;padding:7px}.grid-config button,.server-pdf button{padding:8px;border:1px solid #bdcae2;border-radius:6px;cursor:pointer;background:#e9efff}.sheet-grid{min-height:0}.sheet-grid .sheet-cell{min-width:0;min-height:0;overflow:hidden}

/* V41: Fit complete Dingbat art inside each flexible cell, without distortion. */
.sheet-cell .mini-art{overflow:hidden;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
.sheet-cell .mini-art svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;preserveAspectRatio:xMidYMid meet}
.sheet-grid{display:grid;min-height:0;grid-auto-flow:row}
.sheet-cell{min-width:0;min-height:0;overflow:hidden}

/* V46: grid settings belong with Questions, mirrored to Answers */
.grid-above-questions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:10px 0 14px}.grid-above-questions .grid-config{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0!important;padding:10px 12px!important;background:#fff;border:1px solid #c6d2e3;border-radius:8px}.grid-above-questions .grid-config>div{display:flex;align-items:center;gap:9px}.grid-above-questions .grid-config label{font-size:12px!important;flex:0 0 auto!important}.grid-above-questions .grid-config button{font-weight:700;background:#234d8b;color:#fff;border:0;padding:9px 12px!important}.grid-mirror-note{font-size:12px;color:#475569}.sheet-grid .mini-art svg{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}@media print{.grid-above-questions{display:none!important}}

/* Quiz management controls */
.om-quiz-management{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:12px 0;padding:12px;background:#f0f5fb;border:1px solid #ccd9e9;border-radius:10px}.om-quiz-management button{padding:9px 14px;border:1px solid #aebfd4;border-radius:8px;background:white;font-weight:700;cursor:pointer}.om-quiz-management #omNewQuiz{background:#174c3b;color:white;border-color:#174c3b}.om-manage-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:9px 0;padding:10px;border-bottom:1px solid #dde4ee}.om-manage-row span{flex:1;min-width:150px}.om-manage-row button{padding:6px 9px;cursor:pointer}@media(max-width:650px){.om-quiz-management{align-items:stretch}.om-quiz-management strong{width:100%}}

/* Page-pair management — controls do not affect printed A4 sheets */
.pair-heading{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.page-set-action{cursor:pointer;border:1px solid #cbd5e1;background:#fff;color:#25334a;border-radius:7px;padding:7px 12px;font:600 13px/1.3 inherit;white-space:nowrap}
.page-set-action:hover{background:#eaf1ff}
.page-set-delete{margin-left:auto;color:#9b2934;border-color:#e8bdc1}
.page-set-delete:hover{background:#fff0f0}
@media print{.page-set-action{display:none!important}}

/* Always-visible A4 page management, including saved quiz loads. Screen only. */
.om-page-manage{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:12px 0;padding:12px 14px;border:1px solid #bac9db;border-radius:10px;background:#f5f8fd;color:#25334a;font:600 13px/1.4 Arial,sans-serif}
.om-page-manage label{font-size:12px}.om-page-manage select{width:auto;min-width:145px;max-width:290px;padding:8px 10px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#25334a}
.om-page-manage button{padding:9px 13px;border:1px solid #b7c6d9;border-radius:7px;background:#fff;color:#25334a;font:600 13px Arial,sans-serif;cursor:pointer}
.om-page-manage button:hover{background:#e5edfa}.om-page-manage .om-delete-page{border-color:#db9da3;color:#9b2934;background:#fff8f8}.om-page-manage .om-delete-page:hover{background:#ffe6e9}
.om-page-help{font-size:11px;font-weight:400;color:#607086}
@media print{.om-page-manage{display:none!important}}

/* Pages panel: always visible for newly created and reopened saved quizzes */
.om-pages-panel{margin:10px 0;padding:12px;border:1px solid #cbd5e1;border-radius:10px;background:#f7f9fd;color:#243047;font:13px Arial,sans-serif}
.om-pages-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}.om-pages-header strong{font-size:16px}.om-pages-header button{background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:6px 10px;cursor:pointer}
.om-pages-thumbnails{display:flex;gap:10px;overflow-x:auto;padding:3px 2px 10px}.om-page-thumb{flex:0 0 100px;display:flex;align-items:center;flex-direction:column;gap:5px;background:white;border:2px solid #cbd5e1;border-radius:8px;padding:8px;color:#25334a;cursor:pointer;font-weight:600}.om-page-thumb.is-selected{border-color:#3068e9;box-shadow:0 0 0 2px #dce7ff}.om-page-thumb small{font-size:10px;color:#68758b}.om-thumb-paper{width:58px;height:82px;background:white;border:1px solid #cbd5e1;box-shadow:0 2px 5px #0001;padding:9px 6px;box-sizing:border-box}.om-thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;height:100%;align-content:start}.om-thumb-grid i{border:1px solid #d5deeb;min-height:7px}.om-thumb-grid i.filled{background:#a8c3f5;border-color:#648ce1}.om-pages-actions{display:flex;gap:7px;flex-wrap:wrap;margin:5px 0 9px}.om-pages-actions button{background:white;border:1px solid #b7c6d9;border-radius:6px;padding:8px 11px;font-weight:600;color:#25334a;cursor:pointer}.om-pages-actions button:disabled{opacity:.35;cursor:default}.om-pages-actions .om-panel-delete{border-color:#dba3a7;color:#9b2934;background:#fff7f7}.om-pages-panel small{color:#68758b}@media print{.om-pages-panel{display:none!important}}

/* V52: InDesign-style page thumbnails alongside the A4 workspace. */
.om-pages-workspace{display:grid;grid-template-columns:174px minmax(0,1fr);gap:12px;align-items:start;min-width:0}
.om-pages-workspace #pageSets{min-width:0}
.om-pages-workspace .om-pages-panel{margin:0;position:sticky;top:8px;max-height:calc(100vh - 95px);overflow:auto;padding:10px}
.om-pages-workspace .om-pages-thumbnails{display:flex;flex-direction:column;align-items:stretch;overflow-x:hidden;overflow-y:auto;max-height:52vh;gap:8px}
.om-pages-workspace .om-page-thumb{flex:none;width:100%;min-width:0;padding:7px 4px}
.om-pages-workspace .om-pages-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.om-pages-workspace .om-pages-actions button{padding:7px 4px;font-size:11px;min-width:0}
.om-pages-workspace #omPanelAdd,.om-pages-workspace #omPanelDelete{grid-column:1/-1}
.om-pages-workspace .om-pages-header strong{font-size:14px}
.om-pages-workspace .om-pages-header button{font-size:11px;padding:5px}
/* One page-management location only; retain underlying handlers for compatibility. */
#omPageManage,.page-set-action{display:none!important}
@media(max-width:700px){.om-pages-workspace{grid-template-columns:118px minmax(0,1fr);gap:7px}.om-pages-workspace .om-pages-panel{padding:6px}.om-pages-workspace .om-pages-actions{grid-template-columns:1fr}.om-pages-workspace .om-pages-actions button{grid-column:1/-1}}
@media print{.om-pages-workspace{display:block!important}.om-pages-workspace .om-pages-panel{display:none!important}.om-pages-workspace #pageSets{display:block!important}}

/* V53: Print only the designed A4 sheets, at true A4 size. */
@page { size: A4 portrait; margin: 0; }
@media print {
  html, body { width:210mm!important; height:auto!important; margin:0!important; padding:0!important; background:#fff!important; overflow:visible!important; }
  *, *::before, *::after { -webkit-print-color-adjust:exact!important; print-color-adjust:exact!important; }
  header, aside, .workspace, .studio-types, .sheet-top, .sheet-foot, .quiz-savebar,
  .om-pages-panel, .om-page-manage, .pair-heading, .page-set-action, .grid-above-questions,
  .navback { display:none!important; }
  main, .sheet-panel, .om-pages-workspace, #pageSets, .page-pair, .sheets {
    display:block!important; width:210mm!important; max-width:210mm!important;
    min-width:0!important; height:auto!important; min-height:0!important;
    margin:0!important; padding:0!important; border:0!important;
    overflow:visible!important; background:white!important; box-shadow:none!important;
    position:static!important; transform:none!important; gap:0!important;
  }
  .a4 {
    display:flex!important; flex-direction:column!important;
    box-sizing:border-box!important; width:210mm!important; min-width:210mm!important;
    max-width:210mm!important; height:297mm!important; min-height:297mm!important;
    max-height:297mm!important; aspect-ratio:auto!important;
    margin:0!important; padding:10mm!important; border:0!important;
    box-shadow:none!important; overflow:hidden!important;
    page-break-inside:avoid!important; break-inside:avoid!important;
    page-break-after:always!important; break-after:page!important;
  }
  .a4:last-child { page-break-after:auto!important; break-after:auto!important; }
  .page-pair:last-child .a4:last-child { page-break-after:auto!important; break-after:auto!important; }
  .a4 h3 { flex:none!important; text-align:left!important; font-size:17pt!important;
    line-height:1.25!important; letter-spacing:.045em!important; min-height:0!important;
    margin:0 0 4mm!important; padding:0!important; border:0!important; }
  .a4 .sheet-grid { flex:1 1 auto!important; min-height:0!important;
    gap:3mm!important; }
  .a4 .sheet-cell { min-height:0!important; box-sizing:border-box!important; }
  .a4 .sheet-cell.active { outline:none!important; }
  .a4 .sheet-cell .number { font-size:9pt!important; }
  .a4 .sheet-cell .clue { font-size:8pt!important; }
  .a4 .sheet-cell .answer { font-size:11pt!important; }
  .a4 .sheet-cell .mini-art { margin:0!important; }
  .a4 [contenteditable] { outline:none!important; }
}

/* Native print: no Studio interface, only cloned A4 master sheets. */
#omPrintRoot{display:none}
@media print{
  body > :not(#omPrintRoot){display:none!important}
  html,body{width:210mm!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important}
  #omPrintRoot{display:block!important;width:210mm!important;margin:0!important;padding:0!important}
  #omPrintRoot>.a4{display:flex!important;box-sizing:border-box!important;width:210mm!important;height:297mm!important;min-height:297mm!important;max-height:297mm!important;margin:0!important;padding:10mm!important;overflow:hidden!important;break-inside:avoid!important;page-break-inside:avoid!important;break-after:page!important;page-break-after:always!important}
  #omPrintRoot>.a4:last-child{break-after:auto!important;page-break-after:auto!important}
  #omPrintRoot .sheet-grid{min-height:0!important}
}

/* V55: only two temporary high-resolution WYSIWYG A4 images are printed. */
#omWysiwygPrint{display:none}
@page{size:A4 portrait;margin:0}
@media print{
  body > :not(#omWysiwygPrint){display:none!important}
  html,body{width:210mm!important;margin:0!important;padding:0!important;overflow:visible!important;background:white!important}
  #omWysiwygPrint{display:block!important;width:210mm!important;margin:0!important;padding:0!important}
  #omWysiwygPrint .om-wysiwyg-page{display:block!important;position:relative!important;width:210mm!important;height:297mm!important;min-height:297mm!important;max-height:297mm!important;margin:0!important;padding:0!important;overflow:hidden!important;break-inside:avoid!important;page-break-inside:avoid!important;break-after:page!important;page-break-after:always!important}
  #omWysiwygPrint .om-wysiwyg-page:last-child{break-after:auto!important;page-break-after:auto!important}
  #omWysiwygPrint .om-wysiwyg-page img{display:block!important;width:210mm!important;height:297mm!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;object-fit:fill!important}
}
