.alpha-task {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  color: #eef3ff;
}

.alpha-task-lead {
  padding: 12px 14px;
  color: #eef3ff;
  background: #172239;
  border-left: 4px solid #f2b84b;
  line-height: 1.45;
}

.alpha-muted {
  color: #9ba9c4;
  font-size: .88rem;
}

.alpha-feedback {
  padding: 11px 12px;
  color: #eef3ff;
  background: #202b43;
  border: 1px solid #465674;
  border-radius: 6px;
  line-height: 1.4;
}

.alpha-feedback.ok {
  color: #d9ffe7;
  background: #113624;
  border-color: #3ea96d;
}

.alpha-feedback.fail {
  color: #ffe1dc;
  background: #3a1d22;
  border-color: #cf5f62;
}

.alpha-finish {
  margin-top: 2px;
}

.alpha-pair-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.alpha-pair-column {
  display: grid;
  align-content: start;
  gap: 9px;
}

.alpha-pair-card,
.alpha-image-choice,
.alpha-evidence-card,
.alpha-suspect-card {
  appearance: none;
  width: 100%;
  min-width: 0;
  color: #edf3ff;
  background: #18243a;
  border: 1px solid #41506c;
  border-radius: 7px;
  box-shadow: 0 7px 18px rgb(0 0 0 / 24%);
}

.alpha-pair-card {
  min-height: 90px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 9px;
  font: inherit;
  font-weight: 700;
}

.alpha-pair-card.text-only {
  min-height: 64px;
}

.alpha-card-text-only {
  display: grid;
  min-height: 42px;
  place-items: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.alpha-pair-card img {
  width: 100%;
  height: 74px;
  object-fit: contain;
  background: #0a0f1b;
  border-radius: 4px;
}

.alpha-pair-card.selected {
  border-color: #f2b84b;
  box-shadow: 0 0 0 2px rgb(242 184 75 / 28%), 0 9px 22px rgb(0 0 0 / 30%);
}

.alpha-pair-card.matched {
  color: #d8ffe6;
  background: #17412d;
  border-color: #4fc37c;
  opacity: .82;
}

.alpha-pair-card.wrong {
  background: #4a2025;
  border-color: #ef6c6c;
  animation: alpha-shake .3s ease;
}

.alpha-card-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 58px;
  padding: 8px;
  color: #dce6fb;
  background: #0e1627;
  border: 1px dashed #52617c;
}

@keyframes alpha-shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.alpha-reveal-shell {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  background: #e7dfc6;
  border: 1px solid #6f6550;
  border-radius: 8px;
  box-shadow: inset 0 0 30px rgb(74 52 24 / 24%), 0 18px 40px rgb(0 0 0 / 32%);
  touch-action: none;
}

.alpha-secret-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  color: #18233a;
  font: 700 1.15rem/1.55 Georgia, serif;
  text-align: center;
  white-space: pre-wrap;
}

.alpha-reveal-cover {
  --reveal-x: 50%;
  --reveal-y: 50%;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 18px;
  color: #f7f9ff;
  background-color: #18243b;
  background-position: center;
  background-size: cover;
  transition: opacity .45s ease;
}

.alpha-reveal-cover span {
  padding: 7px 10px;
  background: rgb(8 12 22 / 82%);
  border: 1px solid #8392ad;
  border-radius: 5px;
  font-size: .82rem;
}

