.group-join{--group-name-size: 25px;--group-avatar-size: 42px;box-sizing:border-box;display:flex;flex-direction:column;min-height:100vh;background:#f7f7f7;color:#333;padding:52px 25px calc(80px + env(safe-area-inset-bottom,0px));text-align:center;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif;font-size:14px;font-weight:400;line-height:24px;font-synthesis:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}.group-join .group-membership{margin:12px auto 0;color:#888;text-align:center;font-size:14px;line-height:20px}.group-join .group-feedback{max-width:420px;margin:14px auto;text-align:center;font-size:14px;color:#56657a}.group-join .feedback-form{display:grid;gap:12px;padding:16px;background:#f3f7fc;border-radius:12px}.group-join .feedback-form select{min-height:42px;padding:8px;font:inherit;border:1px solid #cbd7e9;border-radius:6px}.group-join .share-panel{max-width:420px;margin:0 auto;font-size:14px;line-height:1.7}.group-join .share-panel h2{font-size:18px}.group-join .share-card-preview{background:white;border-radius:12px;padding:18px;text-align:left}.group-join .share-card-preview strong{display:block;font-size:17px}.group-join .share-card-preview div{display:flex;align-items:center;gap:16px;margin-top:10px;color:#999}.group-join .share-card-preview span{flex:1}.group-join .share-card-preview img{width:64px;height:64px;object-fit:cover}.group-join .share-guide{color:#888}.group-join .share-address{overflow-wrap:anywhere}.group-join .group-heading{display:flex;align-items:center;justify-content:center;gap:14px;max-width:430px;width:100%;margin:0 auto;min-height:var(--group-avatar-size)}.group-join .group-avatar{width:var(--group-avatar-size);height:var(--group-avatar-size);border-radius:3px;object-fit:cover;flex:none}.group-join h1{flex:0 1 auto;min-width:0;font-size:var(--group-name-size);line-height:1.35;font-weight:700;letter-spacing:0;margin:0;text-align:left;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.group-join .group-subtitle{color:#888;font-size:16px;font-weight:400;letter-spacing:0;line-height:1.2;margin:16px 0 35px;overflow-wrap:anywhere;min-height:1.2em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.group-join .group-code-card{position:relative;background:#fff;border-radius:17px;padding:14px;width:min(100%,304px);flex-shrink:0;box-sizing:border-box;margin:0 auto;box-shadow:0 8px 30px #0000000e}.group-join .group-code-surface{position:relative;aspect-ratio:1}.group-join .group-qrcode{position:absolute;inset:0;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;user-select:auto;-webkit-touch-callout:default;opacity:0;transition:opacity .12s ease-out;pointer-events:none;z-index:1}.group-join .group-qrcode-ready{opacity:1;pointer-events:auto;z-index:2}.group-join .group-empty{position:absolute;inset:0;display:flex;aspect-ratio:1;flex-direction:column;justify-content:center;align-items:center;gap:8px}.group-join .group-loading-text{color:#999;font-size:16px;font-weight:400;line-height:1.5}.group-join .group-notice-pending{visibility:hidden;width:242px}.group-join .group-empty p{margin:0;font-size:16px}.group-join .group-empty-detail{color:#888;font-size:13px!important;line-height:1.6}.group-join .group-hint{background:#f0f7ff;border-radius:999px;padding:10px 20px;width:max-content;min-width:min(100%,322px);max-width:min(calc(100% + 8px),384px);box-sizing:border-box;position:relative;left:50%;transform:translate(-50%);margin:26px auto 0 0;color:#2877ff}.group-join .group-hint p{font-size:20px;line-height:1.2;font-weight:500;margin:0}.group-join .group-hint-tail{white-space:nowrap}.group-join .group-validity{position:absolute;top:100%;left:0;width:100%;margin:2px 0 0;font-size:12px;line-height:18px;font-weight:400}.group-join .group-notice{display:table;max-width:100%;margin:10px auto 0;text-align:left;color:#ff6565;font-size:15px;line-height:24px;overflow-wrap:anywhere}.group-join .group-notice p{margin:0;white-space:pre-wrap}.group-join .group-hint~.group-notice{margin-top:35px}.group-join .group-footer{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));transform:translate(-50%);width:calc(100% - 40px);max-width:490px;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:6px;margin:0;color:#b1b1b1;font-size:12px;line-height:normal}.group-join .group-footer-icon{width:14px;height:14px}.group-join .group-actions{display:flex;justify-content:center;gap:20px;align-items:center;margin-top:18px}.group-join .group-retry{background:#2877ff;color:#fff;border:0;border-radius:22px;padding:9px 22px;font-size:15px}.group-join .group-support{color:#2877ff;font-size:15px}.group-join .group-status-refresh{border:0;background:transparent;padding:4px;color:#2877ff;font-size:13px}.group-join .group-retry:focus-visible,.group-join .group-status-refresh:focus-visible,.group-join .group-support:focus-visible{outline:2px solid #2877ff;outline-offset:4px}@media (max-width: 400px){.group-join{--group-name-size: 24px}}@media (max-width: 360px){.group-join{--group-name-size: 20px;--group-avatar-size: 36px;padding:28px 20px calc(80px + env(safe-area-inset-bottom,0px))}.group-join .group-hint{padding:10px 12px}.group-join .group-hint p{font-size:18px}}@media (min-width: 540px){.group-join{--group-name-size: 28px;--group-avatar-size: 48px;padding-top:52px}.group-join .group-code-card{width:350px;padding:24px}}@media (prefers-reduced-motion: reduce){.group-join .group-qrcode{transition:none}}