.invite-promotion { display: grid; grid-template-columns: minmax(0,1fr) minmax(210px,.44fr); gap: 28px; align-items: center; padding: 30px; margin: 24px 0 40px; border: 2px solid #dec775; border-radius: 26px; background: linear-gradient(120deg,#fffdf6,#fff0b6); color: #241234; box-shadow: 0 12px 30px #24123412; }
.invite-kicker { font-weight: 800; color: #6e397d; font-size: .9rem; }
.invite-promotion h2 { margin: 8px 0; font-size: clamp(1.5rem,3vw,2rem); line-height: 1.6; }
.invite-promotion p { margin: 0; line-height: 1.95; color: #5f4b6d; }
.invite-promo-actions { display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }
.invite-promo-actions a { min-height: 44px; display: grid; place-items: center; color: #67267d; font-weight: 800; line-height: 1.7; }
.invite-promo-actions .invite-primary { padding: 14px 20px; border-radius: 15px; background: #241234; color: white; text-decoration: none; }
.invite-promo-actions a:focus-visible, .referral-code-box button:focus-visible { outline: 3px solid #67267d; outline-offset: 4px; }
.invite-guide-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
#quick-guide { scroll-margin-top: 135px; }
.invite-guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.invite-guide-steps li, .invite-video-card { border: 2px solid #2412341a; border-radius: 20px; padding: 20px; background: #fffdf6; }
.invite-guide-steps strong { font-size: 1.13rem; }
.invite-guide-steps p { margin: 8px 0 0; color: #5f4b6d; }
.invite-video-card video { width: 100%; aspect-ratio: 4/3; display: block; border-radius: 12px; background: #fff3cf; }
.invite-video-card p, .invite-privacy { font-size: .92rem; color: #5f4b6d; line-height: 1.9; }
.invite-video-card a { color: #67267d; text-decoration: underline; }
.referral-code-box { flex-wrap: wrap; gap: 10px; }
.referral-code-box button { min-height: 44px; margin: 4px; }
#referralCopyStatus:empty { display: none; }
#referralCopyStatus { font-size: .9rem; overflow-wrap: anywhere; }
@media (max-width: 800px) { .invite-promotion, .invite-guide-layout { grid-template-columns: 1fr; } .invite-promotion { padding: 22px; } }