.recon-photo-dialog {
  width: min(760px, calc(100vw - 24px));
  max-height: min(90vh, 900px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 90px rgba(14, 27, 48, .28);
  color: #17243b;
}
.recon-photo-dialog::backdrop { background: rgba(12, 22, 38, .62); }
.recon-photo-shell { padding: 24px; }
.recon-photo-shell header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.recon-photo-shell header span { color: #4268a8; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.recon-photo-shell h2 { margin: 5px 0 0; font-size: 22px; line-height: 1.25; }
.recon-photo-shell p { margin: 14px 0 20px; color: #536276; line-height: 1.45; }
.recon-photo-close { border: 0; background: #eef2f7; border-radius: 10px; font-size: 24px; min-width: 38px; min-height: 38px; cursor: pointer; }
.recon-photo-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.recon-photo-action, .recon-photo-tile button { border: 1px solid #c3d2e5; background: #fff; color: #16407b; border-radius: 10px; padding: 10px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.recon-photo-action:first-child { background: #1455ad; color: #fff; border-color: #1455ad; }
.recon-photo-action:has(input:disabled) { opacity: .55; cursor: wait; }
.recon-photo-message { min-height: 26px; margin: 18px 0 8px; color: #52627a; font-size: 14px; }
.recon-photo-message.is-error { color: #b42318; }
.recon-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }
.recon-photo-tile { border: 1px solid #dce3ed; border-radius: 12px; overflow: hidden; background: #f5f7fa; }
.recon-photo-tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.recon-photo-tile button { width: 100%; border: 0; border-radius: 0; font-size: 12px; min-height: 42px; }
.recon-photo-tile button:disabled { color: #176445; background: #e6f5ed; cursor: default; }
.recon-card-photo-action, .recon-table-photo-action { border: 1px solid #b9cce4; background: #f0f6ff; color: #164f91; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 700; padding: 7px 10px; cursor: pointer; }
.recon-card-photo-action:hover, .recon-table-photo-action:hover { background: #dfeeff; }
@media (max-width: 600px) {
  .recon-photo-shell { padding: 18px; }
  .recon-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recon-photo-actions > label { flex: 1; text-align: center; }
}