.app-cropper-dialog { width: min(96vw, 100rem); max-width: none; }
.app-cropper-stage { min-height: 18rem; height: min(62vh, 42rem); display: grid; place-items: center; overflow: hidden; border-radius: .85rem; background: #172033; }
.app-cropper-stage img { display: block; max-width: 100%; max-height: 100%; }
.app-cropper-preview-frame { position: relative; width: 100%; aspect-ratio: var(--cropper-preview-ratio, 16 / 9); overflow: hidden; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: #172033; }
.app-cropper-live-preview { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.app-cropper-safe-area { position: absolute; z-index: 3; inset: 18% 28%; border: 1px dashed rgba(255, 255, 255, .92); border-radius: .35rem; box-shadow: 0 0 0 999px rgba(0, 0, 0, .08); pointer-events: none; }
.app-cropper-metadata > div { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-block: .45rem; border-top: 1px solid var(--bs-border-color); }
.app-cropper-metadata dt { color: var(--bs-secondary-color); font-weight: 500; }
.app-cropper-metadata dd { margin: 0; text-align: right; font-weight: 600; }
.app-image-preview { width: 100%; object-fit: cover; background: var(--bs-tertiary-bg); }
.app-image-preview.event-cover-preview { aspect-ratio: 16 / 9; max-height: none; object-position: center; }
.event-cover-preview-label { color: var(--bs-secondary-color); font-size: .875rem; font-weight: 600; }
.app-cover-context-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.app-cover-context-tabs .nav-link { width: 100%; min-height: 3.25rem; display: grid; place-items: center; align-content: center; gap: .15rem; padding: .35rem .2rem; border: 1px solid var(--bs-border-color); border-radius: .55rem; font-size: .68rem; line-height: 1.15; }
.app-cover-context-tabs .nav-link i { font-size: .9rem; }
.app-cover-context-content { min-height: 13.5rem; }
.app-cover-simulation { position: relative; width: 100%; overflow: hidden; background: var(--app-border); isolation: isolate; }
.app-cover-simulation img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.app-cover-simulation--public-event { aspect-ratio: 16 / 7; }
.app-cover-simulation--public-sub { aspect-ratio: 16 / 9; }
.app-cover-simulation--portal-card { aspect-ratio: 16 / 7; }
.app-cover-simulation--portal-detail { aspect-ratio: 16 / 7.5; }
.app-cover-simulation__shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(4, 27, 49, .92), rgba(4, 27, 49, .5) 52%, rgba(4, 27, 49, .12)); }
.app-cover-simulation__bottom-shade { position: absolute; z-index: 1; inset: 35% 0 0; background: linear-gradient(transparent, rgba(4, 20, 36, .84)); }
.app-cover-simulation__copy { position: absolute; z-index: 2; inset: auto 1rem 1rem; display: grid; justify-items: start; gap: .2rem; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.app-cover-simulation__copy small { font-size: .62rem; text-transform: uppercase; letter-spacing: .045em; }
.app-cover-simulation__copy strong { max-width: 22ch; font-size: clamp(.9rem, 1.6vw, 1.2rem); line-height: 1.05; }
.app-cover-simulation__copy span { font-size: .68rem; }
.app-cover-simulation__copy--bottom { inset: auto 1rem .8rem; }
.app-cover-card-simulation { width: min(100%, 22rem); margin: .8rem auto 0; overflow: hidden; border: 1px solid var(--bs-border-color); border-radius: .8rem; background: #fff; box-shadow: 0 .25rem .8rem rgba(15, 23, 42, .08); }
.app-cover-card-simulation__body { display: grid; gap: .15rem; padding: .65rem .8rem; }
.app-cover-card-simulation__body small { color: var(--bs-primary); font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; }
.app-cover-card-simulation__body strong { overflow: hidden; color: var(--bs-body-color); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.app-cover-card-simulation__body span { color: var(--bs-secondary-color); font-size: .68rem; }
.app-cover-context-note { margin: 0; padding: .55rem .75rem; color: var(--bs-secondary-color); font-size: .7rem; line-height: 1.35; }

@media (max-width: 1199.98px) {
  .app-cropper-stage { height: min(50vh, 32rem); }
}

@media (max-width: 575.98px) {
  .modal-dialog.modal-dialog-scrollable.app-cropper-dialog { width: 100%; height: 100%; min-height: 100%; margin: 0; }
  .modal-dialog.modal-dialog-scrollable.app-cropper-dialog .modal-content { max-height: 100%; }
  .app-cropper-dialog .modal-content { min-height: 100%; border-radius: 0; }
  .app-cropper-stage { min-height: 15rem; height: 42vh; }
  .app-cropper-metadata > div { display: block; }
  .app-cropper-metadata dd { margin-top: .15rem; text-align: left; }
  .app-cover-context-tabs .nav-link span { display: none; }
  .app-cover-context-tabs .nav-link { min-height: 2.6rem; }
}