.participant-selfservice-shell .participant-selfservice-card {
  flex-basis: auto;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: clamp(20px, 5vw, 38px);
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 38px rgba(12, 38, 52, .12);
}

@media (max-width: 600px) {
  .participant-selfservice-shell .participant-selfservice-card {
    border-radius: 18px;
  }
}

.participant-selfservice-grid label small {
  margin-top: -3px;
  color: #61717c;
  font-size: .76rem;
  font-weight: 500;
}

.participant-selfservice-face-status {
  margin: 0 0 12px;
  padding: 9px 11px;
  border-radius: 9px;
  background: #e7f5ec;
  color: #17623a;
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
}

.participant-selfservice-face-status.is-warning {
  background: #fff3d8;
  color: #805b09;
}

.participant-selfservice-face-status[hidden] {
  display: none;
}

.participant-selfservice-photo-adjustments {
  display: flex;
  justify-content: center;
  gap: .6em;
}

.participant-selfservice-photo-effects {
  display: grid;
  gap: .55em;
  padding: .75em .85em;
  border: 1px solid #d5e0e6;
  border-radius: 12px;
  background: #f7fafb;
  color: #334c59;
}

.participant-selfservice-photo-dialog {
  padding: 0;
  overflow: hidden;
}

.participant-photo-dialog-scroll {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .7em;
  padding: .85em .85em .65em;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.participant-selfservice-photo-dialog .participant-photo-modal-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  padding: .65em .85em max(.65em, env(safe-area-inset-bottom));
  border-top: 1px solid #d9e0e4;
  background: #fff;
  box-shadow: 0 -5px 16px rgba(12, 26, 45, .08);
}

.participant-selfservice-photo-dialog .participant-photo-modal-actions button {
  min-width: 0;
  flex: 1 1 0;
}

.participant-selfservice-photo-dialog button:disabled,
.participant-selfservice-photo-dialog input:disabled {
  opacity: .55;
  cursor: wait;
}

.participant-selfservice-background-toggle {
  display: flex;
  align-items: center;
  gap: .6em;
  font-weight: 800;
  cursor: pointer;
}

.participant-selfservice-background-toggle input {
  width: 1.15em;
  height: 1.15em;
  margin: 0;
  accent-color: #0b6f9a;
}

.participant-selfservice-blur-control {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) 1.5em;
  align-items: center;
  gap: .65em;
  font-size: .88rem;
  font-weight: 700;
}

.participant-selfservice-blur-control input { width: 100%; }
.participant-selfservice-blur-control output { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-height: 760px) {
  .participant-photo-dialog { gap: .55em; }
  .participant-photo-crop-frame { width: min(280px, 74vw, 34dvh); }
  .participant-selfservice-photo-effects { padding: .55em .65em; }
}

@media (max-width: 600px) {
  .participant-selfservice-photo-dialog { width: 100%; }
  .participant-photo-dialog-scroll { gap: .5em; padding: .65em .65em .5em; }
  .participant-selfservice-photo-dialog h2 { font-size: clamp(1.3rem, 7vw, 1.8rem); line-height: 1.08; }
  .participant-selfservice-face-status { margin-bottom: 0; }
  .participant-photo-crop-frame { width: min(290px, 78vw, 36dvh); }
  .participant-photo-hint { font-size: .85em; }
  .participant-selfservice-photo-effects { gap: .4em; padding: .55em .65em; }
  .participant-selfservice-background-toggle { gap: .45em; font-size: .9rem; }
  .participant-selfservice-blur-control { gap: .45em; font-size: .82rem; }
  .participant-selfservice-photo-adjustments { gap: .45em; }
  .participant-selfservice-photo-adjustments button { width: 2.7em; min-height: 2.45em; }
  .participant-selfservice-photo-dialog .participant-photo-modal-actions { padding: .55em .65em max(.55em, env(safe-area-inset-bottom)); }
}