.alpha-reveal-shell.mode-rub .alpha-reveal-cover,
.alpha-reveal-shell.mode-thermal .alpha-reveal-cover,
.alpha-reveal-shell.mode-uv .alpha-reveal-cover,
.alpha-reveal-shell.mode-xray .alpha-reveal-cover {
  -webkit-mask-image: radial-gradient(circle 62px at var(--reveal-x) var(--reveal-y), transparent 0 54px, #000 64px);
  mask-image: radial-gradient(circle 62px at var(--reveal-x) var(--reveal-y), transparent 0 54px, #000 64px);
}

.alpha-reveal-shell.mode-thermal .alpha-reveal-cover {
  background-color: #552344;
  filter: saturate(1.5) contrast(1.18);
}

.alpha-reveal-shell.mode-uv .alpha-reveal-cover {
  background-color: #251a4f;
  box-shadow: inset 0 0 70px #7250d9;
}

.alpha-reveal-shell.mode-xray .alpha-reveal-cover {
  background-color: #203641;
  filter: grayscale(.65) contrast(1.35);
}

.alpha-reveal-cover.revealed {
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.alpha-reveal-slider {
  width: 100%;
  min-height: 34px;
  accent-color: #f2b84b;
}

.alpha-reveal-progress {
  height: 9px;
  overflow: hidden;
  background: #202b43;
  border: 1px solid #465674;
  border-radius: 4px;
}

.alpha-reveal-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: #f2b84b;
  transition: width .18s ease;
}

.alpha-reveal-percent {
  color: #b9c4d9;
  text-align: center;
  font-size: .82rem;
}

.alpha-flash-stage {
  --light-x: 50%;
  --light-y: 50%;
  position: relative;
  min-height: 280px;
  overflow: hidden;
  background: #03050a;
  border: 1px solid #55627a;
  border-radius: 8px;
  touch-action: none;
}

.alpha-flash-stage img {
  display: block;
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
}

.alpha-flash-dark {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 96%);
  -webkit-mask-image: radial-gradient(circle 78px at var(--light-x) var(--light-y), transparent 0 55px, #000 82px);
  mask-image: radial-gradient(circle 78px at var(--light-x) var(--light-y), transparent 0 55px, #000 82px);
}

.alpha-flash-reticle {
  position: absolute;
  width: 136px;
  height: 136px;
  border: 1px solid rgb(255 232 148 / 48%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 42px rgb(255 226 132 / 20%);
  pointer-events: none;
}

.alpha-flash-stage.solved .alpha-flash-dark {
  opacity: .28;
}

.alpha-flash-stage.solved .alpha-flash-reticle {
  border: 3px solid #5adb8b;
}

.alpha-flash-stage.miss {
  border-color: #ef6c6c;
}

.alpha-evidence-grid,
.alpha-suspect-grid,
.alpha-image-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.alpha-evidence-card,
.alpha-suspect-card,
.alpha-image-choice {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 8px;
  font: inherit;
  text-align: left;
}

.alpha-image-choice-wrap {
  position: relative;
  min-width: 0;
}

.alpha-image-choice {
  width: 100%;
  height: 100%;
}

.alpha-image-bookmark {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #fff4c7;
  background: rgba(7, 14, 25, .88);
  border: 1px solid rgba(255, 231, 153, .72);
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .45);
}

.alpha-image-bookmark::before {
  content: "\2606";
  font-size: 1.45rem;
  line-height: 1;
}

.alpha-image-bookmark[aria-pressed="true"] {
  color: #172033;
  background: #ffd778;
  border-color: #fff1bd;
}

.alpha-image-bookmark[aria-pressed="true"]::before {
  content: "\2605";
}

.alpha-evidence-card img,
.alpha-suspect-card img,
.alpha-image-choice img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  background: #090e19;
  border-radius: 4px;
}

.alpha-photo-hotspot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(151, 200, 230, .45);
  border-radius: 8px;
  background: #07111a;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .38);
  cursor: crosshair;
}

.alpha-photo-hotspot img {
  display: block;
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
}

.alpha-photo-hotspot.miss {
  animation: alpha-hotspot-miss .32s ease;
}

.alpha-hotspot-target {
  position: absolute;
  width: 52px;
  height: 52px;
  border: 3px solid #83efb3;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 7px rgba(77, 220, 142, .22), 0 0 28px rgba(77, 220, 142, .8);
}

@keyframes alpha-hotspot-miss {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-7px); }
  70% { transform: translateX(7px); }
}

.alpha-evidence-card span {
  color: #b9c4d9;
  font-size: .84rem;
  line-height: 1.35;
}

.alpha-evidence-card small,
.alpha-image-choice span,
.alpha-suspect-card strong {
  color: #dfe7f7;
}

.alpha-image-notes {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #111d30;
  border: 1px solid #3d506e;
  border-radius: 7px;
}

.alpha-image-notes label,
.alpha-bookmark-summary {
  display: grid;
  gap: 7px;
}

.alpha-image-notes label > span,
.alpha-bookmark-summary > span {
  color: #f5d58d;
  font-size: .9rem;
  font-weight: 750;
}

.alpha-image-note-input {
  width: 100%;
  min-height: 76px;
  box-sizing: border-box;
  resize: vertical;
  padding: 10px;
  color: #f2f6ff;
  background: #091321;
  border: 1px solid #526885;
  border-radius: 6px;
  font: inherit;
  line-height: 1.4;
}

.alpha-image-note-input:focus {
  border-color: #f2bd55;
  outline: 2px solid rgba(242, 189, 85, .22);
}

