.tsp-phg, .phs-th { --phg-k45: hwb(0 0% 100% / .45); --phg-k25: hwb(0 0% 100% / .25); --phg-k55: hwb(0 0% 100% / .55); --phg-k50: hwb(0 0% 100% / .5); --phg-del: hwb(221 7% 85% / .55); --phg-red: hwb(347 11% 12%); --phg-w: hwb(0 100% 0%); }
.tsp-phg { --phg-r: 0px; --phg-ph: #e5e7eb; }   
.tsp-phg.phg-on.phg-fix { grid-template-columns: repeat(var(--phg-cols, 4), var(--phg-tile)); justify-content: start; }   
.tsp-phg.phg-on { display: grid !important; grid-template-columns: repeat(var(--phg-cols, 4), minmax(0, 1fr)); gap: 2px !important; padding: 0 !important; overflow: visible !important; flex-wrap: initial; align-items: stretch; }
.tsp-phg.phg-on[data-jcv-n]::before { display: none !important; content: none !important; }
.card .photo-container.tsp-phg.phg-card { --phg-tile: 64px; --phg-rows: 2; }   
.card .photo-container.tsp-phg.phg-card.phg-on { margin-top: 10px !important; }
.tsp-phg .phg-t, .tsp-phg > .photo-item-wrapper { position: relative; display: block !important; aspect-ratio: 1 / 1; min-width: 0; margin: 0 !important; overflow: hidden; background: var(--phg-ph); flex-shrink: initial;
  border-radius: var(--phg-tl, 0) var(--phg-tr, 0) var(--phg-br, 0) var(--phg-bl, 0); -webkit-tap-highlight-color: transparent; }
.tsp-phg .c-tl { --phg-tl: var(--phg-r); } .tsp-phg .c-tr { --phg-tr: var(--phg-r); } .tsp-phg .c-bl { --phg-bl: var(--phg-r); } .tsp-phg .c-br { --phg-br: var(--phg-r); }
.tsp-phg .phg-hid { display: none !important; }
html body .tsp-phg .phg-t > img, html body .tsp-phg > .photo-item-wrapper > img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; background: transparent; cursor: pointer; transition: filter .15s ease; }
html body .tsp-phg .phg-t > img:hover, html body .tsp-phg > .photo-item-wrapper > img:hover { filter: brightness(.9); }
html body .tsp-phg .phg-t > img, html body .tsp-phg > .photo-item-wrapper > img { outline: 2px solid #60a5fa; outline-offset: -2px; }
html body .tsp-phg img[id^="temp-photo-"]:not([data-fid]), html body .tsp-phg img.jcv-up, html body .tsp-phg img.qe-ph-up { outline: none; opacity: 1; }
html body .up-ring { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.38); pointer-events: none; }
html body .up-ring svg { position: absolute; width: 38px; height: 38px; }
html body .up-ring svg circle { fill: none; stroke-width: 3; }
html body .up-ring svg .bg { stroke: rgba(255,255,255,.35); }
html body .up-ring svg .fg { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .35s ease; }
html body .up-ring b { position: relative; font: 800 10px/1 Inter, sans-serif; color: #fff; letter-spacing: -.2px; }
.tsp-phg .ph-bad, .mh-phs img.ph-bad { background: var(--phg-ph) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M21 5v6.59l-3-3.01-4 4.01-4-4-4 4-3-3.01V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l3 2.99 4-4 4 4 4-3.99z'/%3E%3C/svg%3E") center / 40% no-repeat !important; }
html body .tsp-phg img.ph-bad, html body .mh-phs img.ph-bad { opacity: 0; }
html body .mh-phs img.ph-bad { opacity: 1; object-position: -999px 0; }
html body .tsp-phg .phg-t.is-vid::after, html body .tsp-phg .photo-item-wrapper.is-vid::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none; z-index: 1;
  background: var(--phg-k45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 55% 50% / 20px no-repeat; box-shadow: 0 1px 4px var(--phg-k25); }
.tsp-phg .is-vid[data-dur]:not([data-more])::before { content: attr(data-dur); position: absolute; right: 4px; bottom: 4px; z-index: 1; padding: 1px 5px; border-radius: 4px; background: var(--phg-k55); color: var(--phg-w); font: 600 10.5px/1.4 Inter, -apple-system, 'Segoe UI', Roboto, sans-serif; font-variant-numeric: tabular-nums; pointer-events: none; }
.tsp-phg [data-more]::before { content: attr(data-more); position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: var(--phg-k50); color: var(--phg-w); font: 600 18px/1 Inter, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: .01em; pointer-events: none; }
html body .tsp-phg .phg-t[data-more]::after, html body .tsp-phg .photo-item-wrapper[data-more]::after { display: none; }
html body .tsp-phg .delete-photo-btn, html body .tsp-phg .je-photo-del { position: absolute !important; top: 4px !important; right: 4px !important; left: auto !important; z-index: 3 !important; width: 22px !important; height: 22px !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center; justify-content: center; border: 0 !important; border-radius: 50% !important; background: var(--phg-del) !important; color: var(--phg-w) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer; }
html body .tsp-phg .delete-photo-btn:hover, html body .tsp-phg .je-photo-del:hover { background: var(--phg-red) !important; }
html body .tsp-phg [data-more] > .delete-photo-btn, html body .tsp-phg [data-more] > .je-photo-del { display: none !important; }
@media (hover: hover) and (pointer: fine) { html body .tsp-phg .delete-photo-btn, html body .tsp-phg .je-photo-del { opacity: 0; transition: opacity .12s; } html body .tsp-phg .phg-t:hover > .delete-photo-btn, html body .tsp-phg > .photo-item-wrapper:hover > .delete-photo-btn, html body .tsp-phg .phg-t:hover > .je-photo-del, html body .tsp-phg .delete-photo-btn:focus-visible, html body .tsp-phg .je-photo-del:focus-visible { opacity: 1; } }
html body .jcv .jcv-ph.tsp-phg { --phg-tile: 64px; --phg-rows: 2; margin: 8px 0 0 !important; }
html body .jcv .jcv-ph.tsp-phg .photo-thumbnail { width: 100% !important; height: 100% !important; flex: none; }
#qe-photo-container.tsp-phg { --phg-tile: 72px; }
html body #job-quick-edit-modal #qe-photo-container.phg-on, html body #est-editor-modal #qe-photo-container.phg-on, html body #qe-photo-container.phg-on { border: 0 !important; padding: 0 !important; background: transparent !important; min-height: 0 !important; align-self: start; }
html body #master-history-modal .mh-dphotos.tsp-phg { --phg-tile: 64px; --phg-maxc: 5; --phg-r: 0px; padding-top: 6px !important; }
html body #master-history-modal .mh-dphotos.tsp-phg.phg-on { grid-template-columns: repeat(var(--phg-cols, 4), var(--phg-tile)); }
@media (max-width: 640px) { html body #master-history-modal .mh-dphotos.tsp-phg { --phg-tile: 58px; } }
html body #master-history-modal .mh-dphotos.tsp-phg > img.mh-photo-thumb { width: var(--phg-tile) !important; height: var(--phg-tile) !important; object-fit: cover; margin: 0 !important; border: 0 !important; box-shadow: none !important; transform: none !important; background: var(--phg-ph);
  border-radius: var(--phg-tl, 0) var(--phg-tr, 0) var(--phg-br, 0) var(--phg-bl, 0) !important; transition: filter .15s ease; }
html body #master-history-modal .mh-dphotos.tsp-phg > img.mh-photo-thumb:hover { filter: brightness(.9) !important; }
html body #master-history-modal .mh-dphotos.tsp-phg > img.mh-photo-thumb.ph-bad { opacity: 1; object-position: -999px 0; background: var(--phg-ph) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M21 5v6.59l-3-3.01-4 4.01-4-4-4 4-3-3.01V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l3 2.99 4-4 4 4 4-3.99z'/%3E%3C/svg%3E") center / 40% no-repeat !important; }
.mh-dimgs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.mh-phs { display: inline-flex; gap: 2px; vertical-align: middle; --phg-ph: #e5e7eb; }
html body #master-history-modal .mh-phs > img.mh-photo-thumb { width: 26px; height: 26px; margin: 0 !important; border: 0 !important; border-radius: 0; box-shadow: none !important; transform: none !important; background: var(--phg-ph); object-fit: cover; }
html body #master-history-modal .mh-phs > img.mh-photo-thumb:hover { filter: brightness(.9) !important; }
html body .phs-th { position: relative; }
html body .phs-th.is-vid::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none;
  background: var(--phg-k45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 55% 50% / 13px no-repeat; }
html[data-theme="dark"] .tsp-phg, html[data-theme="dark"] .mh-phs { --phg-ph: #2a2a2d !important; }
html[data-theme="dark"] .phs-th { background: #2a2a2d !important; }
@media (prefers-reduced-motion: reduce) { html body .tsp-phg img, html body .mh-phs img { transition: none !important; } }