.invite-view [hidden] { display: none !important; }
.invite-view .af-scroll { padding: 26px 18px 36px; }
.invite-hero { text-align: center; padding: 10px 0 26px; }.invite-hero > span { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; color: #95a1ff; background: linear-gradient(135deg,#5266f529,#9366e529); font-size: 30px; margin-bottom: 18px; }.invite-hero h3 { margin: 0; font-size: 22px; letter-spacing: -.4px; }.invite-hero p { margin: 10px 0 0; font-size: 13px; line-height: 1.8; color: var(--text-secondary); }
.invite-entry, .invite-preview { border: 1px solid var(--card-border); background: var(--card-bg); border-radius: 18px; padding: 18px; }.invite-entry label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; }.invite-entry input { display: block; width: 100%; border: 1px solid var(--border); border-radius: 11px; padding: 14px 12px; font: inherit; font-size: 14px; background: var(--page-background); color: var(--text-primary); box-sizing: border-box; }.invite-entry input:focus { outline: 2px solid #697dff; outline-offset: 1px; }
.invite-entry button, .invite-confirm { display: flex; width: 100%; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px; border-radius: 11px; border: 0; margin-top: 14px; background: var(--primary-blue); color: white; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }.invite-entry button > span { font-size: 18px; }.invite-view button:disabled { opacity: .5; cursor: default; }
.invite-preview { margin-top: 16px; padding: 0 18px 18px; overflow: hidden; }.invite-verified { display: flex; align-items: center; gap: 6px; color: #71ad99; font-size: 11px; border-bottom: 1px solid var(--border); padding: 13px 0; }.invite-verified span { font-size: 16px; }.invite-person { display: flex; gap: 12px; align-items: center; padding: 20px 0 18px; }.invite-person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }.invite-person div { min-width: 0; }.invite-person h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }.invite-person p { color: var(--text-secondary); font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; }
.invite-benefit { padding: 13px 14px; border-radius: 11px; background: #6877ff10; border: 1px solid #7f8bff22; }.invite-benefit > span { color: #8599ff; font-size: 14px; font-weight: 650; }.invite-benefit p { margin: 7px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }.invite-preview[data-tier="premium"] .invite-benefit > span, .invite-preview[data-tier="private_custom"] .invite-benefit > span { color: #b78be9; }.invite-preview[data-tier="svip"] .invite-benefit > span { color: #c8a96a; }
.invite-note { font-size: 12px; line-height: 1.8; color: var(--text-secondary); margin: 12px 0 0; }.invite-error { padding: 12px; margin: 14px 0; border-radius: 10px; border: 1px solid #b65e6633; background: #b65e6610; color: #cf7980; font-size: 13px; line-height: 1.7; }.invite-help { display: flex; align-items: flex-start; gap: 7px; margin: 24px 4px 0; color: var(--text-muted); }.invite-help > span { font-size: 16px; margin-top: 2px; }.invite-help p { margin: 0; font-size: 11px; line-height: 1.8; }