.alpha-image-notes > small,
.alpha-bookmark-strip > small {
  color: #9eacc2;
  line-height: 1.35;
}

.alpha-bookmark-strip {
  display: flex;
  min-height: 48px;
  gap: 7px;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 2px;
}

.alpha-bookmark-thumb,
.alpha-review-memo {
  flex: 0 0 auto;
  width: 58px;
  height: 46px;
  padding: 2px;
  overflow: hidden;
  background: #080f1a;
  border: 1px solid #657792;
  border-radius: 5px;
}

.alpha-bookmark-thumb img,
.alpha-review-memo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.alpha-evidence-card.seen {
  background: #19352b;
  border-color: #4eae76;
}

.alpha-evidence-status {
  color: #f2d18b;
  text-align: center;
  font-weight: 700;
}

.alpha-suspect-card:disabled {
  opacity: .45;
}

.alpha-suspect-card.correct,
.alpha-image-choice.selected {
  background: #173a2a;
  border-color: #55c883;
  box-shadow: 0 0 0 2px rgb(85 200 131 / 22%);
}

.alpha-suspect-card.wrong {
  background: #452127;
  border-color: #e36b70;
}

.alpha-token-reveal {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 18px;
  background: #17243a;
  border: 1px solid #d49b3d;
  border-radius: 7px;
}

.alpha-token-reveal > span {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  color: #172033;
  background: #ffd778;
  border: 3px solid #fff1bf;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgb(0 0 0 / 36%);
  font-size: 1.8rem;
  font-weight: 900;
}

.alpha-token-reveal p {
  margin: 0;
  color: #c9d3e7;
  text-align: center;
}

.alpha-solution-cells {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.alpha-solution-cells span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 46px;
  padding: 0 6px;
  color: #fff0bd;
  background: #17233a;
  border-bottom: 3px solid #f2b84b;
  font-size: 1.25rem;
  font-weight: 800;
}

.alpha-image-review {
  display: grid;
  gap: 7px;
}

.alpha-image-review-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 32px auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  background: #172239;
  border: 1px solid #34435e;
  border-radius: 6px;
}

.alpha-image-review-row > span,
.alpha-image-review-row > b {
  color: #ffd778;
  text-align: center;
}

.alpha-image-review-row div {
  min-width: 0;
}

.alpha-image-review-row strong,
.alpha-image-review-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alpha-image-review-row small {
  color: #9fabc1;
}

.alpha-review-thumb {
  display: block;
  width: 54px;
  height: 38px;
  margin-top: 4px;
  overflow: hidden;
  background: #090e19;
  border: 1px solid #43536e;
  border-radius: 4px;
}

.alpha-review-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.alpha-review-note {
  margin: 7px 0 0;
  padding: 7px 8px;
  color: #e6edf9;
  background: #0c1728;
  border-left: 3px solid #f2b84b;
  border-radius: 3px;
  font-size: .82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.alpha-review-memos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 7px;
}

.alpha-review-memos > small {
  flex-basis: 100%;
  color: #9fabc1;
}

.alpha-review-memo {
  width: 50px;
  height: 40px;
}

.alpha-review-memo.current {
  border-color: #5ed18b;
  box-shadow: 0 0 0 2px rgba(94, 209, 139, .2);
}

.alpha-image-review.retry .alpha-image-review-row.is-correct {
  border-color: #347b55;
  box-shadow: inset 3px 0 #55c883;
}

.alpha-image-review.retry .alpha-image-review-row.is-wrong {
  background: #321d25;
  border-color: #bb515f;
  box-shadow: inset 3px 0 #ef6c78;
}

.alpha-review-status {
  margin-top: 5px;
  font-weight: 800;
}

.alpha-image-review-row.is-correct .alpha-review-status {
  color: #74dda0;
}

.alpha-image-review-row.is-wrong .alpha-review-status {
  color: #ff8b96;
}

.alpha-image-review-row.is-correct .alpha-review-change:disabled {
  color: #9bdcb5;
  border-color: #347b55;
  opacity: 1;
}

.alpha-solution-success,
.alpha-rule-success {
  padding: 20px;
  color: #eefaf2;
  background: #153828;
  border: 1px solid #4fb97a;
  border-radius: 8px;
  text-align: center;
}

.alpha-solution-success > span {
  display: inline-block;
  padding: 4px 8px;
  color: #153828;
  background: #7ce0a3;
  border-radius: 4px;
  font-weight: 800;
}

