.explanation-image-upload {
  display: grid;
  gap: 14px;
  margin: 0 0 26px;
  padding: 18px;
  border: 1px solid #d9e2f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 53, 84, .07);
}

.explanation-image-upload[hidden],
.explanation-figure-modal[hidden],
.explanation-replace-dialog[hidden],
.explanation-figure-clear[hidden] { display: none; }

.explanation-image-upload-copy > p {
  margin: 0 0 5px;
  color: #ef6519;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.explanation-image-upload-copy h2 {
  margin: 0;
  color: #102a3d;
  font: 850 1.3rem/1.25 "Outfit", "Manrope", sans-serif;
}

.explanation-image-upload-copy > span {
  display: block;
  margin-top: 6px;
  color: #5b718d;
  font-weight: 700;
  line-height: 1.45;
}

.explanation-image-upload-controls {
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.explanation-figure-picker {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 126px;
  box-sizing: border-box;
  align-content: center;
  gap: 8px;
  padding: 14px;
  border: 1px solid #cbd8e9;
  border-radius: 16px;
  background: #f8fafc;
  color: #193252;
}

.explanation-figure-picker > label {
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.explanation-figure-picker-popover { position: relative; min-width: 0; }
.explanation-figure-picker-field { display: flex; align-items: center; gap: 8px; }

.explanation-figure-picker-field img {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  box-sizing: border-box;
  border: 1px solid #d8e3ef;
  border-radius: 9px;
  background: #fff;
  object-fit: contain;
}

.explanation-figure-picker input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 11px;
  border: 1px solid #b9c9dd;
  border-radius: 10px;
  background: #fff;
  color: #14213a;
  font: inherit;
  font-weight: 850;
}

.explanation-figure-picker input::-webkit-search-cancel-button { display: none; }
.explanation-figure-picker input:focus { border-color: #0d9488; outline: 3px solid rgba(13, 148, 136, .16); }
.explanation-figure-picker input.has-explanation { border-color: #36a66e; background: #edf9f2; color: #0b6240; }
.explanation-figure-picker input:disabled { cursor: wait; opacity: .65; }
.explanation-figure-picker small { color: #617794; font-size: .73rem; font-weight: 750; }

.explanation-figure-clear {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  place-items: center;
  border: 1px solid #cbd8e9;
  border-radius: 9px;
  background: #fff;
  color: #536b85;
  font: 800 1.2rem/1 "Manrope", sans-serif;
  cursor: pointer;
}

.explanation-figure-clear:hover:not(:disabled) { border-color: #8aa1bc; background: #eef3f8; color: #172641; }
.explanation-figure-clear:focus-visible { outline: 3px solid rgba(13, 148, 136, .2); outline-offset: 2px; }
.explanation-figure-clear:disabled { cursor: wait; opacity: .5; }

.explanation-figure-options {
  position: absolute;
  z-index: 100;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  max-height: min(340px, 48vh);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid #b9c9dd;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 34, 61, .22);
  scrollbar-color: #8296b0 #eef3f8;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.explanation-figure-options.hidden { display: none; }

.explanation-figure-option {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #172641;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.explanation-figure-option + .explanation-figure-option { margin-top: 2px; }
.explanation-figure-option:hover,
.explanation-figure-option.is-active { border-color: #d5dfeb; background: #f1f5f9; }
.explanation-figure-option:active { background: #e7edf4; }
.explanation-figure-option:focus-visible { outline: 3px solid rgba(13, 148, 136, .22); outline-offset: -2px; }
.explanation-figure-option.has-explanation { border-color: #a7dec0; background: #e8f8ef; color: #0b6240; }
.explanation-figure-option.has-explanation:hover,
.explanation-figure-option.has-explanation.is-active { border-color: #56ba83; background: #d7f2e3; }

.explanation-figure-option-copy { display: grid; min-width: 0; gap: 2px; }
.explanation-figure-option-copy strong { overflow: hidden; font-size: .82rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.explanation-figure-option-copy small { overflow: hidden; font-size: .68rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.explanation-figure-option.has-explanation small { color: #39775a; }

.explanation-figure-option-status {
  padding: 4px 7px;
  border-radius: 999px;
  background: #087e52;
  color: #fff;
  font-size: .61rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.explanation-figure-options-empty { margin: 0; padding: 14px 10px; color: #617794; font-size: .75rem; font-weight: 750; text-align: center; }
.explanation-figure-picker-meta { display: flex; gap: 8px; align-items: center; justify-content: space-between; }

.explanation-figure-preview-button {
  min-height: 30px;
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #a7dec0;
  border-radius: 8px;
  background: #e8f8ef;
  color: #0b6240;
  font: inherit;
  font-size: .7rem;
  font-weight: 900;
  cursor: pointer;
}

.explanation-figure-preview-button:hover,
.explanation-figure-preview-button:focus-visible { border-color: #56ba83; background: #d7f2e3; outline: 3px solid rgba(23, 137, 87, .15); }
.explanation-figure-picker-hint { line-height: 1.35; }

.explanation-image-dropzone {
  display: grid;
  min-height: 126px;
  box-sizing: border-box;
  padding: 18px;
  place-content: center;
  gap: 6px;
  border: 2px dashed #b9cbe2;
  border-radius: 16px;
  background: #f7faff;
  color: #164e91;
  text-align: center;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.explanation-image-dropzone:hover,
.explanation-image-dropzone.is-dragging,
.explanation-image-dropzone:focus-within { border-color: #0d9488; background: #effcf9; transform: translateY(-1px); }
.explanation-image-dropzone:focus-within { outline: 3px solid rgba(13, 148, 136, .16); outline-offset: 2px; }
.explanation-image-dropzone.is-busy,
.explanation-image-dropzone.is-disabled { pointer-events: none; opacity: .58; }

.explanation-image-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.explanation-image-dropzone strong { font-size: 1rem; }
.explanation-image-dropzone span { color: #617794; font-size: .86rem; font-weight: 700; }
.explanation-image-dropzone small { color: #71859e; font-size: .72rem; font-weight: 750; }
.explanation-image-upload-status { min-height: 1.4em; margin: 0; color: #46617e; font-weight: 800; }
.explanation-image-results { display: grid; gap: 8px; }

.explanation-image-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  padding: 11px 13px;
  border: 1px solid #e0e8f2;
  border-radius: 12px;
  background: #f4f7fb;
}

.explanation-image-result strong { min-width: 0; overflow-wrap: anywhere; }
.explanation-image-result span { color: #56708d; font-size: .86rem; font-weight: 750; }
.explanation-image-result small { grid-column: 1 / -1; color: #0b7d61; font-weight: 850; }
.explanation-image-result button { grid-column: 1 / -1; justify-self: start; padding: 8px 12px; border: 0; border-radius: 9px; background: #0a806f; color: #fff; font: inherit; font-size: .82rem; font-weight: 850; cursor: pointer; }
.explanation-image-result button:hover { background: #076858; }
.explanation-image-result button:focus-visible { outline: 3px solid rgba(10, 128, 111, .22); outline-offset: 2px; }
.explanation-image-result button[hidden] { display: none; }
.explanation-image-result.is-working small { color: #9a5b08; }
.explanation-image-result.is-error { border-color: #ffc8ca; background: #fff2f3; }
.explanation-image-result.is-error small { color: #c62939; }

body.explanation-admin-modal-open { overflow: hidden; }

.explanation-figure-modal,
.explanation-replace-dialog {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: grid;
  padding: clamp(12px, 3vw, 32px);
  place-items: center;
}

.explanation-figure-modal-backdrop,
.explanation-replace-dialog-backdrop { position: absolute; inset: 0; border: 0; background: rgba(9, 20, 36, .68); cursor: pointer; backdrop-filter: blur(7px); }

.explanation-figure-modal-card {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  box-sizing: border-box;
  gap: 8px;
  overflow: auto;
  padding: 18px;
  border: 1px solid #d7e2ed;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(5, 18, 34, .34);
  scrollbar-gutter: stable;
}

.explanation-figure-modal-card > p:first-of-type { margin: 0; color: #087e52; font-size: .7rem; font-weight: 950; letter-spacing: .12em; }
.explanation-figure-modal-card h2 { margin: 0; padding-right: 44px; color: #172641; font-size: clamp(1.3rem, 3vw, 2rem); }
.explanation-figure-modal-card > span { color: #5b718d; font-weight: 750; }

.explanation-figure-modal-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #d7e2ed;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #172641;
  font: 700 1.45rem/1 "Manrope", sans-serif;
  cursor: pointer;
}

.explanation-figure-modal-close:hover,
.explanation-figure-modal-close:focus-visible { border-color: #8ba1ba; background: #172641; color: #fff; outline: 3px solid rgba(23, 38, 65, .16); }
.explanation-figure-modal-close:active { transform: scale(.96); }

.explanation-figure-modal-media {
  display: grid;
  min-height: min(420px, 58vh);
  margin-top: 6px;
  overflow: hidden;
  place-items: center;
  border: 1px solid #dbe5ef;
  border-radius: 16px;
  background: #f4f7fb;
}

.explanation-figure-modal-media > p { margin: 0; padding: 20px; color: #5b718d; font-weight: 800; text-align: center; }
.explanation-figure-modal-media img { display: block; width: 100%; max-height: min(68vh, 720px); object-fit: contain; }
.explanation-figure-modal-card > small { color: #617794; font-weight: 750; overflow-wrap: anywhere; }

.explanation-replace-dialog-card {
  position: relative;
  z-index: 1;
  width: min(100%, 500px);
  max-height: calc(100dvh - 24px);
  box-sizing: border-box;
  overflow: auto;
  padding: 24px;
  border: 1px solid #d7e2ed;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(5, 18, 34, .34);
}

.explanation-replace-dialog-card > p:first-child { margin: 0; color: #d86613; font-size: .7rem; font-weight: 950; letter-spacing: .12em; }
.explanation-replace-dialog-card h2 { margin: 7px 0 10px; color: #172641; font-size: 1.5rem; }
.explanation-replace-dialog-card #explanationReplaceDialogText { margin: 0; color: #5b718d; font-weight: 700; line-height: 1.55; }
.explanation-replace-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.explanation-replace-dialog-actions button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 11px; font: inherit; font-weight: 900; cursor: pointer; }
.explanation-replace-dialog-actions button:focus-visible { outline: 3px solid rgba(22, 78, 145, .2); outline-offset: 2px; }
.explanation-replace-dialog-actions button:disabled { cursor: wait; opacity: .55; }
#explanationReplaceDialogCancel { background: #eaf0fa; color: #193252; }
#explanationReplaceDialogConfirm { background: #d86613; color: #fff; }
#explanationReplaceDialogConfirm:hover:not(:disabled) { background: #b94e09; }

html[data-theme="dark"] .explanation-image-upload { border-color: #2f4058; background: #151f2e; box-shadow: none; }
html[data-theme="dark"] .explanation-image-upload-copy h2,
html[data-theme="dark"] .explanation-replace-dialog-card h2,
html[data-theme="dark"] .explanation-figure-modal-card h2 { color: #edf2ff; }
html[data-theme="dark"] .explanation-image-upload-copy > span,
html[data-theme="dark"] .explanation-image-upload-status { color: #aebbd0; }
html[data-theme="dark"] .explanation-figure-picker { border-color: #40546f; background: #182638; color: #e7edf8; }
html[data-theme="dark"] .explanation-figure-picker input { border-color: #516681; background: #111c2a; color: #f4f7fb; }
html[data-theme="dark"] .explanation-figure-picker input.has-explanation { border-color: #58b782; background: #163a2a; color: #d2f8e0; }
html[data-theme="dark"] .explanation-figure-picker small { color: #aebbd0; }
html[data-theme="dark"] .explanation-figure-picker-field img { border-color: #40546f; background: #fff; }
html[data-theme="dark"] .explanation-figure-clear { border-color: #516681; background: #202d40; color: #d9e4f3; }
html[data-theme="dark"] .explanation-figure-options { border-color: #516681; background: #111c2a; box-shadow: 0 18px 40px rgba(0,0,0,.42); scrollbar-color: #607590 #182638; }
html[data-theme="dark"] .explanation-figure-option { color: #edf2ff; }
html[data-theme="dark"] .explanation-figure-option:hover,
html[data-theme="dark"] .explanation-figure-option.is-active { border-color: #3a4b62; background: #202d40; }
html[data-theme="dark"] .explanation-figure-option.has-explanation { border-color: #2d8059; background: #163a2a; color: #bdf5d3; }
html[data-theme="dark"] .explanation-figure-option.has-explanation:hover,
html[data-theme="dark"] .explanation-figure-option.has-explanation.is-active { border-color: #58b782; background: #1b4934; }
html[data-theme="dark"] .explanation-figure-option.has-explanation small { color: #91d3ad; }
html[data-theme="dark"] .explanation-figure-preview-button { border-color: #2d8059; background: #163a2a; color: #bdf5d3; }
html[data-theme="dark"] .explanation-image-dropzone { border-color: #40546f; background: #182638; color: #9ec5ff; }
html[data-theme="dark"] .explanation-image-dropzone span,
html[data-theme="dark"] .explanation-image-dropzone small,
html[data-theme="dark"] .explanation-image-result span { color: #aebbd0; }
html[data-theme="dark"] .explanation-image-result { border-color: #344760; background: #1c293a; }
html[data-theme="dark"] .explanation-image-result.is-error { border-color: #813f4a; background: #49242a; }
html[data-theme="dark"] .explanation-image-result small { color: #7ee2b8; }
html[data-theme="dark"] .explanation-image-result.is-working small { color: #f7c66d; }
html[data-theme="dark"] .explanation-image-result.is-error small { color: #ffb4bd; }
html[data-theme="dark"] .explanation-figure-modal-card,
html[data-theme="dark"] .explanation-replace-dialog-card { border-color: #33455d; background: #151f2e; color: #edf2ff; }
html[data-theme="dark"] .explanation-figure-modal-card > span,
html[data-theme="dark"] .explanation-figure-modal-card > small,
html[data-theme="dark"] .explanation-replace-dialog-card #explanationReplaceDialogText { color: #aebbd0; }
html[data-theme="dark"] .explanation-figure-modal-close { border-color: #42516a; background: #202c3c; color: #f4f7fb; }
html[data-theme="dark"] .explanation-figure-modal-media { border-color: #33455d; background: #101a28; }
html[data-theme="dark"] #explanationReplaceDialogCancel { background: #26354a; color: #eef4ff; }

@media (max-width: 699px) {
  .explanation-image-upload { padding: 14px; border-radius: 18px; }
  .explanation-image-upload-controls { grid-template-columns: minmax(0, 1fr); }
  .explanation-figure-picker { min-height: 0; }
  .explanation-replace-dialog-actions { flex-direction: column-reverse; }
  .explanation-replace-dialog-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .explanation-image-dropzone { transition: none; }
  .explanation-image-dropzone:hover,
  .explanation-image-dropzone.is-dragging,
  .explanation-image-dropzone:focus-within { transform: none; }
  .explanation-figure-modal-close:active { transform: none; }
}

@media (forced-colors: active) {
  .explanation-image-upload,
  .explanation-figure-picker,
  .explanation-image-dropzone,
  .explanation-figure-option,
  .explanation-figure-modal-card,
  .explanation-replace-dialog-card { border-color: CanvasText; }
  .explanation-figure-option.has-explanation { outline: 2px solid Highlight; }
}