v3: added multiple stylesheets, improved user profiles

src/App.css

@@ -1272,6 +1272,12 @@ body.has-player .fab-new {
   gap: 1.5rem;
 }
 
+.profile-tabs {
+  margin-top: 0.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid var(--color-border);
+}
+
 .profile-columns {
   display: grid;
   grid-template-columns: 1fr;
@@ -1651,7 +1657,7 @@ body.has-player .fab-new {
   align-items: flex-start;
   gap: 0.6rem;
   background: var(--color-danger-bg);
-  color: var(--color-on-accent);
+  color: var(--color-text);
   padding: 0.7rem 1rem;
   border-radius: 8px;
   font-size: 0.9rem;
@@ -1694,7 +1700,7 @@ body.has-player .fab-new {
   border: none;
   border-radius: 10px;
   background: var(--color-danger-bg);
-  color: var(--color-on-accent);
+  color: var(--color-text);
   line-height: 1.5;
   overflow-wrap: anywhere;
   word-break: break-word;
@@ -1747,6 +1753,7 @@ body.has-player .fab-new {
 
 /* ── Shared header ── */
 .app-header {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -1834,6 +1841,22 @@ body.has-player .fab-new {
   display: none;
 }
 
+.app-header-center:has(.search-bar--expanded) .header-center-slot {
+  flex: 1;
+  justify-content: center;
+}
+
+/* Expanded: pin center absolutely so it aligns with the feed's visual center */
+@media (min-width: 860px) {
+  .app-header-center:has(.search-bar--expanded) {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 420px;
+    pointer-events: auto;
+  }
+}
+
 /* As the center column shrinks (viewport narrow, search collapsed),
    shed content in order: presence first, then tabs (still in .index-below-header) */
 @container (max-width: 460px) {
@@ -1868,6 +1891,16 @@ body.has-player .fab-new {
   flex-wrap: nowrap;
 }
 
+/* Normalize all buttons in the header nav to the same height */
+.app-header-nav button {
+  padding: 0.35rem 0.85rem;
+  font-size: 0.95rem;
+}
+
+.app-header-nav .btn-primary {
+  padding: 0.35rem 1rem;
+}
+
 /* Text links — visible only at wide viewports */
 .nav-links {
   display: none;
@@ -2882,7 +2915,7 @@ body.has-player .fab-new {
 .playlist-dump-list {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 1rem;
 }
 
 .playlist-dump-item {
@@ -3277,6 +3310,111 @@ body.has-player .fab-new {
   padding: 0.2rem 0;
 }
 
+/* ── Followed user list ── */
+.followed-user-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.followed-user-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.4rem 0.5rem;
+  border-radius: 6px;
+}
+
+.followed-user-card-link {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  text-decoration: none;
+  color: var(--color-text);
+  min-width: 0;
+  flex: 1;
+}
+
+.followed-user-card-link:hover .followed-user-card-name {
+  color: var(--color-accent);
+}
+
+.followed-user-card-name {
+  font-size: 0.9rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Invite tree ── */
+.invite-tree {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.invite-tree-node {
+  position: relative;
+  padding: 0.2rem 0;
+}
+
+.invite-tree-node:last-child {
+  padding-bottom: 0;
+}
+
+/* Child list: indented, left edge aligns with parent avatar center */
+.invite-tree-node > .invite-tree {
+  position: relative;
+  margin-left: 11px; /* center 2px line on 24px avatar: 12px - 1px */
+  padding-left: calc(12px + 0.5rem);
+}
+
+/* Vertical connector: starts below parent avatar, stops at last child avatar center */
+.invite-tree-node > .invite-tree::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 12px;
+  width: 2px;
+  background: var(--color-border-subtle);
+}
+
+/* Horizontal connector: from vertical line to each child's avatar left edge */
+.invite-tree-node > .invite-tree > .invite-tree-node::before {
+  content: "";
+  position: absolute;
+  left: calc(-12px - 0.5rem);
+  top: calc(0.2rem + 11px); /* centered on 24px avatar */
+  width: calc(12px + 0.5rem);
+  height: 2px;
+  background: var(--color-border-subtle);
+}
+
+.invite-tree-user {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--color-text);
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.invite-tree-user:hover {
+  color: var(--color-accent);
+}
+
+.invite-tree-empty {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+}
+
 /* ── Follow button ── */
 .follow-btn {
   padding: 0.25rem 0.9rem;
@@ -3977,7 +4115,7 @@ body.has-player .fab-new {
   align-items: center;
   gap: 0.4rem;
   width: 100%;
-  max-width: 380px;
+  max-width: 420px;
 }
 
 .search-bar--collapsible {
@@ -3987,7 +4125,7 @@ body.has-player .fab-new {
 
 .search-bar--collapsible.search-bar--expanded {
   width: 100%;
-  max-width: 320px;
+  max-width: 420px;
 }
 
 .search-bar-input {
@@ -4021,7 +4159,7 @@ body.has-player .fab-new {
 
 /* Expanded state: animate it open */
 .search-bar--collapsible.search-bar--expanded .search-bar-input {
-  max-width: 280px;
+  max-width: 380px;
   opacity: 1;
   padding-left: 0.7rem;
   padding-right: 0.7rem;
@@ -4115,3 +4253,21 @@ body.has-player .fab-new {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+/* ── Profile appearance settings ── */
+.profile-appearance-grid {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  gap: 0.75rem 1rem;
+  align-items: center;
+}
+
+.profile-appearance-row {
+  display: contents;
+}
+
+.profile-appearance-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  opacity: 0.7;
+}