.alpha-medal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.alpha-memory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.alpha-memory-card {
  position: relative;
  min-height: 94px;
  padding: 0;
  overflow: hidden;
  color: #eef3ff;
  background: #18243a;
  border: 1px solid #455572;
  border-radius: 7px;
  transform-style: preserve-3d;
}

.alpha-memory-back,
.alpha-memory-front {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  transition: transform .35s ease;
}

.alpha-memory-back {
  color: #ffd778;
  background: #24314a;
  font-size: 1.65rem;
  font-weight: 900;
}

.alpha-memory-front {
  padding: 5px;
  background: #edf1f7;
  transform: rotateY(180deg);
}

.alpha-memory-front img {
  width: 100%;
  height: 64px;
  object-fit: contain;
}

.alpha-memory-front small {
  color: #172033;
  font-weight: 700;
}

.alpha-memory-card.open .alpha-memory-back,
.alpha-memory-card.matched .alpha-memory-back {
  transform: rotateY(180deg);
}

.alpha-memory-card.open .alpha-memory-front,
.alpha-memory-card.matched .alpha-memory-front {
  transform: rotateY(0);
}

.alpha-memory-card.matched {
  border-color: #50bd7b;
  opacity: .8;
}

.alpha-slide-grid {
  display: grid;
  grid-template-columns: repeat(var(--slide-size), minmax(0, 1fr));
  aspect-ratio: 1;
  gap: 3px;
  padding: 5px;
  background: #0c1220;
  border: 1px solid #4a5872;
  border-radius: 7px;
}

.alpha-slide-tile {
  min-width: 0;
  padding: 0;
  background-repeat: no-repeat;
  border: 1px solid #e2b65c;
  border-radius: 3px;
  box-shadow: 0 3px 8px rgb(0 0 0 / 42%);
}

.alpha-slide-tile.blank {
  background: #070b14;
  border-color: #1d273a;
  box-shadow: inset 0 0 12px rgb(0 0 0 / 70%);
}

.alpha-role-grid,
.alpha-multi-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.alpha-role-grid button {
  min-height: 58px;
  padding: 9px;
  color: #eaf0ff;
  background: #19253b;
  border: 1px solid #43536f;
  border-radius: 7px;
  font: inherit;
  font-weight: 700;
}

.alpha-role-grid button.selected {
  color: #182239;
  background: #ffd778;
  border-color: #fff0b2;
}

.alpha-multi-status span {
  padding: 10px;
  color: #aab6cc;
  background: #131d30;
  border: 1px solid #394760;
  border-radius: 6px;
  text-align: center;
}

.alpha-multi-status span.ready {
  color: #d7ffe5;
  background: #153827;
  border-color: #4db778;
}

.alpha-random-stamp {
  justify-self: start;
  padding: 5px 9px;
  color: #171f31;
  background: #ffd778;
  border: 2px solid #fff0bb;
  transform: rotate(-1deg);
  font-weight: 900;
}

.alpha-random-image {
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  background: #090e18;
  border: 1px solid #485774;
  border-radius: 7px;
}

.alpha-rule-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  background: #17243a;
  border: 1px solid #485876;
}

.alpha-rule-header strong {
  padding: 5px 8px;
  color: #172239;
  background: #ffd778;
  border-radius: 4px;
}

.alpha-condition-list {
  display: grid;
  gap: 8px;
}

.alpha-condition-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 8px;
  padding: 10px;
  background: #131e31;
  border: 1px solid #3d4b65;
  border-radius: 6px;
}

.alpha-condition-row label {
  display: grid;
  gap: 5px;
  color: #c6d0e4;
  font-size: .82rem;
}

.alpha-condition-state {
  align-self: center;
  color: #e7b1ab;
  font-size: .78rem;
}

.alpha-condition-state.ready {
  color: #76d99b;
}

.alpha-action-media img,
.alpha-action-media video {
  width: 100%;
  max-height: 52vh;
  object-fit: contain;
  background: #090e18;
  border-radius: 6px;
}

.alpha-action-media audio {
  width: 100%;
}

.alpha-qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 120000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(3 6 12 / 92%);
}

.alpha-qr-overlay > div {
  width: min(430px, 100%);
  padding: 14px;
  background: #121c2e;
  border: 1px solid #61708c;
  border-radius: 8px;
  text-align: center;
}

