:root{
  --bg-deep:#0d0b18;
  --bg-mid:#171233;
  --panel:rgba(255,255,255,0.055);
  --panel-border:rgba(255,255,255,0.09);
  --text-strong:#f3f1ff;
  --text-soft:#a9a3c9;
  --text-faint:#726c94;
  --accent-teal:#4fd1c5;
  --accent-violet:#8b7cf6;
  --accent-grad:linear-gradient(135deg,var(--accent-teal),var(--accent-violet));
  --radius-card:26px;
  --radius-pill:999px;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 8%, rgba(139,124,246,0.18), transparent 45%),
    radial-gradient(circle at 82% 92%, rgba(79,209,197,0.14), transparent 45%),
    linear-gradient(160deg,var(--bg-deep),var(--bg-mid));
  font-family:"Tajawal","Space Grotesk",sans-serif;
  color:var(--text-strong);
}

.stage{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 20px;
}

/* بطاقة البروفايل */
.pcard{
  position:relative;
  width:100%;
  max-width:380px;
  padding:64px 30px 30px;
  border-radius:var(--radius-card);
  background:var(--panel);
  border:1px solid var(--panel-border);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);
  text-align:center;
  overflow:visible;
  transition:transform .35s ease;
}

.pcard::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,0.08), transparent 40%);
  pointer-events:none;
}

/* حلقة الصورة */
.pcard__avatar-wrap{
  position:absolute;
  top:-46px;
  right:50%;
  transform:translateX(50%);
  width:108px;
  height:108px;
}

.pcard__avatar{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.pcard__name{
  margin:6px 0 2px;
  font-family:"Space Grotesk","Tajawal",sans-serif;
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:.2px;
  color:var(--text-strong);
}

.pcard__role{
  margin:0 0 14px;
  font-size:.95rem;
  color:var(--accent-teal);
  font-weight:500;
}

.pcard__stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:16px;
  font-size:.85rem;
  color:var(--text-soft);
}

.pcard__stats b{
  font-family:"Space Grotesk",sans-serif;
  color:var(--text-strong);
  font-size:1rem;
  transition:color .2s ease;
}

.pcard__stats .dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--text-faint);
}

.pcard__bio{
  font-size:.92rem;
  line-height:1.85;
  color:var(--text-soft);
  margin:0 0 22px;
  padding:0 4px;
}

.psocial{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.psocial__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--panel-border);
  color:var(--text-soft);
  transition:all .25s ease;
}

.psocial__btn svg{
  width:16px;
  height:16px;
}

.psocial__btn:hover{
  color:var(--bg-deep);
  background:var(--accent-grad);
  border-color:transparent;
  transform:translateY(-2px);
}

.pdownload{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:16px;
  padding:11px 14px;
  border-radius:var(--radius-pill);
  border:1px dashed var(--panel-border);
  color:var(--text-soft);
  text-decoration:none;
  font-size:.85rem;
  transition:all .25s ease;
}

.pdownload:hover{
  color:var(--text-strong);
  border-color:var(--accent-teal);
  background:rgba(255,255,255,0.04);
}

.pdownload__icon{
  display:flex;
  color:var(--accent-teal);
}

.pdownload__icon svg{
  width:15px;
  height:15px;
}

.pcard__actions{
  display:flex;
  gap:10px;
  margin-bottom:6px;
}

.pbtn{
  flex:1;
  padding:12px 14px;
  border-radius:var(--radius-pill);
  border:1px solid var(--panel-border);
  background:rgba(255,255,255,0.04);
  color:var(--text-strong);
  font-family:inherit;
  font-size:.88rem;
  font-weight:500;
  cursor:pointer;
  transition:all .25s ease;
}

.pbtn:hover{
  background:rgba(255,255,255,0.09);
  transform:translateY(-1px);
}

.pbtn:active{
  transform:translateY(0);
}

.pbtn--follow{
  background:var(--accent-grad);
  border:none;
  color:#0d0b18;
  font-weight:700;
  box-shadow:0 10px 24px -10px rgba(139,124,246,0.6);
}

.pbtn--follow.is-following{
  background:rgba(255,255,255,0.06);
  color:var(--text-strong);
  box-shadow:none;
  border:1px solid var(--panel-border);
}

.pcard__details{
  max-height:0;
  overflow:hidden;
  transition:max-height .38s ease, opacity .3s ease, margin-top .3s ease;
  opacity:0;
  margin-top:0;
}

.pcard__details.is-open{
  max-height:520px;
  opacity:1;
  margin-top:18px;
}

.pcard__details-inner{
  padding-top:16px;
  border-top:1px solid var(--panel-border);
  text-align:right;
}

.pcard__details-title{
  font-size:.78rem;
  color:var(--text-faint);
  margin:0 0 10px;
  font-weight:500;
}

.pskills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
}

.pskills li{
  font-size:.8rem;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.05);
  border:1px solid var(--panel-border);
  color:var(--text-soft);
}

.pcard__details-title--spaced{
  margin-top:18px;
}

.pworks{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pworks__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--panel-border);
  color:var(--text-soft);
  text-decoration:none;
  font-size:.82rem;
  transition:all .25s ease;
}

.pworks__item:hover{
  background:rgba(255,255,255,0.09);
  color:var(--text-strong);
  transform:translateX(-2px);
}

.pworks__icon{
  display:flex;
  color:var(--accent-teal);
  flex-shrink:0;
}

.pworks__icon svg{
  width:15px;
  height:15px;
}

.pworks__label{
  direction:ltr;
  unicode-bidi:plaintext;
}

@media (max-width:420px){
  .pcard{padding:60px 22px 26px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}