/* Join card: Apple-inspired material, animate only the frame, never QR pixels. */
.stats--three > .stat:first-child { grid-column: 1 / -1; }
.stats--three > .stat:first-child .stat-num { font-size: 58px; }
.join-qr { text-align: center; padding: 0 0 12px; }
.join-qr-intro { color: var(--text-2); margin: 0 0 24px; font-size: 15px; }
.join-qr-title { font-size: 16px; font-weight: 500; color: var(--strong); margin: 0 0 18px; }
.join-qr-visual { position: relative; width: min(252px, 100% - 24px); aspect-ratio: 1; margin: 0 auto; padding: 3px; isolation: isolate; }
.join-qr-orbit { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: rgb(74 132 210 / .18); pointer-events: none; z-index: -1; }
.join-qr-orbit::before { content: ""; position: absolute; inset: -45%; background: conic-gradient(from 0deg, transparent 0deg 160deg, #6dacf5 190deg, #d1ebff 212deg, transparent 242deg 360deg); animation: qr-orbit 10s linear infinite; animation-play-state: paused; }
body.sheet-open #sheet .join-qr-orbit::before, .join-qr--inline .join-qr-orbit::before { animation-play-state: running; }
.join-qr-paper { width: 100%; height: 100%; display: grid; place-items: center; padding: 20px; border: 1px solid rgb(255 255 255 / .95); border-radius: 25px; background: #fff; box-shadow: 0 14px 35px -20px rgb(18 69 129 / .3); }
.join-qr-image { display: block; width: 100%; height: 100%; object-fit: contain; user-select: auto; -webkit-user-select: auto; }
/* Crop the supplied portrait card in CSS only. Saving still returns the original.
 * Source: 1284 x 2283; a ~970 px square around the full QQ code + quiet zone.
 */
.join-qr-crop { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; background: #2d232d; }
.join-qr-crop .join-qr-image { position: absolute; max-width: none; width: 132.4%; height: auto; left: 50%; top: 50%; transform: translate(-50%, -52%); }
.join-qr-group { margin: 4px 0 0; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.join-qr-pending { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #5b708c; }
.join-qr-pending > span { font-size: 32px; line-height: 1; color: #3975bd; font-weight: 300; margin-bottom: 4px; }
.join-qr-pending strong { font-size: 15px; font-weight: 500; }
.join-qr-pending small { font-size: 12px; color: #6a7b91; }
.join-qr-corner { position: absolute; width: 20px; height: 20px; border-color: var(--accent); border-style: solid; pointer-events: none; }
.join-qr-corner--tl { top: -8px; left: -8px; border-width: 1.5px 0 0 1.5px; border-radius: 8px 0 0; }
.join-qr-corner--br { bottom: -8px; right: -8px; border-width: 0 1.5px 1.5px 0; border-radius: 0 0 8px; }
.join-qr-caption { margin: 22px auto 0; max-width: 300px; color: var(--text-2); font-size: 13px; line-height: 1.8; }
.join-qr-actions { min-height: 24px; margin-top: 10px; }
.join-qr-save { color: var(--accent); font-size: 13px; padding: 8px 12px; display: inline-flex; align-items: center; min-height: 40px; border-radius: 12px; text-decoration: underline; text-underline-offset: 4px; }
.join-qr-save:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.join-qr--inline { padding-top: 4px; }
.join-qr--inline .join-qr-visual { width: min(208px, 100% - 24px); }
.join-qr--inline .join-qr-caption { margin-top: 16px; }
.join-qr--inline .join-qr-actions:empty { display: none; }
#sheet .join-qr-visual { opacity: 0; transform: translateY(8px) scale(.97); transition: transform 250ms var(--ease-out), opacity 250ms var(--ease-out); }
body.sheet-open #sheet .join-qr-visual { opacity: 1; transform: none; }
@keyframes qr-orbit { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .join-card { grid-template-columns: 1fr; padding: 30px 24px; gap: 28px; }
  .join-card h2 { font-size: 28px; }
  .join-right { width: 100%; max-width: 340px; margin: 0 auto; }
  #sheet .join-qr-visual { width: min(236px, 100% - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .join-qr-orbit::before { animation: none; transform: rotate(30deg); }
  #sheet .join-qr-visual { transform: none; transition: opacity 150ms linear; }
}