.invite-wrap {

    max-width: 1000px;

    margin: 0 auto;

    padding: 20px 15px 60px;

}

.invite-header-card {

    background: linear-gradient(135deg, #FF0036, #FF5E62);

    border-radius: 16px;

    padding: 30px 20px;

    color: #fff;

    text-align: center;

    box-shadow: 0 10px 20px rgba(255, 0, 54, 0.2);

    margin-bottom: 20px;

}

.invite-title {

    font-size: 24px;

    font-weight: bold;

    margin-bottom: 10px;

}

.invite-desc {

    font-size: 14px;

    opacity: 0.9;

    margin-bottom: 20px;

}

.invite-data-row {

    display: flex;

    justify-content: center;

    gap: 40px;

    background: rgba(255,255,255,0.15);

    border-radius: 12px;

    padding: 15px;

}

.invite-data-item .val {

    font-size: 22px;

    font-weight: bold;

    margin-bottom: 4px;

}

.invite-data-item .lbl {

    font-size: 12px;

    opacity: 0.8;

}

.text-gold {

    color: #FFD700 !important;

}

.invite-code-card {

    background: #fff;

    border-radius: 16px;

    padding: 24px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.05);

    margin-bottom: 20px;

    text-align: center;

}

.section-title {

    font-size: 16px;

    color: #333;

    margin-bottom: 15px;

}

.code-display {

    font-size: 32px;

    font-weight: bold;

    color: #FF0036;

    letter-spacing: 4px;

    margin-bottom: 20px;

}

.link-box {

    display: flex;

    border: 1px solid #E5E7EB;

    border-radius: 8px;

    overflow: hidden;

    margin: 0 auto 24px;

    max-width: 600px; /* 限制宽度，更显精致 */

    background: #F9FAFB;

}

.link-box input {

    flex: 1;

    border: none;

    padding: 12px;

    font-size: 14px;

    color: #666;

    outline: none;

    background: #F9FAFB;

}

.btn-copy {

    background: #FF0036;

    color: #fff;

    border: none;

    padding: 0 20px;

    font-size: 14px;

    cursor: pointer;

    font-weight: bold;

}

.qrcode-wrap {

    display: inline-block;

    padding: 10px;

    border: 1px solid #E5E7EB;

    border-radius: 8px;

}

.qrcode-wrap p {

    margin-top: 10px;

    font-size: 12px;

    color: #999;

}



/* ========= 高颜值海报按钮 ========= */

.btn-poster {

    display: block !important;

    width: 100% !important;

    max-width: 280px !important;

    margin: 20px auto 0 !important;

    padding: 14px 0 !important;

    background: linear-gradient(90deg, #FF416C 0%, #FF4B2B 100%) !important;

    color: #fff !important;

    font-size: 16px !important;

    font-weight: 700 !important;

    border: none !important;

    border-radius: 50px !important;

    box-shadow: 0 6px 16px rgba(255, 65, 108, 0.4) !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;

    text-align: center !important;

    outline: none !important;

}

.btn-poster:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 8px 20px rgba(255, 65, 108, 0.6) !important;

}

.btn-poster:active {

    transform: translateY(1px) !important;

}



/* ========= 海报弹窗样式 ========= */

#poster-modal {

    background: rgba(0,0,0,0.85) !important;

    backdrop-filter: blur(5px);

}

#btn-close-poster {

    margin-top: 20px; padding: 12px 40px; border: none; border-radius: 30px; background: #fff; color: #333; font-weight: bold; font-size: 15px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: transform 0.1s;

}

#btn-close-poster:active { transform: scale(0.95); }



.invite-tabs {

    display: flex;

    background: #fff;

    border-radius: 12px;

    padding: 5px;

    margin-bottom: 15px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.03);

}

.invite-tabs .tab {

    flex: 1;

    text-align: center;

    padding: 12px 0;

    font-size: 15px;

    color: #666;

    cursor: pointer;

    border-radius: 8px;

    transition: all 0.2s;

}

.invite-tabs .tab.active {

    background: #FFF0F3;

    color: #FF0036;

    font-weight: bold;

}

.list-wrap {

    background: #fff;

    border-radius: 12px;

    padding: 15px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.05);

}

.data-table {

    width: 100%;

    border-collapse: collapse;

    text-align: left;

}

.data-table th {

    padding: 12px 8px;

    color: #999;

    font-size: 13px;

    font-weight: normal;

    border-bottom: 1px solid #E5E7EB;

}

.data-table td {

    padding: 15px 8px;

    font-size: 14px;

    color: #333;

    border-bottom: 1px solid #F3F4F6;

}

.data-table tr:last-child td {

    border-bottom: none;

}

.loading-text {

    text-align: center;

    color: #999;

    padding: 30px !important;

}

.pagination {

    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: 20px;

}

.pagination button {

    padding: 6px 12px;

    border: 1px solid #E5E7EB;

    background: #fff;

    border-radius: 4px;

    cursor: pointer;

    color: #333;

}

.pagination button.active {

    background: #FF0036;

    color: #fff;

    border-color: #FF0036;

}


/* ========= 分享按钮区 ========= */

.share-actions {

    display: flex;

    justify-content: center;

    gap: 25px;

    margin-top: 15px;

    margin-bottom: 10px;

}

.share-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    cursor: pointer;

}

.share-item span {

    font-size: 12px;

    color: #E5E7EB;

    margin-top: 8px;

}

.icon-wrap {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    color: #fff;

    background: #fff;

    transition: transform 0.2s;

}

.share-item:active .icon-wrap {

    transform: scale(0.9);

}

.bg-wechat { background: #07C160; }

.bg-moments { background: #111; }

.bg-copy { background: #3B82F6; }

.bg-native { background: #F59E0B; }