/* ================= SHOW OFF A PULL ================= */
.sharemodal{width:min(340px,calc(100vw - 36px));text-align:center;padding:46px 16px 16px}

/* The frame holds the real composed PNG at 4:5, so what you see is the file.
   A CSS mock here would drift from the canvas and nobody would notice until
   somebody posted the wrong one. */
.shp-frame{position:relative;width:100%;aspect-ratio:1080/1350;border-radius:12px;
  overflow:hidden;background:#0b0e20;border:1px solid var(--line)}
.shp-img{width:100%;height:100%;object-fit:contain;display:block;
  opacity:0;transition:opacity .25s ease}
.shp-img.ready{opacity:1}
.shp-load{position:absolute;inset:0;display:grid;place-items:center;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6d76ab}

.shp-id{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:14px 0 4px;padding:11px 13px;border-radius:10px;
  background:#161a38;border:1px solid var(--line);text-align:left;cursor:pointer}
.shp-id b{display:block;font-size:13px;font-weight:600;color:#e8ebff}
.shp-id em{display:block;font-style:normal;font-size:11px;color:#7c84ad;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}

.shp-actions{display:flex;gap:9px;margin-top:12px}
.shp-actions .btn{flex:1}
.shp-note{margin-top:10px;font-size:11px;line-height:1.55;color:#8a93c8;display:none}

/* The button icon. The generic ↗ export arrow is the same glyph every app in
   the world uses; this is a card with a spark on it, drawn in the same stroke
   style as the padlock already on these cells, so it reads as "make a picture
   of this card" and belongs to this app rather than to a icon set. */
.shico{display:inline-block;width:17px;height:17px;vertical-align:-3px;margin-right:7px}
.shico svg{width:100%;height:100%;display:block}