.sp-photo{--sp-ink:#19392f;--sp-green:#345548;--sp-mist:#edf0e8;--sp-yellow:#f6d67b;color:var(--sp-ink);font-family:inherit}.sp-photo *{box-sizing:border-box}.sp-photo button,.sp-photo input,.sp-photo select,.sp-photo textarea{font:inherit;min-height:46px;border:1px solid #ccd5ca;border-radius:9px;padding:10px 13px;background:#fff;color:var(--sp-ink)}.sp-photo button{cursor:pointer;font-weight:650}.sp-photo button:disabled{opacity:.5;cursor:default}.sp-photo button:focus-visible,.sp-photo input:focus-visible{outline:3px solid #a58622;outline-offset:2px}.sp-photo .sp-primary{background:var(--sp-green);border-color:var(--sp-green);color:white}.sp-photo .sp-file{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sp-photo .sp-file input{max-width:100%}.sp-photo .sp-header{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:22px}.sp-photo h2{font-size:25px;letter-spacing:-.6px;margin:6px 0 10px}.sp-photo h3{font-size:16px;margin:0 0 12px}.sp-photo p{line-height:1.55;margin:8px 0}.sp-photo .sp-eyebrow{font-size:11px;font-weight:750;letter-spacing:1.6px;text-transform:uppercase;color:#58715f}.sp-photo .sp-muted{font-size:13px;color:#627465}.sp-photo .sp-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px}.sp-photo .sp-preview{background:#e8eae2;padding:12px;border-radius:16px;min-width:0;align-self:start}.sp-photo .sp-canvas{position:relative;line-height:0;user-select:none;touch-action:pan-x pan-y pinch-zoom;overflow:hidden;border-radius:8px}.sp-photo .sp-canvas>img{display:block;width:100%;height:auto}.sp-photo .sp-marker{position:absolute;transform:translate(-50%,-50%);padding:0;min-height:44px;min-width:44px;border:0;background:transparent;color:#d90820;font:bold 25px/1 Arial,sans-serif;text-shadow:-1.5px -1.5px #fff,1.5px -1.5px #fff,-1.5px 1.5px #fff,1.5px 1.5px #fff,0 0 5px #fff;touch-action:none;cursor:grab}.sp-photo .sp-marker[aria-pressed=true]{outline:2px solid #fff;border-radius:50%;background:#ffffff70}.sp-photo .sp-region{position:absolute;border:2px dashed #f4d071;background:#e9c74a14;pointer-events:none}.sp-photo .sp-controls{display:grid;gap:15px}.sp-photo label{display:grid;gap:6px;font-size:13px;font-weight:600}.sp-photo .sp-card{padding:17px;background:#fff;border:1px solid #dce2d6;border-radius:12px}.sp-photo .sp-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.sp-photo .sp-row label{flex:1;min-width:74px}.sp-photo .sp-row input{width:100%}.sp-photo .sp-check{display:flex;gap:10px;align-items:start}.sp-photo .sp-check input{min-height:22px;width:22px;flex:none;margin:0}.sp-photo .sp-message{padding:12px 15px;background:#fff3c9;border-radius:10px;font-size:14px;margin:15px 0}.sp-photo .sp-footer{display:flex;gap:12px;justify-content:space-between;align-items:center;border-top:1px solid #dce2d6;padding-top:18px;margin-top:22px}.sp-photo .sp-empty{padding:35px 24px;text-align:center;border:1px dashed #b6c4b2;border-radius:16px;background:var(--sp-mist)}.sp-photo .sp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px}.sp-photo .sp-gallery figure{margin:0;background:#fff;border:1px solid #dce2d6;border-radius:12px;overflow:hidden}.sp-photo .sp-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}.sp-photo figcaption{padding:10px;font-size:13px}.sp-photo .sp-source{background:var(--sp-mist);border-radius:12px;padding:18px}.sp-photo .sp-customer-cover{position:relative;border-radius:16px;overflow:hidden;background:var(--sp-mist)}.sp-photo .sp-customer-cover img{width:100%;height:auto;max-height:340px;object-fit:contain;display:block}.sp-photo .sp-customer-cover.sp-expanded img{max-height:none}.sp-photo .sp-experiment{margin-top:18px;border-top:1px solid #dce2d6;padding-top:14px}.sp-photo .sp-experiment summary{cursor:pointer;font-size:13px;min-height:44px;display:list-item;align-content:center}.sp-photo .sp-experiment summary:focus-visible{outline:3px solid #a58622;outline-offset:2px}.sp-photo .sp-experiment[open] summary{margin-bottom:10px}.sp-photo .sp-caption{padding:13px 18px}.sp-photo .sp-help{font-size:12px;color:#627465}.sp-photo.sp-dialog{position:fixed;inset:0;z-index:100;background:#f7f8f4;overflow:auto;padding:28px max(18px,calc((100vw - 1250px)/2))}.sp-photo .sp-marker-list{max-height:130px;overflow:auto;font-size:12px}.sp-photo .sp-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.sp-photo input[type=range]{padding:0;width:100%;min-height:26px}.sp-photo .sp-count{background:var(--sp-yellow);padding:5px 9px;border-radius:6px;font-size:12px;font-weight:700}@media(max-width:820px){.sp-photo .sp-layout{grid-template-columns:1fr}.sp-photo .sp-controls{grid-template-columns:1fr 1fr}.sp-photo .sp-controls>.sp-card:first-child,.sp-photo .sp-controls>.sp-card:last-child{grid-column:1/-1}.sp-photo.sp-dialog{padding:18px 14px}.sp-photo h2{font-size:23px}.sp-photo .sp-footer{align-items:stretch;flex-direction:column}.sp-photo .sp-footer button{width:100%}}@media(max-width:440px){.sp-photo .sp-controls{grid-template-columns:1fr}.sp-photo .sp-marker{font-size:21px}.sp-photo .sp-header{gap:8px}.sp-photo input{font-size:16px}}

.sp-photo .sp-numbering-toggle{border-left:4px solid var(--sp-green)}.sp-photo .sp-numbering-toggle button[aria-pressed=false]{background:var(--sp-yellow);border-color:#c9a942}.sp-photo .sp-copy-confirm{margin:18px 0;border:2px solid #b6c4b2}.sp-photo .sp-copy-confirm button{margin:10px 10px 0 0}.sp-photo .sp-copy-confirm .sp-check{margin-top:14px}.sp-photo .sp-gallery .sp-unnumbered figcaption{background:#fff3c9;color:#6b5221;font-weight:650}
.sp-photo .sp-ai-controls{margin:18px 0;padding:17px 0;border-top:1px solid #dce2d6;border-bottom:1px solid #dce2d6}.sp-photo .sp-ai-controls>button{width:100%;margin:5px 0}.sp-photo .sp-ai-row{padding:12px;margin:12px 0;background:var(--sp-mist);border-radius:10px}.sp-photo .sp-ai-row h4{margin:0 0 9px;font-size:14px}.sp-photo .sp-ai-row button{width:100%}.sp-photo .sp-ai-unavailable{font-size:13px;padding:12px;background:#fff3c9;border-radius:9px}

/* Keep the original image beside long control/AI lists, in page and modal. */
.sp-photo .sp-layout{align-items:start}
.sp-photo .sp-preview{position:sticky;top:16px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overscroll-behavior:contain;z-index:2}
.sp-photo .sp-ai-rows{max-height:280px;max-height:min(35dvh,300px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 4px 0 0}
.sp-photo .sp-ai-rows:focus-visible{outline:3px solid #a58622;outline-offset:2px}
.sp-photo .sp-ai-rows .sp-ai-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px;margin:6px 0}
.sp-photo .sp-ai-rows .sp-ai-row h4{font-size:12px;line-height:1.4;margin:0}
.sp-photo .sp-ai-rows .sp-ai-row button{width:auto;min-height:44px;padding:8px 10px;font-size:12px;white-space:nowrap}
@media(max-width:820px){.sp-photo .sp-preview{top:8px;max-height:40vh;max-height:40dvh;box-shadow:0 4px 12px #19392f12}.sp-photo .sp-preview .sp-muted{font-size:11px;line-height:1.35}.sp-photo .sp-ai-rows{max-height:220px;max-height:min(30dvh,220px)}}

/* The portal can be narrow inside a wide viewport: size to the real host too. */
.sp-photo{container-type:inline-size}
.sp-photo .sp-preview{--sp-image-fit-height:calc(100vh - 150px);--sp-image-fit-height:calc(100dvh - 150px)}
@media(max-width:820px){.sp-photo .sp-preview{--sp-image-fit-height:max(80px,calc(40vh - 100px));--sp-image-fit-height:max(80px,calc(40dvh - 100px))}}
@container (max-width:820px){
 .sp-photo .sp-layout{grid-template-columns:1fr}
 .sp-photo .sp-controls{grid-template-columns:1fr 1fr}
 .sp-photo .sp-controls>.sp-card:first-child,.sp-photo .sp-controls>.sp-card:last-child{grid-column:1/-1}
 .sp-photo h2{font-size:23px}
 .sp-photo .sp-footer{align-items:stretch;flex-direction:column}
 .sp-photo .sp-footer button{width:100%}
 .sp-photo .sp-preview{top:8px;max-height:40vh;max-height:40dvh;--sp-image-fit-height:max(80px,calc(40vh - 100px));--sp-image-fit-height:max(80px,calc(40dvh - 100px));box-shadow:0 4px 12px #19392f12}
 .sp-photo .sp-preview .sp-muted{font-size:11px;line-height:1.35}
 .sp-photo .sp-ai-rows{max-height:220px;max-height:min(30dvh,220px)}
}
@container (max-width:440px){
 .sp-photo .sp-controls{grid-template-columns:1fr}
 .sp-photo .sp-marker{font-size:21px}
 .sp-photo .sp-header{gap:8px}
 .sp-photo input{font-size:16px}
}

/* Manual image workspace. Raster and fixed-size marker overlay share one view. */
.sp-photo .sp-preview{overflow:hidden;max-height:calc(100dvh - 32px)}
.sp-photo .sp-tap-tools{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}
.sp-photo .sp-tap-tools button{min-width:44px;min-height:44px;padding:8px 12px}
.sp-photo .sp-tap-zoom{min-width:46px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px}
.sp-photo .sp-tap-viewport{position:relative;width:100%;height:clamp(180px,calc(100dvh - 260px),600px);overflow:hidden;touch-action:none;user-select:none;background:#d9ded6;border:1px solid #bdc8ba;border-radius:10px;isolation:isolate}
.sp-photo .sp-tap-viewport[data-mode=number]{cursor:crosshair}
.sp-photo .sp-tap-viewport[data-mode=pan]{cursor:grab}
.sp-photo .sp-tap-viewport:active{cursor:grabbing}
.sp-photo .sp-tap-raster{position:absolute;left:0;top:0;max-width:none;object-fit:fill;transform-origin:0 0;pointer-events:none;user-select:none}
.sp-photo .sp-tap-markers{position:absolute;inset:0;pointer-events:none}
.sp-photo .sp-tap-markers .sp-marker{pointer-events:auto;min-width:44px;min-height:44px;font-size:24px;line-height:1}
.sp-photo .sp-tap-markers .sp-marker:disabled{opacity:1;cursor:default}
.sp-photo .sp-tap-modes{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.sp-photo .sp-tap-modes button{flex:1 1 115px;min-height:46px}
.sp-photo .sp-tap-controls label{margin:12px 0}
.sp-photo .sp-tap-selected{margin-top:15px;padding-top:15px;border-top:1px solid #dce2d6}
.sp-photo .sp-tap-selected button{margin:6px 8px 0 0}
@media(max-width:820px){.sp-photo .sp-preview{max-height:calc(100dvh - 16px)}.sp-photo .sp-tap-viewport{height:clamp(180px,36dvh,350px)}}
@container (max-width:820px){.sp-photo .sp-preview{max-height:calc(100dvh - 16px)}.sp-photo .sp-tap-viewport{height:clamp(180px,36dvh,350px)}}