:root{
  --mid-h: 42px;          /* 按钮高度 */
  --mid-radius: 14px;     /* 顶部圆角 */
  --mid-pad-x: 10px;      /* 左右内边距 */
  --mid-gap: 10px;        /* 两按钮间距 */
  --mid-overlap: 0px; 

  /* —— 列表容器与行 —— */
  --list-side-margin: 2px;/* 列表左右外边距 */
  --list-pad-x: 10px;     /* 列表左右内边距 */
  --list-height: 320px;   /* 可视滚动高度 */
  --row-h: 34px;          /* 每行高度 */
  --row-gap: 5px;         /* 行间距*/
  --row-pad-x: 22px;      /* 行左右内边距 */


  --tab-text:#EAF6FF;
  --tab-text-active:#FFFFFF;
  --tab-stroke:rgba(255,255,255,.64);
  --pill-off-bg:  linear-gradient(180deg, rgba(82,198,247,.60), rgba(46,175,231,.30));
  --pill-off-stroke: rgba(255,255,255,.60);
  --pill-off-text: #ffffff;
  --pill-press-bg: linear-gradient(180deg, #01A5BF, #007E91);
  --pill-on-bg:    linear-gradient(180deg, #01A5BF, #007E91);
}

.df-page{
  min-height:100vh;
  background-size:cover;
  background-position:center;
  padding:22px 12px 170px;
  position:relative;
  box-sizing:border-box;
}

.df-top-tabs{
  position:relative;
  --sp: .133333vw;
  width: min(calc(var(--sp) * 683), 100%);
  margin:10px auto 0;
}
.df-top-tabs > img.df-top-tabs-bg{
  display:block; width:100%; pointer-events:none;
}

.df-top-pick{
  position:absolute;
  top:  calc(var(--sp) * 6); 
  height:calc(var(--sp) * 87);
  width:50%;
  border:0; background:transparent; padding:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; cursor:pointer; user-select:none;
  transition: transform .16s ease, filter .16s ease;
  z-index:2;
}
.df-top-pick.left{ left:0; }
.df-top-pick.right{ right:0; }
.df-top-pick span{
  position:relative; z-index:3;
  color:var(--tab-text);
  font-weight:800; font-size:12px; line-height:1.06; letter-spacing:.2px;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  pointer-events:none;
}
.df-top-pick::before{
  content:""; position:absolute; inset:0;
  opacity:0; transition:opacity .12s ease;
  z-index:1; 
}
.df-top-pick.left::before{  border-radius:999px 0 0 999px; inset:0 1px 0 0; }
.df-top-pick.right::before{ border-radius:0 999px 999px 0; inset:0 0 0 1px; }

.df-top-pick.is-active span{ color:var(--tab-text-active); }
.df-top-pick.is-active::before{
  opacity:1;
  background:linear-gradient(180deg, #01A5BF, #007E91);
  border:.4vw solid var(--tab-stroke);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.df-top-pick:active{ transform:scale(.985); }
.df-top-pick:hover{ filter:brightness(1.03); }
.df-invite{
  height:60px; margin:3px auto 0; max-width:100%;
  background:rgba(0,0,0,.19); border-radius:2.6666vw;
  padding:0 10px 0 14px; display:flex; align-items:center; justify-content:flex-end; gap:6px;
}
.df-invite-title{ color:#FFF600; font-weight:700; font-size:12px; margin-right:8px; }
.df-invite-sub{ color:#fff; font-size:10px; font-weight:600; max-width:68vw; }
.df-invite-badge{ height:60px; flex:0 0 auto; }


.df-awards{
  margin-top:5px; height:250px; border-radius:2.6666vw;
  background:rgba(0,0,0,.19);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.df-awards-body{ width:100%; height:100%; padding:12px 14px; box-sizing:border-box; }
.df-nodata{ color:#fff; opacity:.9; text-align:center; }
.df-awards-list{ width:100%; height:100%; overflow:auto; }
.df-awards-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; margin-bottom:8px;
  color:#fff; font-weight:700; font-size:12px;
  background:rgba(0,0,0,.12); border-radius:1.3333vw;
}
.df-awards-item .df-col-1{ flex:1 1 45%; }
.df-awards-item .df-col-2{ flex:0 0 30%; text-align:center; }
.df-awards-item .df-col-3{ flex:0 0 25%; text-align:right; }


.df-mid-tabs{
  display:flex;
  gap:var(--mid-gap);
  padding:0 14px;
  margin-top:14px;
  margin-bottom: 0;
  position:relative;
}
.df-mid-tab{
  height:var(--mid-h);
  padding:0 var(--mid-pad-x);
  border-radius: var(--mid-radius) var(--mid-radius) 0 0;
  font-weight:800; font-size:15px; letter-spacing:.2px;
  user-select:none; cursor:pointer;

  color: var(--pill-off-text);
  background: var(--pill-off-bg);
  border:1px solid var(--pill-off-stroke);
  border-bottom:none;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .16s ease, filter .16s ease,
              background .16s ease, box-shadow .16s ease, color .16s ease, border-color .16s ease;
}
.df-mid-tab:hover{ filter:brightness(1.03); }
.df-mid-tab:active{
  background: var(--pill-press-bg); 
  transform: scale(.985);
  box-shadow:
    inset 0 8px 16px rgba(255,255,255,.12),
    inset 0 -6px 12px rgba(0,0,0,.12),
    0 6px 14px rgba(0,0,0,.18);
}
.df-mid-tab.df-mid-active{
  color:#fff;
  background: var(--pill-on-bg); 
  border-color: rgba(255,255,255,.75);
  border-bottom:none;
  box-shadow:
    inset 0 8px 16px rgba(255,255,255,.12),
    inset 0 -6px 12px rgba(0,0,0,.12),
    0 6px 14px rgba(0,0,0,.18);
}
.df-scroll{
  border-radius: 10px; 
  margin:0 var(--list-side-margin);
  padding:10px var(--list-pad-x);
  background:rgba(43,76,110,.72);
  border:1px solid rgba(255,255,255,.22);
  position:relative;
  border-top: none; 
  z-index:1;
}
.df-scroll-outer{ height:var(--list-height); overflow:hidden; position:relative; }
.df-scroll-track{
  position:absolute; left:0; right:0;
  will-change:transform;
  animation-name: df-scroll-up;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes df-scroll-up {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-1 * var(--scroll-h, 0px))); }
}
.df-row{
  height:var(--row-h);
  display:flex; align-items:center; justify-content:space-between;
  color:#fff; font-weight:700; font-size:14px;
  padding:10px var(--row-pad-x);
  margin-bottom:var(--row-gap);
  background:#00000019;
  border-radius:14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 -6px 12px rgba(0,0,0,.08);
}