v3: added user profile description

src/App.css

@@ -917,6 +917,8 @@ body.has-player .fab-new {
   font-weight: 600;
   font-size: 1rem;
   line-height: 1.35;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .rich-content-description {
@@ -1200,6 +1202,66 @@ body.has-player .fab-new {
   margin-top: 0.5rem;
 }
 
+/* ── Profile description ── */
+.profile-description {
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+.profile-description-view {
+  position: relative;
+  padding: 0.5rem 0.6rem;
+  border-radius: 6px;
+  font-size: 0.95rem;
+}
+
+.profile-description-view--editable {
+  cursor: pointer;
+}
+
+.profile-description-view--editable:hover {
+  background: var(--color-surface);
+}
+
+.profile-description-text {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  line-height: 1.6;
+}
+
+.profile-description-empty {
+  color: var(--color-muted);
+  font-style: italic;
+}
+
+.profile-description-edit-btn {
+  position: absolute;
+  top: 0.55rem;
+  right: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--color-muted);
+  opacity: 0;
+  transition: opacity 0.1s;
+  pointer-events: none;
+}
+
+.profile-description-view--editable:hover .profile-description-edit-btn {
+  opacity: 1;
+}
+
+.profile-description-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.profile-description-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .profile-invited-by {
   font-size: 0.78rem;
   color: var(--color-text-muted);
@@ -2356,6 +2418,8 @@ body.has-player .fab-new {
   margin: 0 0 0.5rem;
   opacity: 0.75;
   line-height: 1.75;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .playlist-detail-meta {
@@ -2689,6 +2753,8 @@ body.has-player .fab-new {
   font-size: 0.9rem;
   line-height: 1.65;
   color: var(--color-text);
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .comment-actions {