/* Мгновенная проверка правил при подаче объявления: модальное окно со светящимся текстом.
   Без зелёного цвета и без backdrop-filter (AGENTS.md); все шрифты через calc(Npx + var(--fs-up, 0px)). */

.submit-live-errors {
  margin: 0 0 14px;
}

.submit-live-errors .notice {
  margin: 0 0 8px;
}

/* Красный ободок у полей формы подачи, требующих внимания (после взаимодействия / при отправке). */
.legacy-listing-form :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea):not(:disabled):is([aria-invalid="true"], .user-invalid-fallback) {
  border-style: solid;
  border-color: #d0021b;
  box-shadow: 0 0 0 2px rgb(208 2 27 / 0.2);
}

.legacy-listing-form :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea):not(:disabled):is([aria-invalid="true"], .user-invalid-fallback):focus-visible {
  outline-color: #d0021b;
}

@media (min-width: 701px) {
  html:not(.g-theme) .legacy-listing-form :is(input[type=file], #listing-photos):not(:disabled):is([aria-invalid="true"], .user-invalid-fallback) {
    outline: 2px solid #d0021b;
    outline-offset: 2px;
    border-radius: 4px;
    box-shadow: none;
  }
}

@media (max-width: 700px) {
  html:not(.g-theme) .legacy-listing-form :is(input[type=file], #listing-photos):not(:disabled):is([aria-invalid="true"], .user-invalid-fallback) {
    border-style: solid;
    border-color: #d0021b;
    box-shadow: 0 0 0 2px rgb(208 2 27 / 0.22);
  }
}

@supports selector(:user-invalid) {
  .legacy-listing-form :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea):not(:disabled):user-invalid {
    border-style: solid;
    border-color: #d0021b;
    box-shadow: 0 0 0 2px rgb(208 2 27 / 0.2);
  }

  .legacy-listing-form :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea):not(:disabled):user-invalid:focus-visible {
    outline-color: #d0021b;
  }

  @media (min-width: 701px) {
    html:not(.g-theme) .legacy-listing-form :is(input[type=file], #listing-photos):not(:disabled):user-invalid {
      outline: 2px solid #d0021b;
      outline-offset: 2px;
      border-radius: 4px;
      box-shadow: none;
    }
  }

  @media (max-width: 700px) {
    html:not(.g-theme) .legacy-listing-form :is(input[type=file], #listing-photos):not(:disabled):user-invalid {
      border-style: solid;
      border-color: #d0021b;
      box-shadow: 0 0 0 2px rgb(208 2 27 / 0.22);
    }
  }
}

.submit-checking-status {
  margin: 10px 0 0;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgb(208 158 62 / 0.42);
  background: linear-gradient(135deg, #24190d 0%, #1c1309 100%);
  color: #fff5da;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  font-size: calc(15px + var(--fs-up, 0px));
  line-height: 1.45;
  text-shadow: 0 0 10px rgb(255 224 148 / 0.52), 0 0 22px rgb(242 178 60 / 0.28);
  box-shadow: 0 6px 20px rgb(20 13 4 / 0.2);
}

.submit-checking-spark {
  display: inline-block;
  margin-right: 6px;
  color: #ffd982;
  text-shadow: 0 0 10px rgb(255 214 112 / 0.85);
  animation: rule-magic-twinkle 1.8s ease-in-out infinite;
}

/* Обратный отсчёт 10 → 0 на кнопке отправки во время проверки */
.legacy-listing-form button.is-counting {
  font-variant-numeric: tabular-nums;
  min-width: 11.5em;
}

/* Автоматический подбор и подсказка рубрики при вводе текста */
.category-suggest-box:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 7px 0 2px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #e3cf99;
  background: #fdf8ea;
  color: #3d2e10;
  font-size: calc(12px + var(--fs-up, 0px));
  line-height: 1.38;
}

html.g-theme .category-suggest-box:not([hidden]) {
  border-radius: 12px;
  border-color: rgb(208 162 66 / 0.34);
  background: linear-gradient(180deg, rgb(255 250 237 / 0.94), rgb(252 243 219 / 0.9));
  color: #3a2a10;
  box-shadow: 0 2px 8px rgb(80 54 12 / 0.06);
}

