[html]<style>
:root{
--layout-width:500px;
--halo-color-1:#9ec5ff;
--halo-color-2:#5b7fff;
--panel-bg:rgba(18,18,22,0.96);
--accent:#7aa8ff;
--glass:rgba(255,255,255,0.07);
--border:rgba(255,255,255,0.15);
--text:#f2f2f7;
--muted:#b8b8c2;
--anim:0.9s cubic-bezier(.19,1,.22,1);
}

/* ЧЁРНАЯ ПАНЕЛЬ */
.ios-panel{
width:var(--layout-width);
margin:100px auto;
background:var(--panel-bg);
border-radius:48px;
padding:55px;
color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,sans-serif;
position:relative;

box-shadow:
0 30px 50px rgba(0,0,0,.35),
0 0 20px 15px rgba(122,168,255,0.18);
}

/* ===== БРАУЗЕР ===== */

.browser{
display:flex;
align-items:center;
gap:14px;
margin-bottom:22px;
padding:12px 18px;
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:22px;
backdrop-filter:blur(20px);
}

.tab{
background:var(--glass);
padding:8px 18px;
border-radius:20px;
border:1px solid var(--border);
font-size:12px;
color:var(--muted);
transition:var(--anim);
}

.tab.active{
background:var(--accent);
color:#000;
border-color:var(--accent);
}

.mac-buttons{
display:flex;
gap:6px;
margin-right:8px;
position:absolute;
top:24px;
}

.mac-buttons span{
width:10px;
height:10px;
border-radius:50%;
}

