/* =====================================================================
   ShotGram v102 — profile QR / share screen, and the public profile page.
   ===================================================================== */

/* ---- QR share screen ------------------------------------------------- */
body.qr-open { overflow: hidden; }
.qr-screen {
  position: fixed; inset: 0; z-index: 1700;
  display: flex; flex-direction: column;
  background: var(--qr-bg, linear-gradient(160deg, #1b1446, #6d28d9, #db2777));
  color: #fff; opacity: 0; transition: opacity .2s ease, background .35s ease;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.qr-screen.open { opacity: 1; }
.qr-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.qr-top b { flex: 1; text-align: center; font-size: 16px; }
.qr-close, .qr-top-spacer { width: 40px; height: 40px; flex: none; }
.qr-close {
  border-radius: 50%; border: 0; color: #fff; display: grid; place-items: center;
  background: rgba(255, 255, 255, .16);
}
.qr-close svg { width: 20px; height: 20px; }
.qr-body {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding: 8px 18px 22px;
}
.qr-card {
  position: relative; width: min(340px, 100%); margin-top: 26px;
  padding: 46px 18px 18px; border: 0; border-radius: 28px; cursor: pointer;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff;
}
.qr-card:active { transform: scale(.985); }
.qr-avatar { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); }
.qr-avatar .avatar { box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 8px 20px rgba(0, 0, 0, .3); }
.qr-canvas { display: block; border-radius: 22px; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.qr-name { font-size: 20px; font-weight: 800; letter-spacing: .01em; margin-top: 4px; }
.qr-sub { font-size: 14px; opacity: .85; margin-top: -6px; }
.qr-hint { font-size: 12px; opacity: .7; }
.qr-swatches { display: flex; gap: 10px; }
.qr-swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5);
  background: linear-gradient(135deg, var(--sw1), var(--sw2)); cursor: pointer;
}
.qr-swatch.on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); transform: scale(1.08); }
.qr-actions { display: flex; gap: 10px; width: min(340px, 100%); }
.qr-act {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border-radius: 18px; border: 0; color: #111;
  background: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
.qr-act svg { width: 22px; height: 22px; }
.qr-act:active { transform: scale(.97); }
.qr-url { font-size: 12.5px; opacity: .75; }

/* ---- public profile page (?u=username, signed-out visitors) ----------- */
.pub-profile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 16px 8px; }
.pub-profile .pub-avatar { width: 92px; height: 92px; font-size: 34px; }
.pub-p-name { margin: 6px 0 0; font-size: 21px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.pub-tick svg { width: 18px; height: 18px; color: #3b82f6; fill: #3b82f6; stroke: #fff; }
.pub-p-user { color: var(--muted, #8a8fa3); font-size: 14px; }
.pub-p-bio { margin: 6px 0 0; max-width: 520px; white-space: pre-wrap; line-height: 1.5; }
.pub-p-stats { display: flex; gap: 26px; margin: 12px 0 6px; }
.pub-p-stats div { display: grid; }
.pub-p-stats b { font-size: 17px; }
.pub-p-stats span { font-size: 12.5px; color: var(--muted, #8a8fa3); }
.pub-p-actions { display: flex; gap: 8px; width: min(420px, 100%); margin-top: 6px; }
.pub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 14px 0 0; }
.pub-tile { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: var(--surface, #111320); overflow: hidden; cursor: pointer; }
.pub-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-tile-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted, #8a8fa3); }
.pub-tile-badge { position: absolute; top: 6px; inset-inline-end: 6px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.pub-tile-badge svg { width: 18px; height: 18px; }
.pub-cta { display: grid; justify-items: center; gap: 10px; padding: 26px 16px 34px; text-align: center; }

/* ---- v103 · "Your video is ready → Save video" (iPhone share sheet) ---- */
.save-ready {
  position: fixed; z-index: 1900; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  width: min(420px, calc(100% - 24px));
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 16px; border-radius: 18px; color: #fff;
  background: rgba(22, 23, 38, .96); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.save-ready span { flex: 1; font-weight: 700; font-size: 14px; }
.save-ready-go { border: 0; border-radius: 12px; padding: 10px 16px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--violet, #8b5cff), var(--cyan, #00d8ff)); }
.save-ready-x { border: 0; background: none; color: #aeb3cf; font-size: 22px; width: 32px; height: 32px; }