.category-suggest-label {
  color: #6b562b;
  font-weight: 600;
}

.category-suggest-more {
  margin-left: 4px;
  font-weight: 500;
}

.title-suggest-loading {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #705520;
  font-size: calc(12px + var(--fs-up, 0px));
  font-weight: 500;
}

.title-suggest-loading-spark {
  display: inline-block;
  color: #c28e22;
  animation: rule-magic-twinkle 1.6s ease-in-out infinite;
}

.category-suggest-active {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid #d5b462;
  background: #fff3cf;
  color: #2f2107;
  font-weight: 600;
  overflow-wrap: anywhere;
}

html.g-theme .category-suggest-active {
  border-color: rgb(198 148 48 / 0.48);
  background: linear-gradient(180deg, #fff5d6 0%, #fae5ab 100%);
  color: #2b1d06;
}

.legacy-listing-form .category-suggest-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  cursor: pointer;
  margin: 0;
  padding: 3px 10px;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid #cfb26c;
  background: #fffdf6;
  color: #3a2909;
  font-family: inherit;
  font-size: calc(12px + var(--fs-up, 0px));
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
  transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.legacy-listing-form .category-suggest-chip:hover {
  border-color: #b58d35;
  background: #fff2cc;
  color: #241703;
}

.legacy-listing-form .category-suggest-chip:focus-visible {
  outline: 2px solid #b58d35;
  outline-offset: 2px;
}

html.g-theme .legacy-listing-form .category-suggest-chip {
  border-color: rgb(194 146 52 / 0.42);
  background: #fffdf7;
  color: #38270a;
  box-shadow: 0 1px 3px rgb(64 42 8 / 0.06);
}

html.g-theme .legacy-listing-form .category-suggest-chip:hover {
  border-color: rgb(184 132 34 / 0.68);
  background: #fff3d1;
}

@media (max-width: 700px) {
  .legacy-listing-form .category-suggest-chip {
    min-height: 36px;
    padding: 6px 12px;
  }
}

dialog.rule-magic-dialog {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 1px solid rgb(255 217 138 / 0.48);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(255 215 122 / 0.17) 0%, rgb(255 215 122 / 0) 62%),
    radial-gradient(ellipse at 50% 100%, rgb(232 162 52 / 0.12) 0%, rgb(232 162 52 / 0) 68%),
    linear-gradient(165deg, #251a0e 0%, #1a1209 52%, #291c0f 100%);
  color: #fff8e6;
  box-shadow:
    0 24px 64px rgb(10 6 2 / 0.65),
    0 0 44px rgb(245 188 76 / 0.24),
    inset 0 1px 0 rgb(255 243 207 / 0.26),
    inset 0 0 36px rgb(245 184 65 / 0.1);
  overflow: auto;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition-property: opacity, transform, display, overlay;
  transition-duration: 0.32s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-behavior: allow-discrete;
}

dialog.rule-magic-dialog:modal {
  overscroll-behavior: contain;
}

dialog.rule-magic-dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background-color: rgb(16 11 5 / 0);
  background-image: radial-gradient(circle at 50% 42%, rgb(82 54 18 / 0), rgb(12 8 3 / 0));
  transition-property: background-color, display, overlay;
  transition-duration: 0.32s;
  transition-timing-function: ease-out;
  transition-behavior: allow-discrete;
}

:is(dialog.rule-magic-dialog[open]):where(:not([data-closing])) {
  opacity: 1;
  transform: translateY(0) scale(1);

  @starting-style {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

  &::backdrop {
    background-color: rgb(16 11 5 / 0.7);
    background-image: radial-gradient(circle at 50% 42%, rgb(88 58 20 / 0.34), rgb(12 8 3 / 0.8));

    @starting-style {
      background-color: rgb(16 11 5 / 0);
    }
  }
}

.rule-magic-inner,
.rule-magic-noscript {
  box-sizing: border-box;
  padding: 26px 28px 24px;
  text-align: center;
}

.rule-magic-noscript {
  margin: 0 0 18px;
  border: 1px solid rgb(255 217 138 / 0.48);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(255 215 122 / 0.17) 0%, rgb(255 215 122 / 0) 62%),
    linear-gradient(165deg, #251a0e 0%, #1a1209 52%, #291c0f 100%);
  color: #fff8e6;
  box-shadow:
    0 14px 36px rgb(14 9 3 / 0.34),
    0 0 28px rgb(245 188 76 / 0.18),
    inset 0 1px 0 rgb(255 243 207 / 0.24);
}

.rule-magic-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px;
  color: #ffd982;
  font-size: calc(15px + var(--fs-up, 0px));
  line-height: 1;
  letter-spacing: 0.12em;
  text-shadow: 0 0 12px rgb(255 214 112 / 0.85), 0 0 24px rgb(245 182 58 / 0.48);
  user-select: none;
}

