:root{
 --bg:#000;
 --accent:#f5c400;
 --text:#fff;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
 background:var(--bg);
 color:var(--text);
 font-family:'Oswald', sans-serif;
 display:flex;
 justify-content:center;
 align-items:center;
 min-height:100vh;
 padding:0;
}

.wrap{
 display:flex;
 min-height:100vh;
 align-items:flex-start;
 justify-content:center;
 padding-top:20px;
 padding-bottom:8px;
}

.card{
 width:100%;
 max-width:380px;
 padding:8px 14px;
 border:2px solid var(--accent);
 border-radius:12px;
 background:rgba(0,0,0,0.55);
 text-align:center;
}

.profile img{
 width:95px;
 height:95px;
 border-radius:50%;
 object-fit:cover;
 border:3px solid var(--accent);
 box-shadow:0 0 22px rgba(245,196,0,0.45), 0 0 35px rgba(245,196,0,0.25);
 transition:.3s;
}
.profile img:hover{ transform:scale(1.04); }

h1{font-size:21px; margin-top:4px;}
.tiktok{opacity:.85; font-size:14px; margin-bottom:8px;}
.about{margin:8px 0 12px; font-size:14px; line-height:1.4;}

.section-title{
 font-size:16px;
 margin:14px 0 8px;
 text-transform:uppercase;
 letter-spacing:1px;
}

.dl-btn{
 width:100%;
 padding:12px;
 margin:7px 0;
 border:0;
 border-radius:8px;
 background:linear-gradient(90deg,#f5c400,#fce96b);
 color:#000;
 font-weight:700;
 cursor:pointer;
 box-shadow:0 0 10px rgba(255,225,115,.35);
 transition:.2s;
}
.dl-btn:hover{transform:translateY(-1px);box-shadow:0 0 14px rgba(255,225,115,.55);}

.socials{
 display:flex;
 flex-direction:column;
 gap:9px;
 margin-top:12px;
}

.social{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 padding:12px;
 border-radius:10px;
 text-decoration:none;
 font-size:15px;
 font-weight:600;
 color:#fff;
 background-size:250% 250%;
 animation:rgbFlow 3s linear infinite;
 box-shadow:0 0 16px rgba(255,255,255,0.15);
}

@keyframes rgbFlow{
 0%{background-position:0% 50%;}
 50%{background-position:100% 50%;}
 100%{background-position:0% 50%;}
}

.social.tg{background:linear-gradient(90deg,#00e1ff,#0077ff,#00e1ff);}
.social.yt{background:linear-gradient(90deg,#ff003c,#ff6a6a,#ff003c);}
.social.fb{background:linear-gradient(90deg,#1877f2,#3ba9ff,#1877f2);}
.social:hover{transform:scale(1.05);opacity:.95;}

/* Main Popup */
.popup-wrap{position:fixed;inset:0;backdrop-filter:blur(7px);display:none;align-items:center;justify-content:center;z-index:99980;}
.popup-wrap.show{display:flex;}
.popup{
 background:#111;
 border:2px solid var(--accent);
 padding:18px;
 width:90%;
 max-width:380px;
 text-align:center;
 border-radius:12px;
 box-shadow:0 0 18px rgba(0,0,0,.6);
}
.popup .close{
 background:none;border:0;color:var(--accent);
 font-size:26px;float:right;margin-top:-8px;cursor:pointer;
}
.p-multi a{
 display:block;margin:8px 0;padding:11px;
 background:linear-gradient(90deg,#f5c400,#ffe97a);
 color:#000;border-radius:8px;text-decoration:none;font-weight:700;
 box-shadow:0 0 10px rgba(255,225,115,.40);
}
.p-multi a:hover{transform:translateY(-1px);box-shadow:0 0 14px rgba(255,225,115,.70);}
.popup-video{
 display:block;margin-top:14px;padding:12px;border-radius:8px;
 background:linear-gradient(90deg,#ff003c,#ff6a6a,#ff2147);
 color:#fff;font-weight:600;text-decoration:none;
 animation:rgbGlow 2.2s infinite linear;
}
@keyframes rgbGlow{0%{box-shadow:0 0 12px #ff003c;}50%{box-shadow:0 0 22px #ff6a6a;}100%{box-shadow:0 0 12px #ff003c;}}

/* Task Popup */
.task-popup-wrap {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99990;
}
.task-popup-wrap.show { display: flex; }
.task-popup {
  position: relative;
  background: linear-gradient(145deg,#000,#1a1a1a);
  border:2px solid #ffcc00;
  box-shadow:0 0 25px rgba(255,204,0,0.5);
  border-radius:20px;
  padding:25px 20px;
  max-width:360px;
  width:90%;
  text-align:center;
  color:#fff;
}
.task-popup h2 {
  font-size:1.2rem;
  color:#ffcc00;
  margin-bottom:8px;
}
.task-popup p {
  font-size:0.95rem;
  margin-bottom:15px;
  line-height:1.4;
  color:#f5f5f5;
}
.task-box {
  padding: 12px;
  background: linear-gradient(90deg,#f5c400,#ffe97a);
  border-radius: 10px;
  font-weight: 700;
  color: #000;
  box-shadow:0 0 12px rgba(255,225,115,.4);
  font-size: 0.95rem;
  min-height: 40px;
  position: relative;
}
.task-spinner {
  margin: 15px auto 0;
  width: 30px;
  height: 30px;
  border: 4px solid rgba(0,0,0,0.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}