.op-img{--img-bg:#fafaf8;--img-surface:#fff;--img-accent-bg:#f0f1e9;--img-border:#e0e7e4;--img-ink:#07112d;--img-muted:#48546a;--img-link:#087c83;--img-brand:#12b7bf;background:var(--img-bg);color:var(--img-ink);font-family:var(--op-font-family,Manrope,Arial,sans-serif);padding:28px 24px 32px;letter-spacing:0;font-size:var(--op-type-body,16px);line-height:1.55}
.op-img *{box-sizing:border-box}.op-img [hidden]{display:none!important}.op-img__wrap{max-width:1120px;margin:auto}
.op-img h1{font-size:clamp(34px,4vw,44px);line-height:1.15;font-weight:700;margin:0 0 var(--op-space-heading,20px)}
.op-img h2{font-size:var(--op-type-section,28px);line-height:1.3;font-weight:700;margin:0 0 var(--op-space-heading,20px)}
.op-img p,.op-img figure{margin:0}.op-img a{color:var(--img-link)!important;text-underline-offset:4px}
.op-img__back{display:inline-flex;align-items:center;min-height:48px;margin:-12px 0 12px;text-decoration:underline!important}
.op-img__intro{max-width:800px;font-size:20px;line-height:1.55;color:var(--img-muted)}
.op-img__tool{margin-top:var(--op-space-section,32px);padding:var(--op-space-card,24px);border:1px solid var(--img-border);border-radius:20px;background:var(--img-surface)}
.op-img__drop{display:flex;flex-direction:column;align-items:center;gap:12px;padding:var(--op-space-card,24px);border:1px dashed var(--img-border);border-radius:16px;text-align:center;background:var(--img-bg);color:var(--img-muted)}
.op-img__drop svg{color:var(--img-link)}.op-img__drop.is-dragging{border-color:var(--img-link);background:var(--img-accent-bg)}
.op-img .op-img__note{font-size:var(--op-type-note,14px);line-height:1.45;color:var(--img-muted)}
.op-img button,.op-img select{font:inherit;letter-spacing:0}.op-img .op-img__button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:1px solid transparent;border-radius:999px;background:var(--img-brand);color:var(--img-ink)!important;font-size:16px;font-weight:600;line-height:1.4;text-align:center;text-decoration:none!important;cursor:pointer;max-width:100%}
.op-img .op-img__button:hover{background:#0fa7af}.op-img button:disabled{background:#e0e7e4;color:#48546a!important;cursor:default}
.op-img__secondary{min-height:48px;padding:12px;border:0;background:transparent;color:var(--img-link);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.op-img :is(a,button,select,summary):focus-visible{outline:2px solid var(--img-link);outline-offset:4px}
.op-img__work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--op-space-card,24px);margin-top:var(--op-space-card,24px)}
.op-img__figure img{display:block;width:100%;height:220px;object-fit:contain;border:1px solid var(--img-border);border-radius:12px;background:var(--img-bg)}
.op-img__figure figcaption{display:flex;flex-direction:column;gap:4px;margin-top:12px;overflow-wrap:anywhere;font-size:14px;color:var(--img-muted)}.op-img__figure strong{font-weight:600;color:var(--img-ink)}
.op-img__settings{display:flex;flex-direction:column;gap:12px;align-items:flex-start;min-width:0}.op-img__settings label{font-weight:600}.op-img select{min-height:48px;width:100%;padding:12px;border:1px solid var(--img-border);border-radius:8px;background:var(--img-surface);color:var(--img-ink)}
.op-img__actions{display:flex;flex-wrap:wrap;gap:12px}.op-img__status{margin-top:20px!important;color:var(--img-muted)}.op-img__status.is-error{color:#a12626}
.op-img__result{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;border-top:1px solid var(--img-border);padding-top:24px;margin-top:24px}.op-img__result>img{width:100%;height:240px;object-fit:contain;background:#fff;border:1px solid var(--img-border);border-radius:12px}.op-img__result>div{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}.op-img__result h2{margin:0;font-size:var(--op-type-card,18px);font-weight:600}
.op-img__privacy{margin-top:24px!important;border-top:1px solid var(--img-border);padding-top:20px;font-size:14px;line-height:1.45;color:var(--img-muted)}
.op-img__faq,.op-img__help{margin-top:var(--op-space-section,32px)}.op-img__faq details{border-top:1px solid var(--img-border);padding:12px 0}.op-img__faq details:last-child{border-bottom:1px solid var(--img-border)}.op-img__faq summary{min-height:48px;padding:12px 0;font-size:var(--op-type-card,18px);font-weight:600;line-height:1.4;cursor:pointer}.op-img__faq details p{color:var(--img-muted);margin:12px 0}
.op-img__help{padding:var(--op-space-card,24px);background:var(--img-accent-bg);border-radius:20px}.op-img__help h2{margin-bottom:12px}.op-img__help p{color:var(--img-muted)}.op-img__help a{display:inline-flex;align-items:center;min-height:48px;margin-top:12px;text-decoration:underline!important}
@media(max-width:699px){.op-img{padding:20px 20px 24px}.op-img__intro{font-size:19px}.op-img__tool,.op-img__drop,.op-img__help{padding:var(--op-space-card,20px)}.op-img__work,.op-img__result{grid-template-columns:minmax(0,1fr);gap:20px}.op-img__button{width:100%;padding:12px 16px}.op-img__actions{width:100%}.op-img h2{font-size:var(--op-type-section,24px)}.op-img__result h2,.op-img__faq summary{font-size:var(--op-type-card,17px)}}

.op-img__formats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--op-space-card,24px)}.op-img__formats>div,.op-img__quality-group{display:flex;flex-direction:column;gap:12px;min-width:0;width:100%}.op-img__formats label{font-weight:600}.op-img .op-img__format-note{margin:12px 0 20px}.op-img #op-img-support-note:not([hidden]){margin-bottom:20px}.op-img__formats select{padding-right:24px}.op-img__figure img,.op-img__result>img{background-color:#fff;background-image:linear-gradient(45deg,#f0f1e9 25%,transparent 25%),linear-gradient(-45deg,#f0f1e9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f1e9 75%),linear-gradient(-45deg,transparent 75%,#f0f1e9 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}@media(max-width:699px){.op-img__formats{gap:12px}.op-img__formats select{padding-left:12px;padding-right:16px}}

