*{box-sizing:border-box}html,body{margin:0;font-family:Arial,system-ui,sans-serif;color:#15253a;background:#eef2f6}header{height:66px;display:flex;align-items:center;gap:14px;padding:10px 17px;background:#fff;border-bottom:1px solid #dce2eb;position:sticky;top:0;z-index:100;flex-wrap:wrap}.brand{font-weight:760;font-size:17px;margin-right:auto}.badge{font-size:11px;color:#6c7c91}.control{display:flex;align-items:center;gap:6px}select,input[type=number],button{font:inherit;border:1px solid #cdd6e2;background:#fff;border-radius:8px;color:#1a314c;padding:8px 10px}button{cursor:pointer}button:hover{background:#e6eef8}button:disabled{opacity:.5;cursor:default}button.primary{background:#145ea5;color:#fff;border-color:#145ea5}button.primary:hover{background:#0a4d8c}button.active{background:#dcefff;border-color:#5599e4}#pageNum{width:68px;text-align:center}#pageCount{color:#77879a;font-size:13px}main{display:grid;grid-template-columns:minmax(350px,1fr) 320px;gap:15px;max-width:1540px;margin:20px auto;padding:0 18px;align-items:start}.pagecolumn{display:flex;flex-direction:column;align-items:center;gap:12px}.hint{font-size:13px;color:#46586c;background:#fff;border:1px solid #e0e5ec;padding:10px 15px;border-radius:10px;width:100%;max-width:950px}.sheet{position:relative;width:100%;max-width:950px;background:white;box-shadow:0 3px 24px #223f6524;border-radius:3px;overflow:hidden;user-select:none;touch-action:pan-y}#pageImage{width:100%;height:auto;display:block;pointer-events:none}.sheet.add-mode{cursor:crosshair}.entry{position:absolute;width:160px;max-width:60%;font-size:13.5px;line-height:1.35;min-height:23px;background:transparent;border:0;box-shadow:none;color:#063c75;border-radius:0;padding:0;z-index:3;user-select:text;overflow-wrap:anywhere;text-align:left;transform:none}.entry .edit{width:100%;min-height:20px;outline:0;white-space:pre-wrap;word-break:break-word;cursor:text;text-align:left;direction:ltr;background:none;border:0;box-shadow:none;padding:0;margin:0}.entry .grip{position:absolute;left:0;top:-18px;background:#1761a4;color:#fff;border-radius:3px 3px 0 0;font-size:11px;cursor:move;padding:2px 7px;display:none;touch-action:none}.entry .remove{position:absolute;right:-10px;top:-20px;border:0;background:transparent;color:#a23a2a;padding:1px 4px;font-size:16px;display:none}.entry:focus-within .grip,.entry:focus-within .remove,.entry:hover .grip,.entry:hover .remove,.entry.selected .grip,.entry.selected .remove{display:block}.mediaHot{position:absolute;display:block;z-index:5;border:2px solid #16a087;border-radius:4px;background:#08a8781f;box-shadow:0 0 0 2px #fff9;cursor:pointer}.mediaHot:hover{background:#20b48e50}.mediaHot b{position:absolute;bottom:100%;left:-2px;font-size:12px;background:#0c856e;color:white;white-space:nowrap;padding:4px 6px;border-radius:4px 4px 0 0}aside{position:sticky;top:86px;background:#fff;padding:16px;border:1px solid #dce3eb;border-radius:12px;box-shadow:0 3px 10px #1b385b0c}.h2{font-weight:700;font-size:15px;margin:0 0 10px}textarea{display:block;width:100%;height:190px;resize:vertical;border:1px solid #bdcadd;border-radius:7px;font:14px/1.45 Arial,sans-serif;padding:10px}#mediaList{margin-bottom:15px;min-height:25px}#mediaList>a{display:block;color:#0f63a8;text-decoration:none;background:#eaf5fd;border:1px solid #cce4f8;padding:8px 10px;margin:6px 0;border-radius:6px}#mediaList>a:hover{text-decoration:underline}.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.actions button{font-size:12px;padding:7px}.footnote{font-size:12px;line-height:1.5;color:#6f7d8b;margin-top:14px}.saved{font-size:11px;color:#0b8061;margin-left:4px}.bottomBar{display:none}#fileImport{display:none}a{color:#1765a6}.helpModal{position:fixed;inset:0;background:#0008;z-index:300;display:none;align-items:center;justify-content:center;padding:20px}.helpBox{max-width:660px;background:#fff;padding:25px;border-radius:13px;line-height:1.6;max-height:85vh;overflow:auto}.helpBox h2{margin-top:0}.helpBox p{margin-bottom:8px}body.showHelp .helpModal{display:flex}@media(max-width:900px){header{height:auto;padding:9px 10px;gap:7px}.brand{width:100%;margin-bottom:2px}.badge{display:none}main{grid-template-columns:1fr;padding:0 6px;margin:8px auto;gap:9px}aside{position:static;order:2;width:100%}.hint{font-size:12px}.entry{font-size:11.7px;width:120px;max-width:60%}.entry.selected .remove,.entry.selected .grip{display:block}.bottomBar{display:flex;position:sticky;bottom:0;z-index:80;background:#fff;border-top:1px solid #dbe3ec;align-items:center;justify-content:space-around;padding:8px}.sheet{border-radius:0}select{max-width:178px}}@media print{header,aside,.hint,.bottomBar,.mediaHot,.entry .grip,.entry .remove{display:none!important}html,body,main{display:block;margin:0;background:white;padding:0}.pagecolumn{display:block}.sheet{box-shadow:none;width:100%;max-width:none}.entry{border:none;background:transparent;box-shadow:none}#pageImage{width:100%;height:auto}}
/* Выделение текста на сканированных страницах */
.sheet.translate-mode{cursor:crosshair;touch-action:none}
.ocrSelection{position:absolute;pointer-events:none;z-index:9;border:1px dashed #006dd6;background:#1689e52a}
.translateModal{position:fixed;inset:0;background:#0008;z-index:400;display:none;align-items:center;justify-content:center;padding:18px}
.translateModal.visible{display:flex}
.translateBox{max-width:620px;width:100%;max-height:92vh;overflow:auto;background:white;border-radius:13px;padding:20px;box-shadow:0 10px 40px #0003}
.translateBox h2{font-size:18px;margin:0 0 8px}
.translateBox textarea{height:160px;margin:12px 0;font-size:15px}
.translateActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.translateBox .detail{font-size:13px;color:#516374;line-height:1.5}
@media print{.translateModal,.ocrSelection{display:none!important}}

.entry.near-left{transform:none;text-align:left}.entry.near-left .edit{text-align:left}.entry.near-left .remove{right:auto;left:0}.entry:focus-within .edit{background:transparent;box-shadow:none;outline:0;border:0}

/* v5: black, high-contrast aiming cursor over scanned book pages. Hotspot at the crosshair intersection. */
.sheet.add-mode,.sheet.translate-mode{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2225%22%20viewBox%3D%220%200%2025%2025%22%3E%3Cpath%20d%3D%22M12%201V24M1%2012H24%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%201V24M1%2012H24%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") 12 12, crosshair;}