body {
  margin: 0;
  background: #0a0a0f;
  font-family: Arial, sans-serif;
  color: #fff;
  overflow-x: hidden;
}
.container { max-width: 500px; margin: auto; padding: 20px; }
.profile { text-align: center; }
.avatar {
  width: 140px; height: 140px; border-radius: 50%;
  border: 3px solid #0ff; box-shadow: 0 0 20px #0ff; object-fit: cover;
}
.links { display: flex; flex-direction: column; gap: 12px; margin-top: 25px; }
.btn {
  padding: 14px; text-align: center; border-radius: 10px;
  background: #111; border: 2px solid #0ff; box-shadow: 0 0 10px #0ff;
  text-decoration: none; color: #0ff; font-size: 18px;
  transition: 0.25s;
}
.btn:hover { background: #0ff; color: #000; box-shadow: 0 0 25px #0ff; }

.titles { margin-top: 40px; display: flex; justify-content: center; gap: 20px; }
.title-card {
  width: 130px; height: 180px; border-radius: 12px; overflow: hidden;
  border: 2px solid #0ff; box-shadow: 0 0 15px #0ff;
  position: relative; cursor: pointer; transition: 0.3s;
}
.thumb { width: 100%; height: 100%; object-fit: cover; }

.preview {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 20px; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
  display: flex; justify-content: center;
  transition: 0.35s ease-out;
}
.preview.hidden { transform: translateY(110%); opacity: 0; }
.preview-content img {
  width: 65%; max-width: 260px; border-radius: 12px;
  border: 2px solid #0ff; box-shadow: 0 0 20px #0ff;
}