.rule-magic-star-lg {
  font-size: calc(21px + var(--fs-up, 0px));
  color: #fff0c2;
  animation: rule-magic-twinkle 2.8s ease-in-out infinite;
}

#rule-violation-dialog .rule-magic-heading,
.rule-magic-noscript .rule-magic-heading {
  margin: 0 0 14px;
  color: #ffe7a8;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  font-size: calc(21px + var(--fs-up, 0px));
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
  text-shadow:
    0 0 12px rgb(255 218 126 / 0.56),
    0 0 26px rgb(242 173 54 / 0.32),
    0 1px 2px rgb(0 0 0 / 0.5);
}

#rule-violation-dialog .rule-magic-text,
.rule-magic-noscript .rule-magic-text {
  margin: 0 auto 22px;
  max-width: 46ch;
  color: #fff9ea;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  font-size: calc(17px + var(--fs-up, 0px));
  font-style: italic;
  font-weight: 400;
  line-height: 1.66;
  letter-spacing: 0.014em;
  overflow-wrap: break-word;
  text-shadow:
    0 0 9px rgb(255 236 181 / 0.64),
    0 0 22px rgb(246 189 75 / 0.38),
    0 0 38px rgb(235 162 48 / 0.2),
    0 1px 2px rgb(0 0 0 / 0.52);
  animation: rule-magic-glow 3.6s ease-in-out infinite alternate;
}

.rule-magic-noscript .rule-magic-text {
  margin-bottom: 16px;
}

#rule-violation-dialog [hidden],
.rule-magic-noscript [hidden] {
  display: none;
}

/* Блок «было → стало» для опечаток и пунктуации прямо в окне проверки */
.rule-magic-fixes:not([hidden]) {
  display: block;
  margin: -6px auto 20px;
  padding: 12px 14px;
  max-width: 48ch;
  border-radius: 14px;
  border: 1px solid rgb(255 217 138 / 0.34);
  background: rgb(255 232 178 / 0.07);
  text-align: left;
  box-shadow: inset 0 1px 0 rgb(255 245 214 / 0.12);
}

.rule-magic-fixes-caption:not([hidden]) {
  margin: 0 0 8px;
  color: #ffe29d;
  font-size: calc(13px + var(--fs-up, 0px));
  font-weight: 600;
  line-height: 1.38;
}

.rule-magic-fixes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rule-magic-fixes-list li {
  margin: 0;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgb(14 9 3 / 0.42);
  border: 1px solid rgb(255 217 138 / 0.18);
  color: #fff6e0;
  font-size: calc(14px + var(--fs-up, 0px));
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.rule-fix-label {
  color: #ffd982;
  font-weight: 600;
}

.rule-fix-arrow {
  color: #ffd982;
  font-weight: 600;
  margin: 0 2px;
}

.rule-magic-fixes-list del {
  white-space: pre-wrap;
  text-decoration: line-through;
  text-decoration-color: rgb(244 139 128 / 0.85);
  color: #f7c2bc;
  background: rgb(224 92 80 / 0.18);
  padding: 1px 5px;
  border-radius: 5px;
}

.rule-magic-fixes-list del b {
  color: #ffd6d1;
  background: rgb(232 96 84 / 0.34);
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 700;
}

.rule-magic-fixes-list ins {
  white-space: pre-wrap;
  text-decoration: none;
  color: #fff0bf;
  background: rgb(245 186 72 / 0.2);
  padding: 1px 5px;
  border-radius: 5px;
  border-bottom: 1px solid rgb(255 220 132 / 0.55);
}

.rule-magic-fixes-list ins b {
  color: #fff9df;
  background: rgb(245 186 72 / 0.38);
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 700;
  text-shadow: 0 0 8px rgb(255 224 140 / 0.48);
}

.rule-magic-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}