.mac-buttons span:nth-child(1){background:#ff5f57;}
.mac-buttons span:nth-child(2){background:#ffbd2e;}
.mac-buttons span:nth-child(3){background:#28c840;}

.url{
margin:0 auto 30px auto;
background:var(--glass);
padding:12px 26px;
border-radius:22px;
border:1px solid var(--border);
font-size:13px;
color:var(--muted);
backdrop-filter:blur(10px);
}

/* ===== ВЕРХНИЙ БЛОК ===== */

.top-section{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:25px;
margin-top:40px;
margin-bottom:35px;
}

.left-col{
display:flex;
flex-direction:column;
align-items:center;
gap:15px;
width:140px;
flex-shrink:0;
}

.center-col{
flex:1;
display:flex;
flex-direction:column;
gap:15px;
min-width:0;
}

.top-photos{
display:flex;
flex-direction:column;
gap:14px;
width:70px;
flex-shrink:0;
margin-top:-20px;
}

.photo img{
transition:var(--anim);
}

.photo:hover img{
transform:translateY(-6px) scale(1.05);
filter:grayscale(0%);
}

/* ===== АВАТАР ===== */
.avatar-wrap{
position:relative;
width:140px;
flex-shrink:0;
aspect-ratio:1/1;
}

.avatar-wrap::before{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:radial-gradient(circle at 30% 30%, var(--halo-color-1), var(--halo-color-2));
filter:blur(30px);
opacity:.8;
}

.avatar{
position:absolute;
inset:0;
border-radius:50%;
overflow:hidden;
}

.avatar img{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
transition:var(--anim);
}

.avatar img:hover{
transform:scale(1.05);
}

/* ===== ИНФО БЛОК ===== */
.main-info{
flex:1;
display:flex;
flex-direction:column;
gap:18px;
min-width:0;
}

.name{
font-size:30px;
color:var(--accent);
font-weight:600;
display:flex;
align-items:center;
gap:10px;
}

.lock-icon{
font-size:16px;
opacity:.6;
transition:var(--anim);
}

.lock-icon:hover{
opacity:1;
transform:scale(1.1);
}

.nick
{
font-size:14px;
}

.info{
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
padding:14px 18px;
border-radius:22px;
font-size:11px;
line-height:1.6;
color:var(--muted);
backdrop-filter:blur(10px);
}

.personality{
position:absolute;
bottom:-45px;
left:50%;
transform:translateX(-50%);
background:var(--glass);
border:1px solid var(--border);
padding:8px 16px;
border-radius:20px;
font-size:12px;
white-space:nowrap;
}

.quote-bubble{
margin:35px 0 20px 0;
padding:18px;
border-radius:28px;
background:rgba(255,255,255,0.06);
border:1px solid var(--border);
font-size:11px;
line-height:1.6;
color:var(--text);
backdrop-filter:blur(20px);
transition:var(--anim);
}

.quote-bubble:hover{
background:rgba(255,255,255,0.1);
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(0,0,0,.5);
}

.card{
background:rgba(255,255,255,0.06);
border:1px solid var(--border);
border-radius:28px;
padding:18px;
backdrop-filter:blur(20px);
}

/* ===== ПРАВЫЕ ФОТО ===== */

.photo{
position:relative;
width:85px;
aspect-ratio:3/4;
}

.photo::before{
content:"";
position:absolute;
inset:0;
border-radius:26px;
background:radial-gradient(
circle at 30% 30%,
var(--halo-color-1),
var(--halo-color-2)
);
filter:blur(25px);
opacity:.6;
z-index:0;
}

.photo img{
position:relative;
width:100%;
height:100%;
filter:grayscale(100%);
object-fit:cover;
border-radius:26px;
z-index:1;
}

/* ===== ЭМОДЗИ ===== */

.emoji-bubble{
background:var(--glass);
border:1px solid var(--border);
border-radius:30px;
padding:10px 20px;
display:flex;
gap:15px;
width:fit-content;
align-self:center;   
margin-bottom:40px;
}

.emoji-bubble img{
width:15px;
height:15px;
object-fit:contain;
}

/* ===== ПАРА ===== */

.partner{
position:relative;
height:175px;
}

.partner-name{       
text-align:center;
color:var(--accent);
transition:var(--anim);
}

.partner img{
width:140px;
aspect-ratio:3/4;
object-fit:cover;
border-radius:25px;
filter:grayscale(100%);
border:1px solid var(--border);
transition:var(--anim);
}

.partner img:hover{
transform:translateY(-6px) scale(1.03);
box-shadow:0 15px 40px rgba(0,0,0,.5);
filter:grayscale(0%);
}

.partner:hover .partner-name{
letter-spacing:1px;
}

.partner-wrap{
position:relative;
display:flex;
align-items:flex-start;
gap:30px;
}

.mini-comments{
height:160px;           /* уменьшаем высоту */
width:290px;
position:absolute;
right:0;
top:0;

display:flex;
flex-direction:column;
gap:10px;

padding:20px;
border-radius:28px;

background:rgba(255,255,255,0.06);
border:1px solid var(--border);
backdrop-filter:blur(20px);

transition:var(--anim);
}

.comments-header{
font-size:9px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--muted);
margin-bottom:3px;
}

.comment-line{
background:rgba(255,255,255,0.08);
border:1px solid var(--border);
border-radius:16px;
padding:6px 10px;

font-size:10px;
line-height:1.3;

display:flex;
gap:5px;
flex-wrap:wrap;
}

.comment-author{
color:var(--accent);
font-weight:500;
}

.comment-text{
color:var(--text);
opacity:.85;
}

.mini-comments:hover{
transform:translateY(-6px);
background:rgba(255,255,255,0.1);
}

/* ===== ПЛЕЕР ===== */

.player{
background:rgba(255,255,255,0.06);
border:1px solid var(--border);
border-radius:28px;
backdrop-filter:blur(20px);

display:flex;
flex-direction:column;
gap:15px;

transition:var(--anim);
margin-bottom:35px;

flex:0 0 260px;
padding:16px;   /* оставить только это */
}

.player:hover{
transform:translateY(-6px);
background:rgba(255,255,255,0.1);
}

.track{
display:flex;
align-items:center;
gap:15px;
}

.cover{
width:60px;
height:60px;
border-radius:18px;
overflow:hidden;
flex-shrink:0;
}

.cover img{
width:100%;
height:100%;
object-fit:cover;
}

.track-info{
flex:1;
display:flex;
flex-direction:column;
gap:4px;
}

.track-title{
font-size:14px;
color:var(--text);
font-weight:500;
}

.track-artist{
font-size:12px;
color:var(--accent);
}

.play-btn{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:var(--accent);
color:#000;
cursor:pointer;
transition:var(--anim);
box-shadow:0 0 15px rgba(122,168,255,0.5);
}

.play-btn:hover{
transform:scale(1.1);
}

.media-row{
display:flex;
gap:25px;
align-items:stretch;
margin-bottom:40px;
}

.player{
display:flex;
flex-direction:column;
justify-content:center;
margin-top:35px;
}

.pin-widget{
position:relative;
flex:1;
min-height:160px;
border-radius:28px;
overflow:hidden;
background:rgba(255,255,255,0.06);
border:1px solid var(--border);
transition:var(--anim);
}

.pin-widget img{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:brightness(.9);
transition:var(--anim);
}

.pin-widget:hover{
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0,0,0,.4);
}

.pin-widget:hover img{
transform:scale(1.05);
filter:brightness(1);
}

/* ===== ДРУЗЬЯ ===== */

.friends{
display:flex;
justify-content:center; 
color:var(--accent);
flex-wrap:wrap;         
gap:15px;               
margin:20px 0 35px 0;
}

.friend{
text-align:center;
font-size:11px;
}

.friend img{
width:60px;
height:60px;
border-radius:50%;
object-fit:cover;
filter:grayscale(100%);
border:1px solid var(--border);
transition:var(--anim);

}

.friend img:hover{
transform:translateY(-6px) scale(1.1);
filter:grayscale(0%);
box-shadow:0 10px 25px rgba(0,0,0,.5);
}

.followers-title{
text-align:center;
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--muted);
margin-bottom:18px;
margin-top:45px;
opacity:.7;
}