.alpha-qr-overlay video {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #000;
  border-radius: 6px;
}

@media (max-width: 430px) {
  .alpha-pair-board,
  .alpha-evidence-grid,
  .alpha-suspect-grid,
  .alpha-image-choice-grid {
    gap: 7px;
  }

  .alpha-pair-card {
    min-height: 82px;
    padding: 7px;
    font-size: .84rem;
  }

  .alpha-pair-card img,
  .alpha-evidence-card img,
  .alpha-suspect-card img,
  .alpha-image-choice img {
    height: 92px;
  }

  .alpha-memory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .alpha-image-review-row {
    grid-template-columns: 26px minmax(0, 1fr) 28px;
  }

  .alpha-image-review-row button {
    grid-column: 2 / -1;
  }

  .alpha-image-review-row .alpha-review-memo {
    grid-column: auto;
  }
}

/* Alpha-Test: kompakte Hilfe, Bildzoom und einklappbare private Notizen. */
.alpha-task-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: start;
}

.alpha-task-heading .alpha-task-lead {
  min-width: 0;
}

.alpha-task-help {
  min-width: 0;
}

.alpha-task-help > summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #102038;
  background: #f5c45e;
  border: 1px solid #ffe4a4;
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .3);
  cursor: pointer;
  font: 900 1.05rem/1 Georgia, serif;
}

.alpha-task-help > summary::-webkit-details-marker,
.alpha-image-notes > summary::-webkit-details-marker {
  display: none;
}

.alpha-task-help[open] {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
}

.alpha-task-help[open] > summary {
  grid-column: 2;
}

.alpha-task-help-panel {
  grid-column: 1 / -1;
  padding: 12px 14px;
  color: #eaf1ff;
  background: #101c2e;
  border: 1px solid #526783;
  border-radius: 7px;
  line-height: 1.42;
}

.alpha-task-help-panel strong {
  color: #f6d88c;
}

.alpha-task-help-panel ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.alpha-task-help-panel li + li {
  margin-top: 5px;
}

.alpha-image-stage-wrap {
  position: relative;
  min-width: 0;
}

.alpha-image-stage-wrap > .alpha-flash-stage,
.alpha-image-stage-wrap > .alpha-photo-hotspot {
  width: 100%;
}

.alpha-image-zoom {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #f3f7ff;
  background: rgba(7, 14, 25, .9);
  border: 1px solid rgba(184, 211, 255, .78);
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .45);
  cursor: pointer;
  font: 800 1.1rem/1 Arial, sans-serif;
}

.alpha-image-zoom:focus-visible,
.alpha-task-help > summary:focus-visible,
.alpha-image-notes > summary:focus-visible {
  outline: 3px solid rgba(126, 178, 255, .62);
  outline-offset: 2px;
}

.alpha-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 140000;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(2, 6, 12, .94);
  backdrop-filter: blur(5px);
}

.alpha-image-viewer-card {
  position: relative;
  display: grid;
  gap: 9px;
  width: min(96vw, 920px);
  max-height: 94svh;
  padding: 10px;
  background: #0d1727;
  border: 1px solid #526987;
  border-radius: 7px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .72);
}

.alpha-image-viewer-card img {
  width: 100%;
  max-height: calc(94svh - 78px);
  object-fit: contain;
  background: #050910;
  border-radius: 5px;
}

.alpha-image-viewer-card p {
  margin: 0;
  padding: 0 46px 2px 4px;
  color: #dbe6f7;
  overflow-wrap: anywhere;
}

.alpha-image-viewer-close {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 2;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #fff;
  background: #273955;
  border: 1px solid #7890b2;
  border-radius: 50%;
  font: 700 1.45rem/1 Arial, sans-serif;
}

.alpha-image-notes {
  display: block;
  padding: 0;
  overflow: hidden;
}

.alpha-image-notes > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  color: #f5d58d;
  cursor: pointer;
  font-weight: 800;
}

.alpha-image-notes > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.25rem;
}

.alpha-image-notes[open] > summary::after {
  content: "−";
}

.alpha-image-notes > summary small {
  margin-left: auto;
  color: #9eacc2;
  font-size: .74rem;
  font-weight: 600;
}

.alpha-image-notes-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

@media (max-width: 380px) {
  .alpha-task-heading {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .alpha-task-help > summary,
  .alpha-image-zoom {
    width: 34px;
    height: 34px;
  }

  .alpha-image-bookmark {
    width: 34px;
    height: 34px;
  }
}