/* ===========================
   分享弹窗 — 深色玻璃态
=========================== */

#shareMask {
  align-items: flex-end; /* 移动端从底部滑出 */
  justify-content: center;
}

@media (min-width: 768px) {
  #shareMask {
    align-items: center; /* PC 端居中 */
  }
}

.share-modal {
  background: rgba(18,18,36,0.96);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px 22px 32px;
  width: 100%; max-width: 480px;
  position: relative;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.35);
  animation: shareModalIn 0.35s cubic-bezier(.4,0,.2,1);
}

@media (min-width: 768px) {
  .share-modal {
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  }
}

@keyframes shareModalIn {
  from { opacity:0; transform: translateY(100%); }
  to { opacity:1; transform: translateY(0); }
}

/* 标题栏 */
.share-modal-title {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-xl); font-weight: 800; color: var(--text-main);
  margin-bottom: 22px; letter-spacing: -0.3px;
  position: relative;
}
.share-modal-title i:first-child {
  color: var(--primary); font-size: var(--icon-xl);
}
.share-modal-title .btn-modal-close {
  position: absolute; top: 0; right: 0;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted); border-radius: 50%;
  width: clamp(26px, 8.5vw, 32px); height: clamp(26px, 8.5vw, 32px);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-md); cursor: pointer; transition: all 0.2s;
}
.share-modal-title .btn-modal-close:active { background: rgba(255,255,255,0.08); color: var(--text-main); }

/* 二维码区域 */
.share-qrcode-section {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 22px;
}
.share-qrcode-wrap {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.5);
  position: relative;
  overflow: hidden;
}
.share-qrcode-wrap::before {
  content: '';
  position: absolute; top: -30px; left: -30px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(0,230,138,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.share-qrcode-wrap canvas,
.share-qrcode-wrap img {
  display: block; width: clamp(140px, 50vw, 180px) !important; height: clamp(140px, 50vw, 180px) !important;
}
.share-qrcode-hint {
  margin-top: 12px;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-sub); letter-spacing: 0.3px;
}

/* 链接区域 */
.share-link-section {
  display: flex; flex-direction: column; gap: 12px;
}
.share-link-input-wrap {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding-right: 6px;
  transition: border-color 0.25s;
}
.share-link-input-wrap:focus-within {
  border-color: var(--primary);
}
.share-link-input {
  flex:1; background: transparent; border: none; outline: none;
  color: var(--text-muted); font-size: var(--fs-sm); padding: 12px 14px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  letter-spacing: 0.2px;
}
.share-link-input::selection {
  background: rgba(0,230,138,0.25);
}
.btn-share-copy {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--primary); color: #0B1426;
  border: 1.5px solid var(--primary-dark);
  border-radius: 10px; padding: 9px 16px;
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: all 0.2s ease;
  box-shadow: 0 3px 12px rgba(0,230,138,0.18);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.btn-share-copy i { font-size: var(--icon-md); }
.btn-share-copy:active { transform: scale(0.95); opacity: 0.85; }
.btn-share-copy.copied {
  background: #10B981; border-color: #059669;
  animation: copyPulse 0.4s ease;
}
@keyframes copyPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* 奖励提示条 */
.share-bonus-info {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(255,209,102,0.06));
  border: 1px solid rgba(245,158,11,0.15);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--gold);
}
.share-bonus-info i { font-size: var(--icon-md); flex-shrink: 0; }