.friend div{
transition:var(--anim);
opacity:.6;
}

.friend:hover div{
opacity:1;
color:var(--accent);
}

/* ===== ЗВЁЗДЫ ===== */

.stars{
position:absolute;
bottom:-75px;
left:53%;
transform:translateX(-50%);
font-size:18px;
letter-spacing:3px;
white-space:nowrap;
}

.star{
color:rgba(255,255,255,0.3);
}

.star.filled{
color:var(--accent);
}

/* ===== КНОПКИ ===== */

.actions,
.top-actions{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin:20px auto 40px auto;
padding:10px 20px;
width:fit-content;
background:rgba(255,255,255,0.06);
backdrop-filter:blur(25px);
border:1px solid var(--border);
border-radius:40px;
}

.btn{
width:36px;
height:36px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.06);
border:1px solid var(--border);
font-size:15px;
transition:var(--anim);
}

.btn:hover{
background:var(--accent);
color:#000;
transform:scale(1.1);
}

.home-indicator{
width:120px;
height:5px;
border-radius:10px;
background:rgba(255,255,255,0.25);
margin:50px auto 0 auto;
opacity:.5;
margin-top:28px;
}

.metric{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:8px 14px;
min-width:65px;
border-radius:40px;
background:rgba(122,168,255,0.12);
backdrop-filter:blur(25px);
border:1px solid rgba(122,168,255,0.35);
color:var(--accent);
transition:var(--anim);
}

.metric-num{
font-size:14px;
font-weight:600;
line-height:1;
}

.metric-label{
font-size:9px;
letter-spacing:1px;
text-transform:uppercase;
opacity:.6;
}

.metric:hover{
background:rgba(122,168,255,0.2);
border-color:var(--accent);
transform:translateY(-4px);
box-shadow:0 0 25px rgba(122,168,255,.35);
}

</style>

    <div class="ios-panel">

<div class="mac-buttons">
<span></span>
<span></span>
<span></span>
</div>

<div class="browser">
<div class="tab">global</div>
<div class="tab active">profile</div>
<div class="tab">media</div>
</div>

<div class="url">www.academy-social.com/yoojimin</div>

<div class="actions">
  <div class="metric">
    <div class="metric-num">482K</div>
    <div class="metric-label">followers</div>
  </div>

  <div class="metric">
    <div class="metric-num">312</div>
    <div class="metric-label">following</div>
  </div>
<div class="btn">✚</div>
<div class="btn">💬</div>
<div class="btn">✖</div>
<div class="btn">၊၊||၊</div>
<div class="btn">♡</div>
</div>

<div class="top-section">

<div class="avatar-wrap">
<div class="avatar">
<img src="https://i.pinimg.com/1200x/2f/fb/cc/2ffbccad60e42424dac270a41be44bbf.jpg">
</div>
<div class="personality">♐︎ Овен • ENFP</div>
<div class="stars">
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
</div>
</div>

