.profile-page {
	--profile-bg: #0d1117;
	--profile-text: #f0f6fc;
	--profile-muted: #8b949e;
	--profile-accent: #58a6ff;
	width: 100%;
	min-height: 100%;
	padding: 52px 28px 15px;
	background: var(--profile-bg);
	color: var(--profile-text);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	font-family: Inter, ui-sans-serif, system-ui, sans-serif;
	border: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.profile-card {
	width: min(100%, 540px);
	text-align: center;
	padding-bottom: 37px;
}

.profile-avatar {
	width: 116px;
	height: 116px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid color-mix(in srgb, var(--profile-accent) 70%, transparent);
	background: #151b23;
	display: inline-block;
}

.profile-name {
	margin: 20px 0 4px;
	font-size: clamp(30px, 6vw, 46px);
	line-height: 1.05;
	letter-spacing: -0.045em;
}

.profile-username {
	margin: 0;
	color: var(--profile-accent);
	font-size: 14px;
	font-weight: 700;
}

.profile-bio {
	margin: 18px auto 0;
	color: var(--profile-muted);
	line-height: 1.7;
	white-space: pre-line;
}

.profile-meta {
	margin: 12px 0 0;
	color: var(--profile-muted);
	font-size: 13px;
}

.profile-links {
	display: grid;
	gap: 10px;
	margin-top: 30px;
}

.profile-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid color-mix(in srgb, var(--profile-accent) 40%, #ffffff 5%);
	border-radius: 10px;
	color: var(--profile-text);
	text-decoration: none;
	background: rgba(255, 255, 255, 0.025);
	transition:
		transform 0.15s,
		border-color 0.15s,
		background 0.15s;
}

.profile-link:hover {
	transform: translateY(-2px);
	border-color: var(--profile-accent);
	background: rgba(255, 255, 255, 0.055);
}

.profile-site {
	display: inline-block;
	margin-top: 24px;
	color: var(--profile-accent);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

/* Terminal */
.theme-terminal {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	border-radius: 3px;
}
.theme-terminal .profile-card {
	text-align: left;
}
.theme-terminal .profile-avatar {
	display: block;
	border-radius: 8px;
	width: 90px;
	height: 90px;
}
.theme-terminal .profile-name {
	font-size: clamp(27px, 5vw, 38px);
}
.theme-terminal .profile-name::before {
	content: "> ";
	color: var(--profile-accent);
}
.theme-terminal .profile-bio {
	margin-left: 0;
}
.theme-terminal .profile-links {
	max-width: 100%;
}
.theme-terminal .profile-link {
	border-radius: 3px;
}

/* Minimal */
.theme-minimal {
	background: var(--profile-bg);
	color: #161616;
	border-color: #deded8;
}
.theme-minimal .profile-card {
	text-align: left;
}
.theme-minimal .profile-avatar {
	width: 88px;
	height: 88px;
	border: 0;
}
.theme-minimal .profile-name {
	font-size: clamp(34px, 6vw, 54px);
}
.theme-minimal .profile-username,
.theme-minimal .profile-site {
	color: var(--profile-accent);
}
.theme-minimal .profile-bio,
.theme-minimal .profile-meta {
	color: #686863;
}
.theme-minimal .profile-link {
	border-color: #d9d9d2;
	color: #161616;
	background: #fff;
	border-radius: 6px;
  align-items: start;
  justify-content: start;
}
.theme-minimal .profile-link:hover {
	border-color: var(--profile-accent);
}

/* Glass */
.theme-glass {
	background:
		radial-gradient(
			circle at 15% 10%,
			color-mix(in srgb, var(--profile-bg) 24%, transparent),
			transparent 32%
		),
		radial-gradient(
			circle at 90% 80%,
			rgba(167, 139, 250, 0.18),
			transparent 30%
		),
		#090b12;
}
.theme-glass .profile-card {
	padding: 42px 28px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.055);
	box-shadow: 0 30px 100px rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(18px);
}
.theme-glass .profile-link {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.12);
	border-radius: 14px;
}

.link-icon {
	width: 18px;
	height: 18px;
	display: inline-grid;
	place-items: center;
	flex: 0 0 18px;
}

.link-icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	stroke: none;
}

.link-icon svg[stroke]:not([stroke="none"]) {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}