#rule-violation-dialog .rule-magic-btn:not([hidden]),
.rule-magic-noscript .rule-magic-btn:not([hidden]) {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 360px);
  min-height: 44px;
  cursor: pointer;
  padding: 10px 24px;
  border: 1px solid rgb(255 236 184 / 0.72);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe5a3 0%, #eab952 100%);
  color: #241606;
  font-family: inherit;
  font-size: calc(15px + var(--fs-up, 0px));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: center;
  box-shadow:
    0 4px 18px rgb(245 186 72 / 0.34),
    inset 0 1px 0 rgb(255 251 236 / 0.75);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, background-color 0.16s ease;
}

#rule-violation-dialog .rule-magic-btn:hover,
.rule-magic-noscript .rule-magic-btn:hover {
  background: linear-gradient(180deg, #ffecb5 0%, #f0c261 100%);
  color: #241606;
  transform: none;
  filter: brightness(1.03);
  box-shadow:
    0 6px 24px rgb(250 196 86 / 0.48),
    inset 0 1px 0 rgb(255 252 240 / 0.85);
}

#rule-violation-dialog .rule-magic-btn.rule-magic-btn-secondary,
.rule-magic-noscript .rule-magic-btn.rule-magic-btn-secondary {
  border-color: rgb(255 217 138 / 0.44);
  background: rgb(255 224 148 / 0.08);
  color: #ffeab8;
  font-size: calc(14px + var(--fs-up, 0px));
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgb(255 243 207 / 0.14);
}

#rule-violation-dialog .rule-magic-btn.rule-magic-btn-secondary:hover,
.rule-magic-noscript .rule-magic-btn.rule-magic-btn-secondary:hover {
  border-color: rgb(255 226 158 / 0.68);
  background: rgb(255 224 148 / 0.16);
  color: #fff6de;
  filter: none;
  box-shadow:
    0 4px 16px rgb(245 186 72 / 0.2),
    inset 0 1px 0 rgb(255 247 220 / 0.24);
}

#rule-violation-dialog .rule-magic-btn:active,
.rule-magic-noscript .rule-magic-btn:active {
  transform: translateY(1px);
}

#rule-violation-dialog .rule-magic-btn:disabled,
.rule-magic-noscript .rule-magic-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

#rule-violation-dialog .rule-magic-btn:focus-visible,
.rule-magic-noscript .rule-magic-btn:focus-visible {
  outline: 2px solid #fff3cc;
  outline-offset: 3px;
}

@keyframes rule-magic-glow {
  from {
    text-shadow:
      0 0 8px rgb(255 234 176 / 0.54),
      0 0 20px rgb(244 184 68 / 0.3),
      0 0 34px rgb(232 158 44 / 0.16),
      0 1px 2px rgb(0 0 0 / 0.52);
  }
  to {
    text-shadow:
      0 0 12px rgb(255 242 200 / 0.82),
      0 0 28px rgb(250 198 88 / 0.5),
      0 0 46px rgb(240 170 52 / 0.28),
      0 1px 2px rgb(0 0 0 / 0.52);
  }
}

@keyframes rule-magic-twinkle {
  0%, 100% {
    opacity: 0.78;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@media (max-width: 480px) {
  dialog.rule-magic-dialog {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    border-radius: 16px;
  }

  .rule-magic-inner,
  .rule-magic-noscript {
    padding: 20px 16px 18px;
  }

  #rule-violation-dialog .rule-magic-heading,
  .rule-magic-noscript .rule-magic-heading {
    font-size: calc(18px + var(--fs-up, 0px));
    margin-bottom: 11px;
  }

  #rule-violation-dialog .rule-magic-text,
  .rule-magic-noscript .rule-magic-text {
    font-size: calc(15px + var(--fs-up, 0px));
    line-height: 1.58;
    margin-bottom: 18px;
  }

  #rule-violation-dialog .rule-magic-btn,
  .rule-magic-noscript .rule-magic-btn {
    width: 100%;
    max-width: 100%;
    padding: 10px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog.rule-magic-dialog {
    transform: none;
    transition-duration: 0.1s;
  }

  dialog.rule-magic-dialog::backdrop {
    transition-duration: 0.1s;
  }

  @starting-style {
    :is(dialog.rule-magic-dialog[open]):where(:not([data-closing])) {
      transform: none;
    }
  }

  .rule-magic-text,
  .rule-magic-star-lg,
  .submit-checking-spark,
  .title-suggest-loading-spark {
    animation: none;
  }

  .rule-magic-btn {
    transition: none;
  }
}

/* Миниатюры загруженных и сохранённых фото + полноэкранный просмотр в форме подачи/редактирования */
.photo-thumb-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  line-height: 0;
  cursor: zoom-in;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.g-theme .photo-thumb-btn {
  border-radius: 16px;
}

.photo-thumb-btn img {
  display: block;
}

.photo-thumb-btn:hover {
  background: transparent;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgb(64 55 25 / 0.22);
}

.photo-thumb-btn:focus-visible {
  outline: 2px solid #d4a11e;
  outline-offset: 2px;
}

dialog.photo-zoom-dialog {
  box-sizing: border-box;
  margin: auto;
  padding: 0;
  width: min(94vw, 1140px);
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  border: 1px solid rgb(255 217 138 / 0.34);
  border-radius: 18px;
  background: rgb(18 14 8 / 0.96);
  color: #fff8e6;
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.72);
  overflow: hidden;
}

dialog.photo-zoom-dialog:modal {
  overscroll-behavior: contain;
}

dialog.photo-zoom-dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgb(10 8 5 / 0.86);
}

dialog.photo-zoom-dialog [hidden] {
  display: none;
}

.photo-zoom-inner {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 18px);
}

.photo-zoom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 4px 16px;
}

