/* М211 (SHARE_PROGRESS): кнопка «Поделиться» на экране прогресса и окно с готовой картинкой.
   Цвета окна — из темы приложения; сама картинка всегда в своих цветах (рисуется в canvas). */
.m211-row { display: flex; justify-content: flex-end; min-width: 0; }
.pgm-streak .m211-row { margin-top: 12px; }
.m211-btn { min-height: 44px; padding: 0 18px; gap: 8px; font-weight: 700; max-width: 100%; }

.m211-dlg { border: 0; padding: 0; margin: auto; width: min(440px, calc(100% - 24px)); max-width: calc(100% - 24px);
  max-height: calc(100dvh - 24px); background: var(--panel); color: var(--text); border-radius: var(--r-lg, 20px);
  box-shadow: var(--shadow-pop); overflow: auto; }
.m211-dlg::backdrop { background: var(--scrim, rgba(3, 8, 13, .7)); }
.m211-in { display: grid; gap: 12px; padding: 16px; min-width: 0; }
.m211-frame { display: grid; place-items: center; min-height: 200px; border-radius: 14px; background: var(--raise); overflow: hidden; }
.m211-img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(58dvh, 520px); aspect-ratio: 9 / 16; border-radius: 10px; }
.m211-status { margin: 0; padding: 24px 16px; text-align: center; color: var(--muted); font-size: 15px; }
.m211-actions { display: grid; gap: 8px; }
.m211-actions .btn { min-height: 48px; text-decoration: none; }
.m211-note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.m211-close { min-height: 44px; }
@media (max-width: 380px) { .m211-in { padding: 12px; } .m211-img { max-height: 52dvh; } }