<div class="main-info">
<div class="name"> Yoo Jimin
<span class="lock-icon">🔒</span>
</div>
<div class="nick">@yoojimin</div>
<div class="info">
факультет моды и дизайна
сценическая пластика<br>
11.04.2000, 25<br>
корея, кенгидо<br>
🐍
</div>
<div class="emoji-bubble">
<img src="https://em-content.zobj.net/source/apple/419/dress_1f457.png">
<img src="https://em-content.zobj.net/source/apple/419/fire_1f525.png">
<img src="https://em-content.zobj.net/source/apple/419/ballet-shoes_1fa70.png">
<img src="https://em-content.zobj.net/source/apple/419/black-heart_1f5a4.png">
<img src="https://em-content.zobj.net/source/apple/419/performing-arts_1f3ad.png">
</div>
</div>

<div class="top-photos">
  <div class="photo"><img src="https://i.pinimg.com/736x/10/d3/3f/10d33f1460d6ab96197863a865e6e56d.jpg"></div>
  <div class="photo"><img src="https://i.pinimg.com/736x/63/f2/11/63f211e1f7d1faf935e839a6e76f986f.jpg"></div>
</div>
</div>

<div class="quote-bubble card">
любимое время года весна; мечтаю побывать в хорватии; любимые мультики "рапунцель" и "холодное сердце"; ненавижу пиво, но могу выпить бутылку соджу; люблю, когда дарят розы; стресс снимаю шоппингом и вкусной едой; много пишу в своем личном дневнике
</div>

<div class="media-row">

<div class="player card">
  <div class="track">
    <div class="cover">
      <img src="https://t2.genius.com/unsafe/516x516/https%3A%2F%2Fimages.genius.com%2F19890389965fa29805b8e973a412c3cc.1000x1000x1.png">
    </div>
    <div class="track-info">
      <div class="track-title">devil wears prada</div>
      <div class="track-artist">plvtinum</div>
    </div>
    <div class="play-btn">▶</div>
  </div>
</div>
<div class="pin-widget">
    <img src="https://i.pinimg.com/736x/de/56/a0/de56a09bd7d7247cb5027aa6c0e0b1ce.jpg">
    <div class="pin-overlay">inspiration</div>
  </div>
  </div>

<div class="partner-wrap">
<div class="partner">
<img src="https://i.pinimg.com/1200x/06/46/2c/06462c65ad647a3a4548456e2d827f0f.jpg">
<div class="partner-name">♥︎ jay park</div>
</div>

<div class="mini-comments">

  <div class="comments-header">latest comments</div>

  <div class="comment-line">
    <span class="comment-author">@winter:</span>
ты сегодня такая уверенная… люблю 🖤
  </div>

  <div class="comment-line">
    <span class="comment-author">@shinryujin:</span>
   ты уже не студентка, а бренд
  </div>

  <div class="comment-line">
    <span class="comment-author">@hwangyeji:</span>
я же говорила — ты создана для сцены
  </div>

  <div class="comment-line">
    <span class="comment-author">@parksunghoon:</span>
      опасно красива
  </div>

</div>
</div>

<div class="followers-title">followers:</div>
<div class="friends">
<div class="friend"><img src="https://i.pinimg.com/736x/cc/99/0c/cc990cde82d5e134544420ebaa209029.jpg"><div>ryujin</div></div>
<div class="friend"><img src="https://i.pinimg.com/736x/a6/b3/fe/a6b3fe8c181d721c9947375e3e152037.jpg"><div>yeji</div></div>
<div class="friend"><img src="https://i.pinimg.com/736x/48/f0/9d/48f09dc0a76ca4425225e3a3c47f129b.jpg"><div>winter</div></div>
<div class="friend"><img src="https://i.pinimg.com/736x/f9/c1/9c/f9c19c648faee84481702c9e9c7ed1fd.jpg"><div>yujin</div></div>
<div class="friend"><img src="https://i.pinimg.com/736x/34/79/bb/3479bb26ac8b796bba951a6b30be2dad.jpg"><div>sunghoon</div></div>
<div class="friend"><img src="https://i.pinimg.com/736x/5f/b4/2d/5fb42d38b4289432da2e2b7c7f0b6212.jpg"><div>heeseung</div></div>
</div>

<div class="home-indicator"></div>

</div>[/html]