.profile-editor, .my-qr-view, .qr-scanner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.profile-avatar-preview { width: 128px; height: 128px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #e5efea; color: #47705b; font-size: 42px; font-weight: 700; }
.profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-display-name { font-size: 17px; color: #193b2b; }
.profile-handle, .profile-hint, .my-qr-view > span { color: #687c73; font-size: 12px; }
.profile-hint { max-width: 340px; line-height: 1.65; margin: 0; }
.profile-actions { width: 100%; display: flex; gap: 9px; margin-top: 5px; }
.profile-actions button { margin-top: 0; min-height: 44px; }
.profile-actions .secondary-btn { flex: 1; }
.profile-actions .primary-btn { flex: 1; }
.profile-status { min-height: 19px; margin: 0; color: #597268; font-size: 12px; }
.my-qr-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #e4eee9; }
.my-qr-image { width: min(280px, 72vw); height: auto; image-rendering: pixelated; border: 1px solid #edf2ee; border-radius: 8px; padding: 10px; background: white; }
.my-qr-view strong { color: #193b2b; font-size: 16px; }
.my-qr-view p { max-width: 340px; margin: 0; color: #687c73; font-size: 12px; line-height: 1.65; }
.my-qr-view > .modal-actions { width: 100%; flex-wrap: wrap; justify-content: center; }
.my-qr-view > .modal-actions button { flex: 1 1 120px; height: auto; min-height: 44px; padding: 10px 14px; overflow-wrap: anywhere; }
.profile-display-name, .profile-handle, .my-qr-view > strong, .my-qr-view > span { max-width: 100%; overflow-wrap: anywhere; }
.qr-payload { max-width: 100%; overflow-wrap: anywhere; color: #87958e; font-size: 10px; }
.qr-scanner { align-items: stretch; }
.qr-scanner video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: #10241d; }
.qr-scanner p { min-height: 20px; margin: 0; text-align: center; color: #687c73; font-size: 12px; line-height: 1.5; }
.qr-upload-label { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-top: 0; }
.qr-scanner > [data-close-modal] { margin-top: 0; }
@media (max-width: 500px) { .profile-actions { flex-direction: column; } .profile-actions button { flex: none; } .my-qr-image { width: min(240px, 68vw); } }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }