feat(profile): organize profile sections and use native currency icons

src/app/(site)/u/[username]/profile.module.css

@@ -0,0 +1,176 @@
+.profile {
+	min-width: 0;
+}
+.hero {
+	overflow: hidden;
+	border-top: 4px solid var(--color-primary);
+	background: linear-gradient(
+		120deg,
+		color-mix(in srgb, var(--color-primary) 9%, var(--color-surface)),
+		var(--color-surface)
+	);
+}
+.avatar {
+	object-fit: contain;
+	image-rendering: pixelated;
+	border-radius: 20px;
+	background: color-mix(
+		in srgb,
+		var(--color-primary) 12%,
+		var(--color-surface)
+	);
+	flex-shrink: 0;
+}
+.identity {
+	min-width: 0;
+	flex: 1;
+	overflow-wrap: anywhere;
+}
+.meta {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 12px;
+	font-size: 0.85rem;
+	color: var(--color-text-muted);
+}
+.columns {
+	display: grid;
+	grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
+	gap: 24px;
+	align-items: start;
+}
+.sidebar,
+.content {
+	display: grid;
+	gap: 24px;
+	min-width: 0;
+}
+.wallet {
+	display: grid;
+	gap: 12px;
+}
+.currency {
+	display: flex;
+	align-items: center;
+	gap: 14px;
+	padding: 12px 14px;
+	border: 1px solid var(--color-border);
+	border-radius: 12px;
+}
+.currency > div {
+	min-width: 0;
+	display: grid;
+	gap: 2px;
+}
+.currency strong {
+	font-size: 1.25rem;
+	overflow-wrap: anywhere;
+	font-variant-numeric: tabular-nums;
+}
+.currency span {
+	font-size: 0.8rem;
+}
+.profile [class~="empty-state"] {
+	padding: 18px 12px;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	gap: 12px;
+	text-align: left;
+}
+.profile [class~="empty-state-icon"] {
+	margin: 0;
+	font-size: 1.5rem;
+}
+.rooms {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
+	gap: 16px;
+}
+.room {
+	display: block;
+	border: 1px solid var(--color-border);
+	border-radius: 12px;
+	overflow: hidden;
+	text-decoration: none;
+	color: inherit;
+}
+.room:hover,
+.room:focus-visible {
+	border-color: var(--color-primary);
+}
+.roomImage {
+	width: 100%;
+	height: 140px;
+	object-fit: contain;
+	background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
+}
+.roomBody {
+	padding: 14px;
+	display: grid;
+	gap: 8px;
+	overflow-wrap: anywhere;
+}
+.roomBody > [class~="muted"],
+.roomMeta {
+	font-size: 0.8rem;
+}
+.roomMeta {
+	display: flex;
+	justify-content: space-between;
+	gap: 8px;
+}
+.roomLink {
+	font-size: 0.85rem;
+	font-weight: 600;
+	color: var(--color-primary-readable, var(--color-primary));
+}
+.badges {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	align-items: start;
+}
+.badge {
+	border: 1px solid var(--color-border);
+	border-radius: 8px;
+}
+.badge summary {
+	padding: 6px;
+	cursor: pointer;
+	list-style: none;
+}
+.badge summary::-webkit-details-marker {
+	display: none;
+}
+.badge img {
+	display: block;
+	object-fit: contain;
+	image-rendering: pixelated;
+}
+.badge[open] {
+	width: 100%;
+}
+.badgeInfo {
+	padding: 0 12px 12px;
+	font-size: 0.85rem;
+	overflow-wrap: anywhere;
+}
+.badgeInfo p {
+	margin: 6px 0;
+}
+@media (max-width: 760px) {
+	.columns {
+		grid-template-columns: minmax(0, 1fr);
+		gap: 16px;
+	}
+	.sidebar,
+	.content {
+		gap: 16px;
+	}
+	.avatar {
+		width: 80px;
+		height: 120px;
+	}
+}