:root{
  --heo-white:#fff;
  --heo-white-op:rgba(255, 255, 255, 0.2);
  --heo-black:#000;
  --heo-black-op:rgba(0, 0, 0, 0.2);
  --heo-none:#00000000;
  --heo-gray:#999999;
  --heo-gray-op:#9999992b;
  --heo-vip:#e5a80d;
  --heo-main:var(--heo-theme);
  --heo-main-op:var(--heo-theme-op);
  --heo-main-op-deep:var(--heo-theme-op-deep);
  --heo-main-none:var(--heo-theme-none);
  --heo-shadow-main:0 8px 12px -3px var(--heo-main-op);
  --heo-shadow-blackdeep:0 2px 16px -3px rgba(0, 0, 0, .15);
  --heo-logo-color:linear-gradient(215deg, #4584ff 0%, #cf0db9 100%);
  --heo-snackbar-time:5s;
  /* 主题色：粉色系 */
  --heo-theme:#ff69b4;
  --heo-theme-op:#ff69b423;
  --heo-theme-op-deep:#ff69b4dd;
  --heo-theme-none:#ff69b401;
  --heo-blue:#3e86f6;
  --heo-red:#f04a63;
  --heo-pink:#FF7C7C;
  --heo-green:#57bd6a;
  --heo-yellow:#c28b00;
  --heo-yellow-op:#d99c001a;
  --heo-orange:#e38100;
  --heo-purple:#7a60d2;
  --heo-fontcolor:#363636;
  --heo-background:#f6f7f8;
  --heo-reverse:#000;
  --heo-maskbg:rgba(0, 0, 0, 0.6);
  --heo-maskbgdeep:rgba(255, 255, 255, 0.85);
  --heo-hovertext:var(--heo-main);
  --heo-ahoverbg:#F7F7FA;
  --heo-lighttext:var(--heo-main);
  --heo-secondtext:rgba(60, 60, 67, 0.8);
  --heo-scrollbar:rgba(60, 60, 67, 0.4);
  --heo-card-btn-bg:#edf0f7;
  --heo-post-blockquote-bg:#fafcff;
  --heo-post-tabs-bg:#f2f5f8;
  --heo-secondbg:#f1f3f8;
  --heo-shadow-nav:0 5px 12px -5px rgba(102, 68, 68, 0.05);
  --heo-card-bg:#fff;
  --heo-card-bg-op:var(--heo-black-op);
  --heo-card-bg-none:rgba(255, 255, 255, 0);
  --heo-card-border:#e3e8f7;
  --heo-shadow-border:0 8px 16px -4px #2c2d300c;
  --style-border:1px solid var(--heo-card-border);
  --style-border-always:1px solid var(--heo-card-border);
  --style-border-hover:1px solid var(--heo-main);
  --style-border-hover-always:1px solid var(--heo-main);
  --style-border-dashed:1px dashed var(--heo-theme-op);
  --style-border-forever:2px solid var(--heo-main)
}
::selection{
  background:var(--heo-fontcolor);
  color:var(--heo-background)
}
*{
  box-sizing:border-box
}
body{
  font-family:Arial,sans-serif;
  margin:0;
  background-color:var(--heo-background);
  color:var(--heo-fontcolor);
  display:flex;
  flex-direction:column;
  align-items:center
}
.qrcode{
  display:flex;
  justify-content:center;
  gap:30px;
  margin:40px auto;
  flex-wrap:wrap;
  position:relative
}
.qrcode img{
  border-radius:12px;
  box-shadow:var(--heo-shadow-border);
  padding:8px;
  border:var(--style-border-always);
  background:var(--heo-card-bg)
}
.qrcode-item{
  text-align:center
}
.qrcode-text{
  margin-top:10px;
  color:var(--heo-secondtext);
  font-size:14px
}

/* 排序区域布局 */
.controls{
  display:flex;
  align-items:center;
  gap:16px;
  max-width:800px;
  margin:0 16px 20px 16px;
  width:calc(100vw - 32px);
  justify-content:flex-start
}
#sortSelect{
  padding:8px 12px;
  border:var(--style-border);
  background-color:var(--heo-card-bg);
  color:var(--heo-fontcolor);
  cursor:pointer;
  height:42px;
  border-radius:12px;
  margin:0;
  flex-shrink:0
}
.controls-tips{
  color:var(--heo-secondtext);
  margin-left:auto
}

