:root{
  --bg:#150d15;
  --card:#120b11;
  --card2:#1b1219;
  --gold:#ffb21b;
  --gold-soft:#ffc84f;
  --pink:#ff9df0;
  --text:#fff7e6;
  --muted:#d6ced1;
  --line:rgba(255,196,58,.34);
  --green:#24ff31;
  --btn1:#3d3b42;
  --btn2:#35323a;
  --btnActive1:#4a9dff;
  --btnActive2:#2a66ff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  min-height:100vh;
  font-family:"Be Vietnam Pro",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 58% 18%, rgba(255,154,208,.16), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(255,174,56,.08), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(255,174,56,.06), transparent 56%),
    linear-gradient(180deg, #070307 0%, #1a1018 100%);
  overflow-x:hidden;
}
.page-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.vip-card{
  width:min(400px, 100%);
  position:relative;
  padding:26px 24px 40px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(20,11,18,.98), rgba(11,7,11,.98));
  border:1px solid rgba(255,182,33,.34);
  box-shadow:
    0 0 0 1px rgba(255,182,33,.08) inset,
    0 0 30px rgba(255,174,41,.25),
    0 14px 50px rgba(0,0,0,.55),
    0 0 80px rgba(255,169,31,.14);
  animation: cardPulse 3.4s ease-in-out infinite;
}
.gift-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:10px;
}
.gift-icon{
  position:relative;
  width:54px;
  height:54px;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.18)) drop-shadow(0 0 16px rgba(255,103,103,.12));
  animation: floatGift 2.6s ease-in-out infinite;
}
.gift-left,.gift-right,.gift-top,.gift-ribbon-v,.gift-ribbon-h{position:absolute;display:block}
.gift-left,.gift-right{
  top:18px;
  width:24px;
  height:30px;
  background:linear-gradient(180deg, #ff4d43 0%, #da2c2c 100%);
  border-radius:2px 2px 6px 6px;
}
.gift-left{left:2px}
.gift-right{right:2px}
.gift-top{
  top:10px;
  left:6px;
  width:42px;
  height:12px;
  background:linear-gradient(180deg, #ff6156 0%, #eb3b36 100%);
  border-radius:3px;
}
.gift-ribbon-v{
  top:10px;
  left:24px;
  width:6px;
  height:38px;
  background:linear-gradient(180deg, #ffd447 0%, #ffb400 100%);
  border-radius:4px;
}
.gift-ribbon-h{
  top:22px;
  left:6px;
  width:42px;
  height:6px;
  background:linear-gradient(90deg, #ffd447 0%, #ffb400 100%);
  border-radius:4px;
}
.gift-icon::before,.gift-icon::after{
  content:"";
  position:absolute;
  top:3px;
  width:15px;
  height:12px;
  border:4px solid #ffbf14;
  border-bottom:0;
  border-radius:999px 999px 0 999px;
}
.gift-icon::before{left:10px;transform:rotate(-8deg)}
.gift-icon::after{right:10px;transform:scaleX(-1) rotate(-8deg)}

.hero-title{
  margin:6px 0 18px;
  text-align:center;
  line-height:1.12;
  font-size:19px;
  font-weight:900;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:#fff6dd;
  text-shadow:0 0 5px rgba(255,234,176,.42), 0 0 16px rgba(255,214,104,.24);
}
.hero-title span{
  color:#ffbfe9;
  text-shadow:0 0 5px rgba(255,190,233,.32), 0 0 14px rgba(255,214,104,.22);
}
.activity-box{
  position:relative;
  height:118px;
  overflow:hidden;
  border-radius:20px;
  padding:2px 0;
  margin:0 auto 22px;
  border:1px solid rgba(255,189,32,.62);
  background:linear-gradient(180deg, rgba(10,7,10,.96), rgba(14,8,12,.92));
  box-shadow:0 0 18px rgba(255,174,41,.18), inset 0 0 12px rgba(255,189,32,.05);
}
.activity-box::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 18px rgba(255,189,32,.07);
}
.activity-track{
  display:flex;
  flex-direction:column;
  animation:activityTicker 12s cubic-bezier(.65,0,.35,1) infinite;
  will-change:transform;
}
.activity-row{
  min-height:56px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
}
.activity-row + .activity-row{
  border-top:1px dashed rgba(255,174,41,.26);
}
.activity-fade{
  position:absolute;
  left:0;
  right:0;
  height:14px;
  z-index:2;
  pointer-events:none;
}
.activity-fade.top{top:0;background:linear-gradient(180deg, rgba(13,8,12,.95), rgba(13,8,12,0))}
.activity-fade.bottom{bottom:0;background:linear-gradient(0deg, rgba(13,8,12,.95), rgba(13,8,12,0))}
.user-name{
  color:#ffc4f0;
  font-size:12px;
  font-weight:500;
  margin-bottom:3px;
}
.user-action{
  font-size:13px;
  font-weight:800;
}
.user-action.success{color:var(--green); text-shadow:0 0 8px rgba(36,255,49,.16)}
.time-text{
  color:#f2e7d0;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  padding-top:2px;
}
.confirm-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:18px;
  cursor:pointer;
  user-select:none;
}
.confirm-row input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.custom-check{
  flex:0 0 auto;
  position:relative;
  width:18px;
  height:18px;
  margin-top:3px;
  border-radius:2px;
  border:1.5px solid #ebe5e9;
  background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
}
.custom-check::after{
  content:"";
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:10px;
  border:solid #111;
  border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .18s ease;
}
.confirm-row input:checked + .custom-check::after{transform:rotate(45deg) scale(1)}
.confirm-text{
  color:#fff6dd;
  font-size:12px;
  font-weight:800;
  line-height:1.48;
}
.register-btn{
  position:relative;
  width:100%;
  min-height:58px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:linear-gradient(180deg, var(--btn1), var(--btn2));
  color:#ffffff;
  font-size:16px;
  font-weight:900;
  letter-spacing:.2px;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.24);
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease, background .16s ease;
  cursor:not-allowed;
  overflow:hidden;
}
.register-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 35%, transparent 55%);
  transform:translateX(-120%);
}
.register-btn.enabled{
  cursor:pointer;
  background:linear-gradient(90deg, #1798c7 0%, #2f73ff 100%);
  box-shadow:0 7px 0 #1253c3, 0 14px 28px rgba(0,0,0,.36), 0 0 18px rgba(53,132,255,.26);
}
.register-btn.enabled::before{animation: btnShine 2.3s ease-in-out infinite}
.register-btn:disabled{opacity:.92}
.register-btn.enabled:hover{filter:brightness(1.05)}
.register-btn.enabled:active{transform:translateY(3px);box-shadow:0 3px 0 #1253c3, 0 10px 20px rgba(0,0,0,.3)}

@keyframes floatGift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@keyframes activityTicker{
  0%,16%{transform:translateY(0)}
  20%,36%{transform:translateY(-56px)}
  40%,56%{transform:translateY(-112px)}
  60%,76%{transform:translateY(-168px)}
  80%,96%{transform:translateY(-224px)}
  100%{transform:translateY(-224px)}
}
@keyframes btnShine{
  0%{transform:translateX(-120%)}
  55%,100%{transform:translateX(140%)}
}
@keyframes cardPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(255,182,33,.08) inset,0 0 30px rgba(255,174,41,.24),0 14px 50px rgba(0,0,0,.55),0 0 80px rgba(255,169,31,.14)}
  50%{box-shadow:0 0 0 1px rgba(255,182,33,.11) inset,0 0 36px rgba(255,174,41,.3),0 14px 50px rgba(0,0,0,.58),0 0 88px rgba(255,169,31,.18)}
}
@media (max-width: 480px){
  .page-shell{padding:18px}
  .vip-card{width:min(370px,100%);padding:24px 18px 34px}
  .hero-title{font-size:17px}
  .register-btn{min-height:56px;font-size:15px}
}