.op-img .op-img__step{font-size:var(--op-type-card,18px);line-height:1.4;margin:0 0 12px;font-weight:600}.op-img__work{grid-template-columns:minmax(0,1fr)}.op-img__tool.has-source .op-img__work{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.op-img__tool.has-source .op-img__drop{align-items:flex-start;padding:0;border:0;background:transparent}.op-img__tool.has-source .op-img__drop svg,.op-img__tool.has-source .op-img__drop-hint{display:none}.op-img__settings{width:100%;gap:12px}.op-img__settings .op-img__step{margin:0}.op-img fieldset{padding:0;margin:0;border:0;min-width:0;width:100%}.op-img fieldset:disabled{color:var(--img-muted)}.op-img__option{border-bottom:1px solid var(--img-border);padding:4px 0}.op-img__option:first-child{border-top:1px solid var(--img-border)}.op-img .op-img__check{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;font-weight:600}.op-img fieldset:disabled .op-img__check{cursor:default}.op-img input[type=checkbox]{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:var(--img-link);cursor:inherit}.op-img__check-small{font-size:14px}.op-img__option-fields{display:flex;flex-direction:column;gap:12px;padding:0 0 16px}.op-img input:not([type=file]):not([type=checkbox]){font:inherit;min-height:48px;width:100%;min-width:0;padding:12px;border:1px solid var(--img-border);border-radius:8px;background:var(--img-surface);color:var(--img-ink)}.op-img input[readonly]{background:var(--img-bg)!important}.op-img input:focus-visible{outline:2px solid var(--img-link);outline-offset:3px}.op-img__formats{gap:12px}.op-img__formats>div{gap:8px}.op-img__weight-row{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:12px}.op-img__status:empty{display:none}.op-img__actions{margin-top:8px}.op-img__figure img{height:280px}.op-img__figure{align-self:start}.op-img #op-img-support-note:not([hidden]){margin:0}@media(max-width:699px){.op-img__tool.has-source .op-img__work{grid-template-columns:minmax(0,1fr)}.op-img .op-img__step{font-size:17px}.op-img__formats label{font-size:14px}.op-img__figure img{height:220px}.op-img .op-img__button{padding:12px 16px}}
.op-img__editor{width:100%;min-width:0}.op-img__editor fieldset{display:flex;flex-direction:column;gap:12px}
.op-img__crop-stage{position:relative;width:100%;margin:0 auto;max-height:none;overflow:hidden;touch-action:none;user-select:none;background:repeating-conic-gradient(#fff 0% 25%,#e0e7e4 0% 50%) 0 0/16px 16px}
.op-img__crop-stage canvas{display:block;width:100%;height:100%}.op-img__crop-stage.is-busy{pointer-events:none;opacity:.7}
.op-img__crop-frame{position:absolute;border:2px solid #fff;outline:1px solid var(--img-link);box-shadow:0 0 0 2000px #07112d66;cursor:move;min-width:1px;min-height:1px}
.op-img__crop-frame:focus-visible{outline:3px solid var(--img-link);outline-offset:-5px}
.op-img .op-img__crop-handle{position:absolute;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:nwse-resize;touch-action:none}
.op-img .op-img__crop-handle:disabled{background:transparent}
.op-img__crop-handle:after{content:"";display:block;position:absolute;width:12px;height:12px;background:var(--img-link);border:2px solid #fff;box-shadow:0 0 0 1px var(--img-link)}
.op-img__crop-handle[data-corner=nw]{left:0;top:0}.op-img__crop-handle[data-corner=ne]{right:0;top:0;cursor:nesw-resize}.op-img__crop-handle[data-corner=sw]{left:0;bottom:0;cursor:nesw-resize}.op-img__crop-handle[data-corner=se]{right:0;bottom:0}
.op-img__crop-handle[data-corner=nw]:after{left:0;top:0}.op-img__crop-handle[data-corner=ne]:after{right:0;top:0}.op-img__crop-handle[data-corner=sw]:after{left:0;bottom:0}.op-img__crop-handle[data-corner=se]:after{right:0;bottom:0}
.op-img__edit-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.op-img__edit-buttons button{min-height:48px;padding:10px 8px;border:1px solid var(--img-border);border-radius:8px;background:var(--img-surface);color:var(--img-link);font-size:14px;line-height:1.35;cursor:pointer}
.op-img__edit-buttons button:hover{background:var(--img-accent-bg)}.op-img__crop-numbers summary{min-height:48px;padding:12px 0;color:var(--img-link);font-size:14px;cursor:pointer}
.op-img__crop-numbers label{font-size:14px}.op-img__figure{min-width:0}.op-img__figure figcaption{margin-bottom:12px}
@media(max-width:379px){.op-img__edit-buttons{grid-template-columns:minmax(0,1fr)}.op-img__crop-numbers .op-img__formats{grid-template-columns:minmax(0,1fr)}}
.op-img__modes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.op-img__modes button{min-height:48px;padding:10px 16px;border:1px solid var(--img-border);border-radius:12px;background:var(--img-surface);color:var(--img-ink);cursor:pointer}.op-img__modes button[aria-pressed=true]{background:var(--img-accent-bg);border-color:var(--img-link);font-weight:600}.op-img__batch-list{list-style:none;padding:0;margin:12px 0 24px}.op-img__batch-list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--img-border);min-width:0}.op-img__batch-list li>div{display:flex;flex:1;flex-direction:column;gap:6px;min-width:0;overflow-wrap:anywhere}.op-img__batch-list strong{font-size:14px;font-weight:600}.op-img__batch-list span{font-size:14px;color:var(--img-muted)}.op-img__batch-list .is-error{color:#a12626}.op-img__batch-list a{white-space:nowrap}.op-img__batch-format{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;max-width:480px}.op-img__batch-format label{font-weight:600}.op-img #op-img-batch-options>.op-img__note{margin-bottom:16px}.op-img__batch-note{margin:16px 0!important}@media(max-width:479px){.op-img__modes{flex-direction:column}.op-img__batch-list li{flex-wrap:wrap;gap:0 12px}.op-img__batch-list li>div{flex:1 0 100%}.op-img #op-img-batch-size-fields .op-img__formats{grid-template-columns:minmax(0,1fr)}}

/* Approved navigation, following the existing PDF menu. */
.op-img .op-img__help a{color:var(--img-ink)!important}
.op-img__operation-nav{margin:24px 0 20px;border:1px solid var(--img-border);border-radius:12px;background:var(--img-surface);color:var(--img-ink)}
.op-img__operation-nav summary{cursor:pointer;min-height:48px;padding:14px 18px;line-height:1.5;font-size:16px;font-weight:600;overflow-wrap:anywhere}
.op-img__operation-nav summary span{font-weight:400}.op-img__operation-nav nav{padding:0 12px 12px}.op-img__operation-nav ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.op-img__operation-nav a{display:block;min-height:48px;padding:12px;border-radius:8px;color:var(--img-link)!important;text-decoration:none;line-height:1.5}
.op-img__operation-nav a:hover,.op-img__operation-nav a[aria-current=page]{background:var(--img-accent-bg);font-weight:600}
.op-img__operation-nav a:focus-visible,.op-img__operation-nav summary:focus-visible{outline:3px solid var(--img-link);outline-offset:2px}
.op-img__instructions{margin:32px 0}.op-img__instructions h2{font-size:26px;line-height:1.3;margin:0 0 18px}.op-img__instructions li{margin:12px 0;line-height:1.6}.op-img__instructions p{line-height:1.6}
.op-img__related{display:flex;gap:12px 24px;flex-wrap:wrap;margin:24px 0;line-height:1.6}.op-img__related a{color:var(--img-link)!important;min-height:44px;display:inline-flex;align-items:center}
.op-img__navigation-status:empty{display:none}.op-img__navigation-status{color:#a12626;line-height:1.5}
@media(max-width:600px){.op-img__operation-nav ul{grid-template-columns:minmax(0,1fr)}.op-img__instructions h2{font-size:23px}}