.reward-list{
  margin:auto;
  max-width:800px;
  padding:8px;
  border-radius:12px;
  background:#ffffffb1;
  border:var(--style-border-always);
  margin:0 16px;
  width:calc(100vw - 32px);
  backdrop-filter:blur(10px)
}
.reward-item{
  padding:10px;
  border-bottom:var(--style-border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  background-color:var(--heo-card-bg);
  transition:all .3s ease
}
.reward-name{
  font-weight:700;
  flex:1;
  color:var(--heo-fontcolor)
}
.reward-money{
  margin:0 20px;
  color:var(--heo-secondtext)
}
.reward-date{
  color:var(--heo-secondtext);
  font-size:.9em;
  opacity:.6;
  min-width:100px;
  display:flex;
  justify-content:flex-end
}
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin-top:20px
}
.pagination button{
  padding:5px 15px;
  cursor:pointer;
  background-color:var(--heo-card-bg);
  color:var(--heo-fontcolor);
  border:var(--style-border);
  border-radius:4px;
  transition:all .3s ease
}
.pagination button:disabled{
  cursor:not-allowed;
  opacity:.5
}
.pagination button:hover:not(:disabled){
  border:var(--style-border-hover);
  color:var(--heo-main)
}
#currentPage{
  font-size:14px;
  color:var(--heo-secondtext)
}
.reward-money-red{
  color:var(--heo-red)!important;
  font-weight:700
}
.reward-money-orange{
  color:var(--heo-orange)!important;
  font-weight:700
}
.header{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  padding:80px 30px 120px 30px;
  border-radius:0;
  max-width:none;
  margin:0;
  margin-bottom:-130px
}
span.controls-text{
  font-size:32px;
  color:var(--heo-white);
  font-weight:700;
  width:100%;
  text-align:center;
  padding-left:8px
}
.footer{
  text-align:center;
  margin-top:10px;
  margin-bottom:20px;
  font-size:14px
}
.beian{
  color:var(--heo-secondtext);
  text-decoration:none;
  transition:all .3s ease
}
.beian:hover{
  color:var(--heo-main)
}
.loading{
  text-align:center;
  color:var(--heo-secondtext);
  padding:20px;
  font-size:14px
}
.reward-item.last-item{
  border-bottom:none
}
#sortSelect:focus{
  outline:0;
  border:var(--style-border)
}
#sortSelect:focus:hover{
  border:var(--style-border-hover)
}
.pagination button:focus{
  outline:0;
  border:var(--style-border)
}
.pagination button:focus:hover:not(:disabled){
  border:var(--style-border-hover)
}
.reward-header{
  padding:10px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:var(--style-border);
  color:var(--heo-secondtext);
  font-size:.9em;
  font-weight:700;
  background:var(--heo-secondbg);
  border-radius:8px 8px 0 0
}
.reward-header .reward-date,.reward-header .reward-money,.reward-header .reward-name{
  color:var(--heo-fontcolor);
  opacity:1;
  font-size:16px
}
.reward-header .reward-name{
  flex:1
}
.reward-header .reward-money{
  margin:0 20px
}
.reward-header .reward-date{
  min-width:100px;
  display:flex;
  justify-content:flex-end
}
.reward-item:hover{
  background-color:var(--heo-secondbg)
}
.guli_thanks{
  z-index:1;
  width:200px;
  margin-top:12px
}
.btm-tips{
  max-width:800px;
  margin:20px auto;
  text-align:center;
  font-size:14px;
  color:var(--heo-secondtext);
  background:var(--heo-card-bg);
  border:var(--style-border);
  border-radius:12px;
  padding:12px;
  flex-direction:column;
  display:flex;
  margin:16px;
  width:calc(100vw - 32px)
}

/* 背景字幕 */
.qrcode::after{
  content:"REWARDS";
  position:absolute;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:120px;
  font-weight:700;
  color:transparent;
  -webkit-text-stroke:3px var(--heo-pink);
  text-stroke:3px var(--heo-pink);
  opacity:.12;
  z-index:-1;
  pointer-events:none;
  font-family:Arial,sans-serif;
  letter-spacing:8px
}

/* 渐变背景修复：限制高度并固定定位 */
.background-gradient{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw !important;
  height: 1200px !important; /* 仅覆盖到二维码区域 */
  background-image:linear-gradient(0deg,#ffc0cb00 50%,#ff69b4 100%);
  z-index: -2;
  pointer-events: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* 数据区域背景覆盖渐变 */
.reward-list, .pagination, .btm-tips {
  background-color: var(--heo-background);
  position: relative;
  z-index: 1; /* 确保在渐变上方 */
}

/* 仅rewards页面生效的样式 */
body.rewards-page #st-footer,
body.rewards-page #footer_deal {
  display: none !important;
}
body.rewards-page #footer-bar {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--heo-card-border);
  margin-bottom: 20px;
}
body.rewards-page .btm-tips {
  margin-bottom: 30px;
}
body.rewards-page #page-header {
  background: transparent !important;
}
body.rewards-page #page-header #nav {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}