#annotation-root{position:absolute;inset:0;z-index:800;pointer-events:none;color:#eee;font-size:13px;--mark-color:#e95643}
.annotation-tools{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:5px;padding:6px;background:rgba(20,23,25,.9);border:1px solid #ffffff20;border-radius:13px;box-shadow:0 8px 25px #0004;pointer-events:auto}
.annotation-tools button{width:36px;height:36px;padding:7px;color:#e1e4e5}
.annotation-tools button.active{background:#ffffff20;color:#ffd700}.annotation-tools button:disabled{opacity:.35;cursor:default}
.annotation-tools svg,.annotation-marker svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.annotation-tools .tool-separator{height:1px;background:#ffffff20;margin:3px}
.annotation-panel{position:absolute;right:65px;top:auto;bottom:50%;width:min(240px,calc(100% - 85px));max-height:calc(100% - 24px);overflow:auto;background:#202528f5;border:1px solid #ffffff25;border-radius:10px;padding:9px;box-shadow:0 12px 35px #0005;pointer-events:auto;backdrop-filter:blur(14px)}
.annotation-panel[hidden],.annotation-toast[hidden]{display:none} .annotation-layer{display:flex;align-items:center;gap:6px;padding:3px;margin:0 0 4px;border:1px solid transparent;border-radius:7px}.annotation-layer.active{border-color:#d0ad4e}.annotation-panel input[type=text],.annotation-new input{width:100%;min-width:0;box-sizing:border-box;color:#fff;background:#1118;border:1px solid #ffffff30;border-radius:6px;padding:6px 8px;font:inherit;font-size:12px}.annotation-layer input[type=checkbox]{width:15px;height:15px;flex-shrink:0;accent-color:#d0ad4e}.annotation-new{display:flex;gap:6px;margin-top:6px}.annotation-new button{flex-shrink:0;font-size:12px;padding:7px}
.annotation-page{position:absolute;pointer-events:none}.annotation-page.placing{pointer-events:auto;cursor:crosshair;touch-action:none}.annotation-marker{position:absolute;pointer-events:none;width:30px;height:30px;padding:3px;border:0;color:var(--mark-color);background:#fffdf4e8;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 5px #0004;touch-action:none;cursor:grab;transition:none}.annotation-marker:hover,.annotation-marker:active{transform:translate(-50%,-50%);background:#fff8d8;color:#d53c2b}.annotation-marker.selected{outline:2px solid #ffd700}.annotation-marker:disabled{cursor:wait}.annotation-page.placing .annotation-marker{pointer-events:auto}
#annotation-root .annotation-delete,
#annotation-root .annotation-delete:hover,
#annotation-root .annotation-delete:active,
#annotation-root .annotation-delete:focus{position:absolute;z-index:3;width:14px;height:14px;min-width:14px;min-height:14px;box-sizing:border-box;transform:none;transition:none;background:#a62e27;color:#fff;border:0;border-radius:50%;padding:0;pointer-events:auto;font-size:13px;cursor:pointer;touch-action:manipulation;box-shadow:0 3px 12px #0005}
#annotation-root .annotation-delete:focus-visible{outline:2px solid #ffd700;outline-offset:2px}
.annotation-toast{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:#151b20e8;padding:9px 14px;border-radius:8px;max-width:calc(100% - 100px);text-align:center;pointer-events:none;line-height:1.5}.annotation-saving{opacity:.65}
@media(max-width:600px){.annotation-tools{right:4px;padding:4px}.annotation-tools button{width:32px;height:32px}.annotation-panel{right:50px;width:min(240px,calc(100% - 70px))}}

body.annotation-placing #book{pointer-events:none}body.annotation-placing #main-content{touch-action:none}

#annotation-root .annotation-delete svg{display:block;width:12px;height:12px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round}

.annotation-layer-count{flex:none;min-width:20px;text-align:center;font-size:11px;line-height:20px;color:#b9c5c8;background:#ffffff0d;border-radius:4px;font-variant-numeric:tabular-nums}
body.annotation-panel-open #book{pointer-events:none}

#annotation-root .annotation-layer-count{min-width:24px;height:22px;min-height:22px;padding:0 5px;border:0;border-radius:4px;transform:none;transition:none;justify-content:center;background:#ffffff12;color:#d1dcde;font-size:11px;line-height:22px;cursor:pointer}
#annotation-root .annotation-layer-count:hover{background:#ffffff25;transform:none}
#annotation-root .annotation-layer-count:disabled{opacity:.4;cursor:default}
.annotation-marker.located{outline:2px solid #ffd700;background:#fff3ad}
