/* ── Signin Runtime ── */

.signin-popup{
  display:none;position:fixed;inset:0;
  z-index:var(--z-signin);
  align-items:flex-end;justify-content:center;
}
.signin-popup.open{display:flex;}

.signin-mask{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.75);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

.signin-panel{
  position:relative;z-index:1;
  width:100%;max-width:480px;
  height:calc(var(--app-height) * 0.55);
  max-height:85dvh;min-height:360px;
  background:#13111c;
  border-radius:28px 28px 0 0;
  transform:translateY(100%);
  transition:transform 0.36s cubic-bezier(0.25,0.72,0,1);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.signin-popup.open .signin-panel{transform:translateY(0);}

.signin-drag{
  width:40px;height:4px;border-radius:999px;
  background:rgba(255,255,255,0.18);
  margin:12px auto 0;flex-shrink:0;
}

/* ── Pages ── */
.sp-page{display:none;flex-direction:column;flex:1;min-height:0;}
.sp-page.active{display:flex;}
.sp-page.slide-out-up{animation:spSlideOutUp 0.28s cubic-bezier(0.25,0.72,0,1) forwards;}
.sp-page.slide-in-up{animation:spSlideInUp 0.30s cubic-bezier(0.25,0.72,0,1) forwards;}

@keyframes spSlideOutUp{from{transform:translateY(0);opacity:1;}to{transform:translateY(-30%);opacity:0;}}
@keyframes spSlideInUp{from{transform:translateY(100%);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* ── Signin Page (page-0) ── */
.si-head{padding:20px 20px 0;}
.si-title{font-size:clamp(18px,5vw,24px);font-weight:800;color:#fff;letter-spacing:-0.3px;}
.si-gold-txt{background:linear-gradient(135deg,#ffe066 0%,#ffd000 50%,#e8a800 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.si-sub2{font-size:13px;color:rgba(255,255,255,0.55);margin:6px 0 0;letter-spacing:0.5px;}
.si-divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08) 20%,rgba(255,255,255,0.08) 80%,transparent);margin:12px 0 10px;}

.si-ways{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;}
.si-way{font-size:12px;color:rgba(255,255,255,0.55);white-space:nowrap;}
.si-way-hl{color:rgba(255,210,100,0.85);}
.si-way-suffix{font-size:12px;color:rgba(255,255,255,0.5);white-space:nowrap;}

.si-body{padding:14px 14px 8px;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;}

/* ── Day Cards ── */
.si-days{display:flex;gap:5px;overflow:hidden;}
.si-card{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;
  background:rgba(30,32,42,0.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:12px;padding:8px 1px;
  border:1px solid rgba(255,255,255,0.06);
  gap:3px;overflow:hidden;
}
.si-card-active{
  background:rgba(38,34,18,0.95);
  border:1.5px solid rgba(245,200,66,0.6);
  animation:siPulse 2.5s ease-in-out infinite;
}
@keyframes siPulse{0%,100%{box-shadow:0 0 0 rgba(245,200,66,0);}50%{box-shadow:0 0 16px rgba(245,200,66,0.15);}}

.si-day-label{font-size:12px;font-weight:600;color:rgba(255,255,255,0.55);}
.si-day-gold{color:#f5c842;}
.si-ico{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.25));}
.si-card-active .si-ico{filter:drop-shadow(0 2px 8px rgba(245,200,66,0.4));}

.si-badge{font-size:8px;font-weight:700;width:48px;height:16px;border-radius:99px;color:#fff;white-space:nowrap;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:0 auto;text-align:center;}
.si-badge-gold{background:linear-gradient(135deg,#e8a800,#ffc107);}
.si-badge-blue{background:linear-gradient(135deg,#1d5cbf,#4a90e8);}
.si-badge-red{background:linear-gradient(135deg,#c41e48,#ff5c7a);}

.si-reward{font-size:13px;font-weight:700;color:rgba(255,255,255,0.8);}

/* ── Buttons ── */
.si-btns{display:flex;gap:10px;margin:20px 0 0;}
.si-btn-gold{
  flex:1;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:15px;font-weight:700;color:#2a1a00;
  background:linear-gradient(135deg,#ffe066,#ffcc00,#e8a800);
  box-shadow:0 3px 14px rgba(230,170,0,0.35),inset 0 1px 0 rgba(255,255,255,0.35);
  cursor:pointer;transition:transform 0.12s;border:none;
}
.si-btn-gold:active{transform:scale(0.97);}

.si-btn-pink{
  flex:1.3;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#ff7a93,#ff3366,#e81850);
  box-shadow:0 3px 16px rgba(255,50,90,0.35),inset 0 1px 0 rgba(255,255,255,0.2);
  cursor:pointer;transition:transform 0.12s;border:none;
}
.si-btn-pink:active{transform:scale(0.97);}

/* ── Bottom hint ── */
.si-bottom{margin-top:auto;padding:16px 0 4px;display:flex;flex-direction:column;align-items:center;cursor:pointer;}
.si-anim-c{animation:siFloat 1.5s ease-in-out infinite;margin-bottom:6px;}
@keyframes siFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.si-bottom-t1{font-size:14px;color:rgba(255,255,255,0.55);letter-spacing:2px;font-weight:500;}
.si-bottom-t2{font-size:11px;color:rgba(255,255,255,0.3);margin-top:3px;}
.si-glow-arrow{filter:drop-shadow(0 0 6px rgba(255,215,0,0.3));}

/* ── Ad Pages (page-1..N) ── */
.sp-page.sp-ad-page{
  --ac:120,100,255;
  position:relative;overflow:hidden;
  flex-direction:column;padding:14px 14px 8px;gap:0;
  background:linear-gradient(180deg,#0c0d14 0%,rgba(var(--ac),0.03) 100%);
}
.sp-ad-bg{
  position:relative;width:100%;aspect-ratio:800/380;flex-shrink:0;
  background-size:cover;background-position:center;
  border-radius:20px 20px 4px 4px;overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,0.5),0 0 40px rgba(var(--ac),0.07);
}
.sp-ad-bg::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:50%;
  background:linear-gradient(to top,rgba(14,16,28,0.98) 0%,rgba(14,16,28,0.5) 40%,transparent 100%);
  pointer-events:none;z-index:1;
}
.sp-ad-footer{
  flex-shrink:0;
  background:rgba(14,16,28,0.75);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  backdrop-filter:blur(28px) saturate(160%);
  border-radius:4px 4px 20px 20px;margin:0;padding:12px 16px;
  display:flex;align-items:center;gap:16px;
  box-shadow:0 6px 30px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.05);
}
.sp-ad-icon{
  width:54px;height:54px;border-radius:15px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:900;overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,0.4),0 0 18px rgba(var(--ac),0.12);
  border:1px solid rgba(var(--ac),0.2);
}
.sp-ad-texts{flex:1;min-width:0;}
.sp-ad-name{font-size:16px;font-weight:700;color:#fff;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-ad-sub{font-size:12px;color:rgba(255,255,255,0.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-ad-open{
  flex-shrink:0;
  background:linear-gradient(135deg,rgba(var(--ac),0.4),rgba(var(--ac),0.25));
  border:1.5px solid rgba(var(--ac),0.35);
  color:#fff;font-size:15px;font-weight:800;padding:10px 26px;
  border-radius:999px;cursor:pointer;
  box-shadow:0 0 22px rgba(var(--ac),0.25),inset 0 1px 0 rgba(255,255,255,0.12);
  transition:transform 0.15s;
}
.sp-ad-open:active{transform:scale(0.96);}

/* ── Notice page ── */
.sp-notice-content{
  font-size:16px;color:rgba(255,255,255,0.7);line-height:2;text-align:center;
  padding:6px 20px 8px;overflow-y:auto;flex:1;
}

/* ── Responsive ── */
@media(max-width:375px){
  .si-ico{width:34px;height:34px;}
  .si-title{font-size:clamp(16px,4.5vw,20px);}
}
@media(max-height:700px){
  .signin-panel{height:calc(var(--app-height)*0.70);}
}