@charset "utf-8";
*{padding: 0;margin: 0;}
button{border: 0;background: none;}
li,ul,ol,dl,dl dt{list-style: none;}
body {margin:0;background:#ffffff;color:#222;line-height: 150%;font-size: 16px;}
a:link {color:#fff;text-decoration:none;}
a:visited {text-decoration:none;color:#fff;}
a:hover {text-decoration:none;color:#fff;}
a:active {text-decoration:none;color:#fff;}

/* 页面基础重置 */
html, body { margin: 0; padding: 0; min-height: 100%; font-family: -apple-system, BlinkMacSystemFont,  sans-serif;  }
body{background-color: #000;}
/* Flex 主容器，占满全屏 100vh / 100dvh */
.share-container { display: flex; flex-direction: column; height: 100vh; height: 100dvh; width: 100%; max-width: 1280px; margin: 0 auto; overflow: hidden; position: relative;
}

/* 顶部  标题栏 */
.share-top-bar { height: 58px; min-height: 58px; background-color: #ffffff; color: #000000; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; border-bottom: 1px solid #e0e0e0; z-index: 20; white-space: nowrap; box-sizing: border-box; padding-top: env(safe-area-inset-top);}

/* 视频主体容器：flex: 1 撑满剩余高度 */
.share-video-wrapper { flex: 1; position: relative; width: 100%; height: 100%; overflow: hidden; background-color: #000; padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; height: calc(100% - env(safe-area-inset-bottom)); }
/* 视频组件占满主体背景 */
.share-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 顶部左侧：主播信息（去掉顶部安全区限制） */
.share-header-left { position: absolute; top: 16px; left: 12px; display: flex; align-items: center; gap: 10px; z-index: 10; }
.share-header-left2 { position: absolute; top: 22px; left: 12px; display: flex; align-items: center; gap: 10px; z-index: 10; }

/* 头像独立外层 DIV */
.share-avatar-wrapper { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); }

.share-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }

.share-username { color: #ffffff; font-size: 14px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.3); white-space: nowrap; max-width: 230px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }

/* 直播标签 */
.share-live-badge { position: absolute; top: 47px; left: 16px; font-size: 11px; font-weight: bold; padding: 3px 0px; border-radius: 12px; display: flex; align-items: center; gap: 4px; z-index: 10; white-space: nowrap; }

.share-live-badge img { height: 20px; width: auto; }

.share-live-badge2 { position: absolute; top: 66px; left: 16px; font-size: 11px; font-weight: bold; padding: 3px 0px; border-radius: 12px; display: flex; align-items: center; gap: 4px; z-index: 10; white-space: nowrap; }

.share-live-badge2 img { height: 20px; width: auto; }


/* 顶部右侧：在线人数 */
.share-viewer-count { position: absolute; top: 16px; right: 12px; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); color: #ffffff; padding: 4px 7px; border-radius: 16px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 5px; z-index: 10; white-space: nowrap; }

.share-viewer-count img { height: 20px; width: auto; margin-bottom: -5px; }

.share-viewer-count2 { position: absolute; top: 30px; right: 12px; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); color: #ffffff; padding: 3px 7px; border-radius: 16px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 5px; z-index: 10; white-space: nowrap; }

.share-viewer-count2 img { height: 20px; width: auto; margin-bottom: -5px; }




/* 底部按钮 (保持适配手机底部小黑条安全区) */
.share-download-content{position: absolute; bottom: calc(90px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: 90%; max-width: 400px;text-align: center;display: flex;flex-direction: column;gap:21px;}

.share-download-btn {  height: 50px; background: linear-gradient( 270deg, #B351F5 0%, #6759FE 100%);color: #ffffff; border: none; border-radius: 38px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 15px rgba(112, 66, 255, 0.4); z-index: 10; text-decoration: none; white-space: nowrap; }

.share-download-btn img { height: 25px; width: auto; }

.share-download-btn:active { transform:scale(0.98); }
.linkexpired{text-align: center;}
.linkexpired span{border-radius: 7px;background: #EF4855;font-size: 14px;text-align: center;color: #fff;padding: 3px 12px;}
/*直播结束显示页面*/
.share-ended-wrapper{flex: 1; position: relative; width: 100%; height: 100%; overflow: hidden; background:url(../images/bg1.jpg);background-size:cover;padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; height: calc(100% - env(safe-area-inset-bottom));}
/* 中间主体内容区域 */
.share-ended-content { display: flex; flex-direction: column; align-items: center; width: 100%; margin: auto 0; height:100vh;justify-content: center;gap:3%;}

/* 头像外层 DIV */
.share-ended-avatar-wrapper { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); margin-bottom: 16px; flex-shrink: 0;}

/* 头像图片 */
.share-ended-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 主播名字 */
.share-ended-username { color: #ffffff; font-size: 16px; font-weight: 600; text-align: center;  white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }

/* 二维码容器 */
.share-ended-qrcode-wrapper { width: 148px; height: 148px;  border-radius: 12px; padding: 10px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 11px rgba(0,0,0,0.2); flex-shrink: 0; }

/* 二维码图片 */
.share-ended-qrcode-wrapper  img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 底部下载按钮 */
.share-download-btn2 {width: 90%; max-width: 400px; height: 52px; background: linear-gradient( 270deg, #B351F5 0%, #6759FE 100%);color: #ffffff; border: none; border-radius: 38px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 15px rgba(112, 66, 255, 0.4); z-index: 10; text-decoration: none; white-space: nowrap;margin-top: 21px;}

.share-download-btn2 img { height: 25px; width: auto; }

.share-download-btn2:active { transform: scale(0.98); }
.share-download-end{width: 100%;display: flex;justify-content: center;flex-direction: column;align-items: center; margin-top: 10%;}

/*普通观众分享*/
.viewer-sharing-wrapper{padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-top);}
.viewer-sharing-img{object-fit: cover;width: 100%;height: 100%;}
.share-app-info { display: flex; align-items: center; gap: 20px; position: absolute;top:80px;left:40px;z-index: 999;}
.share-app-icon-wrapper { width: 63px; height: 63px; border-radius: 10px; overflow: hidden; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.share-app-icon { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-app-meta { display: flex; flex-direction: column; justify-content: center;margin-top: -5px; }
.share-app-title { color: #ffffff; font-size: 30px; font-weight: 700; line-height: 1.1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); letter-spacing: 0.3px; }
.share-app-subtitle { color: rgba(255, 255, 255, 0.9); font-size: 20px; font-weight: 400; line-height: 1.3; margin-top: 2px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }


.sharevideobutton{position: relative;  width: 90%; max-width: 400px;text-align: center;display: flex;flex-direction: column;gap:21px;padding-top: 39px;}
.share-main{position: absolute;left:0;right:0;top:0;bottom:0;display: flex;justify-content:center;flex-direction: column;align-items: center;}
.share_video_area{aspect-ratio: 9 / 14;width: 100%;}
.share-video-main{position: relative;width: 300px;max-width:300px;}
.share-text{color: #fff;font-size: 13px;line-height: 120%;}
.share-video2{width: 100%;height: 100%;object-fit: cover;}



/*My invitation*/

.myinvitation-main-container { max-width: 1280px; margin: 0 auto;  background: #6a6ee2; display: flex; flex-direction: column; position: relative; padding-bottom: calc(90px + env(safe-area-inset-bottom)); }

/* 顶部 标题栏 (含安全区) */
.myinvitation-top-bar { height: calc(58px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background-color: #ffffff; color: #000000; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; position: sticky; top: 0; z-index: 100; box-sizing: border-box; }
.myinvitation-top-bar .title{width: 100%;text-align: center;line-height: 58px;position: relative;}
.myinvitation-top-bar .back { position: absolute; left: 0; top: 16px; z-index: 939; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; }
.myinvitation-top-bar .back:active{transform: scale(0.94); }
.myinvitation-top-bar .back img{height: 30px;width: auto;}
/* 页面主体背景 & Padding */
.myinvitation-content-wrapper {  display: flex; flex-direction: column;  }

/* 顶部 Banner 区 */
.myinvitation-banner { width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; }
.myinvitation-banner  img{width: 100%;height: auto;}

/* 通用白底圆角卡片 */
.myinvitation-card { background: #ffffff; border-radius: 20px; padding: 20px 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); box-sizing: border-box;margin: 0px 20px;margin-bottom: 16px;}

/* 通用卡片标题 */
.myinvitation-card-title { font-size: 19px; font-weight: 800; color: #262626; text-align: center; margin-bottom: 14px; position: relative; display: inline-block; width: 100%;background: url(../images/myinvitation_2.png) no-repeat center bottom;background-size:108px auto;padding-bottom: 3px;}
.myinvitation-card-subtitle { font-size: 12px; color: #666666; font-weight: 500; text-align: center; margin-top: -10px; margin-bottom: 16px; }

/* Performance Summary 网格 */
.myinvitation-perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; text-align: center; padding-top: 13px;}
.myinvitation-perf-item { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.myinvitation-perf-num-box { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.myinvitation-perf-num { font-size: 22px; font-weight: 800; color: #262626; display: inline-block;position: relative;}
.myinvitation-perf-badge { font-size: 12px; font-weight: 700; color: #52C736; display: flex; align-items: center; gap: 1px; top:-16px;position:absolute;right:-62px;min-width: 59px;text-align: right;}
.myinvitation-perf-badge img{height: 15px;width: auto;}
.rednumber{color: #e63f3f;}
.myinvitation-perf-grid  h4{ font-size: 12px; color: #888888; margin-top: 4px;font-weight: normal;}

/* Rewards Earned 浅紫展示框 */
.myinvitation-reward-box { background: linear-gradient(135deg, #eeeaff 0%, #e8f0ff 100%); border-radius: 14px; padding: 16px; display: flex; align-items: center; justify-content: space-between; }
.myinvitation-reward-left { display: flex; align-items: center; gap: 12px; }
.myinvitation-reward-icon { width: 42px; height: 42px; object-fit: contain; }
.myinvitation-reward-val { font-size: 18px; font-weight: 800; color: #262626; }
.myinvitation-reward-unit { font-size: 12px; color: #8e8e93; margin-top: 2px; }
a.myinvitation-reward-history { font-size: 13px; font-weight: 600; color: #8a64ff; text-decoration: none; display: flex; align-items: center; gap: 2px; }
.myinvitation-reward-history  img{height: 12px;width: auto;margin-left: 3px;margin-bottom: -4px;}
/* My invited users 列表 */
.myinvitation-user-list { display: flex; flex-direction: column; gap: 20px; padding-top: 11px;}
.myinvitation-user-item { display: flex; align-items: center; justify-content: space-between;}
.myinvitation-user-info { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.myinvitation-user-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.myinvitation-user-detail { display: flex; flex-direction: column; gap:0px; min-width: 0; overflow: hidden; }
.myinvitation-user-name { font-size: 15px;  color: #262626; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.myinvitation-user-time { font-size: 12px; color: #8e8e93; }
.myinvitation-chat-btn { background: #8A64FF; color: #ffffff; border-radius: 18px; padding: 9px 20px; font-size: 13px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: opacity 0.2s; }
.myinvitation-chat-btn:active { opacity: 0.85;}

/* 底部固定吸底悬浮按钮 */
.myinvitation-bottom-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100.3%; max-width: 1280px; padding: 18px 16px calc(27px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 99; display: flex; justify-content: center; box-sizing: border-box; }
.myinvitation-primary-btn { width: 100%; max-width: 400px; height: 57px; background: #7F5AFF;; color: #ffffff; border: none; border-radius: 38px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.myinvitation-primary-btn:active { transform: scale(0.98); }







/* history */
.historybg{background: #fff;}
.myinvitation-history-container { max-width: 1280px; margin: 0 auto; padding: 0 16px; background-color: #ffffff;min-height: 100%;}
.myinvitation-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.myinvitation-history-list li:first-child { padding-top: 0; }
.myinvitation-history-list li{ display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid #f2f2f2; gap: 12px; }
.myinvitation-history-avatar { width:22px; height:22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.myinvitation-history-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.myinvitation-history-row1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.myinvitation-history-row1 figure{margin-bottom: -5px;}
.myinvitation-history-row2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.myinvitation-history-name { font-size: 15px; color: #000000; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.myinvitation-history-value { font-size: 16px; font-weight: 700; color: #ff2b55; line-height: 1.2; flex-shrink: 0; }
.myinvitation-history-desc { font-size: 13px; color: #a3a3a3; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.myinvitation-history-list  time{ font-size: 12px; color: #a3a3a3; line-height: 1.2; flex-shrink: 0; }

.myinvitation-histyor-main-container { max-width: 1280px; margin: 0 auto;padding-bottom: calc(10px + env(safe-area-inset-bottom)); padding-left: 20px;padding-right: 20px; }


.share-go{display: flex;align-items: center;justify-content: center;height: 100vh;height: 100dvh;padding: 0px 22px;text-align: center;position: absolute;height: 100%;left:0;right:0;top:0;bottom:0;flex-direction: column;background: url(../images/bg1.jpg);background-size:cover;}
.share-go {color: #ffffff;}
.share-go-logo img{height: 60px;width: auto;margin-bottom: 12px;}
.share-go-time{padding-top: 22px;color: #FF5053;font-size: 18px;display: flex;justify-content: center;}
.share-go-time img{height: 19px;width: auto;margin-right: 7px;bottom:-2px;;position: relative;display: inline-block;}
@media (max-width:1024px){

    .share-video-main{position: relative;max-width:60%;}


}