.join-group-page{min-height:calc(100vh - 200px);padding:3rem 0;background:linear-gradient(135deg,var(--bg-warm,#f8f6f2) 0,var(--bg-light,#fafafa) 100%)}.join-group-header{text-align:center;margin-bottom:3rem}.join-group-header h1{font-size:2.5rem;color:var(--text-dark,#333);margin-bottom:1rem;font-weight:700}.join-subtitle{font-size:1.125rem;color:var(--text-medium,#666);max-width:600px;margin:0 auto;line-height:1.6}.join-group-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));grid-gap:2.5rem;gap:2.5rem;max-width:1000px;margin:0 auto}.join-card{background:var(--bg-white,#fff);border-radius:var(--radius-lg,16px);padding:2.5rem;text-align:center;box-shadow:var(--shadow-card,0 4px 6px rgba(0,0,0,.1));transition:all .3s ease;border:2px solid transparent}.join-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover,0 8px 16px rgba(0,0,0,.15));border-color:var(--accent-color,#6b8e6b)}.wechat-card{background:linear-gradient(135deg,#fff,#f0f8f0)}.line-card{background:linear-gradient(135deg,#fff,#f0fff0)}.join-card-icon{font-size:4rem;margin-bottom:1rem;display:block}.join-card h2{font-size:1.75rem;color:var(--text-dark,#333);margin-bottom:.75rem;font-weight:600}.join-card-desc{font-size:1rem;color:var(--text-medium,#666);margin-bottom:2rem;line-height:1.6}.qr-container{display:flex;justify-content:center;align-items:center;min-height:250px;margin:1.5rem 0}.qr-code-image{max-width:250px;max-height:250px;width:100%;height:auto;border-radius:var(--radius-md,8px);border:2px solid var(--border-color,#e0e0e0);box-shadow:0 2px 8px rgba(0,0,0,.1)}.qr-placeholder-box{width:250px;height:250px;background:var(--bg-light,#f5f5f5);border:2px dashed var(--border-color,#ddd);border-radius:var(--radius-md,8px);display:flex;align-items:center;justify-content:center;margin:0 auto}.qr-placeholder-content{text-align:center;padding:1rem;color:var(--text-light,#999)}.qr-placeholder-icon{font-size:3.5rem;margin-bottom:.5rem;opacity:.6}.qr-placeholder-text-inner{font-size:.9375rem;margin-bottom:.25rem;color:var(--text-medium,#666)}.qr-placeholder-size{font-size:.8125rem;color:var(--text-light,#999);opacity:.7}.line-button-container{margin-bottom:1.5rem}.line-join-button{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2.5rem;font-size:1.125rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#00c300,#00b300);border:none;border-radius:var(--radius-xl,50px);cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px rgba(0,195,0,.3);margin-bottom:.75rem;width:100%;justify-content:center}.line-join-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,195,0,.4);background:linear-gradient(135deg,#00d300,#00c300)}.line-join-button:active{transform:translateY(0)}.line-button-icon{font-size:1.5rem}.line-button-note{font-size:.875rem;color:var(--text-medium,#666);text-align:center;margin:0}.join-card-note{font-size:.9375rem;color:var(--text-light,#666);margin-top:1.5rem;line-height:1.6}@media (max-width:768px){.join-group-page{padding:2rem 0}.join-group-header h1{font-size:2rem}.join-subtitle{font-size:1rem;padding:0 1rem}.join-group-content{grid-template-columns:1fr;gap:2rem;padding:0 1rem}.join-card{padding:2rem 1.5rem}.join-card-icon{font-size:3rem}.join-card h2{font-size:1.5rem}.qr-container{min-height:200px}.qr-code-image,.qr-placeholder-box{width:200px;height:200px;max-width:200px;max-height:200px}.line-join-button{padding:.875rem 2rem;font-size:1rem}}