.photo-zoom-counter {
  color: #ffe9b3;
  font-size: calc(14px + var(--fs-up, 0px));
  font-weight: 600;
  letter-spacing: 0.03em;
}

.photo-zoom-close-form {
  margin: 0;
}

.photo-zoom-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgb(255 220 144 / 0.32);
  border-radius: 999px;
  background: rgb(255 236 190 / 0.1);
  color: #fff6df;
  font-size: calc(24px + var(--fs-up, 0px));
  line-height: 1;
  cursor: pointer;
}

.photo-zoom-close:hover {
  background: rgb(255 236 190 / 0.22);
  border-color: rgb(255 224 152 / 0.58);
}

.photo-zoom-close:focus-visible,
.photo-zoom-nav:focus-visible {
  outline: 2px solid #ffe08a;
  outline-offset: 2px;
}

.photo-zoom-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px 16px;
  min-height: 200px;
}

.photo-zoom-img {
  display: block;
  max-width: min(90vw, 1080px);
  max-height: calc(86dvh - 64px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  user-select: none;
}

.photo-zoom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgb(255 220 144 / 0.35);
  border-radius: 999px;
  background: rgb(18 13 7 / 0.72);
  color: #fff6df;
  font-size: calc(26px + var(--fs-up, 0px));
  line-height: 1;
  cursor: pointer;
}

.photo-zoom-prev {
  left: 12px;
}

.photo-zoom-next {
  right: 12px;
}

.photo-zoom-nav:hover {
  background: rgb(38 28 14 / 0.9);
  border-color: rgb(255 224 152 / 0.62);
}

@media (max-width: 700px) {
  dialog.photo-zoom-dialog {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    border-radius: 14px;
  }

  .photo-zoom-bar {
    padding: 6px 8px 2px 12px;
  }

  .photo-zoom-stage {
    padding: 4px 8px 12px;
  }

  .photo-zoom-img {
    max-width: calc(100vw - 28px);
    max-height: calc(86dvh - 58px);
  }

  .photo-zoom-prev {
    left: 6px;
  }

  .photo-zoom-next {
    right: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-thumb-btn {
    transition: none;
  }
}