.anno-app{--anno-error: #e02020;display:flex;flex-direction:column;height:100%;min-height:0;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);overflow:hidden;touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.anno-app input,.anno-app textarea{user-select:text;-webkit-user-select:text}.anno-toolbar{position:relative;display:grid;grid-template-rows:auto auto;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border);flex:0 0 auto}.anno-tier1{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.anno-tier2{display:grid;grid-template-columns:minmax(0,auto) 1fr;grid-template-rows:auto auto;align-items:center;gap:var(--space-sm)}.anno-palette{grid-area:1 / 1}.anno-tier2-actions{grid-area:1 / 2;justify-self:end}.anno-props{grid-area:2 / 1 / 3 / -1}@media(min-width:768px){.anno-tier2{grid-template-columns:minmax(0,auto) 1fr auto;grid-template-rows:auto}.anno-props{grid-area:1 / 2}.anno-tier2-actions{grid-area:1 / 3}}.anno-brand{font-weight:600;font-size:.95rem;color:var(--text-white)}.anno-toolbar-note{font-size:.75rem;color:var(--text-muted)}.anno-tier-spacer{flex:1 1 auto}.anno-history{display:flex;align-items:center;gap:.2rem}.anno-hist-btn{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;padding:0;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:border-color var(--transition),color var(--transition)}.anno-hist-btn:hover:not(:disabled){border-color:var(--accent);color:var(--text-white)}.anno-hist-btn:disabled{opacity:.35;cursor:default}@media(hover:none){.anno-hist-btn{width:2.1rem;height:2.1rem}}.anno-tier2-actions{display:flex;align-items:center;gap:var(--space-sm)}.anno-lbl-narrow{display:none}.anno-palette{display:flex;align-items:center;gap:.25rem;flex-wrap:nowrap;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:none}.anno-palette::-webkit-scrollbar{display:none}.anno-palette>*{flex:0 0 auto}.anno-tool{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:border-color var(--transition),color var(--transition),background var(--transition)}.anno-tool svg{display:block}.anno-tool:hover{border-color:var(--accent);color:var(--text-white)}.anno-tool.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.anno-props{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:nowrap;height:1.9rem;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:none}.anno-props::-webkit-scrollbar{display:none}.anno-props>*{flex:0 0 auto}.anno-props [data-for]{display:none}.anno-props[data-tool=ellipse] [data-for~=ellipse],.anno-props[data-tool=rect] [data-for~=rect],.anno-props[data-tool=arrow] [data-for~=arrow],.anno-props[data-tool=text] [data-for~=text],.anno-props[data-tool=badge] [data-for~=badge],.anno-props[data-tool=crop] [data-for~=crop],.anno-props[data-tool=select][data-sel=ellipse] [data-for~=ellipse],.anno-props[data-tool=select][data-sel=rect] [data-for~=rect],.anno-props[data-tool=select][data-sel=arrow] [data-for~=arrow],.anno-props[data-tool=select][data-sel=text] [data-for~=text]{display:flex}.anno-propagate{align-items:center;gap:var(--space-xs)}.anno-props[data-sel=ellipse]:not([data-tool=crop]) #annoPropagate[data-multi],.anno-props[data-sel=rect]:not([data-tool=crop]) #annoPropagate[data-multi],.anno-props[data-sel=arrow]:not([data-tool=crop]) #annoPropagate[data-multi],.anno-props[data-sel=text]:not([data-tool=crop]) #annoPropagate[data-multi]{display:flex}.anno-props[data-sel=ellipse]:not([data-tool=crop]) #annoDelete,.anno-props[data-sel=rect]:not([data-tool=crop]) #annoDelete,.anno-props[data-sel=arrow]:not([data-tool=crop]) #annoDelete,.anno-props[data-sel=text]:not([data-tool=crop]) #annoDelete,.anno-props[data-sel=ellipse][data-badge]:not([data-tool=crop]) #annoBadgeRemove,.anno-props[data-sel=rect][data-badge]:not([data-tool=crop]) #annoBadgeRemove,.anno-props[data-sel=arrow][data-badge]:not([data-tool=crop]) #annoBadgeRemove{display:inline-flex}.anno-fill{display:inline-flex;align-items:center;gap:.15rem}.anno-fill-btn{padding:.2rem .45rem;background:var(--bg);border:1px solid var(--border);border-radius:calc(var(--radius-sm) / 2);color:var(--text-muted);font-family:var(--font-body);font-size:.7rem;cursor:pointer;transition:border-color var(--transition),color var(--transition),background var(--transition)}.anno-fill-btn:hover{border-color:var(--accent);color:var(--text-white)}.anno-fill-btn.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.anno-props[data-tool=rect][data-fill=redact] #annoSwatches,.anno-props[data-tool=rect][data-fill=redact] #annoColorInput,.anno-props[data-tool=rect][data-fill=redact] #annoWidthLabel,.anno-props[data-tool=rect][data-fill=blur] #annoSwatches,.anno-props[data-tool=rect][data-fill=blur] #annoColorInput,.anno-props[data-tool=rect][data-fill=blur] #annoWidthLabel,.anno-props[data-sel=rect][data-fill=redact] #annoSwatches,.anno-props[data-sel=rect][data-fill=redact] #annoColorInput,.anno-props[data-sel=rect][data-fill=redact] #annoWidthLabel,.anno-props[data-sel=rect][data-fill=blur] #annoSwatches,.anno-props[data-sel=rect][data-fill=blur] #annoColorInput,.anno-props[data-sel=rect][data-fill=blur] #annoWidthLabel{display:none}.anno-props[data-sel=ellipse]:not([data-tool=crop]) #annoBadgeSizeLabel,.anno-props[data-sel=rect]:not([data-tool=crop]) #annoBadgeSizeLabel,.anno-props[data-sel=arrow]:not([data-tool=crop]) #annoBadgeSizeLabel{display:flex}.anno-spaced{position:relative;margin-left:1.1rem}.anno-spaced:before{content:"";position:absolute;left:-.55rem;top:5%;bottom:5%;width:1px;background:var(--border)}.anno-danger-btn{border-color:var(--anno-error);color:var(--anno-error)}.anno-danger-btn:hover{background:var(--anno-error);color:#fff}.anno-overflow-menu{position:absolute;top:100%;right:var(--space-md);z-index:20;display:none;flex-direction:column;min-width:11rem;padding:.3rem;background:var(--bg-glass-heavy, var(--bg));backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 6px 18px #00000059}.anno-overflow-menu.visible{display:flex}.anno-overflow-menu .anno-phone-only{display:none}.anno-menu-item{padding:.4rem .6rem;background:transparent;border:none;border-radius:calc(var(--radius-sm) / 2);color:var(--text-white);font-family:var(--font-body);font-size:.8rem;text-align:left;cursor:pointer}.anno-swatches{display:flex;align-items:center;gap:.3rem}.anno-swatch{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;transition:border-color var(--transition),transform var(--transition)}.anno-swatch:hover{transform:scale(1.15)}.anno-swatch.active{border-color:var(--text-white)}#annoColorInput{width:1.6rem;height:1.6rem;padding:0;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer}.anno-width-label{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.anno-props input[type=number]{width:3.2rem;padding:.2rem .35rem;background:var(--bg);border:1px solid var(--border);border-radius:calc(var(--radius-sm) / 2);color:var(--text-white);font-family:var(--font-body);font-size:.75rem;outline:none}.anno-props input[type=number]:focus{border-color:var(--accent)}.anno-save-status{font-size:.7rem;color:var(--text-muted);min-width:4rem;text-align:right}.anno-save-status.error{color:var(--anno-error)}.anno-session-btn{padding:.2rem .6rem;background:transparent;border:1px solid var(--border);border-radius:calc(var(--radius-sm) / 2);color:var(--text-muted);font-family:var(--font-body);font-size:.75rem;cursor:pointer;transition:border-color var(--transition),color var(--transition)}.anno-session-btn:hover{border-color:var(--accent);color:var(--accent)}.anno-pill{padding:.25rem .9rem;background:var(--accent);color:#000;border:1px solid var(--accent);border-radius:100px;font-family:var(--font-body);font-weight:600;font-size:.75rem;cursor:pointer;transition:background var(--transition),border-color var(--transition),color var(--transition)}.anno-pill:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.anno-pill-hollow{padding:.25rem .85rem;background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:100px;font-family:var(--font-body);font-weight:600;font-size:.75rem;line-height:1;cursor:pointer;transition:background var(--transition),color var(--transition)}.anno-pill-hollow:hover{background:var(--accent);color:#000}.anno-enum-toggle{min-width:2.6rem;padding:.2rem .4rem;background:var(--bg);border:1px solid var(--border);border-radius:calc(var(--radius-sm) / 2);color:var(--text-white);font-family:var(--font-body);font-size:.72rem;letter-spacing:.06em;cursor:pointer}.anno-enum-toggle:hover{border-color:var(--accent)}.anno-body{display:flex;flex:1 1 auto;min-height:0}.anno-column{flex:0 0 var(--anno-col-w, 240px);display:flex;flex-direction:column;padding:var(--space-sm);gap:var(--space-sm);min-height:0;min-width:0;overflow:hidden}.anno-col-resizer{flex:0 0 5px;cursor:col-resize;background:var(--border);background-clip:content-box;padding:0 2px;touch-action:none;transition:background-color var(--transition)}.anno-col-resizer:hover,.anno-col-resizer.dragging{background-color:var(--accent)}.anno-add-btn{flex:0 0 auto;padding:var(--space-sm);background:transparent;border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-muted);font-family:var(--font-body);font-size:.8rem;cursor:pointer;transition:border-color var(--transition),color var(--transition)}.anno-add-btn:hover{border-color:var(--accent);color:var(--accent)}.anno-column-btns{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.anno-column-btns .anno-add-btn{flex:1 1 auto}.anno-image-list{flex:1 1 auto;overflow-y:auto;touch-action:pan-y;min-height:0;display:flex;flex-direction:column;gap:var(--space-xs);padding-right:var(--space-sm)}.anno-image-item{position:relative;display:flex;flex-direction:column;gap:.25rem;padding:.25rem;background:transparent;border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-body);text-align:left;transition:border-color var(--transition)}.anno-thumb{position:relative;display:block;min-height:0}.anno-thumb>img{width:100%;height:auto;border-radius:calc(var(--radius-sm) / 2);display:block}.anno-thumb-anno{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.anno-image-remove{position:absolute;top:.4rem;right:.4rem;z-index:2;width:1.5rem;height:1.5rem;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:color-mix(in srgb,var(--bg) 82%,transparent);color:var(--text-white);font-size:1rem;line-height:1;cursor:pointer;opacity:0;transition:opacity var(--transition),border-color var(--transition),color var(--transition)}.anno-image-item:hover .anno-image-remove,.anno-image-remove:focus-visible{opacity:1}.anno-image-remove:hover{border-color:var(--anno-error);color:var(--anno-error)}@media(hover:none){.anno-image-remove{display:none}}.anno-image-item:hover{border-color:var(--border)}.anno-image-item:focus-visible{outline:2px solid var(--accent-hover);outline-offset:1px}.anno-image-item.dragging{opacity:.4}.anno-image-item.drop-before{box-shadow:0 -3px 0 0 var(--accent)}.anno-image-item.drop-after{box-shadow:0 3px 0 0 var(--accent)}.anno-output-name{width:100%;padding:.2rem .35rem;background:var(--bg);border:1px solid var(--border);border-radius:calc(var(--radius-sm) / 2);color:var(--text-white);font-family:var(--font-body);font-size:.7rem;outline:none}.anno-output-name:focus{border-color:var(--accent)}.anno-output-name::placeholder{color:var(--text-muted);opacity:.6}.anno-image-item.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}.anno-image-name{font-size:.7rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.anno-image-item.active .anno-image-name{color:var(--accent)}.anno-viewer{flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;background:var(--bg);min-width:0;min-height:0;overflow:hidden;container-type:size}.anno-empty{color:var(--text-muted);font-size:.9rem;text-align:center}.anno-empty small{font-size:.75rem}.anno-stage{position:relative;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;padding:var(--space-sm)}.anno-stage[hidden]{display:none}.anno-canvas-wrap{position:relative;transform-origin:center center}.anno-zoom-reset{position:absolute;right:var(--space-sm);bottom:var(--space-sm);z-index:4;display:none;padding:.3rem .7rem;background:var(--bg-glass-heavy, var(--surface));backdrop-filter:blur(8px);border:1px solid var(--accent);border-radius:100px;color:var(--accent);font-family:var(--font-body);font-size:.75rem;font-weight:600;cursor:pointer}.anno-zoom-reset.visible{display:block}@media(hover:none){.anno-zoom-reset{padding:.5rem 1rem;font-size:.85rem}}.anno-stage img{max-width:100%;max-height:calc(100dvh - 12rem);max-height:calc(100cqh - 2 * var(--space-sm));display:block;-webkit-user-drag:none}#annoOverlay{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}#annoOverlay .anno-shape{cursor:move}#annoOverlay .anno-arrow-hit{stroke:transparent;fill:none;cursor:move}#annoOverlay .anno-text{font-family:var(--font-body);cursor:move}#annoOverlay .anno-text-hit{fill:transparent;cursor:move}#annoOverlay .anno-badge{cursor:move}#annoOverlay .anno-badge text{font-family:var(--font-body);font-weight:600;pointer-events:none}#annoOverlay .anno-badge-ring{stroke:transparent;stroke-width:2px;vector-effect:non-scaling-stroke;transition:stroke .12s ease}#annoOverlay .anno-badge:hover .anno-badge-ring{stroke:var(--text-white)}#annoOverlay .anno-text-hit.selected{fill:color-mix(in srgb,var(--accent) 8%,transparent);stroke:var(--accent);stroke-width:1px;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}.anno-text-editor{position:absolute;margin:0;padding:0;border:1px solid var(--accent);background:var(--bg);font-family:var(--font-body);line-height:1;outline:none;user-select:text;z-index:5;min-width:2ch}#annoOverlay .anno-handle{fill:var(--accent);stroke:var(--bg);stroke-width:1.5px;vector-effect:non-scaling-stroke}#annoOverlay .anno-handle-nw,#annoOverlay .anno-handle-se{cursor:nwse-resize}#annoOverlay .anno-handle-ne,#annoOverlay .anno-handle-sw{cursor:nesw-resize}.anno-enum-toggle.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.anno-crop-controls{display:inline-flex;align-items:center;gap:var(--space-xs, .4rem)}.anno-crop-controls[hidden]{display:none}#annoOverlay .anno-crop-dim{fill:#00000080}#annoOverlay .anno-crop-rect{fill:none;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke;pointer-events:none}#annoOverlay .anno-crop-move{fill:transparent;cursor:move}#annoOverlay .anno-crop-handle{fill:var(--accent);stroke:var(--bg);stroke-width:1.5px;vector-effect:non-scaling-stroke}#annoOverlay .anno-crop-handle-nw,#annoOverlay .anno-crop-handle-se{cursor:nwse-resize}#annoOverlay .anno-crop-handle-ne,#annoOverlay .anno-crop-handle-sw{cursor:nesw-resize}#annoOverlay .anno-crop-handle-n,#annoOverlay .anno-crop-handle-s{cursor:ns-resize}#annoOverlay .anno-crop-handle-e,#annoOverlay .anno-crop-handle-w{cursor:ew-resize}.anno-app.dragover{border-color:var(--accent)}.anno-menu{position:fixed;z-index:300;min-width:11rem;padding:.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 16px #0006;display:none;flex-direction:column}.anno-menu.visible{display:flex}.anno-menu-item{display:block;width:100%;text-align:left;padding:.4rem .6rem;background:transparent;border:none;border-radius:calc(var(--radius-sm) / 2);color:var(--text-white);font-family:var(--font-body);font-size:.8rem;cursor:pointer}.anno-menu-item:hover{background:color-mix(in srgb,var(--accent) 15%,transparent)}.anno-menu-item.danger:hover{background:color-mix(in srgb,var(--anno-error) 20%,transparent);color:var(--anno-error)}.anno-menu-item:disabled{color:var(--text-muted);opacity:.45;cursor:default}.anno-menu-item:disabled:hover{background:transparent}.anno-menu-sep{height:1px;margin:.25rem .3rem;background:var(--border)}.anno-image-menu{min-width:13rem}.anno-menu-head{padding:.3rem .6rem .1rem;color:var(--text-muted);font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.anno-menu-field{display:flex;flex-direction:column;gap:.2rem;padding:.2rem .6rem .4rem;color:var(--text-muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}.anno-menu-field input{width:100%;padding:.35rem .4rem;background:var(--bg);border:1px solid var(--border);border-radius:calc(var(--radius-sm) / 2);color:var(--text-white);font-family:var(--font-body);font-size:.8rem;letter-spacing:normal;text-transform:none;outline:none}.anno-menu-field input:focus{border-color:var(--accent)}.anno-modal-overlay{position:fixed;inset:0;z-index:400;background:#000000b3;display:none;align-items:center;justify-content:center}.anno-modal-overlay.visible{display:flex}.anno-modal{width:min(28rem,90vw);max-height:80vh;display:flex;flex-direction:column;gap:var(--space-sm);padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}.anno-modal h3{margin:0;font-size:1rem;color:var(--accent)}.anno-modal-toolbar{display:flex;gap:var(--space-xs)}.anno-modal-list{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:.2rem;min-height:4rem}.anno-modal-row{display:flex;align-items:center;gap:var(--space-sm);padding:.3rem;border-radius:calc(var(--radius-sm) / 2);cursor:pointer}.anno-modal-row:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}.anno-modal-row img{width:44px;height:30px;object-fit:cover;border-radius:calc(var(--radius-sm) / 2)}.anno-modal-name{font-size:.78rem;color:var(--text-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.anno-modal-opt{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0 0;font-size:.8rem;color:var(--text-muted);cursor:pointer}.anno-modal-opt[hidden]{display:none}.anno-modal-actions{display:flex;justify-content:flex-end;gap:var(--space-xs)}.anno-modal .btn-primary,.anno-modal .btn-secondary{padding:.35rem .9rem;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.8rem;cursor:pointer}.anno-modal .btn-primary{background:var(--accent);border:1px solid var(--accent);color:#000;font-weight:500}.anno-modal .btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text-muted)}.anno-modal .btn-secondary:hover{border-color:var(--accent);color:var(--accent)}.anno-toast{position:fixed;bottom:1.5rem;right:1.5rem;padding:var(--space-sm) var(--space-md);background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius-sm);color:var(--accent);font-size:.85rem;opacity:0;transform:translateY(.5rem);transition:opacity var(--transition),transform var(--transition);pointer-events:none;z-index:300}.anno-toast.visible{opacity:1;transform:translateY(0)}.anno-toast.error{border-color:var(--anno-error);color:var(--anno-error)}.anno-toast-action{display:flex;align-items:center;gap:var(--space-md);pointer-events:auto}.anno-toast-btn{padding:.25rem .7rem;background:transparent;border:1px solid var(--accent);border-radius:100px;color:var(--accent);font-family:var(--font-body);font-weight:600;font-size:.8rem;cursor:pointer;transition:background var(--transition),color var(--transition)}.anno-toast-btn:hover{background:var(--accent);color:#000}@media(hover:none){.anno-toast-btn{padding:.5rem 1.1rem}}@media(max-width:640px){.anno-toolbar{padding:var(--space-sm)}.anno-toolbar-note{display:none}.anno-tool{width:2.4rem;height:2.4rem}.anno-pill,.anno-pill-hollow{padding:.4rem .8rem}#annoExportAll{display:none}.anno-overflow-menu .anno-phone-only{display:block}.anno-lbl-wide{display:none}.anno-lbl-narrow{display:inline}.anno-body{flex-direction:column}.anno-col-resizer{display:none}.anno-column{flex:0 0 auto;width:100%;flex-direction:row;align-items:stretch;gap:var(--space-sm);padding:var(--space-sm);overflow:hidden;border-bottom:1px solid var(--border)}.anno-column-btns{flex:0 0 auto;flex-direction:column}.anno-image-list{flex:1 1 auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;padding:0 0 var(--space-xs)}.anno-image-item{flex:0 0 auto;height:5rem}.anno-image-item .anno-thumb,.anno-thumb>img{width:auto;height:100%}.anno-image-item .anno-image-name,.anno-image-item .anno-output-name{display:none}.anno-viewer{min-height:45vh}.anno-image-item.drop-before{box-shadow:-3px 0 0 0 var(--accent)}.anno-image-item.drop-after{box-shadow:3px 0 0 0 var(--accent)}}@media(max-height:500px){.anno-toolbar{padding:.3rem var(--space-sm);gap:.3rem}.anno-toolbar-note{display:none}.anno-column{padding:.3rem;gap:.3rem}.anno-stage{padding:.25rem}.anno-image-item .anno-thumb,.anno-thumb>img{width:auto;height:100%}.anno-image-item .anno-image-name,.anno-image-item .anno-output-name{display:none}.anno-viewer{flex:1 1 auto;min-height:45vh}}
