/* 邀请有礼入口样式：药丸、整行按钮与首页横幅，均限定在 .invite-entry 作用域内。 */
.invite-entry { display: inline-flex; }
.invite-entry--block { display: block; width: 100%; }
.invite-entry--banner { display: block; width: 100%; }

/* nav 变体（顶栏入口）：安静的白底细描边小卡片——深色粗标题 + 灰色一行说明 + 圆形礼物图标，
   不使用高饱和填充、彩色投影或促销色，只作为"顺手邀请"的轻提示，不与导航和主内容抢焦点。
   文字结构写成「做什么 + 好友得到什么」，只说对所有人都成立的部分，不做奖励叫卖。 */
.invite-entry-pill { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 14px; border: 1px solid rgba(99, 102, 241, .16); border-radius: 14px; background: #fff; cursor: pointer; text-align: left; box-shadow: 0 6px 18px -12px rgba(79, 70, 229, .45); transition: border-color .16s ease, box-shadow .16s ease; }
.invite-entry-pill:hover { border-color: rgba(99, 102, 241, .3); box-shadow: 0 10px 24px -14px rgba(79, 70, 229, .5); }
.invite-entry-pill:focus-visible { outline: 3px solid #c7d2fe; outline-offset: 2px; }
.invite-entry-pill-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.invite-entry-pill-title { font-size: 14px; font-weight: 700; line-height: 1.25; color: #0f172a; white-space: nowrap; }
.invite-entry-pill-sub { margin-top: 1px; font-size: 11px; line-height: 1.25; color: #94a3b8; white-space: nowrap; }
.invite-entry-pill-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; background: #f8fafc; border: 1px solid rgba(99, 102, 241, .14); }

.invite-entry-block { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 8px; padding: 12px 14px; border: 0; border-radius: 14px; color: #fff; text-align: left; cursor: pointer; background: linear-gradient(115deg, #7c3aed, #d946ef); box-shadow: 0 6px 16px rgba(124, 58, 237, .25); }
.invite-entry-block:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
.invite-entry-block-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; background: rgba(255, 255, 255, .22); }
.invite-entry-block-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.invite-entry-block-text strong { font-size: 15px; font-weight: 700; }
.invite-entry-block-text small { font-size: 12px; opacity: .9; }

.invite-entry-banner { position: relative; margin: 22px 0 6px; padding: 26px 28px; border-radius: 22px; overflow: hidden; color: #fff; background: linear-gradient(120deg, #6d28d9, #9333ea 55%, #db2777); box-shadow: 0 18px 44px -20px rgba(109, 40, 217, .55); }
.invite-entry-banner-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .28), transparent 55%); }
.invite-entry-banner-body { position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.invite-entry-banner-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; background: rgba(255, 255, 255, .2); }
.invite-entry-banner-text { flex: 1; min-width: 220px; }
.invite-entry-banner-title { margin: 0 0 6px; font-size: 19px; font-weight: 800; line-height: 1.4; }
.invite-entry-banner-desc { margin: 0; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .9); }
.invite-entry-banner-actions { flex-shrink: 0; }
.invite-entry-banner-btn { color: #6d28d9 !important; font-weight: 700; text-transform: none; background: #fff !important; box-shadow: 0 8px 20px rgba(15, 23, 42, .18); }

/* 中等宽度（顶栏最拥挤的区间）：收起说明文字、压缩为单行，保证一级导航不被挤掉。 */
@media (max-width: 1279px) {
  .invite-entry-pill { height: 38px; gap: 8px; padding: 0 10px 0 12px; }
  .invite-entry-pill-sub { display: none; }
  .invite-entry-pill-icon { width: 24px; height: 24px; }
}
@media (max-width: 600px) {
  .invite-entry-banner { padding: 20px 18px; border-radius: 18px; }
  .invite-entry-banner-title { font-size: 17px; }
  .invite-entry-banner-icon { width: 46px; height: 46px; border-radius: 14px; }
  .invite-entry-banner-actions { width: 100%; }
  .invite-entry-banner-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .invite-entry-pill { transition: none; }
}