.photo-crop-dialog { width: min(94vw, 96rem); max-width: none; height: min(94dvh, 66rem); max-height: 96dvh; padding: 0; overflow: hidden; }
.photo-crop-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.photo-crop-dialog * { box-sizing: border-box; }
.photo-crop-dialog #cropFocusToggle { position: absolute; top: max(.5rem, env(safe-area-inset-top)); right: max(.5rem, env(safe-area-inset-right)); z-index: 5; display: grid; place-items: center; width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; border: 1px solid #ae904c; border-radius: .45rem; background: #31271aeb; color: #ffe19a; }
.photo-crop-dialog .crop-header { padding-right: 4.25rem; }
.photo-crop-dialog.is-focus-mode { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; grid-template-rows: minmax(0,1fr); }
.photo-crop-dialog.is-focus-mode .crop-header, .photo-crop-dialog.is-focus-mode .crop-footer { display: none; }
.photo-crop-dialog.is-focus-mode .crop-sidebar { display: contents; }
.photo-crop-dialog.is-focus-mode .crop-sidebar > :not(.crop-presets) { display: none; }
.photo-crop-dialog.is-focus-mode .crop-presets { position: absolute; z-index: 5; top: max(.5rem, env(safe-area-inset-top)); left: max(.4rem, env(safe-area-inset-left)); right: calc(max(.5rem, env(safe-area-inset-right)) + 48px + .3rem); height: 48px; max-width: none; gap: .2rem; justify-content: flex-end; }
.photo-crop-dialog.is-focus-mode .crop-presets button { min-width: 44px; min-height: 48px; padding: .25rem .15rem; font-size: .68rem; white-space: nowrap; }
.photo-crop-dialog.is-focus-mode .crop-presets label { flex-direction: column; flex: none; width: 44px; gap: 0; font-size: .68rem; line-height: 1.2; color: #ffe19a; }
.photo-crop-dialog.is-focus-mode .crop-layout { grid-row: 1; }
.photo-crop-dialog.is-focus-mode .crop-workspace { padding: calc(max(.5rem, env(safe-area-inset-top)) + 56px) 0 0; }
.photo-crop-dialog.is-focus-mode .crop-stage { border-radius: 0; }
.crop-header { padding: .85rem 1.15rem .5rem; }
.crop-header h2 { font-size: 1.45rem; }
.crop-header p { margin: .25rem 0; color: #c4b897; }
.crop-layout { display: flex; flex-direction: column; min-height: 0; }
.crop-workspace { min-width: 0; min-height: 0; flex: 1; display: flex; flex-direction: column; padding: 0 .8rem; }
.crop-stage { min-height: 0; flex: 1; display: grid; place-items: center; overflow: hidden; background: #070609; border-radius: .5rem; }
.crop-plane { position: relative; margin: 0; flex: none; touch-action: pan-x pan-y; }
.crop-plane[hidden] { display: none; }
.crop-plane > img { width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
.crop-shade { position: absolute; left: 0; right: 0; background: #070609a6; pointer-events: none; }
.crop-shade--top { top: 0; height: var(--crop-top); }
.crop-shade--bottom { bottom: 0; height: calc(100% - var(--crop-bottom)); }
.crop-shade--left { left: 0; right: auto; width: var(--crop-left); top: var(--crop-top); bottom: calc(100% - var(--crop-bottom)); }
.crop-shade--right { right: 0; left: auto; width: calc(100% - var(--crop-right)); top: var(--crop-top); bottom: calc(100% - var(--crop-bottom)); }
.crop-middle { position: absolute; left: var(--crop-left); right: calc(100% - var(--crop-right)); top: var(--crop-top); bottom: calc(100% - var(--crop-bottom)); background: #ffffff07; cursor: move; touch-action: none; }
.crop-line { position: absolute; z-index: 1; touch-action: none; cursor: grab; opacity: .9; box-shadow: 0 0 0 1px #000b; background: #f6d377; }
.crop-line::before { content: ""; position: absolute; }
.crop-line--top::before, .crop-line--bottom::before { inset: -11px 0; }
.crop-line--left::before, .crop-line--right::before { inset: 0 -11px; }
.crop-line--top, .crop-line--bottom { left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.crop-line--left, .crop-line--right { top: 0; height: 100%; width: 2px; transform: translateX(-50%); background: #9fd5ff; }
.crop-line--top { top: var(--crop-top); } .crop-line--bottom { top: var(--crop-bottom); }
.crop-line--left { left: var(--crop-left); } .crop-line--right { left: var(--crop-right); }
.photo-crop-dialog .crop-handle { position: absolute; z-index: 2; width: 56px; height: 56px; min-width: 56px; min-height: 56px; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; transform: translate(-50%, -50%); touch-action: none; cursor: grab; display: grid; place-items: center; }
.crop-handle span { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid #fff; border-radius: 50%; background: #8a6416; color: #fff; font-size: 24px; transform: scale(.8); opacity: .75; transition: transform .2s, opacity .2s; box-shadow: 0 1px 5px #000; }
.crop-handle--left span, .crop-handle--right span { background: #1b5b86; }
.crop-plane.is-awake .crop-handle span, .crop-handle:focus-visible span { transform: scale(1); opacity: 1; }
.crop-plane.is-awake[data-selected="top"] .crop-line--top, .crop-plane.is-awake[data-selected="bottom"] .crop-line--bottom, .crop-plane.is-awake[data-selected="left"] .crop-line--left, .crop-plane.is-awake[data-selected="right"] .crop-line--right { opacity: 1; background: #fff; }
.crop-handle--top { top: var(--crop-top); left: 22%; } .crop-handle--bottom { top: var(--crop-bottom); left: 78%; }
.crop-handle--left { left: var(--crop-left); top: 38%; } .crop-handle--right { left: var(--crop-right); top: 62%; }
.crop-sidebar { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .5rem 1rem; flex: none; }
.crop-sidebar .crop-help { margin: 0; text-align: center; }
.crop-modes { display: flex; flex: none; gap: .3rem; }
.photo-crop-dialog .crop-modes button { flex: none; width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; border-radius: 50%; border: 2px solid #b89c60; background: #29252b; color: #cfbf9b; font-weight: 800; font-size: 1.2rem; line-height: 1; box-shadow: none; }
.photo-crop-dialog .crop-modes button[aria-pressed="true"] { background: #197746; border-color: #88e7ac; color: #fff; }
.crop-help { color: #c5bca9; font-size: .8rem; margin: .35rem 0 .75rem; }
.crop-tools, .crop-presets { display: flex; align-items: stretch; justify-content: center; flex-wrap: nowrap; gap: .35rem; max-width: 100%; }
.crop-display-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .35rem; width: min(100%, 20rem); }
.crop-presets label { display: flex; align-items: center; justify-content: center; gap: .3rem; min-width: 44px; min-height: 44px; font-size: .85rem; cursor: pointer; }
.crop-presets input { flex: none; width: 22px; height: 22px; min-height: 22px; margin: 0; }
.photo-crop-dialog .crop-tools button, .photo-crop-dialog .crop-actions button, .photo-crop-dialog .crop-presets button, .photo-crop-dialog #cropTest { min-width: 0; min-height: 48px; padding: .55rem .75rem; border: 1px solid #ae904c; border-radius: .45rem; background: #31271a; color: #ffe19a; font-weight: 800; box-shadow: none; white-space: normal; }
.photo-crop-dialog .crop-presets button[aria-pressed="true"] { background: #725419; border-color: #ffe19a; }
.crop-sidebar [hidden] { display: none; }
.crop-footer { padding: .45rem 1rem max(.65rem, env(safe-area-inset-bottom)); border-top: 1px solid #b6985855; background: #151119; }
.crop-footer [role="status"] { margin: 0 0 .4rem; font-size: .85rem; }
.crop-footer [role="status"]:empty { display: none; }
.crop-footer .is-error { color: #ff9aad; }
.photo-crop-dialog #cropCloseUnsaved { min-height: 44px; margin-bottom: .4rem; border: 1px solid #dd8595; background: #392028; color: #ffd0da; border-radius: .4rem; padding: .4rem .65rem; }
.photo-crop-dialog #cropCloseUnsaved[hidden] { display: none; }
.crop-test-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #000; color: #ffe19a; overflow: hidden; }
.crop-test-dialog.is-windowed { width: 94vw; height: 94dvh; margin: auto; border: 1px solid #b89c60; border-radius: .6rem; }
.crop-test-dialog::backdrop { background: #000d; }
.crop-test-shell { position: relative; width: 100%; height: 100%; background: #000; color: #ffe19a; }
.crop-test-shell:fullscreen { width: 100vw; height: 100dvh; }
.crop-test-header { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: flex-start; gap: .5rem; padding: max(.5rem, env(safe-area-inset-top)) .6rem .5rem; pointer-events: none; }
.crop-test-label { flex: 1; font-size: .95rem; text-shadow: 0 1px 3px #000, 0 0 5px #000; }
.crop-test-header button { pointer-events: auto; flex: none; width: 48px; height: 48px; padding: 0; background: #31271acc; color: #ffe19a; border: 1px solid #ae904c; border-radius: .4rem; font-size: 1.6rem; }
.crop-test-header [data-test-size] { display: grid; place-items: center; }
.crop-test-size-icon { position: relative; display: block; width: 23px; height: 23px; box-sizing: border-box; border: 2px solid currentColor; }
.crop-test-size-icon::after { content: ""; position: absolute; inset: 4px; border: 2px solid currentColor; opacity: .7; }
.crop-test-stage { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.crop-test-screen { background: #000; max-width: 100%; max-height: 100%; }
.crop-test-screen canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.crop-actions { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.photo-crop-dialog #photoCropSaveNext { background: #725419; border-color: #ffdf8c; }
@media (min-width: 64rem) {
  .admin-shell { width: min(95%, 112rem); }
  .admin-thumb-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 6px; padding: 6px; }
  .admin-thumb { width: 100%; }
  .admin-thumb picture { display: block; }
  .admin-thumb img { aspect-ratio: 4 / 3; }
  .admin-thumb.is-framed img { object-fit: contain; }
  .admin-viewer-dialog { width: min(94vw, 90rem); height: 94dvh; max-height: 94dvh; }
  .admin-viewer-nav-row { right: 1rem; bottom: 9rem; }
}
@media (max-width: 52rem) {
  .crop-test-header { flex-wrap: wrap; justify-content: flex-end; }
  .crop-test-label { flex-basis: 100%; font-size: .8rem; }
  .photo-crop-dialog { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .crop-layout { overflow: hidden; }
  .crop-workspace { padding: 0 .35rem; }
  .crop-sidebar { padding: .4rem; gap: .35rem; }
  .crop-tools { gap: .3rem; }
  .photo-crop-dialog .crop-tools button { min-height: 44px; font-size: .75rem; padding: .35rem .4rem; }
  .crop-modes { gap: .3rem; }
  .crop-sidebar .crop-help { font-size: .7rem; }
  .crop-presets label { flex-direction: column; flex: none; width: 44px; gap: 0; font-size: .75rem; line-height: 1.2; }
  .crop-presets input { width: 32px; height: 32px; min-height: 32px; }
  .crop-line--top, .crop-line--bottom { height: 3px; }
  .crop-line--left, .crop-line--right { width: 3px; }
  .crop-header { padding: .6rem .75rem .3rem; }
  .crop-header h2 { font-size: 1.2rem; }
  .crop-header p { font-size: .8rem; }
  .crop-footer { padding: .4rem .4rem max(.4rem, env(safe-area-inset-bottom)); }
  .crop-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .35rem; }
  .photo-crop-dialog .crop-actions button { padding: .35rem; font-size: .78rem; }
  #photoCropSaveNext { grid-column: auto; }
  .photo-crop-dialog .crop-presets button, .photo-crop-dialog #cropTest { min-height: 44px; padding: .35rem .5rem; font-size: .78rem; }
  .photo-crop-dialog .crop-modes button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
}
@media (max-height: 520px) and (min-width: 36rem) {
  .crop-header { padding: .25rem .6rem; display: flex; align-items: center; gap: 1rem; }
  .crop-header h2 { margin: 0; font-size: 1rem; }
  .crop-sidebar .crop-help { flex-basis: auto; }
  .crop-actions { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .crop-handle span { transition: none; } }