:root {
    --bg: #0f0f17;
    --text: #fff;
    --muted: #9ca3af;
    --panel: #1a1a27;
    --border: #2a2a39;
    --accent: #ff4b7d;
}

body { background: var(--bg); }

.profile-wrapper {
    max-width: 1150px;
    margin: 30px auto 40px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 30px;
    color: var(--text);
    font-family: system-ui, sans-serif;
}

.left { display:flex; flex-direction:column; gap:15px; }

.main-photo {
    width:100%;
    aspect-ratio:4/5;
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--border);
    background:#2a2a2a;
}
.main-photo img { width:100%; height:100%; object-fit:cover; }

.thumbs {
    display:flex; gap:10px; overflow-x:auto; padding:5px 0;
}
.thumbs div {
    width:80px; height:80px; flex:0 0 auto;
    border-radius:12px; overflow:hidden;
    border:1px solid var(--border);
    background:#1f1f1f;
    cursor:pointer;
}
.thumbs img { width:100%; height:100%; object-fit:cover; }

.right h1 {
    margin:0; font-size:36px; font-weight:700;
}
.location {
    color:var(--muted); margin-top:4px; font-size:15px;
}
.online-box {
    margin-top:6px; display:flex; align-items:center; gap:6px;
    font-size:14px;
}

.section {
    margin-top:25px; padding:18px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
}
.section h2 {
    margin:0 0 12px; font-size:22px;
}

.pairs { display:flex; flex-direction:column; gap:10px; }
.pairs-row {
    display:flex; justify-content:space-between;
    padding:10px 14px;
    border-radius:10px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--border);
}

.tags { display:flex; flex-wrap:wrap; gap:10px; }
.tag {
    padding:7px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    background:rgba(255,255,255,0.05);
}

.grid {
    display:grid; gap:16px;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}

.user-card {
    background:var(--panel);
    border-radius:14px;
    border:1px solid var(--border);
    overflow:hidden;
    text-decoration:none;
    color:var(--text);
}
.user-card img {
    width:100%; aspect-ratio:4/5; object-fit:cover;
}

#galleryModal {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.9);
    z-index:9999;
    justify-content:center;
    align-items:center;
}
#galleryModal img {
    max-width:90%; max-height:90%;
    border-radius:12px;
}
.close-btn {
    position:absolute; top:20px; right:30px;
    font-size:32px; cursor:pointer; color:#fff;
}

@media(max-width:900px){
    .profile-wrapper { grid-template-columns:1fr; }
}